From 8137bf5d82d24a972d8a72fff2234bb61d60de17 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 24 Mar 2021 17:36:23 +0530
Subject: [PATCH] fix: Read only mode for color input - fix style color
 readonly field - fix case where color control is hidden

(cherry picked from commit 0d20d1a5d55104c07e3003d09814968ecd2281a4)
---
 frappe/public/js/frappe/form/controls/color.js |  2 +-
 frappe/public/js/frappe/form/formatters.js     |  6 ++++++
 frappe/public/scss/common/color_picker.scss    | 15 ++++++++++++---
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frappe/public/js/frappe/form/controls/color.js b/frappe/public/js/frappe/form/controls/color.js
index 7890ea755c..bf04581abd 100644
--- a/frappe/public/js/frappe/form/controls/color.js
+++ b/frappe/public/js/frappe/form/controls/color.js
@@ -76,7 +76,7 @@ frappe.ui.form.ControlColor = frappe.ui.form.ControlData.extend({
 	refresh() {
 		this._super();
 		let color = this.get_color();
-		if (this.picker.color !== color) {
+		if (this.picker && this.picker.color !== color) {
 			this.picker.color = color;
 			this.picker.refresh();
 		}
diff --git a/frappe/public/js/frappe/form/formatters.js b/frappe/public/js/frappe/form/formatters.js
index 4578cf2ded..f792d5b173 100644
--- a/frappe/public/js/frappe/form/formatters.js
+++ b/frappe/public/js/frappe/form/formatters.js
@@ -293,6 +293,12 @@ frappe.form.formatters = {
 			return frappe.format(value, link_field, options, row);
 		});
 		return formatted_values.join(', ');
+	},
+	Color: (value) => {
+		return `<div>
+			<div class="selected-color" style="background-color: ${value}"></div>
+			<span class="color-value">${value}</span>
+		</div>`;
 	}
 }
 
diff --git a/frappe/public/scss/common/color_picker.scss b/frappe/public/scss/common/color_picker.scss
index 627ab12a2e..7ab9b0c504 100644
--- a/frappe/public/scss/common/color_picker.scss
+++ b/frappe/public/scss/common/color_picker.scss
@@ -92,7 +92,7 @@
 	}
 }
 
-.frappe-control[data-fieldtype='Color']  {
+.frappe-control[data-fieldtype='Color'] {
 	input {
 		padding-left: 40px;
 	}
@@ -104,11 +104,20 @@
 		background-color: red;
 		position: absolute;
 		top: calc(50% + 1px);
-		left: 5px;
+		left: 8px;
 		content: ' ';
 		&.no-value {
 			background: url('/assets/frappe/images/color-circle.png');
 			background-size: contain;
 		}
 	}
-}
\ No newline at end of file
+	.like-disabled-input {
+		.color-value {
+			padding-left: 25px;
+		}
+		.selected-color {
+			top: 20%;
+			cursor: default;
+		}
+	}
+}