[pve-devel] [PATCH widget-toolkit v3 1/1] add tag related helpers

[Dominik Csapak]

helpers to
* generate a color from a string consistently
* generate a html tag for a tag
* related css classes

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 Utils.js         | 35 ++++++++++++++++++++++++++++++++++-
 css/ext6-pmx.css | 13 +++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/Utils.js b/Utils.js
index e3dcfcd..2645c85 100644
--- a/Utils.js
+++ b/Utils.js
@@ -644,8 +644,41 @@ Ext.define('Proxmox.Utils', { utilities: {
 	if (nw) {
 	    nw.focus();
 	}
-    }
+    },
+
+    stringToRGB: function(string) {
+	let hash = 0;
+	if (!string) {
+	    return hash;
+	}
+	string += 'prox'; // give short strings more variance
+	for (let i = 0; i < string.length; i++) {
+	    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+	    hash = hash & hash; // to int
+	}
+	return [
+	    hash & 255,
+	    (hash >> 8) & 255,
+	    (hash >> 16) & 255,
+	    0.6 // make the colors a little lighter
+	];
+    },
 
+    rgbToCss: function(rgb) {
+	return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${rgb[3]})`;
+    },
+
+    rgbToLuminance: function(rgb) {
+	// https://en.wikipedia.org/wiki/Relative_luminance
+	return (0.2126 * rgb[0] + 0.7152*rgb[1] + 0.0722*rgb[2])/rgb[3];
+    },
+
+    getTagElement: function(string) {
+	let rgb = Proxmox.Utils.stringToRGB(string);
+	let bgcolor = Proxmox.Utils.rgbToCss(rgb);
+	let txtCls = Proxmox.Utils.rgbToLuminance(rgb) < 160 ? 'light' : 'dark';
+	return `<span class="proxmox-tag proxmox-tag-${txtCls}" style="background-color: ${bgcolor};">${string}</span>`;
+    }
 },
 
     singleton: true,
diff --git a/css/ext6-pmx.css b/css/ext6-pmx.css
index 7ee536d..80866bd 100644
--- a/css/ext6-pmx.css
+++ b/css/ext6-pmx.css
@@ -5,3 +5,16 @@
 .pmx-hint {
     background-color: LightYellow;
 }
+
+.proxmox-tag {
+    border-radius: 5px;
+    padding: 2px 4px;
+}
+
+.proxmox-tag-light {
+    color: #fff;
+}
+
+.proxmox-tag-dark {
+    color: #000;
+}
-- 
2.20.1