gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-13 09:59:02 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

feat(board): display in chip format

Browse Source
This commit is contained in:
Elian Doran 2025-11-12 19:38:06 +02:00
parent 40dbb818c5
commit e006afc5a2
No known key found for this signature in database
2 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.css Normal file
View File

@ -0,0 +1,31 @@
.promoted-attributes {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 8px;
}
.promoted-attributes .promoted-attribute {
padding: 2px 10px;
border-radius: 9999px;
white-space: nowrap;
background-color: var(--chip-bg, rgba(0, 0, 0, 0.08));
color: var(--chip-fg, inherit);
border: 1px solid var(--chip-border, rgba(0, 0, 0, 0.15));
font-size: 12px;
line-height: 1.2;
}
.promoted-attributes .promoted-attribute:hover {
background-color: var(--chip-bg-hover, rgba(0, 0, 0, 0.12));
border-color: var(--chip-border-hover, rgba(0, 0, 0, 0.22));
}
.promoted-attributes .promoted-attribute .name {
font-weight: 600;
}
.promoted-attributes .promoted-attribute .value {
opacity: 0.9;
}

7
apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx
View File

@ -1,4 +1,5 @@
import FNote from "../../entities/fnote"; import FNote from "../../entities/fnote";
import "./PromotedAttributesDisplay.css";
interface PromotedAttributesDisplayProps { interface PromotedAttributesDisplayProps {
note: FNote; note: FNote;
@ -8,7 +9,7 @@ interface PromotedAttributesDisplayProps {
export default function PromotedAttributesDisplay({ note, ignoredAttributes }: PromotedAttributesDisplayProps) { export default function PromotedAttributesDisplay({ note, ignoredAttributes }: PromotedAttributesDisplayProps) {
const promotedDefinitionAttributes = note.getPromotedDefinitionAttributes(); const promotedDefinitionAttributes = note.getPromotedDefinitionAttributes();
return ( return promotedDefinitionAttributes.length > 0 && (
<div className="promoted-attributes"> <div className="promoted-attributes">
{promotedDefinitionAttributes.map((attr) => { {promotedDefinitionAttributes.map((attr) => {
const def = attr.getDefinition(); const def = attr.getDefinition();
@ -19,9 +20,9 @@ export default function PromotedAttributesDisplay({ note, ignoredAttributes }: P
if (ignoredAttributes && ignoredAttributes.includes(name)) return null; if (ignoredAttributes && ignoredAttributes.includes(name)) return null;
return ( return (
<div key={attr.name} className="promoted-attribute"> <span key={attr.name} className="promoted-attribute">
<strong>{friendlyName}:</strong> {value} <strong>{friendlyName}:</strong> {value}
</div> </span>
); );
} }
)} )}