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