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