gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-26 02:24:23 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

chore(react/promoted_attributes): handle input steps

Browse Source
This commit is contained in:
Elian Doran 2025-11-23 12:11:18 +02:00
parent 7f0fe1681b
commit baf41eb104
No known key found for this signature in database
3 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/PromotedAttributes.css
View File

@ -73,6 +73,11 @@ body.mobile .promoted-attributes-widget {
border-radius: 25%; border-radius: 25%;
} }
.promoted-attribute-label-number input {
text-align: right;
width: 120px;
}
.promoted-attribute-label-color input[type="hidden"][value=""] + input[type="color"] { .promoted-attribute-label-color input[type="hidden"][value=""] + input[type="color"] {
position: relative; position: relative;
opacity: 0.5; opacity: 0.5;

15
apps/client/src/widgets/PromotedAttributes.tsx
View File

@ -8,7 +8,7 @@ import { t } from "../services/i18n";
import { DefinitionObject, LabelType } from "../services/promoted_attribute_definition_parser"; import { DefinitionObject, LabelType } from "../services/promoted_attribute_definition_parser";
import server from "../services/server"; import server from "../services/server";
import FNote from "../entities/fnote"; import FNote from "../entities/fnote";
import { HTMLInputTypeAttribute, TargetedEvent } from "preact"; import { HTMLInputTypeAttribute, InputHTMLAttributes, TargetedEvent } from "preact";
import tree from "../services/tree"; import tree from "../services/tree";
interface Cell { interface Cell {
@ -113,7 +113,8 @@ function PromotedAttributeCell(props: CellProps) {
}, [ props.shouldFocus ]); }, [ props.shouldFocus ]);
return ( return (
<div className="promoted-attribute-cell"> <div className={clsx("promoted-attribute-cell",
valueAttr.type === "label" ? `promoted-attribute-label-${definition.labelType}` : "promoted-attribute-relation")}>
<label for={inputId}>{definition.promotedAlias ?? valueName}</label> <label for={inputId}>{definition.promotedAlias ?? valueName}</label>
<div className="input-group"> <div className="input-group">
<LabelInput inputId={inputId} {...props} /> <LabelInput inputId={inputId} {...props} />
@ -138,6 +139,7 @@ const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute> = {
function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) { function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
const { valueAttr, definition, definitionAttr } = props.cell; const { valueAttr, definition, definitionAttr } = props.cell;
const onChangeListener = buildPromotedAttributeChangedListener({...props}); const onChangeListener = buildPromotedAttributeChangedListener({...props});
const extraInputProps: InputHTMLAttributes = {};
useEffect(() => { useEffect(() => {
if (definition.labelType === "text") { if (definition.labelType === "text") {
@ -148,6 +150,14 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
} }
}, []); }, []);
if (definition.labelType === "number") {
let step = 1;
for (let i = 0; i < (definition.numberPrecision || 0) && i < 10; i++) {
step /= 10;
}
extraInputProps.step = step;
}
return ( return (
<input <input
className="form-control promoted-attribute-input" className="form-control promoted-attribute-input"
@ -160,6 +170,7 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
data-attribute-type={valueAttr.type} data-attribute-type={valueAttr.type}
data-attribute-name={valueAttr.name} data-attribute-name={valueAttr.name}
onChange={onChangeListener} onChange={onChangeListener}
{...extraInputProps}
/> />
) )
} }

10
apps/client/src/widgets/promoted_attributes.ts
View File

@ -23,16 +23,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
if (valueAttr.type === "label") { if (valueAttr.type === "label") {
$wrapper.addClass(`promoted-attribute-label-${definition.labelType}`); $wrapper.addClass(`promoted-attribute-label-${definition.labelType}`);
if (definition.labelType === "text") {
} else if (definition.labelType === "number") {
let step = 1;
for (let i = 0; i < (definition.numberPrecision || 0) && i < 10; i++) {
step /= 10;
}
$input.prop("step", step);
$input.css("text-align", "right").css("width", "120");
} else if (definition.labelType === "boolean") { } else if (definition.labelType === "boolean") {
$input.wrap($(`<label class="tn-checkbox"></label>`)); $input.wrap($(`<label class="tn-checkbox"></label>`));
$wrapper.find(".input-group").removeClass("input-group"); $wrapper.find(".input-group").removeClass("input-group");