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): reintroduce labels

Browse Source
This commit is contained in:
Elian Doran 2025-11-22 22:25:32 +02:00
parent d99b8f5864
commit 33c3fb7de0
No known key found for this signature in database
3 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/widgets/PromotedAttributes.css
View File

@ -4,6 +4,10 @@ body.mobile .promoted-attributes-widget {
overflow: auto; overflow: auto;
} }
.component.promoted-attributes-widget {
contain: none;
}
.promoted-attributes-container { .promoted-attributes-container {
margin: 0 1.5em; margin: 0 1.5em;
overflow: auto; overflow: auto;

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

@ -2,10 +2,17 @@ import { useEffect, useState } from "preact/hooks";
import "./PromotedAttributes.css"; import "./PromotedAttributes.css";
import { useNoteContext } from "./react/hooks"; import { useNoteContext } from "./react/hooks";
import { Attribute } from "../services/attribute_parser"; import { Attribute } from "../services/attribute_parser";
import FAttribute from "../entities/fattribute";
interface Cell {
definitionAttr: FAttribute;
valueAttr: Attribute;
valueName: string;
}
export default function PromotedAttributes() { export default function PromotedAttributes() {
const { note } = useNoteContext(); const { note } = useNoteContext();
const [ cells, setCells ] = useState<Attribute[]>(); const [ cells, setCells ] = useState<Cell[]>();
useEffect(() => { useEffect(() => {
if (!note) return; if (!note) return;
@ -16,7 +23,7 @@ export default function PromotedAttributes() {
// the order of attributes is important as well // the order of attributes is important as well
ownedAttributes.sort((a, b) => a.position - b.position); ownedAttributes.sort((a, b) => a.position - b.position);
const cells: Attribute[] = []; const cells: Cell[] = [];
for (const definitionAttr of promotedDefAttrs) { for (const definitionAttr of promotedDefAttrs) {
const valueType = definitionAttr.name.startsWith("label:") ? "label" : "relation"; const valueType = definitionAttr.name.startsWith("label:") ? "label" : "relation";
const valueName = definitionAttr.name.substr(valueType.length + 1); const valueName = definitionAttr.name.substr(valueType.length + 1);
@ -36,7 +43,9 @@ export default function PromotedAttributes() {
valueAttrs = valueAttrs.slice(0, 1); valueAttrs = valueAttrs.slice(0, 1);
} }
cells.push(...valueAttrs); for (const valueAttr of valueAttrs) {
cells.push({ definitionAttr, valueAttr, valueName });
}
} }
setCells(cells); setCells(cells);
}, [ note ]); }, [ note ]);
@ -44,8 +53,24 @@ export default function PromotedAttributes() {
return ( return (
<div className="promoted-attributes-widget"> <div className="promoted-attributes-widget">
<div className="promoted-attributes-container"> <div className="promoted-attributes-container">
{cells?.map(cell => <PromotedAttributeCell cell={cell} />)}
</div> </div>
</div> </div>
); );
} }
function PromotedAttributeCell({ cell }: { cell: Cell }) {
const { valueName, valueAttr, definitionAttr } = cell;
const inputId = `value-${valueAttr.attributeId}`;
const definition = definitionAttr.getDefinition();
return (
<div className="promoted-attribute-cell">
<label for={inputId}>{definition.promotedAlias ?? valueName}</label>
<input
tabIndex={200 + definitionAttr.position}
id={inputId}
/>
</div>
)
}

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

@ -21,14 +21,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
private $container!: JQuery<HTMLElement>; private $container!: JQuery<HTMLElement>;
get name() {
return "promotedAttributes";
}
get toggleCommand() {
return "toggleRibbonTabPromotedAttributes";
}
doRender() { doRender() {
this.contentSized(); this.contentSized();
} }
@ -59,11 +51,8 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
async createPromotedAttributeCell(definitionAttr: FAttribute, valueAttr: Attribute, valueName: string) { async createPromotedAttributeCell(definitionAttr: FAttribute, valueAttr: Attribute, valueName: string) {
const definition = definitionAttr.getDefinition(); const definition = definitionAttr.getDefinition();
const id = `value-${valueAttr.attributeId}`;
const $input = $("<input>") const $input = $("<input>")
.prop("tabindex", 200 + definitionAttr.position)
.prop("id", id)
.attr("data-attribute-id", valueAttr.noteId === this.noteId ? valueAttr.attributeId ?? "" : "") // if not owned, we'll force creation of a new attribute instead of updating the inherited one .attr("data-attribute-id", valueAttr.noteId === this.noteId ? valueAttr.attributeId ?? "" : "") // if not owned, we'll force creation of a new attribute instead of updating the inherited one
.attr("data-attribute-type", valueAttr.type) .attr("data-attribute-type", valueAttr.type)
.attr("data-attribute-name", valueAttr.name) .attr("data-attribute-name", valueAttr.name)
@ -79,7 +68,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
const $wrapper = $('<div class="promoted-attribute-cell">') const $wrapper = $('<div class="promoted-attribute-cell">')
.append( .append(
$("<label>") $("<label>")
.prop("for", id)
.text(definition.promotedAlias ?? valueName) .text(definition.promotedAlias ?? valueName)
) )
.append($("<div>").addClass("input-group").append($input)) .append($("<div>").addClass("input-group").append($input))