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 887E269422 for ; Wed, 23 Mar 2022 11:35:20 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 5A93E258B6 for ; Wed, 23 Mar 2022 11:34:50 +0100 (CET) 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 220D025850 for ; Wed, 23 Mar 2022 11:34:49 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id EF61946F85 for ; Wed, 23 Mar 2022 11:34:48 +0100 (CET) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Wed, 23 Mar 2022 11:34:35 +0100 Message-Id: <20220323103445.2075649-3-d.csapak@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20220323103445.2075649-1-d.csapak@proxmox.com> References: <20220323103445.2075649-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.150 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 v4 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 List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Wed, 23 Mar 2022 10:35:20 -0000 helpers to * generate a color from a string consistently * generate a html tag for a tag * related css classes Signed-off-by: Dominik Csapak --- 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 `${string}`; + }, }, 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