ru.coon 3.0.59 → 3.0.61

package/src/report/component/reportpanel/NorthPanel.js

@@ -8,43 +8,7 @@ Ext.define('Coon.report.component.report.NorthPanel', {
         type: 'vbox',
         align: 'stretch',
     },
-    tbar: {
-        hidden: true,
-        xtype: 'panel',
-        height: 20,
-        reference: 'tbar',
-        layout: {
-            type: 'hbox',
-            align: 'stretch',
-        },
-        items: [
-            {
-                xtype: 'container',
-                reference: 'allowBlankDescription',
-                margin: '0 18px',
-            },
-            {
-                xtype: 'tbfill',
-            },
-            {
-                xtype: 'button',
-                cls: 'x-unselectable btn-toggle',
-                style: {
-                    backgroundColor: 'transparent!important',
-                    marginRight: '8px',
-                },
-                scale: 'small',
-                hidden: true,
-                reference: 'toggleBtn',
-                enableToggle: true,
-                iconCls: 'x-fa fa-toggle-on activeToggle',
-                focusOnToFront: false,
-                handler: function(cmp) {
-                    cmp.up('NorthPanel').onExpanderClick(cmp);
-                },
-            }
-        ],
-    },
+
     requires: [
         'Coon.Function',
         'Coon.report.component.SimplestReportCombo',
@@ -53,28 +17,43 @@ Ext.define('Coon.report.component.report.NorthPanel', {
         'Ext.layout.container.HBox',
         'Coon.report.component.reportpanel.FilterPanel'
     ],
+
     uses: [],
+
     config: {
         hideFilterPanel: false,
         hideFilterButtons: false,
         enableHighlightingRequiredFields: false,
         enableChipToolbar: false,
     },
-    onExpanderClick(btn) {
-        btn.setIconCls(btn.pressed ? 'fa fa-toggle-on fa-rotate-180 inactiveToggle' : 'x-fa fa-toggle-on activeToggle');
-        btn.up().down('[reference=allowBlankDescription]').setHidden(btn.pressed);
-        if (btn.pressed) {
-            this.setHeight(null);
-        }
-        this.filterContainer.setHidden(btn.pressed);
-        if (!btn.pressed) {
-            this.setHeight(this.getHeight());
-        }
+
+    sideFilterConfig: {
+        windowWidth: 400,
+        windowPadding: 8,
+        minWidth: 326,
+        maxWidth: 1282,
     },
+
+    viewModel: {
+        parent: null,
+        data: {},
+    },
+
+    sideFilterPanelConfig: {
+        enable: true,
+        dockToComponent: undefined,
+        ownerContainer: undefined,
+    },
+
     initComponent() {
+        this.vm = this.getViewModel();
         this.searchButton = Ext.widget('splitbutton', Ext.apply({
             ui: 'orange-button-ext',
             text: 'Поиск',
+            bind: {
+                disabled: '{!enableSearch}',
+                tooltip: '{searchButtonTooltip}',
+            },
         }, this.findButtonConfig || {}));
 
         // arrowVisible is not working, so we need this hack
@@ -89,7 +68,6 @@ Ext.define('Coon.report.component.report.NorthPanel', {
         }, this.clearButtonConfig || {}));
 
         this.buttonsContainer = Ext.widget('panel', Ext.apply({
-            // margin: '10 0',
             autoHeight: true,
             layout: {
                 type: 'hbox',
@@ -112,6 +90,15 @@ Ext.define('Coon.report.component.report.NorthPanel', {
             autoHeight: true,
         });
 
+        this.legendContainer = Ext.widget('container', {
+            height: 16,
+            padding: '2 30 0 0',
+            layout: {
+                type: 'hbox',
+                pack: 'end',
+            },
+        });
+
         this.items = [
             {
                 xtype: 'container',
@@ -125,6 +112,7 @@ Ext.define('Coon.report.component.report.NorthPanel', {
                     this.buttonsContainer
                 ],
             },
+            this.legendContainer,
             {
                 xtype: 'container',
                 reference: 'bottomContainer',
@@ -141,12 +129,27 @@ Ext.define('Coon.report.component.report.NorthPanel', {
 
         this.on('afterrender', function() {
             this.reportPanel = this.up('ReportPanel,ReportFilterForm');
-            this.searchButton.handler = this.reportPanel ? Ext.bind(this.reportPanel.filterHandler, this.reportPanel) : Ext.emptyFn;
-            this.clearButton.handler = Ext.bind(function() {
-                this.clearFilter();
-                this.clearData();
-            }, this.reportPanel);
+            this.searchButton.handler = this.getSearchHandler();
+            this.clearButton.handler = this.getClearHandler();
         }, this);
+
+        this.sideFilter = Ext.create({
+            xtype: 'SideFilterPanel',
+            northPanel: this,
+            sideFilterPanelConfig: this.sideFilterPanelConfig,
+            vm: this.vm,
+        });
+    },
+
+    getSearchHandler() {
+        return this.reportPanel ? Ext.bind(this.reportPanel.filterHandler, this.reportPanel) : Ext.emptyFn;
+    },
+
+    getClearHandler() {
+        return Ext.bind(function() {
+            this.clearFilter();
+            this.clearData();
+        }, this.reportPanel);
     },
 
     getFields() {
@@ -163,33 +166,31 @@ Ext.define('Coon.report.component.report.NorthPanel', {
     },
 
     configureFilterPanel: function(reportFormBean) {
-        const report = this.up('ReportPanel');
-        const properties = report && report.configProperties ||
+        this.reportPanel = this.reportPanel || this.up('ReportPanel');
+        const properties = this.reportPanel && this.reportPanel.configProperties ||
             Coon.Function.convertAdvancedProperties(reportFormBean.properties) || {};
         Ext.merge(this, properties);
-        this.filterPlugins.push({
-            ptype: 'EnterConfirmFormPlugin',
-            confirmHandler: report ? Ext.bind(report.filterHandler, report) : Ext.emptyFn,
-        });
-        this.filterPlugins.push(Ext.apply({
-            ptype: 'FormFieldFocusPlugin',
-        }, properties.formFieldFocusPluginConfig || {}, {defaultFocusFirstField: true}));
+
+        this.filterPlugins.push(...this.getDefaultFilterPanelPlugins());
 
         const [enableHighlightingRequiredFields, hiddenLegend] = this.hasPropertiesFilterPanel(reportFormBean.plugins, properties);
         this.hiddenLegend = !!hiddenLegend;
         this.enableHighlightingRequiredFields = enableHighlightingRequiredFields;
-        const filterPanel = Ext.widget('FilterPanel', {
+
+        const filterPanelConfig = {
             configurationList: reportFormBean.parameters,
             itemsOnRow: properties['filterItemsOnRow'] || 2,
             enableHighlightingRequiredFields,
             plugins: this.filterPlugins,
-        });
-        this.filterPanel = filterPanel;
+        };
 
-        this.on('searchbuttontoggle', function(isValid, errorMessage) {
-            this.searchButton.setDisabled(!isValid);
-            this.searchButton.setTooltip(!isValid ? errorMessage : '');
-        }, this);
+        const getFiltersFromPlugin = !!this.filterPlugins.find((plugin) => plugin.ptype === 'FilterFormEditingPlugin');
+        if (getFiltersFromPlugin) {
+            filterPanelConfig.configurationList = [];
+        }
+
+        const filterPanel = Ext.widget('FilterPanel', filterPanelConfig);
+        this.filterPanel = filterPanel;
 
         this.filterContainer.removeAll();
         filterPanel.on('afterlayoutanimation', function(cmp) {
@@ -211,6 +212,18 @@ Ext.define('Coon.report.component.report.NorthPanel', {
         this.changeTbarStates();
     },
 
+    getDefaultFilterPanelPlugins() {
+        return [
+            {
+                ptype: 'EnterConfirmFormPlugin',
+                confirmHandler: this.reportPanel ? Ext.bind(this.reportPanel.filterHandler, this.reportPanel) : Ext.emptyFn,
+            },
+            Ext.apply({
+                ptype: 'FormFieldFocusPlugin',
+            }, this.formFieldFocusPluginConfig || {}, {defaultFocusFirstField: true})
+        ];
+    },
+
     recalculateHeight(filterPanelHeight) {
         this.setHeight(Math.max(filterPanelHeight, this.minimalHeight) + this.tbarsHeight);
     },
@@ -219,44 +232,51 @@ Ext.define('Coon.report.component.report.NorthPanel', {
         if (!this.items) {
             return;
         }
-        const tbar = this.down('[reference="tbar"]');
         const bottomContainer = this.down('[reference="bottomContainer"]');
         let tbarsHeight = 0;
-        const tbarH = 20;
         const bottomContainerH = 30;
-        if (!tbar || !bottomContainer || this.hideFilterPanel) {
+        if (!bottomContainer || this.hideFilterPanel) {
             return;
         }
         if (this.enableHighlightingRequiredFields || this.getEnableChipToolbar()) {
-            tbarsHeight += tbarH + 10;
-            tbar.show();
+            tbarsHeight += 16;
             if (this.isLegendHidden() && this.enableHighlightingRequiredFields && !this.legend) {
                 this.legend = this.buildLegend();
-                tbar.down('[reference="allowBlankDescription"]').add(this.legend);
+                this.legendContainer.add(this.legend);
             }
         } else {
-            tbar.hide();
+            this.legendContainer.hide();
         }
+
+        if (!this.filterPanelBtnContainer && this.sideFilter.checkSideFilterPanelEnable()) {
+            this.filterPanelBtnContainer = this.sideFilter.getSideFilterButtonContainer(this.toggleNorthPanelFilterHidden.bind(this));
+            bottomContainer.add(this.filterPanelBtnContainer);
+            this.sideFilter.sideFilterAutoShow = !this.reportPanel.autoFilter;
+        }
+
         if (!this.filterConditionToolbar) {
             this.filterConditionToolbar = Ext.widget('FilterConditionToolbar', {
                 flex: 1,
                 closableFilterCondition: false,
                 searchForm: this,
+                height: 36,
             });
             bottomContainer.add(this.filterConditionToolbar);
             this.chipsInit();
         }
         if (this.getEnableChipToolbar()) {
-            this.down('[reference="toggleBtn"]').show();
             bottomContainer.show();
             this.filterConditionToolbar.show();
             if (!this.buttonsContainer.hidden) {
                 bottomContainer.add(this.buttonsContainer);
             }
+            this.buttonsContainer.setLayout({
+                type: 'hbox',
+                align: 'middle',
+            });
             tbarsHeight += bottomContainerH;
             this.filterConditionToolbar.getController().addChangeReaction();
         } else {
-            this.down('[reference="toggleBtn"]').hide();
             bottomContainer.hide();
             if (!this.buttonsContainer.hidden) {
                 this.down('[reference="topContainer"]').add(this.buttonsContainer);
@@ -268,10 +288,17 @@ Ext.define('Coon.report.component.report.NorthPanel', {
         }
     },
 
+    toggleNorthPanelFilterHidden(btn) {
+        this.filterPanel[btn.pressed ? 'hide' : 'show']();
+        this.legendContainer[btn.pressed ? 'hide' : 'show']();
+        this.buttonsContainer.setHidden(btn.pressed);
+    },
+
     setEnableChipToolbar(enableChipToolbar) {
         this.enableChipToolbar = enableChipToolbar;
         this.changeTbarStates();
     },
+
     getEnableChipToolbar() {
         return this.enableChipToolbar;
     },
@@ -300,32 +327,38 @@ Ext.define('Coon.report.component.report.NorthPanel', {
                     this.filterConditionToolbar.fireEvent('rememberconditions');
                 }
             }, this);
+
+            this.filterConditionToolbar.on('unusableChips', (count) => {
+                this.sideFilter.sideFilterAutoShow = count > 0;
+            });
         }
     },
+
     onChipDelete: function(reportPanel) {
         if (!reportPanel) {
             return;
         }
         reportPanel.filterHandler();
     },
+
     /**
      * Активация деактивация кнопки поиска и изменение тултипа легенды.
      * @param {boolean} isValid валидность формы
      * @param {string} msg сообщение о невалидности
      */
     searchButtonToggle(isValid, msg) {
-        if (this.isLegendHidden() && this.legend) {
-            this.legend.setTooltipMsg(isValid ? '': msg);
-            this.legend.fireEvent('validitychange', isValid);
-        }
-        this.fireEvent('searchbuttontoggle', isValid, 'Обязательные поля не заполнены!');
+        this.vm.set('enableSearch', isValid);
+        this.vm.set('searchButtonTooltip', !isValid ? 'Обязательные поля не заполнены!' : '');
+        this.vm.set('validityLegendValid', isValid);
+        this.vm.set('validityLegendMsg', !isValid ? msg : '');
     },
+
     /**
      * Создание легенды к форме фильтра
      * @returns {Ext.Component}
      */
     buildLegend() {
-        const legend = Ext.widget('FilterPanelLegend');
+        const legend = Ext.widget(this.getLegendConfig());
         const filterPanel = this.down('FilterPanel');
         legend.on('boxready', filterPanel.validateRequired, filterPanel);
         return legend;
@@ -377,8 +410,8 @@ Ext.define('Coon.report.component.report.NorthPanel', {
         }
     },
 
-    fillFilter(useURIParameters, params, filterDefaults) {
-        const fields = this.getFields();
+    fillFilter(useURIParameters, params, filterDefaults, fields) {
+        fields = fields || this.getFields();
         // Простановка переданых параметров фильтров
         filterDefaults = Ext.apply({}, params, filterDefaults);
         for (let i = 0; i < fields.length; i++) {
@@ -395,18 +428,6 @@ Ext.define('Coon.report.component.report.NorthPanel', {
         }
     },
 
-    togglePanel(tool) {
-        if (this.isHidden()) {
-            this.show();
-            tool.setIconCls('x-fa fa-eye-slash');
-            tool.setTooltip(tool.tooltipTexts.show);
-        } else {
-            this.hide();
-            tool.setIconCls('x-fa fa-eye');
-            tool.setTooltip(tool.tooltipTexts.hide);
-        }
-    },
-
     addToSearchButtonMenu(menuItems = []) {
         if (!menuItems) {
             return;
@@ -432,7 +453,20 @@ Ext.define('Coon.report.component.report.NorthPanel', {
             this.searchButton.btnWrap.addCls(this.searchButton.getSplitCls());
         }
     },
+
     onChipDeleteHandler() {
         Coon.log.debug('onChipDeleteHandler', 'Удалили чип, делаем поиск');
     },
+
+    getLegendConfig() {
+        return {
+            xtype: 'FilterPanelLegend',
+            height: 20,
+            hidden: true,
+            bind: {
+                validity: '{validityLegendValid}',
+                tooltipMsg: '{validityLegendMsg}',
+            },
+        };
+    },
 });

package/src/report/component/reportpanel/NorthPanel.scss

@@ -1,4 +1,3 @@
-
 .NorthPanel{
     .activeToggle{
         color: #A9A9A9;
@@ -17,10 +16,80 @@
        margin: 0 4px 0 0 !important;
     }
 
+  .x-btn-icon-el-green-button-ext-small,
+  .x-btn-icon-el-orange-button-ext-small {
+    min-width: 16px !important;
+    min-height: 16px !important;
+    mask-size: 16px !important;
+    -webkit-mask-size: 16px !important;
+  }
+
+  .filterPanelBtn {
+    border: 1px solid #888888;
+    border-radius: 5px;
+    padding: 4px;
+    background-color: #fff;
+    width: 26px;
+    height: 26px;
+
+    &.x-btn-pressed, &.x-btn-focus, &.x-btn-default-small.x-btn-pressed.x-btn-focus {
+      background-color: #fff;
+      border-color: #888;
+    }
+
+    &.toggle-filter-show-btn {
+      padding: 5px;
+      &._pressed {
+        box-shadow: inset 0px 0px 4px #bdbdbd;
+      }
+    }
+
+    .filter-toolbar-iconCls {
+      mask-size: 16px;
+      -webkit-mask-size: 16px;
+      mask-repeat: no-repeat;
+      -webkit-mask-repeat: no-repeat;
+      background-color: #888888;
+    }
+
+    .toggle-filter-position-iconBtn {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNjY2NjcgMkM5LjAzNDg2IDIgOS4zMzMzMyAyLjI5ODQ4IDkuMzMzMzMgMi42NjY2N1YxMy4zMzMzTDkuMzMwMDggMTMuNDAxN0M5LjI5ODE0IDEzLjcxNTMgOS4wNDg2NCAxMy45NjQ4IDguNzM1MDMgMTMuOTk2N0w4LjY2NjY3IDE0SDIuNjY2NjdMMi41OTgzMSAxMy45OTY3QzIuMjg0NjkgMTMuOTY0OCAyLjAzNTE5IDEzLjcxNTMgMi4wMDMyNiAxMy40MDE3TDIgMTMuMzMzM1YyLjY2NjY3QzIgMi4yOTg0OCAyLjI5ODQ4IDIgMi42NjY2NyAySDguNjY2NjdaTTEzLjMzMzMgMkMxMy43MDE1IDIgMTQgMi4yOTg0OCAxNCAyLjY2NjY3VjEzLjMzMzNMMTMuOTk2NyAxMy40MDE3QzEzLjk2NDggMTMuNzE1MyAxMy43MTUzIDEzLjk2NDggMTMuNDAxNyAxMy45OTY3TDEzLjMzMzMgMTRIMTEuMzMzM0wxMS4yNjUgMTMuOTk2N0MxMC45NTE0IDEzLjk2NDggMTAuNzAxOSAxMy43MTUzIDEwLjY2OTkgMTMuNDAxN0wxMC42NjY3IDEzLjMzMzNWMi42NjY2N0MxMC42NjY3IDIuMjk4NDggMTAuOTY1MSAyIDExLjMzMzMgMkgxMy4zMzMzWk0zLjMzMzMzIDEyLjY2NjdIOFYzLjMzMzMzSDMuMzMzMzNWMTIuNjY2N1pNMTIgMTIuNjY2N0gxMi42NjY3VjMuMzMzMzNIMTJWMTIuNjY2N1oiIGZpbGw9IiM4ODg4ODgiLz4KPC9zdmc+Cg==");
+      -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNjY2NjcgMkM5LjAzNDg2IDIgOS4zMzMzMyAyLjI5ODQ4IDkuMzMzMzMgMi42NjY2N1YxMy4zMzMzTDkuMzMwMDggMTMuNDAxN0M5LjI5ODE0IDEzLjcxNTMgOS4wNDg2NCAxMy45NjQ4IDguNzM1MDMgMTMuOTk2N0w4LjY2NjY3IDE0SDIuNjY2NjdMMi41OTgzMSAxMy45OTY3QzIuMjg0NjkgMTMuOTY0OCAyLjAzNTE5IDEzLjcxNTMgMi4wMDMyNiAxMy40MDE3TDIgMTMuMzMzM1YyLjY2NjY3QzIgMi4yOTg0OCAyLjI5ODQ4IDIgMi42NjY2NyAySDguNjY2NjdaTTEzLjMzMzMgMkMxMy43MDE1IDIgMTQgMi4yOTg0OCAxNCAyLjY2NjY3VjEzLjMzMzNMMTMuOTk2NyAxMy40MDE3QzEzLjk2NDggMTMuNzE1MyAxMy43MTUzIDEzLjk2NDggMTMuNDAxNyAxMy45OTY3TDEzLjMzMzMgMTRIMTEuMzMzM0wxMS4yNjUgMTMuOTk2N0MxMC45NTE0IDEzLjk2NDggMTAuNzAxOSAxMy43MTUzIDEwLjY2OTkgMTMuNDAxN0wxMC42NjY3IDEzLjMzMzNWMi42NjY2N0MxMC42NjY3IDIuMjk4NDggMTAuOTY1MSAyIDExLjMzMzMgMkgxMy4zMzMzWk0zLjMzMzMzIDEyLjY2NjdIOFYzLjMzMzMzSDMuMzMzMzNWMTIuNjY2N1pNMTIgMTIuNjY2N0gxMi42NjY3VjMuMzMzMzNIMTJWMTIuNjY2N1oiIGZpbGw9IiM4ODg4ODgiLz4KPC9zdmc+Cg==");
+    }
+
+    .toggle-filter-show-iconBtn {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMzg2MzkgMi42NjY1OUw3LjcwNzcyIDguMDY3MjVDNy44OTY4OCA4LjMwMzggNy45OTk4NyA4LjU5NzcgNy45OTk3MiA4LjkwMDU5VjEzLjMzMzNMOS4zMzMwNiAxMi4zMzMzVjguODk5OTJDOS4zMzMwNyA4LjU5NzI3IDkuNDM2MDQgOC4zMDM2MiA5LjYyNTA2IDguMDY3MjVMMTMuOTQ2NCAyLjY2NjU5SDMuMzg2MzlaTTMuMzg2MzkgMS4zMzMyNUgxMy45NDY0QzE0LjE5NzYgMS4zMzMyOCAxNC40NDM2IDEuNDA0MjcgMTQuNjU2MyAxLjUzODAzQzE0Ljg2ODkgMS42NzE3OSAxNS4wMzk0IDEuODYyODkgMTUuMTQ4MSAyLjA4OTMxQzE1LjI1NjkgMi4zMTU3MyAxNS4yOTk0IDIuNTY4MjcgMTUuMjcxIDIuODE3ODNDMTUuMjQyNSAzLjA2NzQgMTUuMTQ0IDMuMzAzODQgMTQuOTg3MSAzLjQ5OTkyTDEwLjY2NjQgOC44OTk5MlYxMi4zMzMzQzEwLjY2NjQgMTIuNTQwMiAxMC42MTgyIDEyLjc0NDQgMTAuNTI1NiAxMi45Mjk1QzEwLjQzMzEgMTMuMTE0NyAxMC4yOTg3IDEzLjI3NTcgMTAuMTMzMSAxMy4zOTk5TDguNzk5NzIgMTQuMzk5OUM4LjYwMTYzIDE0LjU0ODUgOC4zNjYwOCAxNC42MzkgOC4xMTk0NiAxNC42NjEyQzcuODcyODUgMTQuNjgzNCA3LjYyNDkxIDE0LjYzNjYgNy40MDM0NCAxNC41MjU4QzcuMTgxOTYgMTQuNDE1MSA2Ljk5NTcgMTQuMjQ0OSA2Ljg2NTUyIDE0LjAzNDJDNi43MzUzNCAxMy44MjM2IDYuNjY2MzkgMTMuNTgwOSA2LjY2NjM5IDEzLjMzMzNWOC44OTk5MkwyLjM0NTcyIDMuNDk5OTJDMi4xODg3MyAzLjMwMzg0IDIuMDkwMzIgMy4wNjc0IDIuMDYxODMgMi44MTc4M0MyLjAzMzM0IDIuNTY4MjcgMi4wNzU5MiAyLjMxNTczIDIuMTg0NjcgMi4wODkzMUMyLjI5MzQyIDEuODYyODkgMi40NjM5MiAxLjY3MTc5IDIuNjc2NTMgMS41MzgwM0MyLjg4OTE0IDEuNDA0MjcgMy4xMzUyIDEuMzMzMjggMy4zODYzOSAxLjMzMzI1WiIgZmlsbD0iIzg4ODg4OCIvPgo8L3N2Zz4K");
+      -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMzg2MzkgMi42NjY1OUw3LjcwNzcyIDguMDY3MjVDNy44OTY4OCA4LjMwMzggNy45OTk4NyA4LjU5NzcgNy45OTk3MiA4LjkwMDU5VjEzLjMzMzNMOS4zMzMwNiAxMi4zMzMzVjguODk5OTJDOS4zMzMwNyA4LjU5NzI3IDkuNDM2MDQgOC4zMDM2MiA5LjYyNTA2IDguMDY3MjVMMTMuOTQ2NCAyLjY2NjU5SDMuMzg2MzlaTTMuMzg2MzkgMS4zMzMyNUgxMy45NDY0QzE0LjE5NzYgMS4zMzMyOCAxNC40NDM2IDEuNDA0MjcgMTQuNjU2MyAxLjUzODAzQzE0Ljg2ODkgMS42NzE3OSAxNS4wMzk0IDEuODYyODkgMTUuMTQ4MSAyLjA4OTMxQzE1LjI1NjkgMi4zMTU3MyAxNS4yOTk0IDIuNTY4MjcgMTUuMjcxIDIuODE3ODNDMTUuMjQyNSAzLjA2NzQgMTUuMTQ0IDMuMzAzODQgMTQuOTg3MSAzLjQ5OTkyTDEwLjY2NjQgOC44OTk5MlYxMi4zMzMzQzEwLjY2NjQgMTIuNTQwMiAxMC42MTgyIDEyLjc0NDQgMTAuNTI1NiAxMi45Mjk1QzEwLjQzMzEgMTMuMTE0NyAxMC4yOTg3IDEzLjI3NTcgMTAuMTMzMSAxMy4zOTk5TDguNzk5NzIgMTQuMzk5OUM4LjYwMTYzIDE0LjU0ODUgOC4zNjYwOCAxNC42MzkgOC4xMTk0NiAxNC42NjEyQzcuODcyODUgMTQuNjgzNCA3LjYyNDkxIDE0LjYzNjYgNy40MDM0NCAxNC41MjU4QzcuMTgxOTYgMTQuNDE1MSA2Ljk5NTcgMTQuMjQ0OSA2Ljg2NTUyIDE0LjAzNDJDNi43MzUzNCAxMy44MjM2IDYuNjY2MzkgMTMuNTgwOSA2LjY2NjM5IDEzLjMzMzNWOC44OTk5MkwyLjM0NTcyIDMuNDk5OTJDMi4xODg3MyAzLjMwMzg0IDIuMDkwMzIgMy4wNjc0IDIuMDYxODMgMi44MTc4M0MyLjAzMzM0IDIuNTY4MjcgMi4wNzU5MiAyLjMxNTczIDIuMTg0NjcgMi4wODkzMUMyLjI5MzQyIDEuODYyODkgMi40NjM5MiAxLjY3MTc5IDIuNjc2NTMgMS41MzgwM0MyLjg4OTE0IDEuNDA0MjcgMy4xMzUyIDEuMzMzMjggMy4zODYzOSAxLjMzMzI1WiIgZmlsbD0iIzg4ODg4OCIvPgo8L3N2Zz4K");
+    }
+    &.toggle-filter-position-btn {
+      position: relative;
+      overflow: visible;
+
+      &._pressed {
+        .filter-toolbar-iconCls {
+          transform: rotate(-90deg);
+        }
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: -1px;
+        right: -12px;
+        height: 26px;
+        width: 0px;
+        border: solid 1px #D3D3D3;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+
+.NorthPanel, .SideFilterWindow, .SideFilterPanel {
   @include sigma-button-small-ui(
           $ui: 'orange-button-ext',
           $background-color: $base-color-light,
-          $border-radius: 6px,
+          $border-radius: 5px,
           $border-width: 1px,
           $border-color: $base-color-light,
           $border-color-disabled: lighten($base-color-light, 20%),
@@ -33,8 +102,8 @@
           $background-color-disabled: lighten($base-color-light, 20%),
           $icon-size: 16px,
           $font-size: 12px,
-          $padding: 6px 12px,
-          //$text-padding: 2px
+          $padding: 5px 10px,
+    //$text-padding: 2px
   );
 
   @include sigma-button-small-ui(
@@ -44,7 +113,7 @@
           $iconColor : $base-color-light,
           $border-width: 1px,
           $inner-border-width-focus: 2px,
-          $border-radius: 6px,
+          $border-radius: 5px,
           $border-color: $base-color-light,
           $border-color-disabled: lighten($base-color-light, 20%),
           $color-over: white,
@@ -61,7 +130,7 @@
           $background-color-disabled: transparent,
           $icon-size: 16px,
           $font-size: 12px,
-          $padding: 6px 12px,
+          $padding: 5px 10px,
   );
   .x-btn-icon-el-green-button-ext-small,
   .x-btn-icon-el-orange-button-ext-small {