Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 07:15:51 +01:00
Code Issues Packages Projects Releases Activity

feat(react/floating_buttons): port PNG/SVG export buttons

Browse Source
This commit is contained in:
Elian Doran
2025-08-28 00:02:02 +03:00
parent 0ca30e0e87
commit e72fb39c4d
3 changed files with 24 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/client/src/widgets/FloatingButtons.tsx
View File

@@ -94,6 +94,12 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
isEnabled: ({ note, noteContext }) => isEnabled: ({ note, noteContext }) =>
["mermaid", "canvas", "mindMap"].includes(note?.type ?? "") ["mermaid", "canvas", "mindMap"].includes(note?.type ?? "")
&& note?.isContentAvailable() && noteContext.viewScope?.viewMode === "default" && note?.isContentAvailable() && noteContext.viewScope?.viewMode === "default"
},
{
component: ExportImageButtons,
isEnabled: ({ note, noteContext }) =>
["mermaid", "mindMap"].includes(note?.type ?? "")
&& note?.isContentAvailable() && noteContext?.viewScope?.viewMode === "default"
} }
]; ];
@@ -352,6 +358,24 @@ function CopyImageReferenceButton({ note }: FloatingButtonContext) {
) )
} }
function ExportImageButtons({ triggerEvent }: FloatingButtonContext) {
return (
<>
<FloatingButton
icon="bx bxs-file-image"
text={t("svg_export_button.button_title")}
onClick={() => triggerEvent("exportSvg")}
/>
<FloatingButton
icon="bx bxs-file-png"
text={t("png_export_button.button_title")}
onClick={() => triggerEvent("exportPng")}
/>
</>
)
}
function FloatingButton({ className, ...props }: ActionButtonProps) { function FloatingButton({ className, ...props }: ActionButtonProps) {
return <ActionButton return <ActionButton
className={`floating-button ${className ?? ""}`} className={`floating-button ${className ?? ""}`}

24
apps/client/src/widgets/floating_buttons/png_export_button.ts
View File

@@ -1,24 +0,0 @@
import { t } from "../../services/i18n.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = /*html*/`
<button type="button"
class="export-svg-button"
title="${t("png_export_button.button_title")}">
<span class="bx bxs-file-png"></span>
</button>
`;
export default class PngExportButton extends NoteContextAwareWidget {
isEnabled() {
return super.isEnabled() && ["mermaid", "mindMap"].includes(this.note?.type ?? "") && this.note?.isContentAvailable() && this.noteContext?.viewScope?.viewMode === "default";
}
doRender() {
super.doRender();
this.$widget = $(TPL);
this.$widget.on("click", () => this.triggerEvent("exportPng", { ntxId: this.ntxId }));
this.contentSized();
}
}

24
apps/client/src/widgets/floating_buttons/svg_export_button.ts
View File

@@ -1,24 +0,0 @@
import { t } from "../../services/i18n.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = /*html*/`
<button type="button"
class="export-svg-button"
title="${t("svg_export_button.button_title")}">
<span class="bx bxs-file-image"></span>
</button>
`;
export default class SvgExportButton extends NoteContextAwareWidget {
isEnabled() {
return super.isEnabled() && ["mermaid", "mindMap"].includes(this.note?.type ?? "") && this.note?.isContentAvailable() && this.noteContext?.viewScope?.viewMode === "default";
}
doRender() {
super.doRender();
this.$widget = $(TPL);
this.$widget.on("click", () => this.triggerEvent("exportSvg", { ntxId: this.ntxId }));
this.contentSized();
}
}