Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-30 01:36:24 +01:00
Code Issues Packages Projects Releases Activity

fix(react/global_menu): menu layout on mobile

Browse Source
This commit is contained in:
Elian Doran
2025-08-29 12:48:10 +03:00
parent 5e4f529b26
commit 168ff90e38
2 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -97,8 +97,8 @@ const TOOLTIP_CONFIG: Partial<Tooltip.Options> = {
fallbackPlacements: [ "right" ]
}
export function FormListItem({ className, children, icon, value, title, active, badges, disabled, checked, onClick, description, selected, rtl, triggerCommand, outsideChildren }: FormListItemOpts) {
const itemRef = useRef<HTMLAnchorElement>(null);
export function FormListItem({ className, icon, value, title, active, disabled, checked, onClick, selected, rtl, triggerCommand, outsideChildren, description, ...contentProps }: FormListItemOpts) {
const itemRef = useRef<HTMLLIElement>(null);
if (checked) {
icon = "bx bx-check";
@@ -107,7 +107,7 @@ export function FormListItem({ className, children, icon, value, title, active,
useStaticTooltip(itemRef, TOOLTIP_CONFIG);
return (
<a
<li
ref={itemRef}
class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""} ${className ?? ""}`}
data-value={value} title={title}
@@ -117,18 +117,28 @@ export function FormListItem({ className, children, icon, value, title, active,
dir={rtl ? "rtl" : undefined}
>
<Icon icon={icon} />&nbsp;
<div>
{children}
{badges && badges.map(({ className, text }) => (
<span className={`badge ${className ?? ""}`}>{text}</span>
))}
{description && <div className="description">{description}</div>}
</div>
{description ? (
<div>
<FormListContent description={description} {...contentProps} />
</div>
) : (
<FormListContent description={description} {...contentProps} />
)}
{outsideChildren}
</a>
</li>
);
}
function FormListContent({ children, badges, description }: Pick<FormListItemOpts, "children" | "badges" | "description">) {
return <>
{children}
{badges && badges.map(({ className, text }) => (
<span className={`badge ${className ?? ""}`}>{text}</span>
))}
{description && <div className="description">{description}</div>}
</>;
}
interface FormListHeaderOpts {
text: string;
}