From 16e765c23134476ecc643c1527da239c79b57942 Mon Sep 17 00:00:00 2001 From: IliesAllali Date: Tue, 27 Oct 2026 15:35:09 +0100 Subject: [PATCH 1/2] =?UTF-8?q?T=C3=A9l=C3=A9phone,=20mode=20=C3=A9dition?= =?UTF-8?q?=20:=20onglets=20en=20haut,=20=C2=AB=20Termin=C3=A9=20=C2=BB=20?= =?UTF-8?q?en=20toutes=20lettres,=20une=20seule=20sortie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Les onglets de familles restaient abaissés sous un message qui avait lui-même été descendu (68 px) : la bulle « Vous proposez » couvrait « Famille X / Famille Y ». Ils restent sur la première ligne, à côté de la loupe. Recherche ouverte en mode édition : ils passent sous la bulle. - La croix à côté du « + » devient « Terminé », le mot qu'emploie déjà la barre pour sortir du dessin. Plus de rotation au survol ; pression à 0,97. - Quand « Terminé » est là, la bulle du haut n'a plus sa propre croix : une seule sortie. Patch, 27/10 : planche _bmad-output/parenthese/motion/2026-10-27-barre-edition/ Co-Authored-By: Claude Opus 5.5 --- frontend/src/components/EditModeOverlay.css | 4 ++++ frontend/src/components/Galaxy.css | 5 ++++- .../components/navbar/ContextualNavbar.css | 21 ++++++++++--------- .../components/navbar/ContextualNavbar.jsx | 7 ++++--- 4 files changed, 23 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/EditModeOverlay.css b/frontend/src/components/EditModeOverlay.css index 3df00d2..16f77ff 100644 --- a/frontend/src/components/EditModeOverlay.css +++ b/frontend/src/components/EditModeOverlay.css @@ -58,6 +58,10 @@ .edit-mode-toast--contrib .edit-mode-toast-short { display: inline; } } +/* « Terminé » dans la barre du bas fait déjà sortir de l'édition : pas de seconde croix dans la bulle (Patch, 27/10) */ +body:has(.nav-annot-exit) .edit-mode-toast-close { display: none; } +body:has(.nav-annot-exit) .edit-mode-toast:not(.edit-mode-toast--with-submit) { padding-right: 16px; } + /* Téléphone : le texte de l'éditeur se coupait en « Vous modifi… » à côté du bouton, qui suffit à lui seul. L'invité garde son texte court, qui tient sur une ligne. */ @media (max-width: 480px) { diff --git a/frontend/src/components/Galaxy.css b/frontend/src/components/Galaxy.css index ba1f5f9..1f5606d 100644 --- a/frontend/src/components/Galaxy.css +++ b/frontend/src/components/Galaxy.css @@ -110,7 +110,10 @@ @media (max-width: 768px) { .family-tabs { top: 10px; left: 10px; max-width: calc(100vw - 84px); } - .family-tabs--lowered { top: 64px; max-width: calc(100vw - 20px); } + /* Le message « Vous proposez » est sous la première ligne sur téléphone (EditModeOverlay.css, top: 68px) : + la barre reste en haut, à côté de la loupe, au lieu de passer dessous (Patch, 27/10) */ + .family-tabs--lowered { top: 10px; max-width: calc(100vw - 84px); } + body:has(.edit-mode-toast):has(.expandable-search.expanded) .family-tabs { top: 124px; } /* Recherche ouverte sur téléphone : elle prend toute la largeur du haut, la barre passe dessous */ body:has(.expandable-search.expanded) .family-tabs { top: 80px; max-width: calc(100vw - 20px); } .family-tab { font-size: 14px; padding: 6px 12px 7px; } diff --git a/frontend/src/components/navbar/ContextualNavbar.css b/frontend/src/components/navbar/ContextualNavbar.css index 82cc466..bbb02ee 100644 --- a/frontend/src/components/navbar/ContextualNavbar.css +++ b/frontend/src/components/navbar/ContextualNavbar.css @@ -181,28 +181,29 @@ /* --- Exit edit mode button --- */ .nav-annot-exit { - width: 36px; - height: 36px; + height: 40px; + padding: 0 16px; display: flex; align-items: center; justify-content: center; border: none; - border-radius: 50%; + border-radius: 999px; background: rgba(42, 38, 34, 0.08); - color: #6B645D; + color: #2A2622; + font: 500 14.5px/1 var(--pz-sans); + white-space: nowrap; cursor: pointer; - transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); + transition: background-color 160ms ease, transform 140ms var(--pz-ease); flex-shrink: 0; + -webkit-tap-highlight-color: transparent; } -.nav-annot-exit:hover { - background: rgba(42, 38, 34, 0.16); - color: #2A2622; - transform: rotate(90deg); +@media (hover: hover) and (pointer: fine) { + .nav-annot-exit:hover { background: rgba(42, 38, 34, 0.14); } } .nav-annot-exit:active { - transform: rotate(90deg) scale(0.88); + transform: scale(0.97); } /* --- Separator --- */ diff --git a/frontend/src/components/navbar/ContextualNavbar.jsx b/frontend/src/components/navbar/ContextualNavbar.jsx index 2ac2a6f..a824f39 100644 --- a/frontend/src/components/navbar/ContextualNavbar.jsx +++ b/frontend/src/components/navbar/ContextualNavbar.jsx @@ -1,6 +1,6 @@ import { useState, useRef, useEffect } from 'react' import { - Brush, ImagePlus, Plus, UserPlus, User, X, MousePointer2, Pencil, Type, Star, Trash2, Image, ArrowLeft, Search, + Brush, ImagePlus, Plus, UserPlus, User, MousePointer2, Pencil, Type, Star, Trash2, Image, ArrowLeft, Search, } from 'lucide-react' import { NavMenu, NavMenuGroup, NavMenuItem } from './NavMenu' import AvatarMenu from './AvatarMenu' @@ -292,13 +292,14 @@ function ContextualNavbar({
{showMobileAnnot && !annotMode ? ( <> + {/* Sortie de l'édition en toutes lettres : une croix seule à côté du « + » ne disait pas ce qu'elle faisait (Patch, 27/10) */}