Allow toolbox tools to collapse into their headers
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
This commit is contained in:
parent
1df7b32dbb
commit
b5901b31e3
8 changed files with 228 additions and 166 deletions
186
website/src/features/toolboxes/modules/ModuleShell.jsx
Normal file
186
website/src/features/toolboxes/modules/ModuleShell.jsx
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
// Rôle : rend l'en-tête, les contrôles et le contenu repliable d'un outil toolbox.
|
||||
import { Suspense, useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
|
||||
import { GuideChecklistControls, GuideChecklistToggle } from "../../games/GuideChecklistControls.jsx";
|
||||
import { useGuideChecklistPanel } from "../../games/useGuideChecklist.js";
|
||||
import { ModuleDataGate, ModuleLoadingFallback } from "./ModuleDataGate.jsx";
|
||||
import { supportsTextExchange } from "./textImport.js";
|
||||
import { MODULE_COMPONENTS } from "./toolboxModuleComponents.jsx";
|
||||
|
||||
export function ModuleShell({ toolbox, module, context, reorder, itemGroup = "", onRename, onUpdateModule, onDelete }) {
|
||||
const definition = MODULE_COMPONENTS[module.type] || MODULE_COMPONENTS.notepad;
|
||||
const Component = definition.Component;
|
||||
const label = definition.label || module.type;
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [textExchangeOpen, setTextExchangeOpen] = useState(false);
|
||||
const guidePanel = useGuideChecklistPanel(context.guideChecklist, module);
|
||||
const hasAddPanel = definition.editable && definition.addable !== false;
|
||||
const hasTextExchange = supportsTextExchange(module.type);
|
||||
const scrollable = definition.scrollable && module.scrollable === true;
|
||||
const collapsed = module.collapsed === true;
|
||||
const className = [
|
||||
"module",
|
||||
reorder.isItemDragging(module.id) ? "is-dragging" : "",
|
||||
reorder.isItemDropTarget(module.id) ? "is-drop-target" : "",
|
||||
reorder.getDropPlacement("item", module.id) === "after" ? "drop-after" : "",
|
||||
scrollable ? "is-scrollable" : "",
|
||||
collapsed ? "is-collapsed" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
const componentProps = {
|
||||
toolboxId: toolbox.id,
|
||||
moduleId: module.id,
|
||||
context,
|
||||
editing,
|
||||
setEditing,
|
||||
openEditor: () => {
|
||||
setTextExchangeOpen(false);
|
||||
setEditing(true);
|
||||
},
|
||||
textExchangeOpen
|
||||
};
|
||||
|
||||
function toggleCollapsed() {
|
||||
if (!collapsed) {
|
||||
setEditing(false);
|
||||
setTextExchangeOpen(false);
|
||||
}
|
||||
onUpdateModule(module.id, (currentModule) => {
|
||||
const nextModule = { ...currentModule };
|
||||
if (collapsed) {
|
||||
delete nextModule.collapsed;
|
||||
} else {
|
||||
nextModule.collapsed = true;
|
||||
}
|
||||
return nextModule;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<article
|
||||
className={className}
|
||||
data-module-type={module.type}
|
||||
{...reorder.getItemProps({ itemId: module.id, groupId: itemGroup, parentId: toolbox.id })}
|
||||
>
|
||||
<header>
|
||||
<div>
|
||||
<button
|
||||
className="module-drag-handle nds-icon-button"
|
||||
data-size="md"
|
||||
data-variant="secondary"
|
||||
type="button"
|
||||
onPointerDown={(event) => reorder.itemReorder.startDrag(event, module.id)}
|
||||
aria-label={`Déplacer ${module.title || label}`}
|
||||
title="Déplacer"
|
||||
>
|
||||
<Icon name="drag" />
|
||||
</button>
|
||||
<span className="module-icon" aria-hidden="true">
|
||||
<span className={`module-icon-svg module-icon-${definition.icon || "notepad"}`} />
|
||||
</span>
|
||||
<EditableModuleTitle value={module.title || label} fallback={label} tutorialTarget={module.type === "memos" ? "moduleTitle" : ""} onSave={(title) => onRename(module.id, title)} />
|
||||
</div>
|
||||
<div>
|
||||
{definition.scrollable && (
|
||||
<button
|
||||
className={`module-scroll-button nds-switch ${scrollable ? "active" : ""}`}
|
||||
data-size="lg"
|
||||
onClick={() => onUpdateModule(module.id, (currentModule) => {
|
||||
const nextModule = { ...currentModule };
|
||||
if (scrollable) {
|
||||
delete nextModule.scrollable;
|
||||
} else {
|
||||
nextModule.scrollable = true;
|
||||
}
|
||||
return nextModule;
|
||||
})}
|
||||
aria-label={`${scrollable ? "Désactiver" : "Activer"} le scroll de ${module.title || label}`}
|
||||
aria-pressed={scrollable}
|
||||
title={scrollable ? "Désactiver le scroll" : "Activer le scroll"}
|
||||
>
|
||||
<Icon name="scrollable" />
|
||||
<i aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
{hasAddPanel && (
|
||||
<button
|
||||
className={`module-edit-button nds-icon-button ${editing ? "active" : ""}`}
|
||||
data-size="md"
|
||||
onClick={() => setEditing((value) => {
|
||||
const nextEditing = !value;
|
||||
if (nextEditing) setTextExchangeOpen(false);
|
||||
return nextEditing;
|
||||
})}
|
||||
aria-label={`${editing ? "Masquer" : "Afficher"} l'ajout de ${module.title || label}`}
|
||||
aria-pressed={editing}
|
||||
title={editing ? "Masquer l'ajout" : "Ajouter"}
|
||||
>
|
||||
<Icon name="add" />
|
||||
</button>
|
||||
)}
|
||||
<GuideChecklistToggle checklist={context.guideChecklist} panel={guidePanel} label={module.title || label} />
|
||||
{hasTextExchange && (
|
||||
<button
|
||||
className={`module-exchange-button nds-icon-button ${textExchangeOpen ? "active" : ""}`}
|
||||
data-size="md"
|
||||
onClick={() => setTextExchangeOpen((value) => {
|
||||
const nextOpen = !value;
|
||||
if (nextOpen) setEditing(false);
|
||||
return nextOpen;
|
||||
})}
|
||||
aria-label={`${textExchangeOpen ? "Masquer" : "Afficher"} l'import/export de ${module.title || label}`}
|
||||
aria-pressed={textExchangeOpen}
|
||||
title={textExchangeOpen ? "Masquer import/export" : "Import / export"}
|
||||
>
|
||||
<Icon name="import" />
|
||||
</button>
|
||||
)}
|
||||
<button className="module-delete-button nds-icon-button" data-size="md" data-variant="danger" onClick={() => onDelete(module.id)} aria-label={`Retirer ${module.title || label}`} data-toolbox-tutorial-target={module.type === "links" ? "deleteTool" : undefined} title="Retirer">
|
||||
<span className="ui-icon ui-icon-trash" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
className="module-collapse-button nds-icon-button"
|
||||
data-size="md"
|
||||
type="button"
|
||||
onClick={toggleCollapsed}
|
||||
aria-expanded={!collapsed}
|
||||
aria-label={`${collapsed ? "Afficher" : "Masquer"} ${module.title || label}`}
|
||||
title={collapsed ? "Afficher l’outil" : "Masquer l’outil"}
|
||||
>
|
||||
<Icon name={collapsed ? "chevron-down" : "chevron-up"} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
{!collapsed && (
|
||||
<div className={`module-content ${scrollable ? "is-scrollable legacy-scrollbar" : ""}`}>
|
||||
<GuideChecklistControls checklist={context.guideChecklist} {...guidePanel} />
|
||||
<Suspense fallback={<ModuleLoadingFallback label={label} />}>
|
||||
<ModuleDataGate key={`${toolbox.id}:${module.id}`} context={context} toolboxId={toolbox.id} moduleId={module.id}>
|
||||
<Component {...componentProps} />
|
||||
</ModuleDataGate>
|
||||
</Suspense>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function EditableModuleTitle({ value, fallback, onSave, tutorialTarget = "" }) {
|
||||
const inlineEdit = useInlineEdit({
|
||||
value,
|
||||
onCommit: (title) => onSave(title || fallback),
|
||||
blurOnEscape: true
|
||||
});
|
||||
|
||||
return (
|
||||
<h2
|
||||
{...inlineEdit.getContentEditableProps({
|
||||
className: "module-title",
|
||||
"data-toolbox-tutorial-target": tutorialTarget || undefined,
|
||||
title: "Cliquer pour renommer"
|
||||
})}
|
||||
>
|
||||
{value}
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,13 +1,7 @@
|
|||
// Rôle : rend les modules d'une toolbox, leur shell commun et leur réorganisation.
|
||||
import { Suspense, useMemo, useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { GuideChecklistControls, GuideChecklistToggle } from "../../games/GuideChecklistControls.jsx";
|
||||
import { useGuideChecklistPanel } from "../../games/useGuideChecklist.js";
|
||||
// Rôle : répartit et réorganise les modules d'une toolbox dans leurs colonnes.
|
||||
import { useMemo } from "react";
|
||||
import { useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
|
||||
import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
|
||||
import { supportsTextExchange } from "./textImport.js";
|
||||
import { MODULE_COMPONENTS } from "./toolboxModuleComponents.jsx";
|
||||
import { ModuleDataGate, ModuleLoadingFallback } from "./ModuleDataGate.jsx";
|
||||
import { ModuleShell } from "./ModuleShell.jsx";
|
||||
|
||||
const MODULE_COLUMN_IDS = ["left", "right"];
|
||||
|
||||
|
|
@ -148,149 +142,3 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onUp
|
|||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ModuleShell({ toolbox, module, context, reorder, itemGroup = "", onRename, onUpdateModule, onDelete }) {
|
||||
const definition = MODULE_COMPONENTS[module.type] || MODULE_COMPONENTS.notepad;
|
||||
const Component = definition.Component;
|
||||
const label = definition.label || module.type;
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [textExchangeOpen, setTextExchangeOpen] = useState(false);
|
||||
const guidePanel = useGuideChecklistPanel(context.guideChecklist, module);
|
||||
const hasAddPanel = definition.editable && definition.addable !== false;
|
||||
const hasTextExchange = supportsTextExchange(module.type);
|
||||
const scrollable = definition.scrollable && module.scrollable === true;
|
||||
const className = [
|
||||
"module",
|
||||
reorder.isItemDragging(module.id) ? "is-dragging" : "",
|
||||
reorder.isItemDropTarget(module.id) ? "is-drop-target" : "",
|
||||
reorder.getDropPlacement("item", module.id) === "after" ? "drop-after" : "",
|
||||
scrollable ? "is-scrollable" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
const componentProps = {
|
||||
toolboxId: toolbox.id,
|
||||
moduleId: module.id,
|
||||
context,
|
||||
editing,
|
||||
setEditing,
|
||||
openEditor: () => {
|
||||
setTextExchangeOpen(false);
|
||||
setEditing(true);
|
||||
},
|
||||
textExchangeOpen
|
||||
};
|
||||
|
||||
return (
|
||||
<article
|
||||
className={className}
|
||||
data-module-type={module.type}
|
||||
{...reorder.getItemProps({ itemId: module.id, groupId: itemGroup, parentId: toolbox.id })}
|
||||
>
|
||||
<header>
|
||||
<div>
|
||||
<button
|
||||
className="module-drag-handle nds-icon-button"
|
||||
data-size="md"
|
||||
data-variant="secondary"
|
||||
type="button"
|
||||
onPointerDown={(event) => reorder.itemReorder.startDrag(event, module.id)}
|
||||
aria-label={`Déplacer ${module.title || label}`}
|
||||
title="Déplacer"
|
||||
>
|
||||
<Icon name="drag" />
|
||||
</button>
|
||||
<span className="module-icon" aria-hidden="true">
|
||||
<span className={`module-icon-svg module-icon-${definition.icon || "notepad"}`} />
|
||||
</span>
|
||||
<EditableModuleTitle value={module.title || label} fallback={label} tutorialTarget={module.type === "memos" ? "moduleTitle" : ""} onSave={(title) => onRename(module.id, title)} />
|
||||
</div>
|
||||
<div>
|
||||
{definition.scrollable && (
|
||||
<button
|
||||
className={`module-scroll-button nds-switch ${scrollable ? "active" : ""}`}
|
||||
data-size="lg"
|
||||
onClick={() => onUpdateModule(module.id, (currentModule) => {
|
||||
const nextModule = { ...currentModule };
|
||||
if (scrollable) {
|
||||
delete nextModule.scrollable;
|
||||
} else {
|
||||
nextModule.scrollable = true;
|
||||
}
|
||||
return nextModule;
|
||||
})}
|
||||
aria-label={`${scrollable ? "Désactiver" : "Activer"} le scroll de ${module.title || label}`}
|
||||
aria-pressed={scrollable}
|
||||
title={scrollable ? "Désactiver le scroll" : "Activer le scroll"}
|
||||
>
|
||||
<Icon name="scrollable" />
|
||||
<i aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
{hasAddPanel && (
|
||||
<button
|
||||
className={`module-edit-button nds-icon-button ${editing ? "active" : ""}`}
|
||||
data-size="md"
|
||||
onClick={() => setEditing((value) => {
|
||||
const nextEditing = !value;
|
||||
if (nextEditing) setTextExchangeOpen(false);
|
||||
return nextEditing;
|
||||
})}
|
||||
aria-label={`${editing ? "Masquer" : "Afficher"} l'ajout de ${module.title || label}`}
|
||||
aria-pressed={editing}
|
||||
title={editing ? "Masquer l'ajout" : "Ajouter"}
|
||||
>
|
||||
<Icon name="add" />
|
||||
</button>
|
||||
)}
|
||||
<GuideChecklistToggle checklist={context.guideChecklist} panel={guidePanel} label={module.title || label} />
|
||||
{hasTextExchange && (
|
||||
<button
|
||||
className={`module-exchange-button nds-icon-button ${textExchangeOpen ? "active" : ""}`}
|
||||
data-size="md"
|
||||
onClick={() => setTextExchangeOpen((value) => {
|
||||
const nextOpen = !value;
|
||||
if (nextOpen) setEditing(false);
|
||||
return nextOpen;
|
||||
})}
|
||||
aria-label={`${textExchangeOpen ? "Masquer" : "Afficher"} l'import/export de ${module.title || label}`}
|
||||
aria-pressed={textExchangeOpen}
|
||||
title={textExchangeOpen ? "Masquer import/export" : "Import / export"}
|
||||
>
|
||||
<Icon name="import" />
|
||||
</button>
|
||||
)}
|
||||
<button className="module-delete-button nds-icon-button" data-size="md" data-variant="danger" onClick={() => onDelete(module.id)} aria-label={`Retirer ${module.title || label}`} data-toolbox-tutorial-target={module.type === "links" ? "deleteTool" : undefined} title="Retirer">
|
||||
<span className="ui-icon ui-icon-trash" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div className={`module-content ${scrollable ? "is-scrollable legacy-scrollbar" : ""}`}>
|
||||
<GuideChecklistControls checklist={context.guideChecklist} {...guidePanel} />
|
||||
<Suspense fallback={<ModuleLoadingFallback label={label} />}>
|
||||
<ModuleDataGate key={`${toolbox.id}:${module.id}`} context={context} toolboxId={toolbox.id} moduleId={module.id}>
|
||||
<Component {...componentProps} />
|
||||
</ModuleDataGate>
|
||||
</Suspense>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function EditableModuleTitle({ value, fallback, onSave, tutorialTarget = "" }) {
|
||||
const inlineEdit = useInlineEdit({
|
||||
value,
|
||||
onCommit: (title) => onSave(title || fallback),
|
||||
blurOnEscape: true
|
||||
});
|
||||
|
||||
return (
|
||||
<h2
|
||||
{...inlineEdit.getContentEditableProps({
|
||||
className: "module-title",
|
||||
"data-toolbox-tutorial-target": tutorialTarget || undefined,
|
||||
title: "Cliquer pour renommer"
|
||||
})}
|
||||
>
|
||||
{value}
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ function normalizeToolboxModule(module) {
|
|||
const normalized = { id: module.id || uid("mod"), type: module.type };
|
||||
if (title && title !== getDefaultModuleTitle(module.type)) normalized.title = title;
|
||||
if (module.scrollable === true) normalized.scrollable = true;
|
||||
if (module.collapsed === true) normalized.collapsed = true;
|
||||
return normalized;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.module.is-collapsed header {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.module-loading-fallback {
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--color-border);
|
||||
|
|
@ -84,12 +88,14 @@
|
|||
|
||||
.module-edit-button,
|
||||
.module-exchange-button,
|
||||
.module-delete-button {
|
||||
.module-delete-button,
|
||||
.module-collapse-button {
|
||||
flex: 0 0 40px;
|
||||
}
|
||||
|
||||
.module-edit-button,
|
||||
.module-exchange-button {
|
||||
.module-exchange-button,
|
||||
.module-collapse-button {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue