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 color picker

Browse Source
This commit is contained in:
Elian Doran 2025-11-23 12:21:29 +02:00
parent baf41eb104
commit 8d4e30a2e4
No known key found for this signature in database
2 changed files with 60 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
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, InputHTMLAttributes, TargetedEvent } from "preact"; import { HTMLInputTypeAttribute, InputHTMLAttributes, TargetedEvent, TargetedInputEvent } from "preact";
import tree from "../services/tree"; import tree from "../services/tree";
interface Cell { interface Cell {
@ -115,7 +115,7 @@ function PromotedAttributeCell(props: CellProps) {
return ( return (
<div className={clsx("promoted-attribute-cell", <div className={clsx("promoted-attribute-cell",
valueAttr.type === "label" ? `promoted-attribute-label-${definition.labelType}` : "promoted-attribute-relation")}> 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} />
</div> </div>
@ -159,19 +159,64 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
} }
return ( return (
<input <>
className="form-control promoted-attribute-input" <input
tabIndex={200 + definitionAttr.position} className="form-control promoted-attribute-input"
id={inputId} tabIndex={200 + definitionAttr.position}
type={LABEL_MAPPINGS[definition.labelType ?? "text"]} id={inputId}
value={valueAttr.value} type={LABEL_MAPPINGS[definition.labelType ?? "text"]}
placeholder={t("promoted_attributes.unset-field-placeholder")} value={valueAttr.value}
data-attribute-id={valueAttr.attributeId} placeholder={t("promoted_attributes.unset-field-placeholder")}
data-attribute-type={valueAttr.type} data-attribute-id={valueAttr.attributeId}
data-attribute-name={valueAttr.name} data-attribute-type={valueAttr.type}
onChange={onChangeListener} data-attribute-name={valueAttr.name}
{...extraInputProps} onChange={onChangeListener}
/> {...extraInputProps}
/>
{ definition.labelType === "color" && <ColorPicker {...props} onChange={onChangeListener} inputId={inputId} />}
</>
);
}
// We insert a separate input since the color input does not support empty value.
// This is a workaround to allow clearing the color input.
function ColorPicker({ cell, onChange, inputId }: CellProps & {
onChange: (e: TargetedEvent<HTMLInputElement, Event>) => Promise<void>,
inputId: string;
}) {
const defaultColor = "#ffffff";
const colorInputRef = useRef<HTMLInputElement>(null);
return (
<>
<input
ref={colorInputRef}
className="form-control promoted-attribute-input"
type="color"
value={cell.valueAttr.value || defaultColor}
onChange={onChange}
/>
<span
className="input-group-text bx bxs-tag-x"
title={t("promoted_attributes.remove_color")}
onClick={(e) => {
// Indicate to the user the color was reset.
if (colorInputRef.current) {
colorInputRef.current.value = defaultColor;
}
// Trigger the actual attribute change by injecting it into the hidden field.
const inputEl = document.getElementById(inputId) as HTMLInputElement | null;
if (!inputEl) return;
inputEl.value = "";
onChange({
...e,
target: inputEl
} as unknown as TargetedInputEvent<HTMLInputElement>);
}}
/>
</>
) )
} }

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

@ -39,35 +39,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
.on("click", () => window.open($input.val() as string, "_blank")); .on("click", () => window.open($input.val() as string, "_blank"));
$input.after($openButton); $input.after($openButton);
} else if (definition.labelType === "color") {
const defaultColor = "#ffffff";
$input.prop("type", "hidden");
$input.val(valueAttr.value ?? "");
// We insert a separate input since the color input does not support empty value.
// This is a workaround to allow clearing the color input.
const $colorInput = $("<input>")
.prop("type", "color")
.prop("value", valueAttr.value || defaultColor)
.addClass("form-control promoted-attribute-input")
.on("change", e => setValue((e.target as HTMLInputElement).value, e));
$input.after($colorInput);
const $clearButton = $("<span>")
.addClass("input-group-text bx bxs-tag-x")
.prop("title", t("promoted_attributes.remove_color"))
.on("click", e => setValue("", e));
const setValue = (color: string, event: JQuery.TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => {
$input.val(color);
if (!color) {
$colorInput.val(defaultColor);
}
event.target = $input[0]; // Set the event target to the main input
this.promotedAttributeChanged(event);
};
$colorInput.after($clearButton);
} else { } else {
ws.logError(t("promoted_attributes.unknown_label_type", { type: definition.labelType })); ws.logError(t("promoted_attributes.unknown_label_type", { type: definition.labelType }));
} }