gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

chore(react): port move_pane_button

Browse Source
This commit is contained in:
Elian Doran 2025-09-16 22:45:54 +03:00
parent 23b798e392
commit 78e45d095b
No known key found for this signature in database
3 changed files with 46 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/layouts/desktop_layout.tsx
View File

@ -123,8 +123,8 @@ export default class DesktopLayout {
.child(<NoteIconWidget />) .child(<NoteIconWidget />)
.child(<NoteTitleWidget />) .child(<NoteTitleWidget />)
.child(new SpacerWidget(0, 1)) .child(new SpacerWidget(0, 1))
.child(new MovePaneButton(true)) .child(<MovePaneButton direction="left" />)
.child(new MovePaneButton(false)) .child(<MovePaneButton direction="right" />)
.child(new ClosePaneButton()) .child(new ClosePaneButton())
.child(new CreatePaneButton()) .child(new CreatePaneButton())
) )

55
apps/client/src/widgets/buttons/move_pane_button.ts
View File

@ -1,55 +0,0 @@
import OnClickButtonWidget from "./onclick_button.js";
import appContext from "../../components/app_context.js";
import { t } from "../../services/i18n.js";
export default class MovePaneButton extends OnClickButtonWidget {
private isMovingLeft: boolean;
constructor(isMovingLeft: boolean) {
super();
this.isMovingLeft = isMovingLeft;
this.icon(isMovingLeft ? "bx-chevron-left" : "bx-chevron-right")
.title(isMovingLeft ? t("move_pane_button.move_left") : t("move_pane_button.move_right"))
.titlePlacement("bottom")
.onClick(async (widget, e) => {
e.stopPropagation();
widget.triggerCommand("moveThisNoteSplit", { ntxId: widget.getClosestNtxId(), isMovingLeft: this.isMovingLeft });
})
.class("icon-action");
}
isEnabled() {
if (!super.isEnabled()) {
return false;
}
if (this.isMovingLeft) {
// movable if the current context is not a main context, i.e. non-null mainNtxId
return !!this.noteContext?.mainNtxId;
} else {
const currentIndex = appContext.tabManager.noteContexts.findIndex((c) => c.ntxId === this.ntxId);
const nextContext = appContext.tabManager.noteContexts[currentIndex + 1];
// movable if the next context is not null and not a main context, i.e. non-null mainNtxId
return !!nextContext?.mainNtxId;
}
}
async noteContextRemovedEvent() {
this.refresh();
}
async newNoteContextCreatedEvent() {
this.refresh();
}
async noteContextReorderEvent() {
this.refresh();
}
async contextsReopenedEvent() {
this.refresh();
}
}

44
apps/client/src/widgets/buttons/move_pane_button.tsx Normal file
View File

@ -0,0 +1,44 @@
import { useContext, useState } from "preact/hooks";
import { t } from "../../services/i18n";
import ActionButton from "../react/ActionButton";
import { ParentComponent } from "../react/react_utils";
import BasicWidget from "../basic_widget";
import { useNoteContext, useTriliumEvents } from "../react/hooks";
import appContext from "../../components/app_context";
interface MovePaneButtonProps {
direction: "left" | "right";
}
export default function MovePaneButton({ direction }: MovePaneButtonProps) {
const parentWidget = useContext(ParentComponent) as BasicWidget | undefined;
const { noteContext, ntxId } = useNoteContext();
const [ refreshCounter, setRefreshCounter ] = useState(0);
function isEnabled() {
if (direction === "left") {
// movable if the current context is not a main context, i.e. non-null mainNtxId
return !!noteContext?.mainNtxId;
} else {
const currentIndex = appContext.tabManager.noteContexts.findIndex((c) => c.ntxId === ntxId);
const nextContext = appContext.tabManager.noteContexts[currentIndex + 1];
// movable if the next context is not null and not a main context, i.e. non-null mainNtxId
return !!nextContext?.mainNtxId;
}
}
useTriliumEvents([ "noteContextRemoved", "newNoteContextCreated", "noteContextReorder", "contextsReopened" ], () => {
setRefreshCounter(refreshCounter + 1);
});
console.log("Refresh with ", isEnabled());
return (
<ActionButton
icon={direction === "left" ? "bx bx-chevron-left" : "bx bx-chevron-right"}
text={direction === "left" ? t("move_pane_button.move_left") : t("move_pane_button.move_right")}
onClick={(() => parentWidget?.triggerCommand("moveThisNoteSplit", { ntxId: parentWidget.getClosestNtxId(), isMovingLeft: direction === "left" }))}
className={!isEnabled() ? "hidden-ext" : ""}
/>
);
}