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 12 Packages Projects Releases Wiki Activity

chore(react/promoted_attributes): handle URL open button

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

57
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, InputHTMLAttributes, TargetedEvent, TargetedInputEvent } from "preact";
import { HTMLInputTypeAttribute, InputHTMLAttributes, MouseEventHandler, TargetedEvent, TargetedInputEvent } from "preact";
import tree from "../services/tree";
interface Cell {
@ -150,12 +150,19 @@ 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;
switch (definition.labelType) {
case "number": {
let step = 1;
for (let i = 0; i < (definition.numberPrecision || 0) && i < 10; i++) {
step /= 10;
}
extraInputProps.step = step;
break;
}
case "url": {
extraInputProps.placeholder = t("promoted_attributes.url_placeholder");
break;
}
extraInputProps.step = step;
}
return (
@ -175,6 +182,20 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
/>
{ definition.labelType === "color" && <ColorPicker {...props} onChange={onChangeListener} inputId={inputId} />}
{ definition.labelType === "url" && (
<InputButton
className="open-external-link-button"
icon="bx bx-window-open"
title={t("promoted_attributes.open_external_link")}
onClick={(e) => {
const inputEl = document.getElementById(inputId) as HTMLInputElement | null;
const url = inputEl?.value;
if (url) {
window.open(url, "_blank");
}
}}
/>
)}
</>
);
}
@ -197,8 +218,8 @@ function ColorPicker({ cell, onChange, inputId }: CellProps & {
value={cell.valueAttr.value || defaultColor}
onChange={onChange}
/>
<span
className="input-group-text bx bxs-tag-x"
<InputButton
icon="bx bxs-tag-x"
title={t("promoted_attributes.remove_color")}
onClick={(e) => {
// Indicate to the user the color was reset.
@ -292,9 +313,8 @@ function MultiplicityCell({ cell, cells, setCells, setCellToFocus, note, compone
function PromotedActionButton({ icon, title, onClick }: {
icon: string,
title: string,
onClick: () => void
})
{
onClick: MouseEventHandler<HTMLSpanElement>
}) {
return (
<span
className={clsx("tn-tool-button pointer", icon)}
@ -304,6 +324,21 @@ function PromotedActionButton({ icon, title, onClick }: {
)
}
function InputButton({ icon, className, title, onClick }: {
icon: string;
className?: string;
title: string;
onClick: MouseEventHandler<HTMLSpanElement>;
}) {
return (
<span
className={clsx("input-group-text", className, icon)}
title={title}
onClick={onClick}
/>
)
}
function setupTextLabelAutocomplete(el: HTMLInputElement, valueAttr: Attribute, onChangeListener: TargetedEvent<HTMLInputElement, Event>) {
// no need to await for this, can be done asynchronously
const $input = $(el);

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

@ -30,15 +30,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
if (valueAttr.value === "true") {
$input.prop("checked", "checked");
}
} else if (definition.labelType === "url") {
$input.prop("placeholder", t("promoted_attributes.url_placeholder"));
const $openButton = $("<span>")
.addClass("input-group-text open-external-link-button bx bx-window-open")
.prop("title", t("promoted_attributes.open_external_link"))
.on("click", () => window.open($input.val() as string, "_blank"));
$input.after($openButton);
} else {
ws.logError(t("promoted_attributes.unknown_label_type", { type: definition.labelType }));
}