mirror of
https://github.com/zadam/trilium.git
synced 2025-12-12 10:24:23 +01:00
feat(note_bars/collection): support number fields
This commit is contained in:
parent
e766b82418
commit
00df3c3d1f
@ -5,10 +5,11 @@ import Dropdown from "../react/Dropdown";
|
||||
import { FormDropdownDivider, FormDropdownSubmenu, FormListItem, FormListToggleableItem } from "../react/FormList";
|
||||
import Icon from "../react/Icon";
|
||||
import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
|
||||
import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
|
||||
import { useNoteLabelBoolean } from "../react/hooks";
|
||||
import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, NumberProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
|
||||
import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
|
||||
import { useContext } from "preact/hooks";
|
||||
import { ParentComponent } from "../react/react_utils";
|
||||
import FormTextBox from "../react/FormTextBox";
|
||||
|
||||
const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
|
||||
grid: "bx bxs-grid",
|
||||
@ -83,6 +84,8 @@ function ViewProperty({ note, property }: { note: FNote, property: BookProperty
|
||||
return <SplitButtonPropertyView note={note} property={property} />;
|
||||
case "checkbox":
|
||||
return <CheckBoxPropertyView note={note} property={property} />;
|
||||
case "number":
|
||||
return <NumberPropertyView note={note} property={property} />;
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,6 +126,29 @@ function SplitButtonPropertyView({ note, property }: { note: FNote, property: Sp
|
||||
);
|
||||
}
|
||||
|
||||
function NumberPropertyView({ note, property }: { note: FNote, property: NumberProperty }) {
|
||||
//@ts-expect-error Interop with text box which takes in string values even for numbers.
|
||||
const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
|
||||
const disabled = property.disabled?.(note);
|
||||
|
||||
return (
|
||||
<FormListItem
|
||||
icon={property.icon}
|
||||
disabled={disabled}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{property.label}
|
||||
<FormTextBox
|
||||
type="number"
|
||||
currentValue={value ?? ""} onChange={setValue}
|
||||
style={{ width: (property.width ?? 100) }}
|
||||
min={property.min ?? 0}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</FormListItem>
|
||||
);
|
||||
}
|
||||
|
||||
function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
|
||||
const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
|
||||
return (
|
||||
|
||||
@ -37,6 +37,15 @@ body.experimental-feature-new-layout {
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
|
||||
.title-details {
|
||||
.dropdown-menu {
|
||||
input.form-control {
|
||||
padding: 2px 8px;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-row {
|
||||
margin-left: 12px;
|
||||
|
||||
|
||||
@ -155,7 +155,7 @@ function NumberPropertyView({ note, property }: { note: FNote, property: NumberP
|
||||
<FormTextBox
|
||||
type="number"
|
||||
currentValue={value ?? ""} onChange={setValue}
|
||||
style={{ width: (property.width ?? 100) + "px" }}
|
||||
style={{ width: (property.width ?? 100) }}
|
||||
min={property.min ?? 0}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
@ -41,6 +41,7 @@ export interface NumberProperty {
|
||||
bindToLabel: FilterLabelsByType<number>;
|
||||
width?: number;
|
||||
min?: number;
|
||||
icon?: string;
|
||||
disabled?: (note: FNote) => boolean;
|
||||
}
|
||||
|
||||
@ -160,6 +161,7 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
|
||||
properties: [
|
||||
{
|
||||
label: t("book_properties_config.max-nesting-depth"),
|
||||
icon: "bx bx-subdirectory-right",
|
||||
type: "number",
|
||||
bindToLabel: "maxNestingDepth",
|
||||
width: 65,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user