mirror of
https://github.com/zadam/trilium.git
synced 2025-10-21 07:38:53 +02:00
refactor(react/floating_buttons): split into two buttons
This commit is contained in:
Elian Doran
parent
e72fb39c4d
commit
cabe240e7e
@ -1,107 +1,12 @@
|
||||
import { t } from "i18next";
|
||||
import "./FloatingButtons.css";
|
||||
import Button from "./react/Button";
|
||||
import ActionButton, { ActionButtonProps } from "./react/ActionButton";
|
||||
import FNote from "../entities/fnote";
|
||||
import NoteContext from "../components/note_context";
|
||||
import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumEvents, useTriliumOption, useTriliumOptionBool } from "./react/hooks";
|
||||
import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
|
||||
import { ParentComponent } from "./react/react_utils";
|
||||
import Component from "../components/component";
|
||||
import { VNode } from "preact";
|
||||
import attributes from "../services/attributes";
|
||||
import appContext, { EventData, EventNames } from "../components/app_context";
|
||||
import protected_session_holder from "../services/protected_session_holder";
|
||||
import options from "../services/options";
|
||||
import { createImageSrcUrl, openInAppHelpFromUrl } from "../services/utils";
|
||||
import toast from "../services/toast";
|
||||
import server from "../services/server";
|
||||
import { SaveSqlConsoleResponse } from "@triliumnext/commons";
|
||||
import tree from "../services/tree";
|
||||
import { copyImageReferenceToClipboard } from "../services/image";
|
||||
|
||||
interface FloatingButtonContext {
|
||||
parentComponent: Component;
|
||||
note: FNote;
|
||||
noteContext: NoteContext;
|
||||
/** Shorthand for triggering an event from the parent component. The `ntxId` is automatically handled for convenience. */
|
||||
triggerEvent<T extends EventNames>(name: T, data?: Omit<EventData<T>, "ntxId">): void;
|
||||
}
|
||||
|
||||
interface FloatingButtonDefinition {
|
||||
component: (context: FloatingButtonContext) => VNode;
|
||||
isEnabled: (context: FloatingButtonContext) => boolean | Promise<boolean>;
|
||||
}
|
||||
|
||||
const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
|
||||
{
|
||||
component: RefreshBackendLogButton,
|
||||
isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default",
|
||||
},
|
||||
{
|
||||
component: SwitchSplitOrientationButton,
|
||||
isEnabled: ({ note, noteContext }) => note.type === "mermaid" && note.isContentAvailable() && !note.hasLabel("readOnly") && noteContext.viewScope?.viewMode === "default"
|
||||
},
|
||||
{
|
||||
component: ToggleReadOnlyButton,
|
||||
isEnabled: ({ note, noteContext }) =>
|
||||
(note.type === "mermaid" || note.getLabelValue("viewType") === "geoMap")
|
||||
&& note.isContentAvailable()
|
||||
&& noteContext.viewScope?.viewMode === "default"
|
||||
},
|
||||
{
|
||||
component: EditButton,
|
||||
isEnabled: async ({ note, noteContext }) =>
|
||||
noteContext.viewScope?.viewMode === "default"
|
||||
&& (!note.isProtected || protected_session_holder.isProtectedSessionAvailable())
|
||||
&& !options.is("databaseReadonly")
|
||||
&& await noteContext?.isReadOnly()
|
||||
},
|
||||
{
|
||||
component: ShowTocWidgetButton,
|
||||
isEnabled: ({ note, noteContext }) =>
|
||||
note.type === "text" && noteContext?.viewScope?.viewMode === "default"
|
||||
&& !!noteContext.viewScope?.tocTemporarilyHidden
|
||||
},
|
||||
{
|
||||
component: ShowHighlightsListWidgetButton,
|
||||
isEnabled: ({ note, noteContext }) =>
|
||||
note.type === "text" && noteContext?.viewScope?.viewMode === "default"
|
||||
&& !!noteContext.viewScope?.highlightsListTemporarilyHidden
|
||||
},
|
||||
{
|
||||
component: RunActiveNoteButton,
|
||||
isEnabled: ({ note }) => note.mime.startsWith("application/javascript") || note.mime === "text/x-sqlite;schema=trilium"
|
||||
},
|
||||
{
|
||||
component: OpenTriliumApiDocsButton,
|
||||
isEnabled: ({ note }) => note.mime.startsWith("application/javascript;env=")
|
||||
},
|
||||
{
|
||||
component: SaveToNoteButton,
|
||||
isEnabled: ({ note }) => note.mime === "text/x-sqlite;schema=trilium" && note.isHiddenCompletely()
|
||||
},
|
||||
{
|
||||
component: RelationMapButtons,
|
||||
isEnabled: ({ note }) => note.type === "relationMap"
|
||||
},
|
||||
{
|
||||
component: GeoMapButtons,
|
||||
isEnabled: ({ note }) => note?.getLabelValue("viewType") === "geoMap" && !note.hasLabel("readOnly")
|
||||
},
|
||||
{
|
||||
component: CopyImageReferenceButton,
|
||||
isEnabled: ({ note, noteContext }) =>
|
||||
["mermaid", "canvas", "mindMap"].includes(note?.type ?? "")
|
||||
&& note?.isContentAvailable() && noteContext.viewScope?.viewMode === "default"
|
||||
},
|
||||
{
|
||||
component: ExportImageButtons,
|
||||
isEnabled: ({ note, noteContext }) =>
|
||||
["mermaid", "mindMap"].includes(note?.type ?? "")
|
||||
&& note?.isContentAvailable() && noteContext?.viewScope?.viewMode === "default"
|
||||
}
|
||||
];
|
||||
import { EventData, EventNames } from "../components/app_context";
|
||||
import { FLOATING_BUTTON_DEFINITIONS, FloatingButtonContext, FloatingButtonDefinition } from "./FloatingButtonsDefinitions";
|
||||
|
||||
async function getFloatingButtonDefinitions(context: FloatingButtonContext) {
|
||||
const defs: FloatingButtonDefinition[] = [];
|
||||
@ -178,212 +83,6 @@ export default function FloatingButtons() {
|
||||
)
|
||||
}
|
||||
|
||||
function RefreshBackendLogButton({ parentComponent, noteContext }: FloatingButtonContext) {
|
||||
return <FloatingButton
|
||||
text={t("backend_log.refresh")}
|
||||
icon="bx bx-refresh"
|
||||
onClick={() => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId })}
|
||||
/>
|
||||
}
|
||||
|
||||
function SwitchSplitOrientationButton({ }: FloatingButtonContext) {
|
||||
const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
|
||||
const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";
|
||||
|
||||
return <FloatingButton
|
||||
text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")}
|
||||
icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}
|
||||
onClick={() => setSplitEditorOrientation(upcomingOrientation)}
|
||||
/>
|
||||
}
|
||||
|
||||
function ToggleReadOnlyButton({ note }: FloatingButtonContext) {
|
||||
const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
|
||||
|
||||
return <FloatingButton
|
||||
text={isReadOnly ? t("toggle_read_only_button.unlock-editing") : t("toggle_read_only_button.lock-editing")}
|
||||
icon={isReadOnly ? "bx bx-lock-open-alt" : "bx bx-lock-alt"}
|
||||
onClick={() => setReadOnly(!isReadOnly)}
|
||||
/>
|
||||
}
|
||||
|
||||
function EditButton({ noteContext }: FloatingButtonContext) {
|
||||
const [ animationClass, setAnimationClass ] = useState("");
|
||||
|
||||
// make the edit button stand out on the first display, otherwise
|
||||
// it's difficult to notice that the note is readonly
|
||||
useEffect(() => {
|
||||
setAnimationClass("bx-tada bx-lg");
|
||||
setTimeout(() => {
|
||||
setAnimationClass("");
|
||||
}, 1700);
|
||||
}, []);
|
||||
|
||||
return <FloatingButton
|
||||
text={t("edit_button.edit_this_note")}
|
||||
icon="bx bx-pencil"
|
||||
className={animationClass}
|
||||
onClick={() => {
|
||||
if (noteContext.viewScope) {
|
||||
noteContext.viewScope.readOnlyTemporarilyDisabled = true;
|
||||
appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
function ShowTocWidgetButton({ noteContext }: FloatingButtonContext) {
|
||||
return <FloatingButton
|
||||
text={t("show_toc_widget_button.show_toc")}
|
||||
icon="bx bx-tn-toc"
|
||||
onClick={() => {
|
||||
if (noteContext?.viewScope && noteContext.noteId) {
|
||||
noteContext.viewScope.tocTemporarilyHidden = false;
|
||||
appContext.triggerEvent("showTocWidget", { noteId: noteContext.noteId });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
function ShowHighlightsListWidgetButton({ noteContext }: FloatingButtonContext) {
|
||||
return <FloatingButton
|
||||
text={t("show_highlights_list_widget_button.show_highlights_list")}
|
||||
icon="bx bx-bookmarks"
|
||||
onClick={() => {
|
||||
if (noteContext?.viewScope && noteContext.noteId) {
|
||||
noteContext.viewScope.highlightsListTemporarilyHidden = false;
|
||||
appContext.triggerEvent("showHighlightsListWidget", { noteId: noteContext.noteId });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
function RunActiveNoteButton() {
|
||||
return <FloatingButton
|
||||
icon="bx bx-play"
|
||||
text={t("code_buttons.execute_button_title")}
|
||||
triggerCommand="runActiveNote"
|
||||
/>
|
||||
}
|
||||
|
||||
function OpenTriliumApiDocsButton({ note }: FloatingButtonContext) {
|
||||
return <FloatingButton
|
||||
icon="bx bx-help-circle"
|
||||
text={t("code_buttons.trilium_api_docs_button_title")}
|
||||
onClick={() => openInAppHelpFromUrl(note.mime.endsWith("frontend") ? "Q2z6av6JZVWm" : "MEtfsqa5VwNi")}
|
||||
/>
|
||||
}
|
||||
|
||||
function SaveToNoteButton({ note }: FloatingButtonContext) {
|
||||
return <FloatingButton
|
||||
icon="bx bx-save"
|
||||
text={t("code_buttons.save_to_note_button_title")}
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
const { notePath } = await server.post<SaveSqlConsoleResponse>("special-notes/save-sql-console", { sqlConsoleNoteId: note.noteId });
|
||||
if (notePath) {
|
||||
toast.showMessage(t("code_buttons.sql_console_saved_message", { "note_path": await tree.getNotePathTitle(notePath) }));
|
||||
// TODO: This hangs the navigation, for some reason.
|
||||
//await ws.waitForMaxKnownEntityChangeId();
|
||||
await appContext.tabManager.getActiveContext()?.setNote(notePath);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
function RelationMapButtons({ triggerEvent }: FloatingButtonContext) {
|
||||
return (
|
||||
<>
|
||||
<FloatingButton
|
||||
icon="bx bx-folder-plus"
|
||||
text={t("relation_map_buttons.create_child_note_title")}
|
||||
onClick={() => triggerEvent("relationMapCreateChildNote")}
|
||||
/>
|
||||
|
||||
<FloatingButton
|
||||
icon="bx bx-crop"
|
||||
text={t("relation_map_buttons.reset_pan_zoom_title")}
|
||||
onClick={() => triggerEvent("relationMapResetPanZoom")}
|
||||
/>
|
||||
|
||||
<div className="btn-group">
|
||||
<FloatingButton
|
||||
icon="bx bx-zoom-in"
|
||||
text={t("relation_map_buttons.zoom_in_title")}
|
||||
onClick={() => triggerEvent("relationMapResetZoomIn")}
|
||||
/>
|
||||
|
||||
<FloatingButton
|
||||
icon="bx bx-zoom-out"
|
||||
text={t("relation_map_buttons.zoom_out_title")}
|
||||
onClick={() => triggerEvent("relationMapResetZoomOut")}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function GeoMapButtons({ triggerEvent }) {
|
||||
return (
|
||||
<FloatingButton
|
||||
icon="bx bx-plus-circle"
|
||||
text={t("geo-map.create-child-note-title")}
|
||||
onClick={() => triggerEvent("geoMapCreateChildNote")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CopyImageReferenceButton({ note }: FloatingButtonContext) {
|
||||
const hiddenImageCopyRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FloatingButton
|
||||
icon="bx bx-copy"
|
||||
text={t("copy_image_reference_button.button_title")}
|
||||
onClick={() => {
|
||||
if (!hiddenImageCopyRef.current) return;
|
||||
const imageEl = document.createElement("img");
|
||||
imageEl.src = createImageSrcUrl(note);
|
||||
hiddenImageCopyRef.current.replaceChildren(imageEl);
|
||||
copyImageReferenceToClipboard($(hiddenImageCopyRef.current));
|
||||
hiddenImageCopyRef.current.removeChild(imageEl);
|
||||
}}
|
||||
/>
|
||||
|
||||
<div ref={hiddenImageCopyRef} className="hidden-image-copy" style={{
|
||||
position: "absolute" // Take out of the the hidden image from flexbox to prevent the layout being affected
|
||||
}} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
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) {
|
||||
return <ActionButton
|
||||
className={`floating-button ${className ?? ""}`}
|
||||
noIconActionClass
|
||||
{...props}
|
||||
/>
|
||||
}
|
||||
|
||||
/**
|
||||
* Show button that displays floating button after click on close button
|
||||
*/
|
||||
|
||||
306
apps/client/src/widgets/FloatingButtonsDefinitions.tsx
Normal file
306
apps/client/src/widgets/FloatingButtonsDefinitions.tsx
Normal file
@ -0,0 +1,306 @@
|
||||
import { VNode } from "preact";
|
||||
import appContext, { EventData, EventNames } from "../components/app_context";
|
||||
import Component from "../components/component";
|
||||
import NoteContext from "../components/note_context";
|
||||
import FNote from "../entities/fnote";
|
||||
import ActionButton, { ActionButtonProps } from "./react/ActionButton";
|
||||
import { useNoteLabelBoolean, useTriliumOption } from "./react/hooks";
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import { createImageSrcUrl, openInAppHelpFromUrl } from "../services/utils";
|
||||
import server from "../services/server";
|
||||
import { SaveSqlConsoleResponse } from "@triliumnext/commons";
|
||||
import toast from "../services/toast";
|
||||
import { t } from "../services/i18n";
|
||||
import { copyImageReferenceToClipboard } from "../services/image";
|
||||
import tree from "../services/tree";
|
||||
import protected_session_holder from "../services/protected_session_holder";
|
||||
import options from "../services/options";
|
||||
|
||||
export interface FloatingButtonDefinition {
|
||||
component: (context: FloatingButtonContext) => VNode;
|
||||
isEnabled: (context: FloatingButtonContext) => boolean | Promise<boolean>;
|
||||
}
|
||||
|
||||
export interface FloatingButtonContext {
|
||||
parentComponent: Component;
|
||||
note: FNote;
|
||||
noteContext: NoteContext;
|
||||
/** Shorthand for triggering an event from the parent component. The `ntxId` is automatically handled for convenience. */
|
||||
triggerEvent<T extends EventNames>(name: T, data?: Omit<EventData<T>, "ntxId">): void;
|
||||
}
|
||||
|
||||
function FloatingButton({ className, ...props }: ActionButtonProps) {
|
||||
return <ActionButton
|
||||
className={`floating-button ${className ?? ""}`}
|
||||
noIconActionClass
|
||||
{...props}
|
||||
/>
|
||||
}
|
||||
|
||||
export const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
|
||||
{
|
||||
component: RefreshBackendLogButton,
|
||||
isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default",
|
||||
},
|
||||
{
|
||||
component: SwitchSplitOrientationButton,
|
||||
isEnabled: ({ note, noteContext }) => note.type === "mermaid" && note.isContentAvailable() && !note.hasLabel("readOnly") && noteContext.viewScope?.viewMode === "default"
|
||||
},
|
||||
{
|
||||
component: ToggleReadOnlyButton,
|
||||
isEnabled: ({ note, noteContext }) =>
|
||||
(note.type === "mermaid" || note.getLabelValue("viewType") === "geoMap")
|
||||
&& note.isContentAvailable()
|
||||
&& noteContext.viewScope?.viewMode === "default"
|
||||
},
|
||||
{
|
||||
component: EditButton,
|
||||
isEnabled: async ({ note, noteContext }) =>
|
||||
noteContext.viewScope?.viewMode === "default"
|
||||
&& (!note.isProtected || protected_session_holder.isProtectedSessionAvailable())
|
||||
&& !options.is("databaseReadonly")
|
||||
&& await noteContext?.isReadOnly()
|
||||
},
|
||||
{
|
||||
component: ShowTocWidgetButton,
|
||||
isEnabled: ({ note, noteContext }) =>
|
||||
note.type === "text" && noteContext?.viewScope?.viewMode === "default"
|
||||
&& !!noteContext.viewScope?.tocTemporarilyHidden
|
||||
},
|
||||
{
|
||||
component: ShowHighlightsListWidgetButton,
|
||||
isEnabled: ({ note, noteContext }) =>
|
||||
note.type === "text" && noteContext?.viewScope?.viewMode === "default"
|
||||
&& !!noteContext.viewScope?.highlightsListTemporarilyHidden
|
||||
},
|
||||
{
|
||||
component: RunActiveNoteButton,
|
||||
isEnabled: ({ note }) => note.mime.startsWith("application/javascript") || note.mime === "text/x-sqlite;schema=trilium"
|
||||
},
|
||||
{
|
||||
component: OpenTriliumApiDocsButton,
|
||||
isEnabled: ({ note }) => note.mime.startsWith("application/javascript;env=")
|
||||
},
|
||||
{
|
||||
component: SaveToNoteButton,
|
||||
isEnabled: ({ note }) => note.mime === "text/x-sqlite;schema=trilium" && note.isHiddenCompletely()
|
||||
},
|
||||
{
|
||||
component: RelationMapButtons,
|
||||
isEnabled: ({ note }) => note.type === "relationMap"
|
||||
},
|
||||
{
|
||||
component: GeoMapButtons,
|
||||
isEnabled: ({ note }) => note?.getLabelValue("viewType") === "geoMap" && !note.hasLabel("readOnly")
|
||||
},
|
||||
{
|
||||
component: CopyImageReferenceButton,
|
||||
isEnabled: ({ note, noteContext }) =>
|
||||
["mermaid", "canvas", "mindMap"].includes(note?.type ?? "")
|
||||
&& note?.isContentAvailable() && noteContext.viewScope?.viewMode === "default"
|
||||
},
|
||||
{
|
||||
component: ExportImageButtons,
|
||||
isEnabled: ({ note, noteContext }) =>
|
||||
["mermaid", "mindMap"].includes(note?.type ?? "")
|
||||
&& note?.isContentAvailable() && noteContext?.viewScope?.viewMode === "default"
|
||||
}
|
||||
];
|
||||
|
||||
function RefreshBackendLogButton({ parentComponent, noteContext }: FloatingButtonContext) {
|
||||
return <FloatingButton
|
||||
text={t("backend_log.refresh")}
|
||||
icon="bx bx-refresh"
|
||||
onClick={() => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId })}
|
||||
/>
|
||||
}
|
||||
|
||||
function SwitchSplitOrientationButton({ }: FloatingButtonContext) {
|
||||
const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
|
||||
const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";
|
||||
|
||||
return <FloatingButton
|
||||
text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")}
|
||||
icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}
|
||||
onClick={() => setSplitEditorOrientation(upcomingOrientation)}
|
||||
/>
|
||||
}
|
||||
|
||||
function ToggleReadOnlyButton({ note }: FloatingButtonContext) {
|
||||
const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
|
||||
|
||||
return <FloatingButton
|
||||
text={isReadOnly ? t("toggle_read_only_button.unlock-editing") : t("toggle_read_only_button.lock-editing")}
|
||||
icon={isReadOnly ? "bx bx-lock-open-alt" : "bx bx-lock-alt"}
|
||||
onClick={() => setReadOnly(!isReadOnly)}
|
||||
/>
|
||||
}
|
||||
|
||||
function EditButton({ noteContext }: FloatingButtonContext) {
|
||||
const [ animationClass, setAnimationClass ] = useState("");
|
||||
|
||||
// make the edit button stand out on the first display, otherwise
|
||||
// it's difficult to notice that the note is readonly
|
||||
useEffect(() => {
|
||||
setAnimationClass("bx-tada bx-lg");
|
||||
setTimeout(() => {
|
||||
setAnimationClass("");
|
||||
}, 1700);
|
||||
}, []);
|
||||
|
||||
return <FloatingButton
|
||||
text={t("edit_button.edit_this_note")}
|
||||
icon="bx bx-pencil"
|
||||
className={animationClass}
|
||||
onClick={() => {
|
||||
if (noteContext.viewScope) {
|
||||
noteContext.viewScope.readOnlyTemporarilyDisabled = true;
|
||||
appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
function ShowTocWidgetButton({ noteContext }: FloatingButtonContext) {
|
||||
return <FloatingButton
|
||||
text={t("show_toc_widget_button.show_toc")}
|
||||
icon="bx bx-tn-toc"
|
||||
onClick={() => {
|
||||
if (noteContext?.viewScope && noteContext.noteId) {
|
||||
noteContext.viewScope.tocTemporarilyHidden = false;
|
||||
appContext.triggerEvent("showTocWidget", { noteId: noteContext.noteId });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
function ShowHighlightsListWidgetButton({ noteContext }: FloatingButtonContext) {
|
||||
return <FloatingButton
|
||||
text={t("show_highlights_list_widget_button.show_highlights_list")}
|
||||
icon="bx bx-bookmarks"
|
||||
onClick={() => {
|
||||
if (noteContext?.viewScope && noteContext.noteId) {
|
||||
noteContext.viewScope.highlightsListTemporarilyHidden = false;
|
||||
appContext.triggerEvent("showHighlightsListWidget", { noteId: noteContext.noteId });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
function RunActiveNoteButton() {
|
||||
return <FloatingButton
|
||||
icon="bx bx-play"
|
||||
text={t("code_buttons.execute_button_title")}
|
||||
triggerCommand="runActiveNote"
|
||||
/>
|
||||
}
|
||||
|
||||
function OpenTriliumApiDocsButton({ note }: FloatingButtonContext) {
|
||||
return <FloatingButton
|
||||
icon="bx bx-help-circle"
|
||||
text={t("code_buttons.trilium_api_docs_button_title")}
|
||||
onClick={() => openInAppHelpFromUrl(note.mime.endsWith("frontend") ? "Q2z6av6JZVWm" : "MEtfsqa5VwNi")}
|
||||
/>
|
||||
}
|
||||
|
||||
function SaveToNoteButton({ note }: FloatingButtonContext) {
|
||||
return <FloatingButton
|
||||
icon="bx bx-save"
|
||||
text={t("code_buttons.save_to_note_button_title")}
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
const { notePath } = await server.post<SaveSqlConsoleResponse>("special-notes/save-sql-console", { sqlConsoleNoteId: note.noteId });
|
||||
if (notePath) {
|
||||
toast.showMessage(t("code_buttons.sql_console_saved_message", { "note_path": await tree.getNotePathTitle(notePath) }));
|
||||
// TODO: This hangs the navigation, for some reason.
|
||||
//await ws.waitForMaxKnownEntityChangeId();
|
||||
await appContext.tabManager.getActiveContext()?.setNote(notePath);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
function RelationMapButtons({ triggerEvent }: FloatingButtonContext) {
|
||||
return (
|
||||
<>
|
||||
<FloatingButton
|
||||
icon="bx bx-folder-plus"
|
||||
text={t("relation_map_buttons.create_child_note_title")}
|
||||
onClick={() => triggerEvent("relationMapCreateChildNote")}
|
||||
/>
|
||||
|
||||
<FloatingButton
|
||||
icon="bx bx-crop"
|
||||
text={t("relation_map_buttons.reset_pan_zoom_title")}
|
||||
onClick={() => triggerEvent("relationMapResetPanZoom")}
|
||||
/>
|
||||
|
||||
<div className="btn-group">
|
||||
<FloatingButton
|
||||
icon="bx bx-zoom-in"
|
||||
text={t("relation_map_buttons.zoom_in_title")}
|
||||
onClick={() => triggerEvent("relationMapResetZoomIn")}
|
||||
/>
|
||||
|
||||
<FloatingButton
|
||||
icon="bx bx-zoom-out"
|
||||
text={t("relation_map_buttons.zoom_out_title")}
|
||||
onClick={() => triggerEvent("relationMapResetZoomOut")}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function GeoMapButtons({ triggerEvent }) {
|
||||
return (
|
||||
<FloatingButton
|
||||
icon="bx bx-plus-circle"
|
||||
text={t("geo-map.create-child-note-title")}
|
||||
onClick={() => triggerEvent("geoMapCreateChildNote")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CopyImageReferenceButton({ note }: FloatingButtonContext) {
|
||||
const hiddenImageCopyRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FloatingButton
|
||||
icon="bx bx-copy"
|
||||
text={t("copy_image_reference_button.button_title")}
|
||||
onClick={() => {
|
||||
if (!hiddenImageCopyRef.current) return;
|
||||
const imageEl = document.createElement("img");
|
||||
imageEl.src = createImageSrcUrl(note);
|
||||
hiddenImageCopyRef.current.replaceChildren(imageEl);
|
||||
copyImageReferenceToClipboard($(hiddenImageCopyRef.current));
|
||||
hiddenImageCopyRef.current.removeChild(imageEl);
|
||||
}}
|
||||
/>
|
||||
|
||||
<div ref={hiddenImageCopyRef} className="hidden-image-copy" style={{
|
||||
position: "absolute" // Take out of the the hidden image from flexbox to prevent the layout being affected
|
||||
}} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
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")}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user