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 C82D692D1D for ; Wed, 14 Sep 2022 16:15:56 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id B5B432D4BA for ; Wed, 14 Sep 2022 16:15:26 +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 ; Wed, 14 Sep 2022 16:15: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 998B6441FD for ; Wed, 14 Sep 2022 16:15:25 +0200 (CEST) Message-ID: <00e9a173-6429-6678-b61f-4b8c1494ffa7@proxmox.com> Date: Wed, 14 Sep 2022 16:15:24 +0200 MIME-Version: 1.0 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Thunderbird/102.2.2 From: Aaron Lauterer To: Proxmox VE development discussion , Dominik Csapak References: <20220621092012.1776825-1-d.csapak@proxmox.com> <20220621092012.1776825-7-d.csapak@proxmox.com> Content-Language: en-US In-Reply-To: <20220621092012.1776825-7-d.csapak@proxmox.com> Content-Type: text/plain; charset=UTF-8; format=flowed Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.760 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 NICE_REPLY_A -1.583 Looks like a legit reply (A) 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: Re: [pve-devel] [PATCH widget-toolkit v7 1/3] 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, 14 Sep 2022 14:15:56 -0000 Some small nits inline On 6/21/22 11:19, Dominik Csapak wrote: > 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 | 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), I don't think our style guides specify this clearly, but I find the mix of spaces and no spaces around the operators inconsistent. There are a few more places in this patch where we do have that kind of inconsistency. > + ]; > + }, > + > + 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}`; > + }, [...] > + > + 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};`; Couldn't we save a line by calling Proxmox.Utils.rgbToCss directly in the string? E.g. let style = `background-color: ${Proxmox.Utils.rgbToCss(rgb)};`; > + let cls; > + if (rgb.length > 3) { > + let fgcolor = Proxmox.Utils.rgbToCss([rgb[3], rgb[4], rgb[5]]); > + style += `color: ${fgcolor}`; Same as above here. > + cls = "proxmox-tag-dark"; > + } else { > + let txtCls = Proxmox.Utils.getTextContrastClass(rgb); > + cls = `proxmox-tag-${txtCls}`; > + } > + return `${string}`; > + }, > },