Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-16 05:09:54 +01:00
Code Issues Packages Projects Releases Activity

feat(layout/note_actions): integrate switch split orientation

Browse Source
This commit is contained in:
Elian Doran
2025-12-15 08:12:39 +02:00
parent ba7969dad4
commit 4cfe59271f
2 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/FloatingButtonsDefinitions.tsx
View File

@@ -90,7 +90,7 @@ function RefreshBackendLogButton({ note, parentComponent, noteContext, isDefault
} }
function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: FloatingButtonContext) { function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: FloatingButtonContext) {
const isEnabled = note.type === "mermaid" && note.isContentAvailable() && !isReadOnly && isDefaultViewMode; const isEnabled = !isNewLayout && note.type === "mermaid" && note.isContentAvailable() && !isReadOnly && isDefaultViewMode;
const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation"); const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal"; const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";

23
apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
View File

@@ -8,7 +8,7 @@ import { t } from "../../services/i18n";
import { downloadFileNote, openNoteExternally } from "../../services/open"; import { downloadFileNote, openNoteExternally } from "../../services/open";
import ActionButton from "../react/ActionButton"; import ActionButton from "../react/ActionButton";
import { FormFileUploadActionButton } from "../react/FormFileUpload"; import { FormFileUploadActionButton } from "../react/FormFileUpload";
import { useNoteProperty } from "../react/hooks"; import { 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";
@@ -21,6 +21,7 @@ interface NoteActionsCustomProps {
interface NoteActionsCustomInnerProps extends NoteActionsCustomProps { interface NoteActionsCustomInnerProps extends NoteActionsCustomProps {
noteType: NoteType; noteType: NoteType;
isReadOnly: boolean;
isDefaultViewMode: boolean; isDefaultViewMode: boolean;
parentComponent: Component; parentComponent: Component;
} }
@@ -30,17 +31,21 @@ interface NoteActionsCustomInnerProps extends NoteActionsCustomProps {
* from the rest of the note items and the buttons differ based on the note type. * from the rest of the note items and the buttons differ based on the note type.
*/ */
export default function NoteActionsCustom(props: NoteActionsCustomProps) { export default function NoteActionsCustom(props: NoteActionsCustomProps) {
const noteType = useNoteProperty(props.note, "type"); const { note } = props;
const noteType = useNoteProperty(note, "type");
const parentComponent = useContext(ParentComponent); const parentComponent = useContext(ParentComponent);
const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
const innerProps: NoteActionsCustomInnerProps | null | undefined = noteType && parentComponent && { const innerProps: NoteActionsCustomInnerProps | null | undefined = noteType && parentComponent && {
...props, ...props,
noteType, noteType,
isDefaultViewMode: props.noteContext.viewScope?.viewMode === "default", isDefaultViewMode: props.noteContext.viewScope?.viewMode === "default",
parentComponent parentComponent,
isReadOnly
}; };
return (innerProps && return (innerProps &&
<div className="note-actions-custom"> <div className="note-actions-custom">
<SwitchSplitOrientationButton {...innerProps} />
<RefreshButton {...innerProps} /> <RefreshButton {...innerProps} />
<CopyReferenceToClipboardButton {...innerProps} /> <CopyReferenceToClipboardButton {...innerProps} />
<NoteActionsCustomInner {...innerProps} /> <NoteActionsCustomInner {...innerProps} />
@@ -139,3 +144,15 @@ function RefreshButton({ note, noteType, isDefaultViewMode, parentComponent, not
/> />
); );
} }
function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: NoteActionsCustomInnerProps) {
const isEnabled = note.type === "mermaid" && note.isContentAvailable() && !isReadOnly && isDefaultViewMode;
const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";
return isEnabled && <ActionButton
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)}
/>;
}