[pve-devel] [PATCH manager v7 05/14] ui: add form/TagColorGrid

[Aaron Lauterer]

One thing I noticed in a few places regarding variable names was that they 
probably could use some camel casing for better readabilty. E.g.:

newcls -> newCls
newrbd -> newRgb or maybe newRGB?

More comments inline.

On 6/21/22 11:20, Dominik Csapak wrote:
> this provides a basic grid to edit a list of tag color overrides.
> We'll use this for editing the datacenter.cfg overrides and the
> browser storage overrides.
> 
> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>

[...]

> +++ b/www/manager6/form/TagColorGrid.js
> @@ -0,0 +1,357 @@
> +Ext.define('PVE.form.ColorPicker', {
> +    extend: 'Ext.form.FieldContainer',
> +    alias: 'widget.pveColorPicker',
> +
> +    defaultBindProperty: 'value',
> +
> +    config: {
> +	value: null,
> +    },
> +
> +    height: 24,
> +
> +    layout: {
> +	type: 'hbox',
> +	align: 'stretch',
> +    },
> +
> +    getValue: function() {
> +	return this.realvalue.slice(1);
> +    },
> +
> +    setValue: function(value) {
> +	let me = this;
> +	me.setColor(value);
> +	if (value && value.length === 6) {
> +	    me.picker.value = value[0] !== '#' ? `#${value}` : value;

if we do check the length to be 6 characters long, can we run into the situation 
that it is already prefixed by a #?

> +	}
> +    },
> +
> +    setColor: function(value) {
> +	let me = this;
> +	let oldValue = me.realvalue;
> +	me.realvalue = value;
> +	let color = value.length === 6 ? `#${value}` : undefined;
> +	me.down('#picker').setStyle('background-color', color);
> +	me.down('#text').setValue(value ?? "");
> +	me.fireEvent('change', me, me.realvalue, oldValue);
> +    },

[...]

> +
> +	backgroundChange: function(field, newValue, oldValue) {
> +	    let me = this;
> +	    let rec = field.getWidgetRecord();
> +	    if (!rec) {
> +		return;
> +	    }
> +	    if (newValue && newValue !== oldValue) {
> +		let newrgb = Proxmox.Utils.hexToRGB(newValue);
> +		let newcls = Proxmox.Utils.getTextContrastClass(newrgb);
> +		let hexvalue = newcls === 'dark' ? '000000' : 'FFFFFF';

s/hexvalue/textHexVal/ or something in that direction so the variable name 
reflects what is contains?

> +		if (!rec.get('text')) {
> +		    rec.set('text', hexvalue);
> +		} else if (oldValue) {
> +		    let oldrgb = Proxmox.Utils.hexToRGB(oldValue);
> +		    let oldcls = Proxmox.Utils.getTextContrastClass(oldrgb);
> +		    let oldvalue = oldcls === 'dark' ? '000000' : 'FFFFFF';
> +		    if (rec.get('text') === oldvalue) {
> +			rec.set('text', hexvalue);
> +		    }
> +		}

[...]