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 <[email protected]>
> ---
> 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>`;
> }
> },
>
>
_______________________________________________
pve-devel mailing list
[email protected]
https://pve.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
