Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 18:36:30 +01:00
Code Issues Packages Projects Releases Activity

feat(collection/presentation): add a button to toggle slide overview

Browse Source
This commit is contained in:
Elian Doran
2025-10-15 23:37:08 +03:00
parent f9c0b94ecb
commit 319e753e7e
3 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/translations/en/translation.json
View File

@@ -2031,7 +2031,8 @@
}, },
"presentation_view": { "presentation_view": {
"edit-slide": "Edit this slide", "edit-slide": "Edit this slide",
"start-presentation": "Start presentation" "start-presentation": "Start presentation",
"slide-overview": "Toggle an overview of the slides"
}, },
"command_palette": { "command_palette": {
"tree-action-name": "Tree: {{name}}", "tree-action-name": "Tree: {{name}}",

26
apps/client/src/widgets/collections/presentation/index.tsx
View File

@@ -52,6 +52,23 @@ export default function PresentationView({ note, noteIds }: ViewModeProps<{}>) {
} }
function ButtonOverlay({ containerRef, apiRef }: { containerRef: RefObject<HTMLDivElement>, apiRef: RefObject<Reveal.Api> }) { function ButtonOverlay({ containerRef, apiRef }: { containerRef: RefObject<HTMLDivElement>, apiRef: RefObject<Reveal.Api> }) {
const [ isOverviewActive, setIsOverviewActive ] = useState(false);
useEffect(() => {
const api = apiRef.current;
if (!api) return;
setIsOverviewActive(api.isOverview());
const onEnabled = () => setIsOverviewActive(true);
const onDisabled = () => setIsOverviewActive(false);
api.on("overviewshown", onEnabled);
api.on("overviewhidden", onDisabled);
return () => {
api.off("overviewshown", onEnabled);
api.off("overviewhidden", onDisabled);
};
}, [ apiRef ]);
console.log("Active ", isOverviewActive);
return ( return (
<div className="presentation-button-bar"> <div className="presentation-button-bar">
<ActionButton <ActionButton
@@ -67,6 +84,15 @@ function ButtonOverlay({ containerRef, apiRef }: { containerRef: RefObject<HTMLD
}} }}
/> />
<ActionButton
icon="bx bx-grid-horizontal"
text={t("presentation_view.slide-overview")}
active={isOverviewActive}
onClick={() => {
apiRef.current?.toggleOverview();
}}
/>
<ActionButton <ActionButton
icon="bx bx-fullscreen" icon="bx bx-fullscreen"
text={t("presentation_view.start-presentation")} text={t("presentation_view.start-presentation")}

9
apps/client/src/widgets/react/ActionButton.tsx
View File

@@ -5,16 +5,18 @@ import keyboard_actions from "../../services/keyboard_actions";
export interface ActionButtonProps { export interface ActionButtonProps {
text: string; text: string;
titlePosition?: "bottom" | "left"; titlePosition?: "top" | "right" | "bottom" | "left";
icon: string; icon: string;
className?: string; className?: string;
onClick?: (e: MouseEvent) => void; onClick?: (e: MouseEvent) => void;
triggerCommand?: CommandNames; triggerCommand?: CommandNames;
noIconActionClass?: boolean; noIconActionClass?: boolean;
frame?: boolean; frame?: boolean;
active?: boolean;
disabled?: boolean;
} }
export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame }: ActionButtonProps) { export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame, active, disabled }: ActionButtonProps) {
const buttonRef = useRef<HTMLButtonElement>(null); const buttonRef = useRef<HTMLButtonElement>(null);
const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>(); const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
@@ -32,8 +34,9 @@ export default function ActionButton({ text, icon, className, onClick, triggerCo
return <button return <button
ref={buttonRef} ref={buttonRef}
class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""}`} class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""} ${disabled ? "disabled" : ""} ${active ? "active" : ""}`}
onClick={onClick} onClick={onClick}
data-trigger-command={triggerCommand} data-trigger-command={triggerCommand}
disabled={disabled}
/>; />;
} }