diff --git a/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.css b/apps/client/src/widgets/attribute_widgets/UserAttributesList.css similarity index 72% rename from apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.css rename to apps/client/src/widgets/attribute_widgets/UserAttributesList.css index 4bed347e4..ef8c1763d 100644 --- a/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.css +++ b/apps/client/src/widgets/attribute_widgets/UserAttributesList.css @@ -1,4 +1,4 @@ -.promoted-attributes { +.user-attributes { display: flex; flex-wrap: wrap; gap: 8px; @@ -6,7 +6,7 @@ margin-top: 8px; } -.promoted-attributes .promoted-attribute { +.user-attributes .user-attribute { padding: 2px 10px; border-radius: 9999px; white-space: nowrap; @@ -17,15 +17,15 @@ line-height: 1.2; } -.promoted-attributes .promoted-attribute:hover { +.user-attributes .user-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 { +.user-attributes .user-attribute .name { font-weight: 600; } -.promoted-attributes .promoted-attribute .value { +.user-attributes .user-attribute .value { opacity: 0.9; } \ No newline at end of file diff --git a/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx b/apps/client/src/widgets/attribute_widgets/UserAttributesList.tsx similarity index 74% rename from apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx rename to apps/client/src/widgets/attribute_widgets/UserAttributesList.tsx index 987647519..f01e70b49 100644 --- a/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx +++ b/apps/client/src/widgets/attribute_widgets/UserAttributesList.tsx @@ -1,16 +1,16 @@ import { useState } from "preact/hooks"; import FNote from "../../entities/fnote"; -import "./PromotedAttributesDisplay.css"; +import "./UserAttributesList.css"; import { useTriliumEvent } from "../react/hooks"; import attributes from "../../services/attributes"; import { DefinitionObject } from "../../services/promoted_attribute_definition_parser"; import { formatDateTime } from "../../utils/formatters"; -import { ComponentChild, ComponentChildren, CSSProperties } from "preact"; +import { ComponentChildren, CSSProperties } from "preact"; import Icon from "../react/Icon"; import NoteLink from "../react/NoteLink"; import { getReadableTextColor } from "../../services/css_class_manager"; -interface PromotedAttributesDisplayProps { +interface UserAttributesListProps { note: FNote; ignoredAttributes?: string[]; } @@ -23,39 +23,39 @@ interface AttributeWithDefinitions { def: DefinitionObject; } -export default function PromotedAttributesDisplay({ note, ignoredAttributes }: PromotedAttributesDisplayProps) { - const promotedDefinitionAttributes = useNoteAttributesWithDefinitions(note, ignoredAttributes); - return promotedDefinitionAttributes?.length > 0 && ( -
- {promotedDefinitionAttributes?.map(attr => buildPromotedAttribute(attr))} +export default function UserAttributesDisplay({ note, ignoredAttributes }: UserAttributesListProps) { + const userAttributes = useNoteAttributesWithDefinitions(note, ignoredAttributes); + return userAttributes?.length > 0 && ( +
+ {userAttributes?.map(attr => buildUserAttribute(attr))}
) } function useNoteAttributesWithDefinitions(note: FNote, attributesToIgnore: string[] = []): AttributeWithDefinitions[] { - const [ promotedDefinitionAttributes, setPromotedDefinitionAttributes ] = useState(getAttributesWithDefinitions(note, attributesToIgnore)); + const [ userAttributes, setUserAttributes ] = useState(getAttributesWithDefinitions(note, attributesToIgnore)); useTriliumEvent("entitiesReloaded", ({ loadResults }) => { if (loadResults.getAttributeRows().some(attr => attributes.isAffecting(attr, note))) { - setPromotedDefinitionAttributes(getAttributesWithDefinitions(note, attributesToIgnore)); + setUserAttributes(getAttributesWithDefinitions(note, attributesToIgnore)); } }); - return promotedDefinitionAttributes; + return userAttributes; } -function PromotedAttribute({ attr, children, style }: { attr: AttributeWithDefinitions, children: ComponentChildren, style?: CSSProperties }) { +function UserAttribute({ attr, children, style }: { attr: AttributeWithDefinitions, children: ComponentChildren, style?: CSSProperties }) { const className = `${attr.type === "label" ? "label" + " " + attr.def.labelType : "relation"}`; return ( - + {children} ) } -function buildPromotedAttribute(attr: AttributeWithDefinitions): ComponentChildren { +function buildUserAttribute(attr: AttributeWithDefinitions): ComponentChildren { const defaultLabel = <>{attr.friendlyName}:{" "}; let content: ComponentChildren; let style: CSSProperties | undefined; @@ -102,13 +102,13 @@ function buildPromotedAttribute(attr: AttributeWithDefinitions): ComponentChildr content = <>{defaultLabel}; } - return {content} + return {content} } function getAttributesWithDefinitions(note: FNote, attributesToIgnore: string[] = []): AttributeWithDefinitions[] { - const promotedDefinitionAttributes = note.getAttributeDefinitions(); + const attributeDefintions = note.getAttributeDefinitions(); const result: AttributeWithDefinitions[] = []; - for (const attr of promotedDefinitionAttributes) { + for (const attr of attributeDefintions) { const def = attr.getDefinition(); const [ type, name ] = attr.name.split(":", 2); const friendlyName = def?.promotedAlias || name; diff --git a/apps/client/src/widgets/collections/board/card.tsx b/apps/client/src/widgets/collections/board/card.tsx index 3fff79aab..fc81e9f0e 100644 --- a/apps/client/src/widgets/collections/board/card.tsx +++ b/apps/client/src/widgets/collections/board/card.tsx @@ -6,7 +6,7 @@ import { BoardViewContext, TitleEditor } from "."; import { ContextMenuEvent } from "../../../menus/context_menu"; import { openNoteContextMenu } from "./context_menu"; import { t } from "../../../services/i18n"; -import PromotedAttributesDisplay from "../../attribute_widgets/PromotedAttributesDisplay"; +import UserAttributesDisplay from "../../attribute_widgets/UserAttributesList"; export const CARD_CLIPBOARD_TYPE = "trilium/board-card"; @@ -109,7 +109,7 @@ export default function Card({ title={t("board_view.edit-note-title")} onClick={handleEdit} /> - + ) : (