diff --git a/src/public/app/entities/note_short.js b/src/public/app/entities/note_short.js index c83179960..fb1c96798 100644 --- a/src/public/app/entities/note_short.js +++ b/src/public/app/entities/note_short.js @@ -4,6 +4,7 @@ import ws from "../services/ws.js"; import options from "../services/options.js"; import froca from "../services/froca.js"; import protectedSessionHolder from "../services/protected_session_holder.js"; +import cssClassManager from "../services/css_class_manager.js"; const LABEL = 'label'; const RELATION = 'relation'; @@ -424,6 +425,11 @@ class NoteShort { } } + getColorClass() { + const color = this.getLabelValue("color"); + return cssClassManager.createClassForColor(color); + } + isFolder() { return this.type === 'search' || this.getFilteredChildBranches().length > 0; diff --git a/src/public/app/services/css_class_manager.js b/src/public/app/services/css_class_manager.js new file mode 100644 index 000000000..cd0e9dfff --- /dev/null +++ b/src/public/app/services/css_class_manager.js @@ -0,0 +1,27 @@ +const registeredClasses = new Set(); + +function createClassForColor(color) { + if (!color?.trim()) { + return ""; + } + + const normalizedColorName = color.replace(/[^a-z0-9]/gi, ""); + + if (!normalizedColorName.trim()) { + return ""; + } + + const className = 'color-' + normalizedColorName; + + if (!registeredClasses.has(className)) { + $("head").append(``); + + registeredClasses.add(className); + } + + return className; +} + +export default { + createClassForColor +}; diff --git a/src/public/app/services/link.js b/src/public/app/services/link.js index 4742c629f..f8dc73d2d 100644 --- a/src/public/app/services/link.js +++ b/src/public/app/services/link.js @@ -162,6 +162,7 @@ async function loadReferenceLinkTitle(noteId, $el) { title = note.isDeleted ? `${note.title} (deleted)` : note.title; } + $el.addClass(note.getColorClass()); $el.text(title); $el.prepend($("").addClass(note.getIcon())); diff --git a/src/public/app/widgets/attribute_widgets/attribute_detail.js b/src/public/app/widgets/attribute_widgets/attribute_detail.js index c11db3d96..c807c8876 100644 --- a/src/public/app/widgets/attribute_widgets/attribute_detail.js +++ b/src/public/app/widgets/attribute_widgets/attribute_detail.js @@ -235,7 +235,8 @@ const ATTR_HELP = { See wiki with details, API docs for parentNote and now for details.`, "template": "This note will appear in the selection of available template when creating new note", - "toc": "#toc or #toc=show will force the Table of Contents to be shown, #toc=hide will force hiding it. If the label doesn't exist, the global setting is observed" + "toc": "#toc or #toc=show will force the Table of Contents to be shown, #toc=hide will force hiding it. If the label doesn't exist, the global setting is observed", + "color": "defines color of the note in note tree, links etc. Use any valid CSS color value like 'red' or #a13d5f" }, "relation": { "runOnNoteCreation": "executes when note is created on backend", diff --git a/src/public/app/widgets/note_tree.js b/src/public/app/widgets/note_tree.js index a87a2dffd..9d8c77c2a 100644 --- a/src/public/app/widgets/note_tree.js +++ b/src/public/app/widgets/note_tree.js @@ -739,6 +739,12 @@ export default class NoteTreeWidget extends NoteContextAwareWidget { extraClasses.push("archived"); } + const colorClass = note.getColorClass(); + + if (colorClass) { + extraClasses.push(colorClass); + } + return extraClasses.join(" "); } @@ -1041,7 +1047,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget { const noteIdsToReload = new Set(); for (const ecAttr of loadResults.getAttributes()) { - if (ecAttr.type === 'label' && ['iconClass', 'cssClass', 'workspace', 'workspaceIconClass', 'archived'].includes(ecAttr.name)) { + if (ecAttr.type === 'label' && ['iconClass', 'cssClass', 'workspace', 'workspaceIconClass', 'archived', 'color'].includes(ecAttr.name)) { if (ecAttr.isInheritable) { noteIdsToReload.add(ecAttr.noteId); } diff --git a/src/services/builtin_attributes.js b/src/services/builtin_attributes.js index 64b1b1959..c25e10d05 100644 --- a/src/services/builtin_attributes.js +++ b/src/services/builtin_attributes.js @@ -59,6 +59,7 @@ module.exports = [ { type: 'label', name: 'titleTemplate', isDangerous: true }, { type: 'label', name: 'template' }, { type: 'label', name: 'toc' }, + { type: 'label', name: 'color' }, // relation names { type: 'relation', name: 'internalLink' },