gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat(react/widgets): port a few more global menu items

Browse Source
This commit is contained in:
Elian Doran 2025-08-29 01:07:11 +03:00
parent 829f382726
commit e166b97b8f
No known key found for this signature in database
2 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -162,7 +162,12 @@ export default class MobileLayout {
.contentSized() .contentSized()
.id("mobile-bottom-bar") .id("mobile-bottom-bar")
.child(new TabRowWidget().css("height", "40px")) .child(new TabRowWidget().css("height", "40px"))
.child(new FlexContainer("row").class("horizontal").css("height", "53px").child(new LauncherContainer(true)).child(new GlobalMenuWidget(true)).id("launcher-pane")) .child(new FlexContainer("row")
.class("horizontal")
.css("height", "53px")
.child(new LauncherContainer(true))
.child(<GlobalMenuWidget isHorizontalLayout />)
.id("launcher-pane"))
) )
.child(new CloseZenButton()); .child(new CloseZenButton());
applyModals(rootContainer); applyModals(rootContainer);

38
apps/client/src/widgets/buttons/global_menu.tsx
View File

@ -10,7 +10,7 @@ import { KeyboardActionNames } from "@triliumnext/commons";
import { ComponentChildren } from "preact"; import { ComponentChildren } from "preact";
import Component from "../../components/component"; import Component from "../../components/component";
import { ParentComponent } from "../react/react_utils"; import { ParentComponent } from "../react/react_utils";
import { dynamicRequire, isElectron } from "../../services/utils"; import { dynamicRequire, isElectron, isMobile } from "../../services/utils";
interface MenuItemProps<T> { interface MenuItemProps<T> {
icon: string, icon: string,
@ -18,6 +18,8 @@ interface MenuItemProps<T> {
title?: string, title?: string,
command: T, command: T,
disabled?: boolean disabled?: boolean
active?: boolean;
outsideChildren?: ComponentChildren;
} }
export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout: boolean }) { export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout: boolean }) {
@ -37,18 +39,29 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
<FormDropdownDivider /> <FormDropdownDivider />
<ZoomControls parentComponent={parentComponent} /> <ZoomControls parentComponent={parentComponent} />
<ToggleWindowOnTop />
<KeyboardAction command="toggleZenMode" icon="bx bxs-yin-yang" text={t("global_menu.toggle-zen-mode")} />
<FormDropdownDivider />
{isMobile() ? (
<MenuItem command="switchToDesktopVersion" icon="bx bx-desktop" text={t("global_menu.switch_to_desktop_version")} />
) : (
<MenuItem command="switchToMobileVersion" icon="bx bx-mobile" text={t("global_menu.switch_to_mobile_version")} />
)}
<MenuItem command="showLaunchBarSubtree" icon={`bx ${isMobile() ? "bx-mobile" : "bx-sidebar"}`} text={t("global_menu.configure_launchbar")} />
</Dropdown> </Dropdown>
) )
} }
function MenuItem({ icon, text, title, command, disabled }: MenuItemProps<KeyboardActionNames | CommandNames | (() => void)>) { function MenuItem({ icon, text, title, command, disabled, active, outsideChildren }: MenuItemProps<KeyboardActionNames | CommandNames | (() => void)>) {
return <FormListItem return <FormListItem
icon={icon} icon={icon}
title={title} title={title}
triggerCommand={typeof command === "string" ? command : undefined} triggerCommand={typeof command === "string" ? command : undefined}
onClick={typeof command === "function" ? command : undefined} onClick={typeof command === "function" ? command : undefined}
disabled={disabled} disabled={disabled}
active={active}
outsideChildren={outsideChildren}
>{text}</FormListItem> >{text}</FormListItem>
} }
@ -56,7 +69,8 @@ function KeyboardAction({ text, command, ...props }: MenuItemProps<KeyboardActio
return <MenuItem return <MenuItem
{...props} {...props}
command={command} command={command}
text={<>{text} <KeyboardShortcut actionName={command as KeyboardActionNames} /></>} text={text}
outsideChildren={<KeyboardShortcut actionName={command as KeyboardActionNames} />}
/> />
} }
@ -131,3 +145,21 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
<MenuItem icon="bx bx-expand-alt" command="toggleFullscreen" text={t("global_menu.toggle_fullscreen")} /> <MenuItem icon="bx bx-expand-alt" command="toggleFullscreen" text={t("global_menu.toggle_fullscreen")} />
); );
} }
function ToggleWindowOnTop() {
const focusedWindow = isElectron() ? dynamicRequire("@electron/remote").BrowserWindow.getFocusedWindow() : null;
const [ isAlwaysOnTop, setIsAlwaysOnTop ] = useState(focusedWindow?.isAlwaysOnTop());
return (isElectron() &&
<MenuItem
icon="bx bx-pin"
text={t("title_bar_buttons.window-on-top")}
active={isAlwaysOnTop}
command={() => {
const newState = !isAlwaysOnTop;
focusedWindow?.setAlwaysOnTop(newState);
setIsAlwaysOnTop(newState);
}}
/>
)
}