From 2aab008766fa042b62f98f5f34e236742b3df227 Mon Sep 17 00:00:00 2001 From: IliesAllali Date: Tue, 27 Oct 2026 14:26:08 +0100 Subject: [PATCH] =?UTF-8?q?Visages=20sur=20la=20photo=20:=20rien=20par=20d?= =?UTF-8?q?=C3=A9faut,=20ronds=20fins=20=C3=A0=20la=20demande?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Les ronds des personnes identifiées ne restent plus posés sur les visages. Ils apparaissent au survol de la photo (ordinateur), quand on touche la photo (téléphone, un second toucher les cache), ou pour une seule personne quand on survole ou focalise son prénom sous la photo. Toujours visibles pendant l'identification. - Rond plus large (34 px) et plus fin (1,5 px) : il entoure le visage au lieu de le couvrir. - Sur téléphone, les prénoms ne s'affichent plus en permanence par-dessus la photo. Planche validée par Patch le 27/10 (option A) : _bmad-output/parenthese/motion/2026-10-27-visages/ Co-Authored-By: Claude Opus 5.5 --- frontend/src/components/MediaPeople.css | 23 +++++++++++++++-------- frontend/src/components/MediaPeople.jsx | 20 +++++++++++++++----- frontend/src/components/MediaViewer.jsx | 12 ++++++++++-- 3 files changed, 40 insertions(+), 15 deletions(-) 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 79bbbf5..654a202 100644 --- a/frontend/src/components/MediaViewer.jsx +++ b/frontend/src/components/MediaViewer.jsx @@ -42,6 +42,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('') @@ -309,12 +313,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} />
@@ -646,7 +654,7 @@ const MediaViewer = ({
) : (
- + {canTag && onSavePeople && (