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.csa...@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
_______________________________________________
pve-devel mailing list
pve-devel@pve.proxmox.com
https://pve.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
