gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(promoted_attributes): better indicate no value

Browse Source
This commit is contained in:
Elian Doran 2025-07-26 10:12:46 +03:00
parent db3581eb26
commit b8e813f7bd
No known key found for this signature in database
1 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
apps/client/src/widgets/ribbon_widgets/promoted_attributes.ts
View File

@ -80,11 +80,29 @@ const TPL = /*html*/`
.promoted-attribute-cell input[type="color"]::-webkit-color-swatch-wrapper { .promoted-attribute-cell input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;
} }
.promoted-attribute-cell input[type="color"]::-webkit-color-swatch { .promoted-attribute-cell input[type="color"]::-webkit-color-swatch {
border: none; border: none;
border-radius: 25%; border-radius: 25%;
} }
.promoted-attribute-label-color input[type="hidden"][value=""] + input[type="color"] {
position: relative;
opacity: 0.5;
}
.promoted-attribute-label-color input[type="hidden"][value=""] + input[type="color"]:after {
content: "";
position: absolute;
top: 10px;
left: 0px;
right: 0;
height: 2px;
background: rgba(0, 0, 0, 0.5);
transform: rotate(45deg);
pointer-events: none;
}
</style> </style>
<div class="promoted-attributes-container"></div> <div class="promoted-attributes-container"></div>
@ -285,19 +303,15 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
$input.after($openButton); $input.after($openButton);
} else if (definition.labelType === "color") { } else if (definition.labelType === "color") {
const defaultColor = "#ffffff";
$input.prop("type", "hidden"); $input.prop("type", "hidden");
const setValue = (color: string, event: JQuery.TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => { $input.val(valueAttr.value ?? "");
$input.val(color);
event.target = $input[0]; // Set the event target to the main input
this.promotedAttributeChanged(event);
};
// We insert a separate input since the color input does not support empty 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. // This is a workaround to allow clearing the color input.
const $colorInput = $("<input>") const $colorInput = $("<input>")
.prop("type", "color") .prop("type", "color")
.prop("value", valueAttr.value ?? "#000000") .prop("value", valueAttr.value || defaultColor)
.addClass("form-control promoted-attribute-input") .addClass("form-control promoted-attribute-input")
.on("change", e => setValue((e.target as HTMLInputElement).value, e)); .on("change", e => setValue((e.target as HTMLInputElement).value, e));
$input.after($colorInput); $input.after($colorInput);
@ -307,6 +321,15 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
.prop("title", t("promoted_attributes.remove_color")) .prop("title", t("promoted_attributes.remove_color"))
.on("click", e => setValue("", e)); .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); $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 }));