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;
}
/* Relocate the checkbox before the label */
div.promoted-attribute-cell.promoted-attribute-label-boolean > div:first-of-type {
order: -1;
margin-inline-end: 1.5em;
}

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

@ -115,10 +115,8 @@ function PromotedAttributeCell(props: CellProps) {
return (
<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">
{definition.labelType !== "boolean" && <label for={inputId}>{definition.promotedAlias ?? valueName}</label>}
<LabelInput inputId={inputId} {...props} />
</div>
<ActionCell />
<MultiplicityCell {...props} />
</div>
@ -137,7 +135,7 @@ const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute> = {
};
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 extraInputProps: InputHTMLAttributes = {};
@ -165,9 +163,7 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
}
}
return (
<>
<input
const inputNode = <input
className="form-control promoted-attribute-input"
tabIndex={200 + definitionAttr.position}
id={inputId}
@ -179,8 +175,19 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
data-attribute-name={valueAttr.name}
onChange={onChangeListener}
{...extraInputProps}
/>
/>;
if (definition.labelType === "boolean") {
return <>
<div>
<label className="tn-checkbox">{inputNode}</label>
</div>
<label for={inputId}>{definition.promotedAlias ?? valueName}</label>
</>
} else {
return (
<div className="input-group">
{inputNode}
{ definition.labelType === "color" && <ColorPicker {...props} onChange={onChangeListener} inputId={inputId} />}
{ definition.labelType === "url" && (
<InputButton
@ -196,9 +203,10 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
}}
/>
)}
</>
</div>
);
}
}
// We insert a separate input since the color input does not support empty value.

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 {
async createPromotedAttributeCell(definitionAttr: FAttribute, valueAttr: Attribute, valueName: string) {