all lists on lists.proxmox.com
 help / color / mirror / Atom feed
From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH widget-toolkit v4 1/1] add tag related helpers
Date: Wed, 23 Mar 2022 11:34:35 +0100	[thread overview]
Message-ID: <20220323103445.2075649-3-d.csapak@proxmox.com> (raw)
In-Reply-To: <20220323103445.2075649-1-d.csapak@proxmox.com>

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@proxmox.com>
---
 src/Utils.js         | 35 +++++++++++++++++++++++++++++
 src/css/ext6-pmx.css | 52 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+)

diff --git a/src/Utils.js b/src/Utils.js
index 6a03057..3130b2a 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -1272,6 +1272,41 @@ utilities: {
 	    .map(val => val.charCodeAt(0)),
 	);
     },
+
+    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.8, // 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, color_overrides) {
+	let rgb = color_overrides?.[string] || Proxmox.Utils.stringToRGB(string);
+	let bgcolor = Proxmox.Utils.rgbToCss(rgb);
+	let txtCls = Proxmox.Utils.rgbToLuminance(rgb) < 160 ? 'light' : 'dark';
+	let cls = `proxmox-tag-${txtCls}`;
+	return `<span class="${cls}" style="background-color: ${bgcolor};">${string}</span>`;
+    },
 },
 
     singleton: true,
diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 1d815c6..7c01d2f 100644
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -6,6 +6,58 @@
     background-color: LightYellow;
 }
 
+.proxmox-tags-full .proxmox-tag-light,
+.proxmox-tags-full .proxmox-tag-dark {
+    border-radius: 9px;
+    padding: 1px 8px;
+    margin: 0px 1px;
+}
+
+.proxmox-tags-circle .proxmox-tag-light,
+.proxmox-tags-circle .proxmox-tag-dark {
+    margin: 0px 1px;
+    position: relative;
+    top: 2px;
+    border-radius: 6px;
+    height: 12px;
+    width: 12px;
+    display: inline-block;
+    color: transparent;
+    overflow: hidden;
+}
+
+.proxmox-tags-none .proxmox-tag-light,
+.proxmox-tags-none .proxmox-tag-dark {
+    display: none;
+}
+
+.proxmox-tags-dense .proxmox-tag-light,
+.proxmox-tags-dense .proxmox-tag-dark {
+    width: 5px;
+    display: inline-block;
+    color: transparent;
+    overflow: hidden;
+    vertical-align: bottom;
+}
+
+.proxmox-tags-full .proxmox-tag-light {
+    color: #fff;
+    background-color: #383838;
+}
+
+.proxmox-tags-full .proxmox-tag-light span::selection {
+    background-color: #000;
+}
+
+.proxmox-tags-full .proxmox-tag-dark {
+    color: #000;
+    background-color: #f0f0f0;
+}
+
+.proxmox-tags-full .proxmox-tag-dark span::selection {
+    background-color: #FFF;
+}
+
 .x-mask-msg-text {
     text-align: center;
 }
-- 
2.30.2





  parent reply	other threads:[~2022-03-23 10:35 UTC|newest]

Thread overview: 13+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2022-03-23 10:34 [pve-devel] [PATCH cluster/widget-toolkit/manager v4] add tags to ui Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH cluster v4 1/1] datacenter.cfg: add option for tag-tree-style and tag-colors Dominik Csapak
2022-03-23 10:34 ` Dominik Csapak [this message]
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 01/10] api: /cluster/resources: add tags to returned properties Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 02/10] api: /version: add 'tag-colors' and 'tag-tree-style' Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 03/10] ui: parse and save tag color overrides from /version Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 04/10] ui: tree/ResourceTree: collect tags on update Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 05/10] ui: add form/TagColorGrid Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 06/10] ui: dc/OptionView: add editors for tag settings Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 07/10] ui: add form/Tag Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 08/10] ui: {lxc, qemu}/Config: show Tags and make them editable Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 09/10] ui: tree/ResourceTree: show Tags in tree Dominik Csapak
2022-03-23 10:34 ` [pve-devel] [PATCH manager v4 10/10] ui: form/GlobalSearchField: display tags and allow to search for them Dominik Csapak

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20220323103445.2075649-3-d.csapak@proxmox.com \
    --to=d.csapak@proxmox.com \
    --cc=pve-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal