Explorateur épinglable : panneau fixe ou flottant au-dessus du schéma
- Bouton punaise (barre de recherche de l'explorateur) : épinglé = colonne fixe redimensionnable (comportement actuel) ; désépinglé = panneau masqué qui s'ouvre par-dessus le canevas. - Désépinglé : ouverture par le bouton ☰ ou en survolant le bord gauche ; fermeture à l'ouverture d'un schéma, au clic hors du panneau, par Échap, ou en quittant le panneau s'il a été ouvert par survol. Il revient seul quand le schéma est fermé ou qu'aucun n'est ouvert. - À la bascule, le défilement du canevas est compensé : le schéma ne bouge pas à l'écran (zoom conservé, pas de recadrage). - Choix mémorisé par navigateur (localStorage drawerPinned). Sur mobile, l'explorateur reste un tiroir et le bouton est masqué. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XR9aSZwC3Ssajfy1R7SLPo
This commit is contained in:
1 parent
ffb5ff1311
commit
a5fddba9a0
4 files changed
+66
-4
No files matched your search
+57
-2
@@ -245,6 +245,10 @@ button.danger:hover:not(:disabled) {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
}
|
||||
.app.instant,
|
||||
.app.instant .drawer {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Poignée de redimensionnement, à cheval sur la bordure de l'explorateur. */
|
||||
.splitter {
|
||||
@@ -258,7 +262,7 @@ button.danger:hover:not(:disabled) {
|
||||
cursor: col-resize;
|
||||
touch-action: none;
|
||||
}
|
||||
.drawer-open .splitter {
|
||||
.pinned.drawer-open .splitter {
|
||||
display: block;
|
||||
}
|
||||
.splitter::after {
|
||||
@@ -546,6 +550,56 @@ li.active > .row {
|
||||
height: var(--ex-btn);
|
||||
}
|
||||
|
||||
/* --- Explorateur non épinglé (bureau) : panneau flottant sur le canevas ------ */
|
||||
|
||||
.peek-edge {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 769px) {
|
||||
.app.unpinned,
|
||||
.app.unpinned.drawer-open {
|
||||
grid-template-columns: 0 1fr;
|
||||
}
|
||||
.unpinned .drawer {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: var(--topbar-h);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: var(--drawer-w);
|
||||
transform: translateX(-100%);
|
||||
visibility: hidden;
|
||||
transition:
|
||||
transform 0.15s ease,
|
||||
visibility 0.15s;
|
||||
box-shadow: var(--ex-shadow-island);
|
||||
}
|
||||
.unpinned.drawer-open .drawer {
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
}
|
||||
/* Clic hors du panneau : le referme sans agir sur le schéma. */
|
||||
.unpinned.drawer-open .backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
inset: var(--topbar-h) 0 0 0;
|
||||
}
|
||||
/* Bord gauche sensible au survol pour faire apparaître le panneau. */
|
||||
.unpinned .peek-edge {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 16;
|
||||
top: var(--topbar-h);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 6px;
|
||||
}
|
||||
.unpinned .peek-edge:hover {
|
||||
background: linear-gradient(to right, var(--accent-soft), transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Mobile : l'explorateur devient un tiroir superposé -------------------- */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -585,7 +639,8 @@ li.active > .row {
|
||||
display: none;
|
||||
}
|
||||
.splitter,
|
||||
.drawer-open .splitter {
|
||||
.pinned.drawer-open .splitter,
|
||||
.pin-btn {
|
||||
display: none;
|
||||
}
|
||||
.row .name {
|
||||
|
||||
Reference in new issue
Block a user