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(context_menu): clicking on a submenu dismisses it

Browse Source
This commit is contained in:
Elian Doran
2025-12-15 07:51:53 +02:00
parent 17db2a6b38
commit 016389df68
2 changed files with 31 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -166,17 +166,30 @@ body.desktop .dropdown-submenu .dropdown-menu {
--menu-item-end-padding: 22px; --menu-item-end-padding: 22px;
--menu-item-vertical-padding: 2px; --menu-item-vertical-padding: 2px;
padding-top: var(--menu-item-vertical-padding) !important;
padding-bottom: var(--menu-item-vertical-padding) !important;
padding-inline-start: var(--menu-item-start-padding) !important;
padding-inline-end: var(--menu-item-end-padding) !important;
/* Note: the right padding should also accommodate the submenu arrow. */ /* Note: the right padding should also accommodate the submenu arrow. */
border-radius: 6px; border-radius: 6px;
cursor: default !important; cursor: default !important;
} }
body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item { .dropdown-item:not(.dropdown-submenu),
.dropdown-item.dropdown-submenu .dropdown-toggle,
.excalidraw .context-menu .context-menu-item {
padding-top: var(--menu-item-vertical-padding) !important;
padding-bottom: var(--menu-item-vertical-padding) !important;
padding-inline-start: var(--menu-item-start-padding) !important;
padding-inline-end: var(--menu-item-end-padding) !important;
}
.dropdown-item.dropdown-submenu {
padding: 0 !important;
.dropdown-toggle {
flex-grow: 1;
}
}
body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item:not(.dropdown-submenu),
body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item.dropdown-submenu .dropdown-toggle {
padding-inline-end: var(--menu-item-start-padding) !important; padding-inline-end: var(--menu-item-start-padding) !important;
padding-inline-start: var(--menu-item-end-padding) !important; padding-inline-start: var(--menu-item-end-padding) !important;
} }

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

@@ -1,13 +1,15 @@
import { Dropdown as BootstrapDropdown, Tooltip } from "bootstrap";
import { ComponentChildren } from "preact";
import Icon from "./Icon";
import { useEffect, useMemo, useRef, useState, type CSSProperties } from "preact/compat";
import "./FormList.css"; import "./FormList.css";
import { CommandNames } from "../../components/app_context";
import { useStaticTooltip } from "./hooks"; import { Dropdown as BootstrapDropdown, Tooltip } from "bootstrap";
import { handleRightToLeftPlacement, isMobile, openInAppHelpFromUrl } from "../../services/utils";
import clsx from "clsx"; import clsx from "clsx";
import { ComponentChildren } from "preact";
import { type CSSProperties,useEffect, useMemo, useRef, useState } from "preact/compat";
import { CommandNames } from "../../components/app_context";
import { handleRightToLeftPlacement, isMobile, openInAppHelpFromUrl } from "../../services/utils";
import FormToggle from "./FormToggle"; import FormToggle from "./FormToggle";
import { useStaticTooltip } from "./hooks";
import Icon from "./Icon";
interface FormListOpts { interface FormListOpts {
children: ComponentChildren; children: ComponentChildren;
@@ -33,7 +35,7 @@ export default function FormList({ children, onSelect, style, fullHeight, wrappe
return () => { return () => {
$wrapperRef.off("hide.bs.dropdown"); $wrapperRef.off("hide.bs.dropdown");
dropdown.dispose(); dropdown.dispose();
} };
}, [ triggerRef, wrapperRef ]); }, [ triggerRef, wrapperRef ]);
const builtinStyles = useMemo(() => { const builtinStyles = useMemo(() => {
@@ -51,8 +53,7 @@ export default function FormList({ children, onSelect, style, fullHeight, wrappe
<button <button
ref={triggerRef} ref={triggerRef}
type="button" style="display: none;" type="button" style="display: none;"
data-bs-toggle="dropdown" data-bs-display="static"> data-bs-toggle="dropdown" data-bs-display="static" />
</button>
<div class="dropdown-menu static show" style={{ <div class="dropdown-menu static show" style={{
...style ?? {}, ...style ?? {},
@@ -199,7 +200,7 @@ export function FormListHeader({ text }: FormListHeaderOpts) {
<li> <li>
<h6 className="dropdown-header">{text}</h6> <h6 className="dropdown-header">{text}</h6>
</li> </li>
) );
} }
export function FormDropdownDivider() { export function FormDropdownDivider() {