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

style/global menu: improve the full screen / zoom buttons, refactor

Browse Source
This commit is contained in:
Adorian Doran 2025-09-21 15:13:08 +03:00
parent 5c27e96960
commit 6f565afd44
5 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/stylesheets/style.css
View File

@ -415,7 +415,7 @@ body.desktop .tabulator-popup-container {
} }
.dropdown-menu a:hover:not(.disabled), .dropdown-menu a:hover:not(.disabled),
.dropdown-item:hover:not(.disabled, .dropdown-item-container), .dropdown-item:hover:not(.disabled, .dropdown-container-item),
.tabulator-menu-item:hover { .tabulator-menu-item:hover {
color: var(--hover-item-text-color) !important; color: var(--hover-item-text-color) !important;
background-color: var(--hover-item-background-color) !important; background-color: var(--hover-item-background-color) !important;
@ -423,9 +423,9 @@ body.desktop .tabulator-popup-container {
cursor: pointer; cursor: pointer;
} }
.dropdown-item-container, .dropdown-container-item,
.dropdown-item-container:hover, .dropdown-item.dropdown-container-item:hover,
.dropdown-item-container:active { .dropdown-container-item:active {
background: transparent; background: transparent;
cursor: default; cursor: default;
} }

14
apps/client/src/stylesheets/theme-next/base.css
View File

@ -295,6 +295,20 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
transform: rotate(270deg); transform: rotate(270deg);
} }
/* Dropdown item button (used in zoom buttons in global menu) */
li.dropdown-item a.dropdown-item-button {
border: unset;
}
li.dropdown-item a.dropdown-item-button.bx {
color: var(--menu-text-color) !important;
}
li.dropdown-item a.dropdown-item-button:focus-visible {
outline: 2px solid var(--input-focus-outline-color) !important;
}
/* /*
* TOASTS * TOASTS
*/ */

12
apps/client/src/stylesheets/theme-next/shell.css
View File

@ -304,18 +304,6 @@ body.layout-horizontal > .horizontal {
color: var(--tooltip-foreground-color) !important; color: var(--tooltip-foreground-color) !important;
} }
/*
* Global menu
*/
.global-menu div.zoom-buttons a {
border: unset;
}
.global-menu div.zoom-buttons a.bx {
color: var(--menu-text-color) !important;
}
/* /*
* Calendar * Calendar
*/ */

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

@ -161,12 +161,13 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
return ( return (
<a <a
ref={linkRef} ref={linkRef}
tabIndex={0}
onClick={(e) => { onClick={(e) => {
parentComponent?.triggerCommand(command); parentComponent?.triggerCommand(command);
setTimeout(() => updateZoomState(), 300) setTimeout(() => updateZoomState(), 300)
e.stopPropagation(); e.stopPropagation();
}} }}
className={icon} className={`dropdown-item-button ${icon}`}
>{children}</a> >{children}</a>
) )
} }
@ -174,6 +175,7 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
return isElectron() ? ( return isElectron() ? (
<FormListItem <FormListItem
icon="bx bx-empty" icon="bx bx-empty"
container
className="zoom-container" className="zoom-container"
> >
{t("global_menu.zoom")} {t("global_menu.zoom")}

7
apps/client/src/widgets/react/FormList.tsx
View File

@ -84,6 +84,7 @@ interface FormListItemOpts {
disabled?: boolean; disabled?: boolean;
checked?: boolean | null; checked?: boolean | null;
selected?: boolean; selected?: boolean;
container?: boolean;
onClick?: (e: MouseEvent) => void; onClick?: (e: MouseEvent) => void;
triggerCommand?: CommandNames; triggerCommand?: CommandNames;
description?: string; description?: string;
@ -96,7 +97,7 @@ const TOOLTIP_CONFIG: Partial<Tooltip.Options> = {
fallbackPlacements: [ "right" ] fallbackPlacements: [ "right" ]
} }
export function FormListItem({ className, icon, value, title, active, disabled, checked, onClick, selected, rtl, triggerCommand, description, ...contentProps }: FormListItemOpts) { export function FormListItem({ className, icon, value, title, active, disabled, checked, container, onClick, selected, rtl, triggerCommand, description, ...contentProps }: FormListItemOpts) {
const itemRef = useRef<HTMLLIElement>(null); const itemRef = useRef<HTMLLIElement>(null);
if (checked) { if (checked) {
@ -108,9 +109,9 @@ export function FormListItem({ className, icon, value, title, active, disabled,
return ( return (
<li <li
ref={itemRef} ref={itemRef}
class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""} ${className ?? ""}`} class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""} ${container ? "dropdown-container-item": ""} ${className ?? ""}`}
data-value={value} title={title} data-value={value} title={title}
tabIndex={0} tabIndex={container ? -1 : 0}
onClick={onClick} onClick={onClick}
data-trigger-command={triggerCommand} data-trigger-command={triggerCommand}
dir={rtl ? "rtl" : undefined} dir={rtl ? "rtl" : undefined}