gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-29 18:49:00 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki 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
No known key found for this signature in database
2 changed files with 29 additions and 62 deletions
Show Stats 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 ActionButton from "./react/ActionButton";
import FNote from "../entities/fnote"; import FNote from "../entities/fnote";
import NoteContext from "../components/note_context"; import NoteContext from "../components/note_context";
import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumOption } from "./react/hooks"; import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "./react/hooks";
import { useContext, useEffect, useMemo } from "preact/hooks"; import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { ParentComponent } from "./react/react_utils"; import { ParentComponent } from "./react/react_utils";
import Component from "../components/component"; import Component from "../components/component";
import { VNode } from "preact"; import { VNode } from "preact";
import attributes from "../services/attributes";
interface FloatingButtonContext { interface FloatingButtonContext {
parentComponent: Component; parentComponent: Component;
@ -29,6 +30,13 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
{ {
component: SwitchSplitOrientationButton, component: SwitchSplitOrientationButton,
isEnabled: ({ note, noteContext }) => note.type === "mermaid" && note.isContentAvailable() && !note.hasLabel("readOnly") && noteContext.viewScope?.viewMode === "default" 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 ]); }, [ 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[]>(() => { const definitions = useMemo<FloatingButtonDefinition[]>(() => {
if (!context) return []; if (!context) return [];
return FLOATING_BUTTON_DEFINITIONS.filter(def => def.isEnabled(context)); return FLOATING_BUTTON_DEFINITIONS.filter(def => def.isEnabled(context));
}, [ context, isReadOnly ]); }, [ context, refreshCounter ]);
return ( return (
<div className="floating-buttons no-print"> <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 * Show button that displays floating button after click on close button
*/ */

58
apps/client/src/widgets/floating_buttons/toggle_read_only_button.ts
View File

@ -1,58 +0,0 @@
import type FNote from "../../entities/fnote.js";
import attributes from "../../services/attributes.js";
import { t } from "../../services/i18n.js";
import OnClickButtonWidget from "../buttons/onclick_button.js";
export default class ToggleReadOnlyButton extends OnClickButtonWidget {
private isReadOnly?: boolean;
constructor() {
super();
this
.title(() => this.isReadOnly ? t("toggle_read_only_button.unlock-editing") : t("toggle_read_only_button.lock-editing"))
.titlePlacement("bottom")
.icon(() => this.isReadOnly ? "bx-lock-open-alt" : "bx-lock-alt")
.onClick(() => this.#toggleReadOnly());
}
#toggleReadOnly() {
if (!this.noteId || !this.note) {
return;
}
if (this.isReadOnly) {
attributes.removeOwnedLabelByName(this.note, "readOnly");
} else {
attributes.setLabel(this.noteId, "readOnly");
}
}
async refreshWithNote(note: FNote | null | undefined) {
const isReadOnly = !!note?.hasLabel("readOnly");
if (isReadOnly !== this.isReadOnly) {
this.isReadOnly = isReadOnly;
this.refreshIcon();
}
}
isEnabled() {
if (!super.isEnabled()) {
return false;
}
if (!this?.note?.isContentAvailable()) {
return false;
}
if (this.noteContext?.viewScope?.viewMode !== "default") {
return false;
}
return this.note.type === "mermaid" ||
(this.note.getLabelValue("viewType") === "geoMap");
}
}