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%;
}
.promoted-attribute-label-number input {
text-align: right;
width: 120px;
}
.promoted-attribute-label-color input[type="hidden"][value=""] + input[type="color"] {
position: relative;
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 server from "../services/server";
import FNote from "../entities/fnote";
import { HTMLInputTypeAttribute, TargetedEvent } from "preact";
import { HTMLInputTypeAttribute, InputHTMLAttributes, TargetedEvent } from "preact";
import tree from "../services/tree";
interface Cell {
@ -113,7 +113,8 @@ function PromotedAttributeCell(props: CellProps) {
}, [ props.shouldFocus ]);
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>
<div className="input-group">
<LabelInput inputId={inputId} {...props} />
@ -138,6 +139,7 @@ const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute> = {
function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
const { valueAttr, definition, definitionAttr } = props.cell;
const onChangeListener = buildPromotedAttributeChangedListener({...props});
const extraInputProps: InputHTMLAttributes = {};
useEffect(() => {
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 (
<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-name={valueAttr.name}
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") {
$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") {
$input.wrap($(`<label class="tn-checkbox"></label>`));
$wrapper.find(".input-group").removeClass("input-group");