From 8a6fb8d5351f9caddb7aae7e0608b03ff19e8bcb Mon Sep 17 00:00:00 2001
From: shariquerik <sharique.rik@gmail.com>
Date: Fri, 30 Apr 2021 12:12:23 +0530
Subject: [PATCH] fix: Changed shorcut widgets color picker to dropdown

(cherry picked from commit 509d4825413ea017641475e7b59ad800cb42d5c5)
---
 .../public/js/frappe/widgets/shortcut_widget.js  |  3 +--
 frappe/public/js/frappe/widgets/widget_dialog.js | 12 +++++++++++-
 frappe/public/scss/common/global.scss            | 16 ++++++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/frappe/public/js/frappe/widgets/shortcut_widget.js b/frappe/public/js/frappe/widgets/shortcut_widget.js
index 689c57f361..a60903f7dc 100644
--- a/frappe/public/js/frappe/widgets/shortcut_widget.js
+++ b/frappe/public/js/frappe/widgets/shortcut_widget.js
@@ -2,7 +2,6 @@ import Widget from "./base_widget.js";
 
 frappe.provide("frappe.utils");
 
-const INDICATOR_COLORS = ["Grey", "Green", "Red", "Orange", "Pink", "Yellow", "Blue", "Cyan", "Teal"];
 export default class ShortcutWidget extends Widget {
 	constructor(opts) {
 		opts.shadow = true;
@@ -79,7 +78,7 @@ export default class ShortcutWidget extends Widget {
 
 		this.action_area.empty();
 		const label = get_label();
-		let color = INDICATOR_COLORS.includes(this.color) && count ? this.color.toLowerCase() : 'gray';
+		let color = this.color && count ? this.color.toLowerCase() : 'gray';
 		$(`<div class="indicator-pill ellipsis ${color}">${label}</div>`).appendTo(this.action_area);
 	}
 }
diff --git a/frappe/public/js/frappe/widgets/widget_dialog.js b/frappe/public/js/frappe/widgets/widget_dialog.js
index fce2a35539..14b09e78bc 100644
--- a/frappe/public/js/frappe/widgets/widget_dialog.js
+++ b/frappe/public/js/frappe/widgets/widget_dialog.js
@@ -237,9 +237,19 @@ class ShortcutDialog extends WidgetDialog {
 				hidden: 1,
 			},
 			{
-				fieldtype: "Color",
+				fieldtype: "Select",
 				fieldname: "color",
 				label: __("Color"),
+				options: ["Grey", "Green", "Red", "Orange", "Pink", "Yellow", "Blue", "Cyan", "Teal"],
+				default: "Grey",
+				onchange: () => {
+					let color = this.dialog.fields_dict.color.value.toLowerCase();
+					let $select = this.dialog.fields_dict.color.$input;
+					if (!$select.parent().find('.color-box').get(0)) {
+						$(`<div class="color-box"></div>`).insertBefore($select.get(0));
+					}
+					$select.parent().find('.color-box').get(0).style.backgroundColor = color;
+				}
 			},
 			{
 				fieldtype: "Column Break",
diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss
index 726b3a98a6..e9646b30e5 100644
--- a/frappe/public/scss/common/global.scss
+++ b/frappe/public/scss/common/global.scss
@@ -76,6 +76,22 @@ input[type="checkbox"] {
 	@include card();
 }
 
+.frappe-control[data-fieldtype="Select"].frappe-control[data-fieldname="color"] {
+	select {
+		padding-left: 40px;
+	}
+
+	.color-box {
+		position: absolute;
+		top: calc(50% - 11px);
+		left: 8px;
+		width: 22px;
+		height: 22px;
+		border-radius: 5px;
+		z-index: 1;
+	}
+}
+
 .frappe-control[data-fieldtype="Select"] .control-input,
 .frappe-control[data-fieldtype="Select"].form-group {
 	position: relative;