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 { &.show {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
} }
&.global-menu-cover {
bottom: 54px;
}
} }
body.mobile .dropdown-menu { 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 isVerticalLayout = !isHorizontalLayout;
const parentComponent = useContext(ParentComponent); const parentComponent = useContext(ParentComponent);
const { isUpdateAvailable, latestVersion } = useTriliumUpdateStatus(); const { isUpdateAvailable, latestVersion } = useTriliumUpdateStatus();
const isMobileLocal = isMobile();
return ( return (
<Dropdown <Dropdown
@ -38,6 +39,8 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
</div>} </div>}
</>} </>}
noDropdownListStyle 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")} /> <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; disabled?: boolean;
text?: ComponentChildren; text?: ComponentChildren;
forceShown?: boolean; 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 dropdownRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null); const triggerRef = useRef<HTMLButtonElement | null>(null);
@ -40,10 +42,12 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
const onShown = useCallback(() => { const onShown = useCallback(() => {
setShown(true); setShown(true);
externalOnShown?.();
}, []) }, [])
const onHidden = useCallback(() => { const onHidden = useCallback(() => {
setShown(false); setShown(false);
externalOnHidden?.();
}, []); }, []);
useEffect(() => { useEffect(() => {