gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-30 12:34:24 +01:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

style(mobile/context_menu): missing backdrop for global menu

Browse Source
This commit is contained in:
Elian Doran 2025-11-29 09:22:51 +02:00
parent 8ced689432
commit 2e6bdc225f
No known key found for this signature in database
3 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -308,6 +308,10 @@ body.mobile #context-menu-cover {
&.show {
background: rgba(0, 0, 0, 0.7);
}
&.global-menu-cover {
bottom: 54px;
}
}
body.mobile .dropdown-menu {

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

@ -26,6 +26,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
const isVerticalLayout = !isHorizontalLayout;
const parentComponent = useContext(ParentComponent);
const { isUpdateAvailable, latestVersion } = useTriliumUpdateStatus();
const isMobileLocal = isMobile();
return (
<Dropdown
@ -38,6 +39,8 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
</div>}
</>}
noDropdownListStyle
onShown={isMobileLocal ? () => document.getElementById("context-menu-cover")?.classList.add("show", "global-menu-cover") : undefined}
onHidden={isMobileLocal ? () => document.getElementById("context-menu-cover")?.classList.remove("show", "global-menu-cover") : undefined}
>
<MenuItem command="openNewWindow" icon="bx bx-window-open" text={t("global_menu.open_new_window")} />

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

@ -19,9 +19,11 @@ export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "c
disabled?: boolean;
text?: ComponentChildren;
forceShown?: boolean;
onShown?: () => void;
onHidden?: () => void;
}
export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown }: DropdownProps) {
export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden }: DropdownProps) {
const dropdownRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null);
@ -40,10 +42,12 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
const onShown = useCallback(() => {
setShown(true);
externalOnShown?.();
}, [])
const onHidden = useCallback(() => {
setShown(false);
externalOnHidden?.();
}, []);
useEffect(() => {