feat(layout/note_actions): integrate toggle read-only button

This commit is contained in:
Elian Doran
2025-12-15 08:15:00 +02:00
parent 4cfe59271f
commit 50cbad22d0

View File

@@ -6,9 +6,10 @@ import NoteContext from "../../components/note_context";
import FNote from "../../entities/fnote"; import FNote from "../../entities/fnote";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import { downloadFileNote, openNoteExternally } from "../../services/open"; import { downloadFileNote, openNoteExternally } from "../../services/open";
import { ViewTypeOptions } from "../collections/interface";
import ActionButton from "../react/ActionButton"; import ActionButton from "../react/ActionButton";
import { FormFileUploadActionButton } from "../react/FormFileUpload"; import { FormFileUploadActionButton } from "../react/FormFileUpload";
import { useNoteLabelBoolean, useNoteProperty, useTriliumOption } from "../react/hooks"; import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumOption } from "../react/hooks";
import { ParentComponent } from "../react/react_utils"; import { ParentComponent } from "../react/react_utils";
import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab"; import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
import { buildUploadNewImageRevisionListener } from "./ImagePropertiesTab"; import { buildUploadNewImageRevisionListener } from "./ImagePropertiesTab";
@@ -24,6 +25,7 @@ interface NoteActionsCustomInnerProps extends NoteActionsCustomProps {
isReadOnly: boolean; isReadOnly: boolean;
isDefaultViewMode: boolean; isDefaultViewMode: boolean;
parentComponent: Component; parentComponent: Component;
viewType: ViewTypeOptions | null | undefined;
} }
/** /**
@@ -33,11 +35,13 @@ interface NoteActionsCustomInnerProps extends NoteActionsCustomProps {
export default function NoteActionsCustom(props: NoteActionsCustomProps) { export default function NoteActionsCustom(props: NoteActionsCustomProps) {
const { note } = props; const { note } = props;
const noteType = useNoteProperty(note, "type"); const noteType = useNoteProperty(note, "type");
const [ viewType ] = useNoteLabel(note, "viewType");
const parentComponent = useContext(ParentComponent); const parentComponent = useContext(ParentComponent);
const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly"); const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
const innerProps: NoteActionsCustomInnerProps | null | undefined = noteType && parentComponent && { const innerProps: NoteActionsCustomInnerProps | null | undefined = noteType && parentComponent && {
...props, ...props,
noteType, noteType,
viewType: viewType as ViewTypeOptions | null | undefined,
isDefaultViewMode: props.noteContext.viewScope?.viewMode === "default", isDefaultViewMode: props.noteContext.viewScope?.viewMode === "default",
parentComponent, parentComponent,
isReadOnly isReadOnly
@@ -46,6 +50,7 @@ export default function NoteActionsCustom(props: NoteActionsCustomProps) {
return (innerProps && return (innerProps &&
<div className="note-actions-custom"> <div className="note-actions-custom">
<SwitchSplitOrientationButton {...innerProps} /> <SwitchSplitOrientationButton {...innerProps} />
<ToggleReadOnlyButton {...innerProps} />
<RefreshButton {...innerProps} /> <RefreshButton {...innerProps} />
<CopyReferenceToClipboardButton {...innerProps} /> <CopyReferenceToClipboardButton {...innerProps} />
<NoteActionsCustomInner {...innerProps} /> <NoteActionsCustomInner {...innerProps} />
@@ -156,3 +161,15 @@ function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: N
onClick={() => setSplitEditorOrientation(upcomingOrientation)} onClick={() => setSplitEditorOrientation(upcomingOrientation)}
/>; />;
} }
function ToggleReadOnlyButton({ note, viewType, isDefaultViewMode }: NoteActionsCustomInnerProps) {
const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
const isEnabled = ([ "mermaid", "mindMap", "canvas" ].includes(note.type) || viewType === "geoMap")
&& note.isContentAvailable() && isDefaultViewMode;
return isEnabled && <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)}
/>;
}