From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: 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 9303189E28 for ; Tue, 18 Oct 2022 16:02:59 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 0624729734 for ; Tue, 18 Oct 2022 16:02:38 +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 for ; Tue, 18 Oct 2022 16:02:31 +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 0E41544A95 for ; Tue, 18 Oct 2022 16:02:30 +0200 (CEST) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Tue, 18 Oct 2022 16:02:13 +0200 Message-Id: <20221018140226.598710-8-d.csapak@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20221018140226.598710-1-d.csapak@proxmox.com> References: <20221018140226.598710-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.068 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 Subject: [pve-devel] [PATCH widget-toolkit v8 1/2] 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 List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Tue, 18 Oct 2022 14:02:59 -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 --- src/Utils.js | 88 ++++++++++++++++++++++++++++++++++++++++++++ src/css/ext6-pmx.css | 45 ++++++++++++++++++++++ 2 files changed, 133 insertions(+) diff --git a/src/Utils.js b/src/Utils.js index 6a03057..f491fd1 100644 --- a/src/Utils.js +++ b/src/Utils.js @@ -1272,6 +1272,94 @@ 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 style = `background-color: ${Proxmox.Utils.rgbToCss(rgb)};`; + let cls; + if (rgb.length > 3) { + style += `color: ${Proxmox.Utils.rgbToCss([rgb[3], rgb[4], rgb[5]])}`; + cls = "proxmox-tag-dark"; + } else { + let txtCls = Proxmox.Utils.getTextContrastClass(rgb); + cls = `proxmox-tag-${txtCls}`; + } + return `${string}`; + }, }, singleton: true, diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css index 231b4ce..bb85ffb 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