gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-27 17:49:02 +01:00
Code Issues Actions 11 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> <span className="caret"></span>
</button> </button>
<div <ul
class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} tn-dropdown-list`} class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} tn-dropdown-list`}
style={dropdownContainerStyle} style={dropdownContainerStyle}
aria-labelledby={ariaId} aria-labelledby={ariaId}
> >
{shown && children} {shown && children}
</div> </ul>
</div> </div>
) )
} }

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

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