gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 15:49:00 +02:00
Code Issues Actions 17 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>
) )
} }

32
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,18 +117,28 @@ 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;
<div> {description ? (
{children} <div>
{badges && badges.map(({ className, text }) => ( <FormListContent description={description} {...contentProps} />
<span className={`badge ${className ?? ""}`}>{text}</span> </div>
))} ) : (
{description && <div className="description">{description}</div>} <FormListContent description={description} {...contentProps} />
</div> )}
{outsideChildren} {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 { interface FormListHeaderOpts {
text: string; text: string;
} }