gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki 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
No known key found for this signature in database
2 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,13 +80,13 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
<span className="caret"></span>
</button>
<div
<ul
class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} tn-dropdown-list`}
style={dropdownContainerStyle}
aria-labelledby={ariaId}
>
{shown && children}
</div>
</ul>
</div>
)
}

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;
}