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' },