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

fix(global_menu): alignment of advanced button

Browse Source
This commit is contained in:
Elian Doran
2025-12-15 07:53:34 +02:00
parent 016389df68
commit ca39282269
1 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,7 +38,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
text={<> text={<>
{isVerticalLayout && <VerticalLayoutIcon />} {isVerticalLayout && <VerticalLayoutIcon />}
{isUpdateAvailable && <div class="global-menu-button-update-available"> {isUpdateAvailable && <div class="global-menu-button-update-available">
<span className="bx bxs-down-arrow-alt global-menu-button-update-available-button" title={t("update_available.update_available")}></span> <span className="bx bxs-down-arrow-alt global-menu-button-update-available-button" title={t("update_available.update_available")} />
</div>} </div>}
</>} </>}
noDropdownListStyle noDropdownListStyle
@@ -57,7 +57,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
<SwitchToOptions /> <SwitchToOptions />
<MenuItem command="showLaunchBarSubtree" icon={`bx ${isMobile() ? "bx-mobile" : "bx-sidebar"}`} text={t("global_menu.configure_launchbar")} /> <MenuItem command="showLaunchBarSubtree" icon={`bx ${isMobile() ? "bx-mobile" : "bx-sidebar"}`} text={t("global_menu.configure_launchbar")} />
<AdvancedMenu /> <AdvancedMenu dropStart={!isVerticalLayout} />
<MenuItem command="showOptions" icon="bx bx-cog" text={t("global_menu.options")} /> <MenuItem command="showOptions" icon="bx bx-cog" text={t("global_menu.options")} />
<FormDropdownDivider /> <FormDropdownDivider />
@@ -68,19 +68,19 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
{isUpdateAvailable && <> {isUpdateAvailable && <>
<FormListHeader text={t("global_menu.new-version-available")} /> <FormListHeader text={t("global_menu.new-version-available")} />
<MenuItem command={() => window.open("https://github.com/TriliumNext/Trilium/releases/latest")} <MenuItem command={() => window.open("https://github.com/TriliumNext/Trilium/releases/latest")}
icon="bx bx-download" icon="bx bx-download"
text={t("global_menu.download-update", {latestVersion})} /> text={t("global_menu.download-update", {latestVersion})} />
</>} </>}
{!isElectron() && <BrowserOnlyOptions />} {!isElectron() && <BrowserOnlyOptions />}
{glob.isDev && <DevelopmentOptions />} {glob.isDev && <DevelopmentOptions dropStart={!isVerticalLayout} />}
</Dropdown> </Dropdown>
); );
} }
function AdvancedMenu() { function AdvancedMenu({ dropStart }: { dropStart: boolean }) {
return ( return (
<FormDropdownSubmenu icon="bx bx-chip" title={t("global_menu.advanced")}> <FormDropdownSubmenu icon="bx bx-chip" title={t("global_menu.advanced")} dropStart={dropStart}>
<MenuItem command="showHiddenSubtree" icon="bx bx-hide" text={t("global_menu.show_hidden_subtree")} /> <MenuItem command="showHiddenSubtree" icon="bx bx-hide" text={t("global_menu.show_hidden_subtree")} />
<MenuItem command="showSearchHistory" icon="bx bx-search-alt" text={t("global_menu.open_search_history")} /> <MenuItem command="showSearchHistory" icon="bx bx-search-alt" text={t("global_menu.open_search_history")} />
<FormDropdownDivider /> <FormDropdownDivider />
@@ -103,13 +103,11 @@ function BrowserOnlyOptions() {
</>; </>;
} }
function DevelopmentOptions() { function DevelopmentOptions({ dropStart }: { dropStart: boolean }) {
const [ layoutOrientation ] = useTriliumOption("layoutOrientation");
return <> return <>
<FormDropdownDivider /> <FormDropdownDivider />
<FormListItem disabled>Development Options</FormListItem> <FormListItem disabled>Development Options</FormListItem>
<FormDropdownSubmenu icon="bx bx-test-tube" title="Experimental features" dropStart={layoutOrientation === "horizontal"}> <FormDropdownSubmenu icon="bx bx-test-tube" title="Experimental features" dropStart={dropStart}>
{experimentalFeatures.map((feature) => ( {experimentalFeatures.map((feature) => (
<ExperimentalFeatureToggle key={feature.id} experimentalFeature={feature as ExperimentalFeature} /> <ExperimentalFeatureToggle key={feature.id} experimentalFeature={feature as ExperimentalFeature} />
))} ))}
@@ -136,10 +134,10 @@ function SwitchToOptions() {
if (isElectron()) { if (isElectron()) {
return; return;
} else if (!isMobile()) { } else if (!isMobile()) {
return <MenuItem command="switchToMobileVersion" icon="bx bx-mobile" text={t("global_menu.switch_to_mobile_version")} /> return <MenuItem command="switchToMobileVersion" icon="bx bx-mobile" text={t("global_menu.switch_to_mobile_version")} />;
} else { }
return <MenuItem command="switchToDesktopVersion" icon="bx bx-desktop" text={t("global_menu.switch_to_desktop_version")} /> return <MenuItem command="switchToDesktopVersion" icon="bx bx-desktop" text={t("global_menu.switch_to_desktop_version")} />;
}
} }
function MenuItem({ icon, text, title, command, disabled, active }: MenuItemProps<KeyboardActionNames | CommandNames | (() => void)>) { function MenuItem({ icon, text, title, command, disabled, active }: MenuItemProps<KeyboardActionNames | CommandNames | (() => void)>) {
@@ -150,7 +148,7 @@ function MenuItem({ icon, text, title, command, disabled, active }: MenuItemProp
onClick={typeof command === "function" ? command : undefined} onClick={typeof command === "function" ? command : undefined}
disabled={disabled} disabled={disabled}
active={active} active={active}
>{text}</FormListItem> >{text}</FormListItem>;
} }
function KeyboardActionMenuItem({ text, command, ...props }: MenuItemProps<KeyboardActionNames>) { function KeyboardActionMenuItem({ text, command, ...props }: MenuItemProps<KeyboardActionNames>) {
@@ -158,7 +156,7 @@ function KeyboardActionMenuItem({ text, command, ...props }: MenuItemProps<Keybo
{...props} {...props}
command={command} command={command}
text={<>{text} <KeyboardShortcut actionName={command as KeyboardActionNames} /></>} text={<>{text} <KeyboardShortcut actionName={command as KeyboardActionNames} /></>}
/> />;
} }
function VerticalLayoutIcon() { function VerticalLayoutIcon() {
@@ -181,7 +179,7 @@ function VerticalLayoutIcon() {
<path className="st8" d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z"/> <path className="st8" d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z"/>
</g> </g>
</svg> </svg>
) );
} }
function ZoomControls({ parentComponent }: { parentComponent?: Component | null }) { function ZoomControls({ parentComponent }: { parentComponent?: Component | null }) {
@@ -205,7 +203,7 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
}} }}
className={`dropdown-item-button ${icon}`} className={`dropdown-item-button ${icon}`}
>{children}</a> >{children}</a>
) );
} }
return isElectron() ? ( return isElectron() ? (
@@ -246,7 +244,7 @@ function ToggleWindowOnTop() {
setIsAlwaysOnTop(newState); setIsAlwaysOnTop(newState);
}} }}
/> />
) );
} }
function useTriliumUpdateStatus() { function useTriliumUpdateStatus() {
@@ -257,7 +255,7 @@ function useTriliumUpdateStatus() {
async function updateVersionStatus() { async function updateVersionStatus() {
const RELEASES_API_URL = "https://api.github.com/repos/TriliumNext/Trilium/releases/latest"; const RELEASES_API_URL = "https://api.github.com/repos/TriliumNext/Trilium/releases/latest";
let latestVersion: string | undefined = undefined; let latestVersion: string | undefined;
try { try {
const resp = await fetch(RELEASES_API_URL); const resp = await fetch(RELEASES_API_URL);
const data = await resp.json(); const data = await resp.json();