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

fix(client): global menu blur-behind not working

Browse Source
This commit is contained in:
Elian Doran 2025-09-18 12:36:39 +03:00
parent 9dcf46cbb3
commit ba740eff9b
No known key found for this signature in database
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,9 +34,10 @@ 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 bx-sync global-menu-button-update-available-button" title={t("update_available.update_available")}></span> <span className="bx bx-sync global-menu-button-update-available-button" title={t("update_available.update_available")}></span>
</div>} </div>}
</>} </>}
noDropdownListStyle
> >
<MenuItem command="openNewWindow" icon="bx bx-window-open" text={t("global_menu.open_new_window")} /> <MenuItem command="openNewWindow" icon="bx bx-window-open" text={t("global_menu.open_new_window")} />
@ -47,8 +48,8 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
<ToggleWindowOnTop /> <ToggleWindowOnTop />
<KeyboardActionMenuItem command="toggleZenMode" icon="bx bxs-yin-yang" text={t("global_menu.toggle-zen-mode")} /> <KeyboardActionMenuItem command="toggleZenMode" icon="bx bxs-yin-yang" text={t("global_menu.toggle-zen-mode")} />
<FormDropdownDivider /> <FormDropdownDivider />
<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 />
<MenuItem command="showOptions" icon="bx bx-cog" text={t("global_menu.options")} /> <MenuItem command="showOptions" icon="bx bx-cog" text={t("global_menu.options")} />
@ -117,7 +118,7 @@ function KeyboardActionMenuItem({ text, command, ...props }: MenuItemProps<Keybo
/> />
} }
function VerticalLayoutIcon() { function VerticalLayoutIcon() {
const logoRef = useRef<SVGSVGElement>(null); const logoRef = useRef<SVGSVGElement>(null);
useStaticTooltip(logoRef); useStaticTooltip(logoRef);
@ -140,7 +141,7 @@ function VerticalLayoutIcon() {
) )
} }
function ZoomControls({ parentComponent }: { parentComponent?: Component | null }) { function ZoomControls({ parentComponent }: { parentComponent?: Component | null }) {
const [ zoomLevel, setZoomLevel ] = useState(100); const [ zoomLevel, setZoomLevel ] = useState(100);
function updateZoomState() { function updateZoomState() {
@ -169,7 +170,7 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
>{children}</a> >{children}</a>
) )
} }
return isElectron() ? ( return isElectron() ? (
<FormListItem <FormListItem
icon="bx bx-empty" icon="bx bx-empty"
@ -199,7 +200,7 @@ function ToggleWindowOnTop() {
<MenuItem <MenuItem
icon="bx bx-pin" icon="bx bx-pin"
text={t("title_bar_buttons.window-on-top")} text={t("title_bar_buttons.window-on-top")}
active={isAlwaysOnTop} active={isAlwaysOnTop}
command={() => { command={() => {
const newState = !isAlwaysOnTop; const newState = !isAlwaysOnTop;
focusedWindow?.setAlwaysOnTop(newState); focusedWindow?.setAlwaysOnTop(newState);
@ -213,8 +214,8 @@ function useTriliumUpdateStatus() {
const [ latestVersion, setLatestVersion ] = useState<string>(); const [ latestVersion, setLatestVersion ] = useState<string>();
const [ checkForUpdates ] = useTriliumOptionBool("checkForUpdates"); const [ checkForUpdates ] = useTriliumOptionBool("checkForUpdates");
const isUpdateAvailable = utils.isUpdateAvailable(latestVersion, glob.triliumVersion); const isUpdateAvailable = utils.isUpdateAvailable(latestVersion, glob.triliumVersion);
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";
const resp = await fetch(RELEASES_API_URL); const resp = await fetch(RELEASES_API_URL);
@ -236,4 +237,4 @@ function useTriliumUpdateStatus() {
}, [ checkForUpdates ]); }, [ checkForUpdates ]);
return { isUpdateAvailable, latestVersion }; return { isUpdateAvailable, latestVersion };
} }

13
apps/client/src/widgets/react/Dropdown.tsx
View File

@ -16,12 +16,13 @@ export interface DropdownProps {
/** If set to true, then the dropdown button will be considered an icon action (without normal border and sized for icons only). */ /** If set to true, then the dropdown button will be considered an icon action (without normal border and sized for icons only). */
iconAction?: boolean; iconAction?: boolean;
noSelectButtonStyle?: boolean; noSelectButtonStyle?: boolean;
noDropdownListStyle?: boolean;
disabled?: boolean; disabled?: boolean;
text?: ComponentChildren; text?: ComponentChildren;
forceShown?: boolean; forceShown?: boolean;
} }
export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, forceShown }: DropdownProps) { export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown }: DropdownProps) {
const dropdownRef = useRef<HTMLDivElement | null>(null); const dropdownRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null); const triggerRef = useRef<HTMLButtonElement | null>(null);
@ -29,7 +30,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
useEffect(() => { useEffect(() => {
if (!triggerRef.current) return; if (!triggerRef.current) return;
const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current); const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current);
if (forceShown) { if (forceShown) {
dropdown.show(); dropdown.show();
@ -48,11 +49,11 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
useEffect(() => { useEffect(() => {
if (!dropdownRef.current) return; if (!dropdownRef.current) return;
const $dropdown = $(dropdownRef.current); const $dropdown = $(dropdownRef.current);
$dropdown.on("show.bs.dropdown", onShown); $dropdown.on("show.bs.dropdown", onShown);
$dropdown.on("hide.bs.dropdown", onHidden); $dropdown.on("hide.bs.dropdown", onHidden);
// Add proper cleanup // Add proper cleanup
return () => { return () => {
$dropdown.off("show.bs.dropdown", onShown); $dropdown.off("show.bs.dropdown", onShown);
@ -81,7 +82,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
</button> </button>
<ul <ul
class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} tn-dropdown-list`} class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} ${!noDropdownListStyle ? "tn-dropdown-list" : ""}`}
style={dropdownContainerStyle} style={dropdownContainerStyle}
aria-labelledby={ariaId} aria-labelledby={ariaId}
> >
@ -89,4 +90,4 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
</ul> </ul>
</div> </div>
) )
} }