[pve-devel] [PATCH manager v2 1/5] gui: 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>
---
 www/css/ext6-pve.css  | 13 +++++++++++++
 www/manager6/Utils.js | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 535f8e60..3d90de59 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -631,3 +631,16 @@ table.osds td:first-of-type {
     background-color: rgb(245, 245, 245);
     color: #000;
 }
+
+.tag {
+    border-radius: 5px;
+    padding: 2px 4px;
+}
+
+.tag-light {
+    color: #fff;
+}
+
+.tag-dark {
+    color: #000;
+}
diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 6a489e7e..e9b7b75b 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1240,6 +1240,40 @@ Ext.define('PVE.Utils', { utilities: {
 	} else {
 	    return false;
 	}
+    },
+
+    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 = PVE.Utils.stringToRGB(string);
+	let bgcolor = PVE.Utils.rgbToCss(rgb);
+	let txtCls = PVE.Utils.rgbToLuminance(rgb) < 160 ? 'light' : 'dark';
+	return `<span class="tag tag-${txtCls}" style="background-color: ${bgcolor};">${string}</span>`;
     }
 },
 
-- 
2.20.1