[pve-devel] [PATCH manager v2 1/5] gui: add tag related helpers

[Thomas Lamprecht]

On 10/3/19 1:50 PM, Dominik Csapak wrote:
> 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 at proxmox.com>
> ---
>  www/css/ext6-pve.css  | 13 +++++++++++++
>  www/manager6/Utils.js | 34 ++++++++++++++++++++++++++++++++++
>  2 files changed, 47 insertions(+)
> 

can we have those helpers in widget toolkit? I could imagine that
their useful for re-use in the future, and they are general enough.

> diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
> index 535f8e60..3d90de59 100644
> --- a/www/css/ext6-pve.css
> +++ b/www/css/ext6-pve.css
> @@ -631,3 +631,16 @@ table.osds td:first-of-type {
>      background-color: rgb(245, 245, 245);
>      color: #000;
>  }
> +
> +.tag {
> +    border-radius: 5px;
> +    padding: 2px 4px;
> +}
> +
> +.tag-light {
> +    color: #fff;
> +}
> +
> +.tag-dark {
> +    color: #000;
> +}
> diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
> index 6a489e7e..e9b7b75b 100644
> --- a/www/manager6/Utils.js
> +++ b/www/manager6/Utils.js
> @@ -1240,6 +1240,40 @@ Ext.define('PVE.Utils', { utilities: {
>  	} else {
>  	    return false;
>  	}
> +    },
> +
> +    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.6 // 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) {
> +	let rgb = PVE.Utils.stringToRGB(string);
> +	let bgcolor = PVE.Utils.rgbToCss(rgb);
> +	let txtCls = PVE.Utils.rgbToLuminance(rgb) < 160 ? 'light' : 'dark';
> +	return `<span class="tag tag-${txtCls}" style="background-color: ${bgcolor};">${string}</span>`;
>      }
>  },
>  
>