feat: menus mobiles façon Notion — barre horizontale au « / » + Insert block plein écran (v7.63.0)
- Barre flottante défilante sous le curseur (mobile ≤ 768 px) au lieu de la popup desktop, 15 boutons dans l'ordre de la description : +▾, Turn into▾, @, 💬, 🖼, 🗑, ←, →, ↑, ↓, ↩, ↪, Color▾, More▾, ⌨ - +▾ → feuille plein écran « Insert block » (titre centré, Cancel bleu, groupes Basic blocks / AI writing / Media / Data / Synced / Actions, raccourcis markdown à droite) ; items partagés avec la popup desktop (SM._slashItemHtml) - Turn into ▾ / Color ▾ → feuilles réutilisant les générateurs extraits _blockTurnItems / _blockColorItems (extraits de _blockTurnMenuOpen / _blockColorMenuOpen, comportement desktop inchangé) - More ▾ → menu contextuel de bloc existant ; @ insère + ouvre les mentions ; 💬 commentaire ; 🖼 bloc image ; 🗑 suppression ; ⌨ masque le clavier ; ↩ ↪ annuler/rétablir - moveBlock(bid, dir) : ↑↓ réordonne (racine + enfants toggle/columns), → indent dans le frère précédent, ← outdent, garde-fous avec toast - Fermeture auto de la barre quand le « / » n'est plus en tête de bloc ; taps dans la barre/les feuilles exclus du handler « clic hors-zone » ; Cancel ne referme que la feuille (la barre reste tant que le / est tapé) - Raccourcis slash alignés sur les préfixes markdown (-, [], >, ---), groupe SYNCED libellé « Synced » - Tests : tests/test_v763_mobile_menus.py (ordre, câblage, structure, styles + moveBlock exécuté sous node), e2e/v763_mobile_menus.spec.js (390×844, 1 passed) ; test_v761 adapté aux extractions ; suite complète 1375 passed / 0 failed, ruff OK, OpenAPI 7.63.0 (525 chemins)
This commit is contained in:
@@ -3056,6 +3056,104 @@ button.breadcrumb-current { max-width: 260px; }
|
||||
color: #6b6b6b;
|
||||
}
|
||||
|
||||
/* ══ v7.63 — Menus mobiles façon Notion : barre horizontale au « / » ══
|
||||
(défilement latéral) + feuille plein écran Insert block / Turn into / Color ══ */
|
||||
.fd-mtb {
|
||||
position: fixed;
|
||||
z-index: 1300;
|
||||
display: none;
|
||||
gap: 2px;
|
||||
padding: 5px 6px;
|
||||
max-width: calc(100vw - 16px);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: var(--bg-modal);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,.45);
|
||||
}
|
||||
.fd-mtb::-webkit-scrollbar { display: none; }
|
||||
.fd-mtb .fd-mtb-item {
|
||||
flex: 0 0 auto;
|
||||
min-width: 38px;
|
||||
height: 38px;
|
||||
padding: 0 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
color: var(--text-primary);
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fd-mtb .fd-mtb-item:active { background: var(--bg-hover); }
|
||||
.fd-mtb .fd-mtb-wide { font-size: 13px; font-weight: 600; padding: 0 10px; }
|
||||
.fd-mtb .fd-mtb-caret { font-size: 10px; color: var(--text-dim); }
|
||||
|
||||
/* Feuille plein écran (titre centré + Cancel bleu à droite, liste qui défile) */
|
||||
.fd-msheet {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-secondary, #191919);
|
||||
}
|
||||
.fd-msheet-head {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.fd-msheet-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
|
||||
.fd-msheet-cancel {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--accent, #2383E2);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* la liste porte la classe block-menu (hérite des styles .bm-item/.bm-group)
|
||||
mais doit couvrir tout l'écran, sans la chrome du menu flottant */
|
||||
.fd-msheet-list.block-menu {
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 6px 8px 40px;
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.fd-msheet .bm-item { padding: 12px 10px; font-size: 15px; }
|
||||
.fd-msheet .bm-group { padding: 14px 10px 4px; }
|
||||
.fd-msheet .sm-group {
|
||||
padding: 14px 10px 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .4px;
|
||||
}
|
||||
.fd-msheet .slash-item { padding: 12px 10px; font-size: 15px; }
|
||||
.fd-msheet .slash-item:active { background: var(--bg-hover); }
|
||||
|
||||
/* EDITOR STATUSBAR */
|
||||
.editor-statusbar {
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user