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

feat(react/widgets): port mobile detail menu

Browse Source
This commit is contained in:
Elian Doran 2025-08-29 21:17:30 +03:00
parent ec646809dd
commit d579e39b40
No known key found for this signature in database
3 changed files with 59 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,6 @@ import NoteTitleWidget from "../widgets/note_title.js";
import NoteDetailWidget from "../widgets/note_detail.js";
import QuickSearchWidget from "../widgets/quick_search.js";
import NoteTreeWidget from "../widgets/note_tree.js";
import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
import ScrollingContainer from "../widgets/containers/scrolling_container.js";
import NoteListWidget from "../widgets/note_list.js";
@ -23,6 +22,7 @@ import { useNoteContext } from "../widgets/react/hooks.jsx";
import FloatingButtons from "../widgets/FloatingButtons.jsx";
import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
const MOBILE_CSS = `
<style>
@ -141,7 +141,7 @@ export default class MobileLayout {
.css("align-items", "center")
.child(<ToggleSidebarButton />)
.child(<NoteTitleWidget />)
.child(new MobileDetailMenuWidget(true).contentSized())
.child(<MobileDetailMenu />)
)
.child(new SharedInfoWidget())
.child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)

64
apps/client/src/widgets/mobile_widgets/mobile_detail_menu.ts
View File

@ -1,64 +0,0 @@
import BasicWidget from "../basic_widget.js";
import appContext from "../../components/app_context.js";
import contextMenu from "../../menus/context_menu.js";
import noteCreateService from "../../services/note_create.js";
import branchService from "../../services/branches.js";
import treeService from "../../services/tree.js";
import { t } from "../../services/i18n.js";
const TPL = /*html*/`<button type="button" class="action-button bx"></button>`;
class MobileDetailMenuWidget extends BasicWidget {
private isHorizontalLayout: boolean;
constructor(isHorizontalLayout: boolean) {
super();
this.isHorizontalLayout = isHorizontalLayout;
}
doRender() {
this.$widget = $(TPL);
this.$widget.addClass(this.isHorizontalLayout ? "bx-dots-vertical-rounded" : "bx-menu");
this.$widget.on("click", async (e) => {
const note = appContext.tabManager.getActiveContextNote();
contextMenu.show<"insertChildNote" | "delete" | "showRevisions">({
x: e.pageX,
y: e.pageY,
items: [
{ title: t("mobile_detail_menu.insert_child_note"), command: "insertChildNote", uiIcon: "bx bx-plus", enabled: note?.type !== "search" },
{ title: t("mobile_detail_menu.delete_this_note"), command: "delete", uiIcon: "bx bx-trash", enabled: note?.noteId !== "root" },
{ title: "----" },
{ title: "Note revisions", command: "showRevisions", uiIcon: "bx bx-history" }
],
selectMenuItemHandler: async ({ command }) => {
if (command === "insertChildNote") {
noteCreateService.createNote(appContext.tabManager.getActiveContextNotePath() ?? undefined);
} else if (command === "delete") {
const notePath = appContext.tabManager.getActiveContextNotePath();
if (!notePath) {
throw new Error("Cannot get note path to delete.");
}
const branchId = await treeService.getBranchIdFromUrl(notePath);
if (!branchId) {
throw new Error(t("mobile_detail_menu.error_cannot_get_branch_id", { notePath }));
}
if (await branchService.deleteNotes([branchId])) {
this.triggerCommand("setActiveScreen", { screen: "tree" });
}
} else if (command) {
this.triggerCommand(command);
}
},
forcePositionOnMobile: true
});
});
}
}
export default MobileDetailMenuWidget;

57
apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx Normal file
View File

@ -0,0 +1,57 @@
import { useContext } from "preact/hooks";
import appContext from "../../components/app_context";
import contextMenu from "../../menus/context_menu";
import branches from "../../services/branches";
import { t } from "../../services/i18n";
import note_create from "../../services/note_create";
import tree from "../../services/tree";
import ActionButton from "../react/ActionButton";
import { ParentComponent } from "../react/react_utils";
export default function MobileDetailMenu() {
const parentComponent = useContext(ParentComponent);
return (
<ActionButton
icon="bx bx-dots-vertical-rounded"
text=""
onClick={(e) => {
const note = appContext.tabManager.getActiveContextNote();
contextMenu.show<"insertChildNote" | "delete" | "showRevisions">({
x: e.pageX,
y: e.pageY,
items: [
{ title: t("mobile_detail_menu.insert_child_note"), command: "insertChildNote", uiIcon: "bx bx-plus", enabled: note?.type !== "search" },
{ title: t("mobile_detail_menu.delete_this_note"), command: "delete", uiIcon: "bx bx-trash", enabled: note?.noteId !== "root" },
{ title: "----" },
{ title: "Note revisions", command: "showRevisions", uiIcon: "bx bx-history" }
],
selectMenuItemHandler: async ({ command }) => {
if (command === "insertChildNote") {
note_create.createNote(appContext.tabManager.getActiveContextNotePath() ?? undefined);
} else if (command === "delete") {
const notePath = appContext.tabManager.getActiveContextNotePath();
if (!notePath) {
throw new Error("Cannot get note path to delete.");
}
const branchId = await tree.getBranchIdFromUrl(notePath);
if (!branchId) {
throw new Error(t("mobile_detail_menu.error_cannot_get_branch_id", { notePath }));
}
if (await branches.deleteNotes([branchId]) && parentComponent) {
parentComponent.triggerCommand("setActiveScreen", { screen: "tree" });
}
} else if (command && parentComponent) {
parentComponent.triggerCommand(command);
}
},
forcePositionOnMobile: true
});
}}
/>
)
}