ru.coon 2.7.3 → 2.7.4

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# Version 2.7.4, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/7becde7cc7cfb8254525c8beca11cbd4604b8181)
+* ## Features
+* <span style='color:green'>feat: HT-7823: refactor</span> ([07e9f0], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/07e9f00376ea39fe7888e7d264d291222667ce0f))
+* <span style='color:green'>feat: HT-7823: change line colors</span> ([f70a74], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/f70a748a7f77cc984eae2e762e86e291a0b25230))
+* <span style='color:green'>feat: HT-7823: remove gradient check</span> ([76e538], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/76e5389eb644d45df7deabffeb24de1767d67c7b))
+* <span style='color:green'>feat: HT-7823: lighting tree grid items</span> ([a56e4d], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/a56e4dcab0b10494721d809c2fb4d2f10ce5d257))
+
+* HT-7850 fix: Исправление поведения чипа в FilterConditionToolbar при изменениях значения поля панели фильтрации. ([3fbf41], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/3fbf417948d24be8a576739e0e41fe170221788e))
+*  ([Update], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/Update src/report/plugin/grid/GridEditorsPlugin.jsa0bc93ea280291eae1d401ceeb056bb250f5ed09))
+* update: CHANGELOG.md ([78c174], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/78c1741b921889b7c20f96a342aa91a262a21fc5))
+
 # Version 2.7.3, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/e9a311b868bd00ad5e46a868e7f0b829122ffa06)
 * refactoring ([1385c2], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/1385c2bf065c0e57f6d8484cf360a1201cdbb656))
 * update: CHANGELOG.md ([10bd16], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/10bd16df0b8d6d43c2a41f2651b8610c35dcd899))
@@ -5,6 +16,7 @@
 # Version 2.7.2, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/3b94df2c23f76552c5c626a4bfda4a317e33abff)
 * ## Features
 * <span style='color:green'>feat: HT-8199: trim string values in request</span> ([cfc709], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/cfc709daacaad1522f4dff858e04966a758bcb6a))
+* <span style='color:green'>feat: HT-7823: create color choose component (Palettes)</span> ([157c14], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/157c14384904b60004a34ce67ce70a6923216799))
 
 *  ([Update], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/Update src/common/component/editor/CharacteristicLoaderPlugin.js929fc3b32d028554706e1d64c6ca40fedc615f39))
 * update: CHANGELOG.md ([44e78b], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/44e78b830a9a374db90e2fc1554188c9154ce462))
@@ -18,8 +30,12 @@
 
 # Version 2.7.0, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/c03c093df3594cbec9b0b6a2e3e4ca8d24b07e76)
 * ## Features
+* <span style='color:green'>feat: HT-7823: create color choose component (Palettes)</span> ([5d31ff], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/5d31ffbbe224fa48f9631adc23b109cf5d25236f))
 * <span style='color:green'>feat: HT-7850 Включение FilterConditionToolbar в ReportPanel</span> ([02015f], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/02015fd6518dec2fbbf4a16e8e29ff958fe4f1b3))
 
+* ## Fixes
+* <span style='color:red'> HT-7281 GridEditorsPlugin combo editor</span> ([8b140d], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/8b140d19abc9e5dd3816ce4cb00e0ec8ee1cbc03))
+
 * refactoring ([1c317f], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/1c317fadf1591a82907cdff905e69d4978dae061))
 * upd ([e79155], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/e791556cf00505255593cd1bf6ad022d75c19d79))
 * HT-7444 Исправление ([043abe], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/043abea7c90d62b17a3c4819845a1e20dda36790))

package/package.json

