From 9b94265844ead3e29564513fce94c7c5b614a2b1 Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Mon, 28 Sep 2020 11:26:20 +0200
Subject: [PATCH] Resolve https://github.com/the-djmaze/snappymail/issues/17

---
 dev/External/SquireUI.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/dev/External/SquireUI.js b/dev/External/SquireUI.js
index 2cdb35e2b..8769e9ab7 100644
--- a/dev/External/SquireUI.js
+++ b/dev/External/SquireUI.js
@@ -15,6 +15,7 @@ const doc = document,
 	ctrlKey = /Mac OS X/.test( navigator.userAgent ) ? '⌘ + ' : 'Ctrl + ',
 
 	tpl = doc.createElement('template'),
+	clr = doc.createElement('input'),
 
 	getFragmentOfChildren = parent => {
 		let frag = doc.createDocumentFragment();
@@ -138,6 +139,10 @@ const doc = document,
 		return text;
 	};
 
+clr.type = "color";
+clr.style.display = 'none';
+doc.body.append(clr);
+
 class SquireUI
 {
 	constructor(container) {
@@ -179,13 +184,19 @@ class SquireUI
 				},
 				colors: {
 					textColor: {
-						input: 'color',
-						cmd: s => squire.setTextColour(s.value),
+						html: 'A<sub>▾</sub>',
+						cmd: () => {
+							clr.onchange = () => squire.setTextColour(clr.value);
+							clr.click();
+						},
 						hint: 'Text color'
 					},
 					backgroundColor: {
-						input: 'color',
-						cmd: s => squire.setHighlightColour(s.value),
+						html: '🎨', /* ▧ */
+						cmd: () => {
+							clr.onchange = () => squire.setHighlightColour(clr.value);
+							clr.click();
+						},
 						hint: 'Background color'
 					},
 				},