feat(presentation): integrate buttons into collection properties

This commit is contained in:
Elian Doran 2026-01-31 13:01:51 +02:00
parent fddd73fdb1
commit b6a91723e7
No known key found for this signature in database
2 changed files with 28 additions and 44 deletions

View File

@ -1,13 +1,3 @@
.presentation-button-bar {
position: absolute;
top: 1em;
right: 1em;
.floating-buttons-children {
top: 0;
}
}
.presentation-container {
width: 100%;
height: 100%;

View File

@ -55,12 +55,14 @@ export default function PresentationView({ note, noteIds, media, onReady, onProg
if (media === "screen") {
return (
<>
<CollectionProperties note={note} />
<CollectionProperties
note={note}
rightChildren={<ButtonOverlay containerRef={containerRef} api={api} />}
/>
<ShadowDom
className="presentation-container"
containerRef={containerRef}
>{content}</ShadowDom>
<ButtonOverlay containerRef={containerRef} api={api} />
</>
);
} else if (media === "print") {
@ -112,41 +114,33 @@ function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivE
}, [ api ]);
return (
<div className="presentation-button-bar">
<div className="floating-buttons-children">
<ActionButton
className="floating-button"
icon="bx bx-edit"
text={t("presentation_view.edit-slide")}
noIconActionClass
onClick={e => {
const currentSlide = api?.getCurrentSlide();
const noteId = getNoteIdFromSlide(currentSlide);
<>
<ActionButton
icon="bx bx-edit"
text={t("presentation_view.edit-slide")}
onClick={e => {
const currentSlide = api?.getCurrentSlide();
const noteId = getNoteIdFromSlide(currentSlide);
if (noteId) {
openInCurrentNoteContext(e, noteId);
}
}}
/>
if (noteId) {
openInCurrentNoteContext(e, noteId);
}
}}
/>
<ActionButton
className="floating-button"
icon="bx bx-grid-horizontal"
text={t("presentation_view.slide-overview")}
active={isOverviewActive}
noIconActionClass
onClick={() => api?.toggleOverview()}
/>
<ActionButton
icon="bx bx-grid-horizontal"
text={t("presentation_view.slide-overview")}
active={isOverviewActive}
onClick={() => api?.toggleOverview()}
/>
<ActionButton
className="floating-button"
icon="bx bx-fullscreen"
text={t("presentation_view.start-presentation")}
noIconActionClass
onClick={() => containerRef.current?.requestFullscreen()}
/>
</div>
</div>
<ActionButton
icon="bx bx-fullscreen"
text={t("presentation_view.start-presentation")}
onClick={() => containerRef.current?.requestFullscreen()}
/>
</>
);
}