From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <d.csapak@proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by lists.proxmox.com (Postfix) with ESMTPS id 90E52CC29
for <pve-devel@lists.proxmox.com>; Tue, 12 Apr 2022 15:35:04 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 9A99B18082
for <pve-devel@lists.proxmox.com>; Tue, 12 Apr 2022 15:34:33 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
[94.136.29.106])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by firstgate.proxmox.com (Proxmox) with ESMTPS id 2036810179
for <pve-devel@lists.proxmox.com>; Tue, 12 Apr 2022 15:34:25 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
by proxmox-new.maurer-it.com (Proxmox) with ESMTP id DE7B7417C2
for <pve-devel@lists.proxmox.com>; Tue, 12 Apr 2022 15:34:24 +0200 (CEST)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Tue, 12 Apr 2022 15:34:12 +0200
Message-Id: <20220412133423.1021857-5-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.30.2
In-Reply-To: <20220412133423.1021857-1-d.csapak@proxmox.com>
References: <20220412133423.1021857-1-d.csapak@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL 0.138 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
T_SCC_BODY_TEXT_LINE -0.01 -
Subject: [pve-devel] [PATCH widget-toolkit v6 1/1] add tag related helpers
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Tue, 12 Apr 2022 13:35:04 -0000
helpers to
* generate a color from a string consistently
* generate a html tag for a tag
* related css classes
contrast is calculated according to SAPC draft:
https://github.com/Myndex/SAPC-APCA
which is likely to become a w3c guideline in the future and seems
to be a better algorithm for this
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/Utils.js | 90 ++++++++++++++++++++++++++++++++++++++++++++
src/css/ext6-pmx.css | 45 ++++++++++++++++++++++
2 files changed, 135 insertions(+)
diff --git a/src/Utils.js b/src/Utils.js
index 6a03057..eb13838 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -1272,6 +1272,96 @@ 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
+ }
+
+ let alpha = 0.7; // make the color a bit brighter
+ let bg = 255; // assume white background
+
+ return [
+ (hash & 255)*alpha + bg*(1-alpha),
+ ((hash >> 8) & 255)*alpha + bg*(1-alpha),
+ ((hash >> 16) & 255)*alpha + bg*(1-alpha),
+ ];
+ },
+
+ rgbToCss: function(rgb) {
+ return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+ },
+
+ rgbToHex: function(rgb) {
+ let r = Math.round(rgb[0]).toString(16);
+ let g = Math.round(rgb[1]).toString(16);
+ let b = Math.round(rgb[2]).toString(16);
+ return `${r}${g}${b}`;
+ },
+
+ hexToRGB: function(hex) {
+ if (!hex) {
+ return undefined;
+ }
+ if (hex.length === 7) {
+ hex = hex.slice(1);
+ }
+ let r = parseInt(hex.slice(0, 2), 16);
+ let g = parseInt(hex.slice(2, 4), 16);
+ let b = parseInt(hex.slice(4, 6), 16);
+ return [r, g, b];
+ },
+
+ // optimized & simplified SAPC function
+ // https://github.com/Myndex/SAPC-APCA
+ getTextContrastClass: function(rgb) {
+ const blkThrs = 0.022;
+ const blkClmp = 1.414;
+
+ // linearize & gamma correction
+ let r = (rgb[0]/255)**2.4;
+ let g = (rgb[1]/255)**2.4;
+ let b = (rgb[2]/255)**2.4;
+
+ // relative luminance sRGB
+ let bg = r*0.2126729 + g*0.7151522 + b*0.0721750;
+
+ // black clamp
+ bg = bg > blkThrs ? bg : bg + (blkThrs - bg) ** blkClmp;
+
+ // SAPC with white text
+ let contrastLight = bg ** 0.65 - 1;
+ // SAPC with black text
+ let contrastDark = bg ** 0.56 - 0.046134502;
+
+ if (Math.abs(contrastLight) >= Math.abs(contrastDark)) {
+ return 'light';
+ } else {
+ return 'dark';
+ }
+ },
+
+ getTagElement: function(string, color_overrides) {
+ let rgb = color_overrides?.[string] || Proxmox.Utils.stringToRGB(string);
+ let bgcolor = Proxmox.Utils.rgbToCss(rgb);
+ let style = `background-color: ${bgcolor};`;
+ let cls;
+ if (rgb.length > 3) {
+ let fgcolor = Proxmox.Utils.rgbToCss([rgb[3], rgb[4], rgb[5]]);
+ style += `color: ${fgcolor}`;
+ cls = "proxmox-tag-dark";
+ } else {
+ let txtCls = Proxmox.Utils.getTextContrastClass(rgb);
+ cls = `proxmox-tag-${txtCls}`;
+ }
+ return `<span class="${cls}" style="${style}">${string}</span>`;
+ },
},
singleton: true,
diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 2516578..4448751 100644
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -6,6 +6,51 @@
background-color: LightYellow;
}
+.proxmox-tags-full .proxmox-tag-light,
+.proxmox-tags-full .proxmox-tag-dark {
+ border-radius: 3px;
+ padding: 1px 6px;
+ 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 !important;
+ 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: 6px;
+ margin-right: 1px;
+ display: inline-block;
+ color: transparent !important;
+ overflow: hidden;
+ vertical-align: bottom;
+}
+
+.proxmox-tags-full .proxmox-tag-light {
+ color: #fff;
+ background-color: #383838;
+}
+
+.proxmox-tags-full .proxmox-tag-dark {
+ color: #000;
+ background-color: #f0f0f0;
+}
+
.x-mask-msg-text {
text-align: center;
}
--
2.30.2