@@ -4,7 +4,7 @@
     "name": "ru.coon"
   },
   "description": "",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "repository": {
     "type": "git",
     "url": "git+http://gitlab-dbr.sigma-it.local/dbr/ru.coon"

package/src/common/component/ChooseColorField.js

@@ -0,0 +1,142 @@
+Ext.define('Coon.common.component.ChooseColorField', {
+    extend: 'Ext.form.field.Picker',
+    xtype: 'ChooseColorField',
+    cls: 'ColorPalette',
+    format: 'rgba',
+    config: {
+        gradient: false,
+        hideClearTrigger: false,
+        value: null,
+        popup: {
+            lazy: true,
+            $value: {
+                xtype: 'window',
+                referenceHolder: true,
+                width: 600,
+                minWidth: 600,
+                minHeight: 400,
+                layout: 'fit',
+                height: 400,
+                header: false,
+                resizable: true,
+                items: {
+                    xtype: 'ColorPalette',
+                    relayedEvents: ['colorChoose'],
+                    reference: 'selector',
+                    showPreviousColor: true,
+                    showOkCancelButtons: true,
+                },
+            },
+        },
+    },
+    controller: {
+        init() {
+            const view = this.getView();
+            this.getView().on('change', view.hideClear, view);
+            this.getView().on('render', view.hideClear, view);
+            this.getView().on('render', view.setColorMarker, view);
+        },
+    },
+    setValue: function(value) {
+        this.callParent(arguments);
+        this.setColorMarker();
+    },
+    getGradient() {
+        return this.gradient;
+    },
+    setGradient(gradient) {
+        this.gradient = gradient;
+    },
+    createPicker: function() {
+        const me = this;
+        let popup = me.getPopup();
+        let picker;
+        // the window will actually be shown and will house the picker
+        popup.items.gradient= this.getGradient();
+        me.colorPickerWindow = popup = Ext.create(popup);
+        me.colorPicker = picker = popup.lookupReference('selector');
+        picker.setValue(me.getValue());
+
+        picker.on({
+            colorChoose: 'onColorChoose',
+            scope: me,
+        });
+        return me.colorPickerWindow;
+    },
+    onColorChoose(colorPicker, colors) {
+        if (colors && colors.length) {
+            this.setValue(colors.length === 1 ? colors[0] : JSON.stringify(colors));
+        } else {
+            this.setValue(null);
+        }
+        this.collapse();
+    },
+    setColorMarker() {
+        if (!this.inputWrap) {
+            return;
+        }
+        if (this.inputWrap.maskElem) {
+            this.inputWrap.dom.removeChild(this.inputWrap.maskElem);
+            this.inputWrap.maskElem = null;
+        }
+        const value = this.getValue();
+        let color = null;
+        if (Ext.isArray(value)) {
+            color = value[0];
+        } else if (value.search(/\[/) >= 0) {
+            try {
+                const arr = eval(value);
+                color = arr[0];
+                const div = document.createElement('div');
+                const p = document.createElement('div');
+                div.appendChild(p);
+                div.setAttribute('class', 'gradient-mask');
+                p.innerHTML = 'Набор цветов';
+                this.inputWrap.dom.appendChild(div);
+                this.inputWrap.maskElem = div;
+            } catch (e) {
+                Coon.log.error(e);
+            }
+        } else {
+            color = value;
+        }
+        this.swatchEl.setStyle({
+            backgroundColor: color || null,
+        });
+    },
+    hideClear() {
+        if (this.getHideClearTrigger() === true || !this.triggers) {
+            return;
+        }
+        const value = this.getValue();
+        if (!this.triggers.clear.hideOnReadOnly || !this.readOnly) {
+            this.triggers.clear.setHidden(!value);
+        }
+    },
+    beforeBodyEl: [
+        '<div class="' + Ext.baseCSSPrefix + 'colorpicker-field-swatch">' +
+        '<div id="{id}-swatchEl" data-ref="swatchEl" class="' + Ext.baseCSSPrefix +
+        'colorpicker-field-swatch-inner"></div>' +
+        '</div>'
+    ],
+    childEls: [
+        'swatchEl'
+    ],
+    editable: false,
+    triggers: {
+        clear: {
+            cls: 'svg-icon svg-icon-cancel-small',
+            tooltip: 'Очистить поле',
+            hidden: true,
+            hideOnReadOnly: true,
+            handler: function() {
+                this.setValue(null);
+            },
+        },
+        picker: {
+            handler: 'onTriggerClick',
+            scope: 'this',
+            focusOnMousedown: true,
+        },
+    },
+});

package/src/common/component/ColorPalette.js

@@ -0,0 +1,151 @@
+Ext.define('Coon.common.component.ColorPalette', {
+    extend: 'Ext.tab.Panel',
+    xtype: 'ColorPalette',
+    cls: 'ColorPalette',
+    hideHeaders: true,
+    config: {
+        value: null,
+        gradient: false,
+    },
+    setValue(value) {
+        this.value = value;
+    },
+    getValue() {
+        return this.value;
+    },
+    getGradient() {
+        return this.gradient;
+    },
+    setGradient(gradient) {
+        this.gradient = gradient;
+        this.getViewModel().set('gradient', gradient);
+    },
+    controller: 'ColorPaletteController',
+    initComponent() {
+        this.getViewModel().set('gradient', !!this.gradient);
+        if (this.gradient === true) {
+            this.items[0].selModel = 'rowmodel';
+        } else {
+            this.items[0].selModel = 'cellmodel';
+        }
+        this.callParent(arguments);
+    },
+
+    viewModel: {
+        data: {
+            selected: null,
+            opacity: true,
+            gradient: false,
+            color: null,
+            selectorColor: null,
+        },
+        stores: {
+            ColorPalettetore: {
+                type: 'json',
+            },
+            data: [],
+        },
+    },
+    items: [
+        {
+            xtype: 'grid',
+            title: 'Палитра цветов',
+            reference: 'palletGrid',
+            bind: {
+                store: '{ColorPalettetore}',
+                selection: '{selected}',
+            },
+            selModel: 'cellmodel',
+            columns: [],
+            listeners: {
+                selectionchange: 'onSelectionChange',
+            },
+            buttons: [
+                {
+                    reference: 'selectedButton',
+                },
+                {
+                    xtype: 'displayfield',
+                    reference: 'displayColor',
+                },
+                {
+                    xtype: 'checkbox',
+                    boxLabel: 'Градиент',
+                    bind: {
+                        value: '{gradient}',
+                    },
+                    margin: '0 20px 0 0',
+                    disabled: true,
+                },
+                {
+                    xtype: 'checkbox',
+                    boxLabel: 'Не прозрачный',
+                    checked: true,
+                    value: true,
+                    bind: {
+                        value: '{opacity}',
+                    },
+                    margin: '0 20px 0 0',
+                },
+                {xtype: 'tbfill'},
+                {
+                    ui: 'orange-button',
+                    text: 'Выбрать',
+                    handler: 'choose',
+                    bind: {
+                        disabled: '{!selected}',
+                    },
+                }
+            ],
+        },
+        {
+            title: 'Свой цвет',
+            reference: 'customColorTab',
+            bind: {
+                hidden: '{gradient}',
+            },
+            layout: 'fit',
+            items: {
+                xtype: 'colorselector',
+                format: 'rgba',
+                alphaDecimalFormat: '#.#',
+                listeners: {
+                    change: 'onSelectorChange',
+                },
+            },
+            buttons: [
+                {
+                    reference: 'selectedCustomButton',
+                    listeners: {
+                        render: 'onRenderDisplayColor',
+                    },
+                },
+                {
+                    xtype: 'displayfield',
+                    bind: {
+                        value: '{selectorColor}',
+                    },
+                },
+                {
+                    xtype: 'checkbox',
+                    boxLabel: 'Gradient',
+                    bind: {
+                        value: '{gradient}',
+                    },
+                    margin: '0 20px 0 0',
+                    hidden: true,
+                },
+                {xtype: 'tbfill'},
+                {
+                    ui: 'orange-button',
+                    text: 'Выбрать',
+                    handler: 'chooseCustom',
+                    bind: {
+                        disabled: '{!selectorColor}',
+                    },
+                }
+            ],
+        }
+    ],
+
+});

package/src/common/component/ColorPalette.scss

@@ -0,0 +1,102 @@
+:root {
+  --ColorPalette-pallet-1-color-1: rgba(238, 64, 53, 1);
+  --ColorPalette-pallet-1-color-2: rgba(241, 102, 93, 1);
+  --ColorPalette-pallet-1-color-3: rgba(247, 159, 154, 1);
+  --ColorPalette-pallet-1-color-4: rgba(248, 179, 174, 1);
+  --ColorPalette-pallet-1-color-5: rgba(250, 198, 194, 1);
+  --ColorPalette-pallet-1-color-6: rgba(252, 217, 215, 1);
+  --ColorPalette-pallet-1-color-7: rgba(253, 236, 235, 1);
+
+  --ColorPalette-pallet-2-color-1: rgba(250, 127, 46, 1);
+  --ColorPalette-pallet-2-color-2: rgba(251, 153, 88, 1);
+  --ColorPalette-pallet-2-color-3: rgba(252, 191, 150, 1);
+  --ColorPalette-pallet-2-color-4: rgba(253, 204, 171, 1);
+  --ColorPalette-pallet-2-color-5: rgba(253, 217, 192, 1);
+  --ColorPalette-pallet-2-color-6: rgba(254, 229, 213, 1);
+  --ColorPalette-pallet-2-color-7: rgba(255, 242, 234, 1);
+
+  --ColorPalette-pallet-3-color-1: rgba(246, 200, 33, 1);
+  --ColorPalette-pallet-3-color-2: rgba(248, 211, 77, 1);
+  --ColorPalette-pallet-3-color-3: rgba(251, 227, 144, 1);
+  --ColorPalette-pallet-3-color-4: rgba(251, 233, 166, 1);
+  --ColorPalette-pallet-3-color-5: rgba(252, 239, 188, 1);
+  --ColorPalette-pallet-3-color-6: rgba(253, 244, 211, 1);
+  --ColorPalette-pallet-3-color-7: rgba(254, 249, 233, 1);
+
+  --ColorPalette-pallet-4-color-1: rgba(104, 180, 102, 1);
+  --ColorPalette-pallet-4-color-2: rgba(134, 195, 133, 1);
+  --ColorPalette-pallet-4-color-3: rgba(179, 217, 179, 1);
+  --ColorPalette-pallet-4-color-4: rgba(195, 225, 194, 1);
+  --ColorPalette-pallet-4-color-5: rgba(210, 233, 209, 1);
+  --ColorPalette-pallet-4-color-6: rgba(225, 240, 225, 1);
+  --ColorPalette-pallet-4-color-7: rgba(240, 247, 240, 1);
+
+  --ColorPalette-pallet-5-color-1: rgba(69, 160, 185, 1);
+  --ColorPalette-pallet-5-color-2: rgba(106, 179, 199, 1);
+  --ColorPalette-pallet-5-color-3: rgba(162, 207, 220, 1);
+  --ColorPalette-pallet-5-color-4: rgba(181, 217, 227, 1);
+  --ColorPalette-pallet-5-color-5: rgba(199, 227, 234, 1);
+  --ColorPalette-pallet-5-color-6: rgba(218, 236, 241, 1);
+  --ColorPalette-pallet-5-color-7: rgba(236, 245, 248, 1);
+
+  --ColorPalette-pallet-6-color-1: rgba(61, 120, 191, 1);
+  --ColorPalette-pallet-6-color-2: rgba(100, 147, 204, 1);
+  --ColorPalette-pallet-6-color-3: rgba(158, 187, 223, 1);
+  --ColorPalette-pallet-6-color-4: rgba(177, 201, 229, 1);
+  --ColorPalette-pallet-6-color-5: rgba(197, 215, 236, 1);
+  --ColorPalette-pallet-6-color-6: rgba(216, 228, 242, 1);
+  --ColorPalette-pallet-6-color-7: rgba(236, 241, 249, 1);
+
+  --ColorPalette-pallet-7-color-1: rgba(138, 97, 187, 1);
+  --ColorPalette-pallet-7-color-2: rgba(161, 129, 201, 1);
+  --ColorPalette-pallet-7-color-3: rgba(196, 176, 221, 1);
+  --ColorPalette-pallet-7-color-4: rgba(208, 192, 228, 1);
+  --ColorPalette-pallet-7-color-5: rgba(220, 208, 235, 1);
+  --ColorPalette-pallet-7-color-6: rgba(232, 223, 241, 1);
+  --ColorPalette-pallet-7-color-7: rgba(243, 239, 248, 1);
+}
+.ColorPalette {
+  .x-grid-cell, .x-grid-item{
+    border: 1px solid transparent;
+  }
+  .x-grid-item-selected, .x-grid-cell-selected{
+    border: 1px solid red !important;
+  }
+  .x-colorpicker-field-swatch{
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: auto;
+    bottom: auto;
+    border-radius: 4px;
+    margin-top: 4px;
+    left: 4px;
+  }
+  .x-form-field.x-form-text.x-form-text-default{
+    padding-left: 30px;
+  }
+  .x-form-text-wrap{
+    margin-left: 5px;
+  }
+  .x-colorpicker-field-swatch-inner{
+    border-radius: 4px;
+  }
+  .x-form-item-label{
+    left: 20px;
+  }
+  .gradient-mask{
+    width: 100%;
+    height: 75%;
+    position: absolute;
+    top: 0;
+    left: 20px;
+    background-color: white;
+    padding-right: 17px;
+    display: flex;
+    margin-top: 4px;
+    div{
+      align-self: center;
+    }
+
+  }
+}

package/src/common/component/ColorPaletteController.js

@@ -0,0 +1,189 @@
+Ext.define('Coon.common.component.ColorPaletteController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.ColorPaletteController',
+    hasMatch: false,
+    value: null,
+
+    getColorsAndNormalizeFormat(color) {
+        const colorArr = color.replace('rgba(', '').replace(')', '').split(',');
+        if (colorArr.length === 5) {
+            colorArr[3] = colorArr[3].trim() + '.' + colorArr[4].trim();
+            colorArr.pop();
+        }
+        return colorArr;
+    },
+
+    init: function(view) {
+        if (this.getView().getValue()) {
+            const colorArr = this.getColorsAndNormalizeFormat(this.getView().getValue());
+            if ((colorArr[3] + '').search(/0\./gi) >= 0) {
+                this.getViewModel().set('opacity', false);
+            }
+        }
+
+        this.getViewModel().bind('{opacity}', this.getRecords, this);
+        view.on('tabchange', this.onTabChange.bind(this));
+        this.lookup('palletGrid').getView().on('refresh', this.setSelectionByValue, this);
+    },
+    setSelectionByValue() {
+        const vm = this.getViewModel();
+        const store = vm.getStore('ColorPalettetore');
+        if (store.getRange().length && this.hasMatch !== false) {
+            this.lookup('palletGrid').getSelectionModel().select(vm.get('gradient') === false ? this.hasMatch : this.hasMatch[1]);
+        }
+    },
+    getRecords(opacity) {
+        this.lookup('selectedButton').setStyle({
+            backgroundColor: null,
+        });
+        this.lookup('displayColor').setValue(null);
+        this.getViewModel().set('selected', null);
+        const pallet = this.getColorsMatrix(opacity);
+        if (!Ext.isArray(pallet)) {
+            return;
+        }
+        let colsLength = 0;
+        pallet.forEach((arr) => {
+            const l = Object.keys(arr);
+            if (colsLength < l.length) {
+                colsLength = l.length;
+            }
+        });
+        if (colsLength > 0) {
+            const cols = [];
+            for (let i = 0; i < colsLength; i++) {
+                cols.push({
+                    dataIndex: 'data' + (i + 1),
+                    flex: 1,
+                    renderer: (v, mt) => {
+                        mt.style = 'height: 50px; background-color: ' + v + ';';
+                        // return v;
+                    },
+                });
+            }
+            this.lookup('palletGrid').reconfigure(cols);
+            this.getViewModel().getStore('ColorPalettetore').loadData(pallet);
+        }
+    },
+    getColorsMatrix(opacity) {
+        this.hasMatch = false;
+        const initValue = this.getView().getValue();
+        const styles = getComputedStyle(document.documentElement);
+        let i = 0;
+        let j = 0;
+        let propVal = null;
+        let tmp = [];
+        const matrix = [];
+        let hasMatch = false;
+        do {
+            i++;
+            j = 0;
+            tmp = {};
+            if (opacity === true) {
+                do {
+                    j++;
+                    propVal = styles.getPropertyValue('--ColorPalette-pallet-' + i + '-color-' + j);
+                    if (propVal) {
+                        if (initValue && initValue === propVal) {
+                            hasMatch = [j-1, i-1];
+                        }
+                        tmp['data' + j] = propVal;
+                    }
+                } while (propVal !== '');
+                if (Object.keys(tmp).length) {
+                    matrix.push(tmp);
+                }
+            } else {
+                propVal = styles.getPropertyValue('--ColorPalette-pallet-' + i + '-color-1');
+                if (propVal) {
+                    const mRecs = {
+                        data1: propVal,
+                        data2: propVal.replace('1)', '0.8)'),
+                        data3: propVal.replace('1)', '0.5)'),
+                        data4: propVal.replace('1)', '0.4)'),
+                        data5: propVal.replace('1)', '0.3)'),
+                        data6: propVal.replace('1)', '0.2)'),
+                        data7: propVal.replace('1)', '0.1)'),
+                    };
+                    if (initValue) {
+                        const colorArr = this.getColorsAndNormalizeFormat(initValue);
+                        const tmpColor = 'rgba(' + colorArr.join(',') + ')';
+                        Object.keys(mRecs).forEach((key, index) => {
+                            if (mRecs[key] === tmpColor) {
+                                hasMatch = [index, i-1];
+                            }
+                        });
+                    }
+
+                    matrix.push(mRecs);
+                }
+            }
+            if (styles.getPropertyValue('--ColorPalette-pallet-' + (i + 1) + '-color-1') !== '') {
+                propVal = 'check next';
+            }
+        } while (propVal !== '');
+        this.hasMatch = hasMatch;
+        return matrix;
+    },
+    choose() {
+        const color = [];
+        const vm = this.getViewModel();
+        if (vm.get('gradient')) {
+            const data = vm.get('selected').getData();
+            Object.keys(data).map((key) => {
+                if (key.search(/data/gi) >= 0) {
+                    color.push(data[key]);
+                }
+            });
+        } else {
+            const pos = this.lookup('palletGrid').getSelectionModel().getCurrentPosition();
+            const dataIndex = pos.columnHeader.dataIndex;
+            color.push(vm.get('selected').get(dataIndex));
+        }
+        this.fireViewEvent('colorChoose', color);
+    },
+    onSelectionChange() {
+        const vm = this.getViewModel();
+        const recs = this.lookup('palletGrid').getSelectionModel().getSelection();
+        if (!recs.length) {
+            return;
+        }
+        let color = null;
+        if (vm.get('gradient')) {
+            color = recs[0].get('data1');
+        } else {
+            const pos = this.lookup('palletGrid').getSelectionModel().getCurrentPosition();
+            const dataIndex = pos.columnHeader.dataIndex;
+            color = recs[0].get(dataIndex);
+        }
+        this.lookup('selectedButton').setStyle({
+            backgroundColor: color,
+        });
+        this.lookup('displayColor').setValue(color);
+    },
+    chooseCustom() {
+        this.fireViewEvent('colorChoose', [this.getViewModel().get('selectorColor')]);
+    },
+    onSelectorChange(cmp, color) {
+        const colorArr = this.getColorsAndNormalizeFormat(color);
+        color = 'rgba(' + colorArr.join(',') + ')';
+        this.getViewModel().set('selectorColor', color);
+        if (this.lookup('selectedCustomButton')) {
+            this.lookup('selectedCustomButton').setStyle({
+                backgroundColor: color,
+            });
+        }
+    },
+    onRenderDisplayColor(cmp) {
+        cmp.setStyle({
+            backgroundColor: this.getViewModel().get('selectorColor'),
+        });
+    },
+    onTabChange(cmp, tab) {
+        if (tab.referenceKey === 'customColorTab' && this.getViewModel().get('selected')) {
+            this.lookup('customColorTab').down('colorselector').setValue(
+                this.getViewModel().get('selected').get('data1')
+            );
+        }
+    },
+});

package/src/common/field/withDefault.js

@@ -16,7 +16,8 @@ Ext.define('Coon.common.field.withDefault', {
                 {
                     xtype: 'button',
                     itemId: 'clear',
-                    iconCls: 'x-fa fa-times',
+                    cls: 'svg-icon svg-icon-cancel-small',
+                    scale: 'small',
                     tooltip: 'вернуть значение по умолчанию',
                 }
             ];
@@ -29,7 +30,7 @@ Ext.define('Coon.common.field.withDefault', {
         if (field) {
             this.down('button#clear').on('click', () => {
                 if (typeof field.setValue) {
-                    this.defaultValue !== undefined ? field.setValue() : field.reset();
+                    this.defaultValue !== undefined ? field.setValue(this.defaultValue) : field.reset();
                 }
             });
         }

package/src/report/plugin/configPanel/GridEditorPluginConfig.js

@@ -140,11 +140,13 @@ Ext.define('Coon.report.plugin.configPanel.GridEditorPluginConfig', {
                     xtype: 'fieldset',
                     title: 'Конфиг',
                     height: 200,
+                    flex: 1,
+                    layout: 'fit',
+                    scrollable: true,
                     items: [
                         {
                             xtype: 'UiAceEditor',
                             useLinter: true,
-                            scrollable: 'y',
                             name: ns.$mask,
                             value: {},
                         }