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

chore(react/promoted_attributes): improve boolean handling

Browse Source
This commit is contained in:
Elian Doran 2025-11-23 12:56:43 +02:00
parent 832d9a2ab8
commit 9c6cd80867
No known key found for this signature in database
3 changed files with 44 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/stylesheets/theme-next/shell.css
View File

@ -1428,9 +1428,7 @@ div.promoted-attribute-cell .tn-checkbox {
height: 1cap; height: 1cap;
} }
/* Relocate the checkbox before the label */
div.promoted-attribute-cell.promoted-attribute-label-boolean > div:first-of-type { div.promoted-attribute-cell.promoted-attribute-label-boolean > div:first-of-type {
order: -1;
margin-inline-end: 1.5em; margin-inline-end: 1.5em;
} }

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

@ -115,10 +115,8 @@ 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>{' '} {definition.labelType !== "boolean" && <label for={inputId}>{definition.promotedAlias ?? valueName}</label>}
<div className="input-group"> <LabelInput inputId={inputId} {...props} />
<LabelInput inputId={inputId} {...props} />
</div>
<ActionCell /> <ActionCell />
<MultiplicityCell {...props} /> <MultiplicityCell {...props} />
</div> </div>
@ -137,7 +135,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 { valueName, valueAttr, definition, definitionAttr } = props.cell;
const onChangeListener = buildPromotedAttributeChangedListener({...props}); const onChangeListener = buildPromotedAttributeChangedListener({...props});
const extraInputProps: InputHTMLAttributes = {}; const extraInputProps: InputHTMLAttributes = {};
@ -165,39 +163,49 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
} }
} }
return ( const inputNode = <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} />} if (definition.labelType === "boolean") {
{ definition.labelType === "url" && ( return <>
<InputButton <div>
className="open-external-link-button" <label className="tn-checkbox">{inputNode}</label>
icon="bx bx-window-open" </div>
title={t("promoted_attributes.open_external_link")} <label for={inputId}>{definition.promotedAlias ?? valueName}</label>
onClick={(e) => {
const inputEl = document.getElementById(inputId) as HTMLInputElement | null;
const url = inputEl?.value;
if (url) {
window.open(url, "_blank");
}
}}
/>
)}
</> </>
); } else {
return (
<div className="input-group">
{inputNode}
{ 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");
}
}}
/>
)}
</div>
);
}
} }

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

@ -1,18 +1,3 @@
import { t } from "../services/i18n.js";
import server from "../services/server.js";
import ws from "../services/ws.js";
import treeService from "../services/tree.js";
import noteAutocompleteService from "../services/note_autocomplete.js";
import NoteContextAwareWidget from "./note_context_aware_widget.js";
import attributeService from "../services/attributes.js";
import options from "../services/options.js";
import utils from "../services/utils.js";
import type FNote from "../entities/fnote.js";
import type { Attribute } from "../services/attribute_parser.js";
import type FAttribute from "../entities/fattribute.js";
import type { EventData } from "../components/app_context.js";
export default class PromotedAttributesWidget extends NoteContextAwareWidget { export default class PromotedAttributesWidget extends NoteContextAwareWidget {
async createPromotedAttributeCell(definitionAttr: FAttribute, valueAttr: Attribute, valueName: string) { async createPromotedAttributeCell(definitionAttr: FAttribute, valueAttr: Attribute, valueName: string) {