Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-06 21:36:05 +01:00
Code Issues Packages Projects Releases Activity

feat(react/floating_buttons): port toggle read only button

Browse Source
This commit is contained in:
Elian Doran
2025-08-27 22:09:00 +03:00
parent e340e6f5e3
commit e290635ba5
2 changed files with 29 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,11 +4,12 @@ import Button from "./react/Button";
import ActionButton from "./react/ActionButton";
import FNote from "../entities/fnote";
import NoteContext from "../components/note_context";
import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumOption } from "./react/hooks";
import { useContext, useEffect, useMemo } from "preact/hooks";
import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "./react/hooks";
import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { ParentComponent } from "./react/react_utils";
import Component from "../components/component";
import { VNode } from "preact";
import attributes from "../services/attributes";
interface FloatingButtonContext {
parentComponent: Component;
@@ -29,6 +30,13 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
{
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"
}
];
@@ -52,11 +60,18 @@ export default function FloatingButtons() {
};
}, [ note, noteContext, parentComponent ]);
const isReadOnly = useNoteLabelBoolean(note, "readOnly");
// Refresh on any note attribute change.
const [ refreshCounter, setRefreshCounter ] = useState(0);
useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
if (loadResults.getAttributeRows().find(attrRow => attributes.isAffecting(attrRow, note))) {
setRefreshCounter(refreshCounter+1);
}
});
const definitions = useMemo<FloatingButtonDefinition[]>(() => {
if (!context) return [];
return FLOATING_BUTTON_DEFINITIONS.filter(def => def.isEnabled(context));
}, [ context, isReadOnly ]);
}, [ context, refreshCounter ]);
return (
<div className="floating-buttons no-print">
@@ -90,6 +105,16 @@ function SwitchSplitOrientationButton({ }: FloatingButtonContext) {
/>
}
function ToggleReadOnlyButton({ note }: FloatingButtonContext) {
const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
return <ActionButton
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)}
/>
}
/**
* Show button that displays floating button after click on close button
*/