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
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { DragEvent, KeyboardEvent, MouseEvent } from "react";
|
||||
import type { DragEvent, KeyboardEvent, MouseEvent, ReactNode } from "react";
|
||||
import {
|
||||
api,
|
||||
ApiError,
|
||||
@@ -62,6 +62,8 @@ interface Props {
|
||||
onHistory: (path: string) => void;
|
||||
/** Affiche les liens de partage d'un schéma. */
|
||||
onShare: (path: string) => void;
|
||||
/** Contenu ajouté au bout de la barre de recherche (bouton d'épinglage du panneau). */
|
||||
toolbarEnd?: ReactNode;
|
||||
}
|
||||
|
||||
type View = "list" | "grid";
|
||||
@@ -88,7 +90,7 @@ const initialView = (): View => {
|
||||
const canMoveInto = (path: string, targetDir: string) =>
|
||||
dirname(path) !== targetDir && targetDir !== path && !targetDir.startsWith(path + "/");
|
||||
|
||||
export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHistory, onShare }: Props) {
|
||||
export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHistory, onShare, toolbarEnd }: Props) {
|
||||
const [dir, setDir] = useState(() => (current ? dirname(current) : ""));
|
||||
const [entries, setEntries] = useState<Entry[]>([]);
|
||||
const [query, setQuery] = useState("");
|
||||
@@ -642,6 +644,7 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
<button className="icon-btn" onClick={refresh} title="Rafraîchir" aria-label="Rafraîchir">
|
||||
<RefreshIcon />
|
||||
</button>
|
||||
{toolbarEnd}
|
||||
</div>
|
||||
|
||||
<div className="filters" role="group" aria-label="Filtres">
|
||||
|
||||
Reference in new issue
Block a user