diff --git a/frontend/src/components/MediaPeople.css b/frontend/src/components/MediaPeople.css index 04010cf..e5740e4 100644 --- a/frontend/src/components/MediaPeople.css +++ b/frontend/src/components/MediaPeople.css @@ -3,19 +3,27 @@ .mp-avatar { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; } .mp-avatar--initial { display: grid; place-items: center; background: var(--pz-a100); color: var(--pz-a700); font: 400 12px/1 var(--pz-serif); } -/* Point sur un visage : rond blanc cerclé, le prénom apparaît au survol ou au focus (toujours en identification) */ +/* Rond sur un visage : fil fin, assez large pour entourer le visage sans le couvrir. Caché par défaut, la photo d'abord + (Patch, 27/10) : visible au survol de la photo, quand on la touche (.show-names), quand son prénom est survolé + dessous (.is-hot), et toujours en identification. Apparition d'un coup, sans fondu. */ .mp-marker { position: absolute; - width: 26px; - height: 26px; - margin: -13px 0 0 -13px; + width: 34px; + height: 34px; + margin: -17px 0 0 -17px; padding: 0; - border: 2px solid #fff; + border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 50%; background: transparent; - box-shadow: 0 0 0 1px rgba(42, 38, 34, .3), 0 2px 8px rgba(42, 38, 34, .25); + box-shadow: 0 0 0 1px rgba(42, 38, 34, .18); cursor: pointer; + visibility: hidden; } +@media (hover: hover) and (pointer: fine) { .mv-photo-box:hover .mp-marker { visibility: visible; } } +.mv-photo-box.is-tagging .mp-marker, +.mv-photo-box.show-names .mp-marker, +.mp-marker.is-hot { visibility: visible; } +.mp-marker.is-hot { border-color: #fff; box-shadow: 0 0 0 1px rgba(42, 38, 34, .25), 0 0 0 4px rgba(255, 255, 255, .25); } .mp-marker.is-active { border-color: var(--pz-a500); box-shadow: 0 0 0 3px rgba(210, 105, 74, .35), 0 2px 8px rgba(42, 38, 34, .25); } .mp-marker:focus-visible { outline: 2px solid var(--pz-a700); outline-offset: 3px; } .mp-marker-name { @@ -33,10 +41,9 @@ visibility: hidden; } .mp-marker:hover .mp-marker-name, -.mp-marker:focus-visible .mp-marker-name, +.mp-marker.is-hot .mp-marker-name, .mv-photo-box.is-tagging .mp-marker-name, .mv-photo-box.show-names .mp-marker-name { visibility: visible; } -@media (hover: none) { .mp-marker-name { visibility: visible; } } /* Photo cliquable pendant le placement d'un point */ .mv-photo-box.is-placing img { cursor: crosshair; } diff --git a/frontend/src/components/MediaPeople.jsx b/frontend/src/components/MediaPeople.jsx index 6d8c197..8af404a 100644 --- a/frontend/src/components/MediaPeople.jsx +++ b/frontend/src/components/MediaPeople.jsx @@ -14,9 +14,9 @@ function PersonAvatar({ person }) { : } -// Points posés sur la photo : un rond par visage, le prénom au survol ou au focus. En identification, le point de -// la personne choisie est mis en avant. -export function MediaPeopleMarkers({ people, getPerson, activeId = null, onOpenPerson }) { +// Ronds posés sur les visages, cachés tant qu'on ne les demande pas (survol de la photo, photo touchée, prénom survolé +// dessous : `hotId`). En identification, ils restent visibles et le rond de la personne choisie est mis en avant. +export function MediaPeopleMarkers({ people, getPerson, activeId = null, hotId = null, onOpenPerson }) { return people.filter((tag) => tag.x != null && tag.y != null).map((tag) => { const person = getPerson(tag.personId) if (!person) return null @@ -25,7 +25,7 @@ export function MediaPeopleMarkers({ people, getPerson, activeId = null, onOpenP diff --git a/frontend/src/components/MediaViewer.jsx b/frontend/src/components/MediaViewer.jsx index 66982dd..de44afc 100644 --- a/frontend/src/components/MediaViewer.jsx +++ b/frontend/src/components/MediaViewer.jsx @@ -43,6 +43,10 @@ const MediaViewer = ({ const [tagging, setTagging] = useState(false) const [draftPeople, setDraftPeople] = useState([]) const [activeTagId, setActiveTagId] = useState(null) + // Visages identifiés : rien sur la photo par défaut (Patch, 27/10). Toucher la photo montre ou cache les prénoms, + // survoler un prénom sous la photo entoure son visage. + const [showNames, setShowNames] = useState(false) + const [hotPersonId, setHotPersonId] = useState(null) const [savingPeople, setSavingPeople] = useState(false) const [peopleError, setPeopleError] = useState('') const [peopleNotice, setPeopleNotice] = useState('') @@ -310,12 +314,16 @@ const MediaViewer = ({ // La boîte épouse l'image : les points (x, y en proportion) tombent pile sur les visages return (
-
+
(tagging ? placeActiveTag(event) : setShowNames((shown) => !shown))} + > {media?.label setActiveTagId(id) : onOpenPerson} />
@@ -666,7 +674,7 @@ const MediaViewer = ({
) : (
- + {canTag && onSavePeople && (