gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 05:28:59 +01:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat(react/ribbon): improve editability select

Browse Source
This commit is contained in:
Elian Doran 2025-08-21 22:24:35 +03:00
parent f772f59d7c
commit da4810672d
No known key found for this signature in database
5 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@ import { CSSProperties } from "preact/compat";
import { useCallback, useEffect, useRef, useState } from "preact/hooks"; import { useCallback, useEffect, useRef, useState } from "preact/hooks";
import { useUniqueName } from "./hooks"; import { useUniqueName } from "./hooks";
interface DropdownProps { export interface DropdownProps {
className?: string; className?: string;
buttonClassName?: string; buttonClassName?: string;
isStatic?: boolean; isStatic?: boolean;

8
apps/client/src/widgets/react/FormDropdownList.tsx
View File

@ -1,7 +1,7 @@
import Dropdown from "./Dropdown"; import Dropdown, { DropdownProps } from "./Dropdown";
import { FormListItem } from "./FormList"; import { FormListItem } from "./FormList";
interface FormDropdownList<T> { interface FormDropdownList<T> extends Omit<DropdownProps, "children"> {
values: T[]; values: T[];
keyProperty: keyof T; keyProperty: keyof T;
titleProperty: keyof T; titleProperty: keyof T;
@ -10,11 +10,11 @@ interface FormDropdownList<T> {
onChange(newValue: string): void; onChange(newValue: string): void;
} }
export default function FormDropdownList<T>({ values, keyProperty, titleProperty, descriptionProperty, currentValue, onChange }: FormDropdownList<T>) { export default function FormDropdownList<T>({ values, keyProperty, titleProperty, descriptionProperty, currentValue, onChange, ...restProps }: FormDropdownList<T>) {
const currentValueData = values.find(value => value[keyProperty] === currentValue); const currentValueData = values.find(value => value[keyProperty] === currentValue);
return ( return (
<Dropdown text={currentValueData?.[titleProperty] ?? ""}> <Dropdown text={currentValueData?.[titleProperty] ?? ""} {...restProps}>
{values.map(item => ( {values.map(item => (
<FormListItem <FormListItem
onClick={() => onChange(item[keyProperty] as string)} onClick={() => onChange(item[keyProperty] as string)}

4
apps/client/src/widgets/react/FormList.css
View File

@ -2,4 +2,8 @@
font-size: small; font-size: small;
color: var(--muted-text-color); color: var(--muted-text-color);
white-space: normal; white-space: normal;
}
.dropdown-item span.bx {
flex-shrink: 0;
} }

1
apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
View File

@ -150,6 +150,7 @@ function EditabilitySelect({ note }: { note?: FNote | null }) {
<span>{t("basic_properties.editable")}:</span> &nbsp; <span>{t("basic_properties.editable")}:</span> &nbsp;
<FormDropdownList <FormDropdownList
className="editability-dropdown"
values={options} values={options}
currentValue={ readOnly ? "readOnly" : autoReadOnlyDisabled ? "autoReadOnlyDisabled" : "auto" } currentValue={ readOnly ? "readOnly" : autoReadOnlyDisabled ? "autoReadOnlyDisabled" : "auto" }
keyProperty="value" titleProperty="label" descriptionProperty="description" keyProperty="value" titleProperty="label" descriptionProperty="description"

4
apps/client/src/widgets/ribbon/style.css
View File

@ -120,4 +120,8 @@
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
}
.editability-dropdown {
width: 300px;
} }