fix: let's color tag in form view (#25949)

* fix: let's color tag in form * fix: linters
frappe · Apr 15, 2024 · 9feef37 · 9feef37
1 parent 26c71bc
commit 9feef37
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/frappe/public/js/frappe/dom.js b/frappe/public/js/frappe/dom.js
@@ -304,27 +304,40 @@ frappe.unscrub = function (txt) {
 	return frappe.model.unscrub(txt);
 };
 
-frappe.get_data_pill = (label, target_id = null, remove_action = null, image = null) => {
+frappe.get_data_pill = (
+	label,
+	target_id = null,
+	remove_action = null,
+	image = null,
+	colored = false
+) => {
+	let color = "",
+		style = "";
+	if (colored) {
+		color = frappe.get_palette(label);
+	}
+	style = `background-color: var(${color[0]}); color: var(${color[1]})`;
 	let data_pill_wrapper = $(`
-		<button class="data-pill btn">
+		<button class="data-pill btn" style="${style}">
 			<div class="flex align-center ellipsis">
 				${image ? image : ""}
-				<span class="pill-label">${label}</span>
+				<span class="pill-label">${label} </span>
 			</div>
 		</button>
 	`);
-
 	if (remove_action) {
 		let remove_btn = $(`
 			<span class="remove-btn cursor-pointer">
 				${frappe.utils.icon("close", "sm")}
 			</span>
-		`).click(() => {
-			remove_action(target_id || label, data_pill_wrapper);
-		});
+		`);
+		if (typeof remove_action === "function") {
+			remove_btn.click(() => {
+				remove_action(target_id || label, data_pill_wrapper);
+			});
+		}
 		data_pill_wrapper.append(remove_btn);
 	}
-
 	return data_pill_wrapper;
 };
 

diff --git a/frappe/public/js/frappe/ui/tags.js b/frappe/public/js/frappe/ui/tags.js
@@ -100,17 +100,22 @@ frappe.ui.Tags = class {
 	}
 
 	get_tag(label) {
-		let $tag = frappe.get_data_pill(label, label, (target, pill_wrapper) => {
-			this.removeTag(target);
-			pill_wrapper.closest(".form-tag-row").remove();
-		});
-
+		let colored = true;
+		let $tag = frappe.get_data_pill(
+			label,
+			label,
+			(target, pill_wrapper) => {
+				this.removeTag(target);
+				pill_wrapper.closest(".form-tag-row").remove();
+			},
+			null,
+			colored
+		);
 		if (this.onTagClick) {
 			$tag.on("click", ".pill-label", () => {
 				this.onTagClick(label);
 			});
 		}
-
 		return $tag;
 	}
 };