ru.coon 2.7.53 → 2.7.55

package/src/report/toolbar/dropdown/ToolbarConfigurationPanel.js

@@ -0,0 +1,234 @@
+/**
+ * Панель конфигурирования настроек тулбара.
+ * Регулирует видимость элементов в тулбаре.
+ * Позволяет настроить сортировку элементов.
+ */
+Ext.define('Coon.report.toolbar.dropdown.ToolbarConfigurationPanel', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'ToolbarConfigurationPanel',
+    cls: 'ToolbarConfigurationPanel',
+    width: '100%',
+    height: 330,
+    bodyPadding: '0 0 10px 0',
+    layout: {type: 'vbox', align: 'stretch'},
+    items: [
+        {
+            xtype: 'container',
+            html: 'Управление отображением кнопок отчета',
+        },
+        {
+            flex: 1,
+            xtype: 'panel',
+            layout: {type: 'hbox', align: 'stretch'},
+            defaults: {
+                flex: 1,
+                border: false,
+                rowLines: false,
+                columnLines: false,
+                margin: 5,
+            },
+            items: [
+                {
+                    xtype: 'grid',
+                    reference: 'toolbarItems',
+
+                    viewConfig: {
+                        plugins: {
+                            gridviewdragdrop: {
+                                containerScroll: true,
+                                dragGroup: 'dd-grid-group1',
+                                dropGroup: 'dd-grid-group1',
+                            },
+                        },
+                    },
+                    store: {
+                        fields: ['text', 'iconCls', 'cls', 'isGroupButton', 'isSystemButton', 'foldStateId'],
+                        data: [],
+                    },
+                    columns: [
+                        {
+                            text: 'Отчет', flex: 1, dataIndex: 'button', menuDisabled: true, sortable: false,
+                            renderer: 'buttonRenderer',
+                        },
+                        {
+                            xtype: 'actioncolumn',
+                            menuDisabled: true,
+                            width: 40,
+                            stopSelection: false,
+                            items: [
+                                {
+                                    text: 'Перенести',
+                                    to: 'right',
+                                    sortable: false,
+                                    iconCls: 'x-fa fa-toggle-on activeToggle',
+                                    handler: 'onReplaceButton',
+                                }
+                            ],
+                        }
+                    ],
+                    listeners: {
+                        boxready: function(grid) {
+                            Ext.util.Observable.capture(grid.getStore(), function(evname) {
+                            });
+                        },
+                    },
+                },
+                {
+                    xtype: 'grid',
+                    border: false,
+                    reference: 'menuItems',
+                    viewConfig: {
+                        plugins: {
+                            gridviewdragdrop: {
+                                containerScroll: true,
+                                dragGroup: 'dd-grid-group2',
+                                dropGroup: 'dd-grid-group2',
+                            },
+                        },
+                    },
+                    store: {
+                        fields: ['text', 'iconCls', 'cls', 'isGroupButton', 'isSystemButton', 'foldStateId'],
+                        data: [
+                        ],
+                    },
+                    columns: [
+                        {
+                            text: 'Панель', flex: 1, dataIndex: 'button', menuDisabled: true, sortable: false,
+                            renderer: 'buttonRenderer',
+                        },
+                        {
+                            xtype: 'actioncolumn',
+                            menuDisabled: true,
+                            width: 40,
+                            stopSelection: false,
+                            items: [
+                                {
+                                    text: 'Перенести',
+                                    sortable: false,
+                                    to: 'left',
+                                    iconCls: 'x-fa fa-toggle-on inactiveToggle fa-rotate-180',
+                                    handler: 'onReplaceButton',
+                                }
+                            ],
+                        }
+                    ],
+                }
+            ],
+        }
+    ],
+    controller: {
+
+        /**
+         * @param {string} reportId
+         * @param {Array} allItems
+         * @param {Array} foldedItems
+         */
+        doInit(reportId, allItems, foldedItems) {
+            this.reportId = reportId;
+            allItems = allItems || [];
+            foldedItems = foldedItems || [];
+
+            // Получение информации из элемента тулбара для отрисовки его в гриде конфигурации
+            // todo: Подумать о выносе данного кода в плагины (ToolbarItemPlugin)
+            const convert = function(item) {
+                let data;
+                const isGroupButton = false; // todo: Научиться распозновать по плагину
+                if (item.isButton) {
+                    data = {
+                        text: item.text, iconCls: item.config.iconCls,
+                        foldStateId: item.config.foldStateId, isGroupButton: isGroupButton, isSystemButton: false,
+                    };
+                } else if (item.xtype === 'label') {
+                    data = {
+                        text: item.config.html, iconCls: undefined,
+                        foldStateId: item.config.foldStateId, isGroupButton: isGroupButton, isSystemButton: false,
+                    };
+                } else {
+                    // todo: Сделать реализацию для других типов плагинов
+                    data = {};
+                }
+                return data;
+            };
+            this.lookup('toolbarItems').getStore().loadData(
+                allItems.filter((item) => item.itemId !== 'hiddenDisplayElement').map(convert)
+            );
+            this.lookup('menuItems').getStore().loadData(
+                foldedItems.map(convert)
+            );
+        },
+
+        buttonRenderer: function(value, meta, record) {
+            let iconCls = '';
+            const text = record.get('text');
+            if (record.get('iconCls')) {
+                iconCls = record.get('iconCls');
+            }
+            return iconCls ? `<span class="x-btn-button x-btn-button-default-toolbar-small x-btn-text  x-btn-icon x-btn-icon-left">
+                        <span class="x-btn-icon-el x-btn-icon-el-default-toolbar-small ${iconCls}" ></span>
+                        <span class="x-btn-inner x-btn-inner-default-toolbar-small">${text}</span>
+                    </span>`:
+                `<span class="x-btn-inner x-btn-inner-default-toolbar-small">${text}</span>`;
+        },
+
+        saveConfig: function(flag) {
+            const view = this.getView();
+            try {
+                if (!flag) {
+                    localStorage.setItem('REPORT_TOOLBAR_' + this.reportId, JSON.stringify(
+                        this.getConfiguration()
+                    ));
+                } else {
+                    localStorage.removeItem('REPORT_TOOLBAR_' + this.reportId);
+                }
+                const toolbar = view.up('ToolbarOverflowPanel').overflowButton.getReportToolbar();
+                toolbar && toolbar.fireEvent('needreload');
+            } catch (e) {
+                Coon.log.error('Ошибка формирования конфигурации тулбара отчета', e);
+            }
+        },
+
+        /**
+         * Получение новой конфигурации
+         * @returns {{}}
+         */
+        getConfiguration() {
+            const newUserPreferences = {data: {}, folded: undefined};
+            const convert = function(acc, item, index) {
+                const id = item.get('foldStateId');
+                if (!id) {
+                    Coon.log.warn('У кнопки нет идентификатора для сохранения состояния!');
+                }
+                acc['data'][id] = {
+                    folded: acc['folded'],
+                    position: index,
+                };
+                return acc;
+            };
+            newUserPreferences.folded = false;
+            this.lookup('toolbarItems').getStore().getRange().reduce(convert, newUserPreferences);
+            newUserPreferences.folded = true;
+            this.lookup('menuItems').getStore().getRange().reduce(convert, newUserPreferences);
+            return newUserPreferences.data;
+        },
+
+        onReplaceButton: function(view, rIdx, cIdx, item, e, record) {
+            if (item.to === 'right') {
+                this.lookup('menuItems').getStore().loadRawData([record.getData()], true);
+                this.lookup('toolbarItems').getStore().removeAt(rIdx, 1);
+            } else {
+                this.lookup('toolbarItems').getStore().loadRawData([record.getData()], true);
+                this.lookup('menuItems').getStore().removeAt(rIdx, 1);
+            }
+        },
+
+        setDefaultSettings() {
+            const menuItems = this.lookup('menuItems');
+            const toolbarItems = this.lookup('toolbarItems');
+            menuItems.getStore().getRange().forEach((record) => {
+                toolbarItems.getStore().loadRawData([record.getData()], true);
+                menuItems.getStore().remove(record);
+            });
+        },
+
+    },
+});

package/src/report/toolbar/dropdown/ToolbarConfigurationPanel.scss

@@ -0,0 +1,13 @@
+.ToolbarConfigurationPanel {
+  .x-grid-td {
+    border-right: 0 !important;
+  }
+
+  .activeToggle {
+    color: #A9A9A9;
+  }
+
+  .inactiveToggle {
+    color: #d0d0d0;
+  }
+}

package/src/report/toolbar/dropdown/ToolbarOverflowButton.js

@@ -0,0 +1,113 @@
+Ext.define('Coon.report.toolbar.dropdown.ToolbarOverflowButton', {
+    extend: 'Ext.button.Button',
+    alias: 'widget.ToolbarOverflowButton',
+    cls: 'ToolbarOverflowButton',
+    xtype: 'ToolbarOverflowButton',
+    overCls: 'no-color-on-hover',
+    iconCls: 'ToolbarOverflowButtonIcon',
+    focusOnToFront: false,
+    focusable: false,
+    allowDepress: false,
+    viewModel: {
+        data: {
+            isPanelOpen: false,
+        },
+    },
+    /* iconCls: 'fas fa-chevron-up',
+    bind: {
+        iconCls: '{iconCls}',
+    },*/
+    config: {
+        reportToolbar: undefined,
+    },
+
+    initComponent() {
+        const me = this;
+        this.dropDownMenu = Ext.create({
+            xtype: 'ToolbarOverflowPanel',
+            shadow: false,
+            overflowButton: me,
+            floating: true,
+            hideOnClick: false,
+        });
+        this.dropDownMenu.on({
+            scope: this,
+            hide: this.onHidePanel,
+            show: this.onShowPanel,
+        });
+        this.callParent();
+    },
+
+    onHidePanel: function() {
+        this.setHidden(false);
+        if (this.dropDownMenu.shadowElem) {
+            document.body.removeChild(this.dropDownMenu.shadowElem);
+        }
+        this.getViewModel().set('isPanelOpen', false);
+        this.dropDownMenu.getController().clearContainer(this.reportToolbar);
+        this.dropDownMenu.setActiveItem(0);
+    },
+
+    setIndicator() {
+        if (!this.hasCls('indicator-button')) {
+            this.addCls('indicator-button');
+        }
+    },
+
+    removeIndicator() {
+        if (this.hasCls('indicator-button')) {
+            this.removeCls('indicator-button');
+        }
+    },
+
+    setOverflowIndicator(indicator) {
+        if (indicator && !this.overflowIndicator) {
+            const div = document.createElement('div');
+            div.setAttribute('class', 'overflow-indicator');
+            this.overflowIndicator= this.getEl().dom.appendChild(div);
+        }
+        if (!indicator && this.overflowIndicator) {
+            this.getEl().dom.removeChild(this.overflowIndicator);
+            this.overflowIndicator = null;
+        }
+    },
+
+    onShowPanel: function() {
+        this.getViewModel().set('isPanelOpen', true);
+        const div = document.createElement('div');
+        div.setAttribute('class', 'shadow-elem');
+        const style = this.dropDownMenu.el.dom.style;
+        const xy = this.dropDownMenu.getXY();
+        div.style.zIndex = style.zIndex + 1;
+        div.style.top = (xy[1] - 34) + 'px';
+        div.style.left = (xy[0] + Number(style.width.replace('px', '')) - 40) + 'px';
+        this.dropDownMenu.shadowElem = document.body.appendChild(div);
+        this.setHidden(true);
+    },
+    listeners: {
+        render: function() {
+            if (this.reportToolbar.up('WindowWrap')) {
+                this.reportToolbar.up('WindowWrap').on({
+                    beforeclose: () => this.dropDownMenu.hide(),
+                    beforecollapse: () => this.dropDownMenu.hide(),
+                    beforehide: () => this.dropDownMenu.hide(),
+                    resize: () => this.dropDownMenu.hide(),
+                    scope: this,
+                });
+            }
+        },
+    },
+    handler: function(button) {
+        if (button.disableHandler === true) {
+            button.disableHandler = false;
+            return;
+        }
+        const isPanelOpen = this.getViewModel().get('isPanelOpen');
+        if (isPanelOpen) {
+            this.dropDownMenu.hide();
+        } else {
+            this.dropDownMenu.showBy(button, 'tr-br?', [0, 2]);
+        }
+    },
+
+});

package/src/report/toolbar/dropdown/ToolbarOverflowButton.scss

@@ -0,0 +1,94 @@
+/*.ToolbarOverflowButton {
+  padding: 8px 8px;
+  background-repeat: no-repeat;
+  width: 30px;
+  height: 30px;
+  border: 1px solid #3d6780;
+  border-radius: 6px;
+  //mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAgMzAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV8zMzMzXzcyNTU4IiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTAgNkMwIDIuNjg2MjkgMi42ODYyOSAwIDYgMEgyNEMyNy4zMTM3IDAgMzAgMi42ODYyOSAzMCA2VjI0QzMwIDI3LjMxMzcgMjcuMzEzNyAzMCAyNCAzMEg2QzIuNjg2MjkgMzAgMCAyNy4zMTM3IDAgMjRWNloiLz48L21hc2s+PHBhdGggZD0iTTAgNkMwIDIuNjg2MjkgMi42ODYyOSAwIDYgMEgyNEMyNy4zMTM3IDAgMzAgMi42ODYyOSAzMCA2VjI0QzMwIDI3LjMxMzcgMjcuMzEzNyAzMCAyNCAzMEg2QzIuNjg2MjkgMzAgMCAyNy4zMTM3IDAgMjRWNloiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTYgMUgyNFYtMUg2VjFaTTI5IDZWMjRIMzFWNkgyOVpNMjQgMjlINlYzMUgyNFYyOVpNMSAyNFY2SC0xVjI0SDFaTTYgMjlDMy4yMzg1OCAyOSAxIDI2Ljc2MTQgMSAyNEgtMUMtMSAyNy44NjYgMi4xMzQwMSAzMSA2IDMxVjI5Wk0yOSAyNEMyOSAyNi43NjE0IDI2Ljc2MTQgMjkgMjQgMjlWMzFDMjcuODY2IDMxIDMxIDI3Ljg2NiAzMSAyNEgyOVpNMjQgMUMyNi43NjE0IDEgMjkgMy4yMzg1OCAyOSA2SDMxQzMxIDIuMTM0MDEgMjcuODY2IC0xIDI0IC0xVjFaTTYgLTFDMi4xMzQwMSAtMSAtMSAyLjEzNDAxIC0xIDZIMUMxIDMuMjM4NTggMy4yMzg1OCAxIDYgMVYtMVoiIGZpbGw9IiMzRDY3ODAiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xXzMzMzNfNzI1NTgpIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjQ2OTY3IDExLjQ2OTdDOC43NjI1NiAxMS4xNzY4IDkuMjM3NDQgMTEuMTc2OCA5LjUzMDMzIDExLjQ2OTdMMTUgMTYuOTM5M0wyMC40Njk3IDExLjQ2OTdDMjAuNzYyNiAxMS4xNzY4IDIxLjIzNzQgMTEuMTc2OCAyMS41MzAzIDExLjQ2OTdDMjEuODIzMiAxMS43NjI2IDIxLjgyMzIgMTIuMjM3NCAyMS41MzAzIDEyLjUzMDNMMTUuNTMwMyAxOC41MzAzQzE1LjIzNzQgMTguODIzMiAxNC43NjI2IDE4LjgyMzIgMTQuNDY5NyAxOC41MzAzTDguNDY5NjcgMTIuNTMwM0M4LjE3Njc4IDEyLjIzNzQgOC4xNzY3OCAxMS43NjI2IDguNDY5NjcgMTEuNDY5N1oiIGZpbGw9IiMzRDY3ODAiLz48L3N2Zz4=");
+  .no-color-on-hover{
+    background-color: #FFFFFFFF;
+  }
+}
+
+.ToolbarOverflowButton.x-btn-menu-active,
+.ToolbarOverflowButton.x-btn-pressed,
+.ToolbarOverflowButton.x-btn-focus,
+{
+  background-color: #ffffff !important;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyAgaGVpZ2h0PSIzNSIgdmlld0JveD0iMCAwIDM4IDM1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8zNDYzXzc1NzYpIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0IDBDMTAuNjg2MyAwIDggMi42ODYyOSA4IDZWMjZDOCAyNy4wNTA2IDcuNzkzMDcgMjguMDkwOSA3LjM5MTA0IDI5LjA2MTVDNi45ODkgMzAuMDMyMSA2LjM5OTcyIDMwLjkxNCA1LjY1Njg1IDMxLjY1NjlDNC45MTM5OSAzMi4zOTk3IDQuMDMyMDcgMzIuOTg5IDMuMDYxNDcgMzMuMzkxQzIuMDkwODYgMzMuNzkzMSAxLjA1MDU4IDM0IDAgMzRWMzVIOEg5SDM4VjZDMzggMi42ODYyOSAzNS4zMTM3IDAgMzIgMEgxNFoiIGZpbGw9IndoaXRlIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yOS41MzAzIDE4LjUzMDNDMjkuMjM3NCAxOC44MjMyIDI4Ljc2MjYgMTguODIzMiAyOC40Njk3IDE4LjUzMDNMMjMgMTMuMDYwN0wxNy41MzAzIDE4LjUzMDNDMTcuMjM3NCAxOC44MjMyIDE2Ljc2MjYgMTguODIzMiAxNi40Njk3IDE4LjUzMDNDMTYuMTc2OCAxOC4yMzc0IDE2LjE3NjggMTcuNzYyNiAxNi40Njk3IDE3LjQ2OTdMMjIuNDY5NyAxMS40Njk3QzIyLjc2MjYgMTEuMTc2OCAyMy4yMzc0IDExLjE3NjggMjMuNTMwMyAxMS40Njk3TDI5LjUzMDMgMTcuNDY5N0MyOS44MjMyIDE3Ljc2MjYgMjkuODIzMiAxOC4yMzc0IDI5LjUzMDMgMTguNTMwM1oiIGZpbGw9IiMzRDY3ODAiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkgNkM5IDMuMjM4NTggMTEuMjM4NiAxIDE0IDFIMzJDMzQuNzYxNCAxIDM3IDMuMjM4NTggMzcgNlYyNlYzNFYzNUgzOFY2QzM4IDIuNjg2MjkgMzUuMzEzNyAwIDMyIDBIMTRDMTAuNjg2MyAwIDggMi42ODYyOSA4IDZWMjZDOCAyNy4wNTA2IDcuNzkzMDcgMjguMDkwOSA3LjM5MTA0IDI5LjA2MTVDNi45ODkgMzAuMDMyMSA2LjM5OTcyIDMwLjkxNCA1LjY1Njg1IDMxLjY1NjlDNC45MTM5OSAzMi4zOTk3IDQuMDMyMDcgMzIuOTg5IDMuMDYxNDcgMzMuMzkxQzIuMDkwODYgMzMuNzkzMSAxLjA1MDU4IDM0IDAgMzRWMzVDMS4xODE5IDM1IDIuMzUyMjIgMzQuNzY3MiAzLjQ0NDE1IDM0LjMxNDlDMy42NzUxMSAzNC4yMTkyIDMuOTAxNjEgMzQuMTE0MiA0LjEyMzEgMzRDNC45NDg3OSAzMy41NzQ0IDUuNzA1IDMzLjAyMjkgNi4zNjM5NiAzMi4zNjRDNi40Njg0MyAzMi4yNTk1IDYuNTcwMTkgMzIuMTUyNiA2LjY2OTE5IDMyLjA0MzNDNy4zNjIxMyAzMS4yNzg2IDcuOTE5MTYgMzAuMzk5NiA4LjMxNDkyIDI5LjQ0NDJDOC43NjcyMSAyOC4zNTIyIDkgMjcuMTgxOSA5IDI2VjZaIiBmaWxsPSIjM0Q2NzgwIiBmaWxsLW9wYWNpdHk9IjAuNSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzM0NjNfNzU3NiI+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+") !important;
+  border-color: #3d6780 !important;
+}*/
+
+
+.ToolbarOverflowButton.x-btn-menu-active,
+.ToolbarOverflowButton.x-btn-pressed,
+.ToolbarOverflowButton.x-btn-focus,
+{
+  background-color: #ffffff !important;
+  border-color: #3d6780 !important;
+}
+
+.ToolbarOverflowButton {
+  border: 1px solid #3d6780;
+  border-radius: 6px;
+  padding: 7px;
+
+  .overflow-indicator{
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    right: 3px;
+    top:3px;
+    background-color: #6493CC;
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNiA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjMiIGN5PSIzIiByPSIzIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
+    mask-size: 100%;
+  }
+
+  .ToolbarOverflowButtonIcon{
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjI5Mjg5IDcuMjkyODlDMy42ODM0MiA2LjkwMjM3IDQuMzE2NTggNi45MDIzNyA0LjcwNzExIDcuMjkyODlMMTIgMTQuNTg1OEwxOS4yOTI5IDcuMjkyODlDMTkuNjgzNCA2LjkwMjM3IDIwLjMxNjYgNi45MDIzNyAyMC43MDcxIDcuMjkyODlDMjEuMDk3NiA3LjY4MzQyIDIxLjA5NzYgOC4zMTY1OCAyMC43MDcxIDguNzA3MTFMMTIuNzA3MSAxNi43MDcxQzEyLjMxNjYgMTcuMDk3NiAxMS42ODM0IDE3LjA5NzYgMTEuMjkyOSAxNi43MDcxTDMuMjkyODkgOC43MDcxMUMyLjkwMjM3IDguMzE2NTggMi45MDIzNyA3LjY4MzQyIDMuMjkyODkgNy4yOTI4OVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+");
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    background-color: #3d6780;
+  }
+}
+
+
+.indicator-button{
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAgMzAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgNkMwIDIuNjg2MjkgMi42ODYyOSAwIDYgMEgyNEMyNy4zMTM3IDAgMzAgMi42ODYyOSAzMCA2VjI0QzMwIDI3LjMxMzcgMjcuMzEzNyAzMCAyNCAzMEg2QzIuNjg2MjkgMzAgMCAyNy4zMTM3IDAgMjRWNloiIGZpbGw9IiNFQ0YxRjkiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguNDY5NjcgMTEuNDY5N0M4Ljc2MjU2IDExLjE3NjggOS4yMzc0NCAxMS4xNzY4IDkuNTMwMzMgMTEuNDY5N0wxNSAxNi45MzkzTDIwLjQ2OTcgMTEuNDY5N0MyMC43NjI2IDExLjE3NjggMjEuMjM3NCAxMS4xNzY4IDIxLjUzMDMgMTEuNDY5N0MyMS44MjMyIDExLjc2MjYgMjEuODIzMiAxMi4yMzc0IDIxLjUzMDMgMTIuNTMwM0wxNS41MzAzIDE4LjUzMDNDMTUuMjM3NCAxOC44MjMyIDE0Ljc2MjYgMTguODIzMiAxNC40Njk3IDE4LjUzMDNMOC40Njk2NyAxMi41MzAzQzguMTc2NzggMTIuMjM3NCA4LjE3Njc4IDExLjc2MjYgOC40Njk2NyAxMS40Njk3WiIgZmlsbD0iIzNENjc4MCIvPjwvc3ZnPg==") !important;
+}
+
+.go-to-button{
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzkxN18yNDU4KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi43MDcxIDE2LjcwNzFMMTYuNzA3MSAxMi43MDcxQzE3LjA5NzYgMTIuMzE2NiAxNy4wOTc2IDExLjY4MzQgMTYuNzA3MSAxMS4yOTI5TDEyLjcwNzEgNy4yOTI4OUMxMi4zMTY2IDYuOTAyMzcgMTEuNjgzNCA2LjkwMjM3IDExLjI5MjkgNy4yOTI4OUMxMC45MDI0IDcuNjgzNDIgMTAuOTAyNCA4LjMxNjU4IDExLjI5MjkgOC43MDcxMUwxMy41ODU4IDExTDkuMDkwOTEgMTFDNi4zMTc4NSAxMSA0IDEzLjE2ODggNCAxNS45Mjg2TDQgMjNDNCAyMy41NTIzIDQuNDQ3NzIgMjQgNSAyNEM1LjU1MjI5IDI0IDYgMjMuNTUyMyA2IDIzTDYgMTUuOTI4NkM2IDE0LjM0ODkgNy4zNDUzMiAxMyA5LjA5MDkxIDEzTDEzLjU4NTggMTNMMTEuMjkyOSAxNS4yOTI5QzEwLjkwMjQgMTUuNjgzNCAxMC45MDI0IDE2LjMxNjYgMTEuMjkyOSAxNi43MDcxQzExLjY4MzQgMTcuMDk3NiAxMi4zMTY2IDE3LjA5NzYgMTIuNzA3MSAxNi43MDcxWiIgZmlsbD0iYmxhY2siLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjI5MjkgMC4yOTI4OTNDMTEuNjgzNCAtMC4wOTc2MzExIDEyLjMxNjYgLTAuMDk3NjMxMSAxMi43MDcxIDAuMjkyODkzTDIzLjcwNzEgMTEuMjkyOUMyNC4wOTc2IDExLjY4MzQgMjQuMDk3NiAxMi4zMTY2IDIzLjcwNzEgMTIuNzA3MUwxMi43MDcxIDIzLjcwNzFDMTIuNTE5NiAyMy44OTQ2IDEyLjI2NTIgMjQgMTIgMjRDMTEuNzM0OCAyNCAxMS40ODA0IDIzLjg5NDYgMTEuMjkyOSAyMy43MDcxTDcuNDQyODkgMTkuODU3MUM3LjA1MjM3IDE5LjQ2NjYgNy4wNTIzNyAxOC44MzM0IDcuNDQyODkgMTguNDQyOUM3LjgzMzQyIDE4LjA1MjQgOC40NjY1OCAxOC4wNTI0IDguODU3MTEgMTguNDQyOUwxMiAyMS41ODU4TDIxLjU4NTggMTJMMTIgMi40MTQyMUwyLjQxNDIxIDEyTDIuNzA3MTEgMTIuMjkyOUMzLjA5NzYzIDEyLjY4MzQgMy4wOTc2MyAxMy4zMTY2IDIuNzA3MTEgMTMuNzA3MUMyLjMxNjU4IDE0LjA5NzYgMS42ODM0MiAxNC4wOTc2IDEuMjkyODkgMTMuNzA3MUwwLjI5Mjg5MyAxMi43MDcxQy0wLjA5NzYzMTEgMTIuMzE2NiAtMC4wOTc2MzExIDExLjY4MzQgMC4yOTI4OTMgMTEuMjkyOUwxMS4yOTI5IDAuMjkyODkzWiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfOTE3XzI0NTgiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+");
+}
+
+.print-pdf-button{
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjAwMDAxIDAuOTg5OTlDMy40NDc3MiAwLjk4OTk5IDMuMDAwMDEgMS40Mzc3MSAzLjAwMDAxIDEuOTg5OTlWMTAuOTlDMy4wMDAwMSAxMS41NDIzIDMuNDQ3NzIgMTEuOTkgNC4wMDAwMSAxMS45OUM0LjU1MjI5IDExLjk5IDUuMDAwMDEgMTEuNTQyMyA1LjAwMDAxIDEwLjk5VjIuOTg5OTlIMTRWNi45ODk5OUMxNCA3LjU0MjI3IDE0LjQ0NzcgNy45ODk5OSAxNSA3Ljk4OTk5SDE5VjEwLjk5QzE5IDExLjU0MjMgMTkuNDQ3NyAxMS45OSAyMCAxMS45OUMyMC41NTIzIDExLjk5IDIxIDExLjU0MjMgMjEgMTAuOTlWNi45ODk5OUMyMSA2LjcyNDc3IDIwLjg5NDcgNi40NzA0MiAyMC43MDcxIDYuMjgyODhMMTUuNzA3MSAxLjI4Mjg4QzE1LjUxOTYgMS4wOTUzNSAxNS4yNjUyIDAuOTg5OTkgMTUgMC45ODk5OUg0LjAwMDAxWk0xNy41ODU4IDUuOTg5OTlMMTYgNC40MDQyVjUuOTg5OTlIMTcuNTg1OFpNMy4zMDQ5MyAyMC4wNTQ5SDQuNzU4MDZDNS40Mzc3NCAyMC4wNTQ5IDYuMDE5NzggMTkuOTQzNiA2LjUwNDE1IDE5LjcyMDlDNi45OTI0MyAxOS40OTQ0IDcuMzY1NDggMTkuMTc4IDcuNjIzMjkgMTguNzcxN0M3Ljg4NTAxIDE4LjM2NTUgOC4wMTU4NyAxNy44ODcgOC4wMTU4NyAxNy4zMzYyQzguMDE1ODcgMTYuNzg1NCA3Ljg4NTAxIDE2LjI5NzEgNy42MjMyOSAxNS44NzEzQzcuMzY1NDggMTUuNDQxNyA2Ljk5MjQzIDE1LjEwMzggNi41MDQxNSAxNC44NTc3QzYuMDE5NzggMTQuNjExNiA1LjQzNzc0IDE0LjQ4ODUgNC43NTgwNiAxNC40ODg1SDEuMzk0NzhWMjMuMDE5OEgzLjMwNDkzVjIwLjA1NDlaTTMuMzA0OTMgMTguNTcyNVYxNS45NzA5SDQuNzU4MDZDNS4wNzQ0NiAxNS45NzA5IDUuMzI4MzcgMTYuMDM1NCA1LjUxOTc4IDE2LjE2NDNDNS43MTUwOSAxNi4yOTMyIDUuODU3NjcgMTYuNDYzMSA1Ljk0NzUxIDE2LjY3NDFDNi4wNDEyNiAxNi44ODExIDYuMDg4MTMgMTcuMTA1NyA2LjA4ODEzIDE3LjM0NzlDNi4wODgxMyAxNy41ODIzIDYuMDQxMjYgMTcuNzkzMiA1Ljk0NzUxIDE3Ljk4MDdDNS44NTc2NyAxOC4xNjQzIDUuNzE1MDkgMTguMzA4OCA1LjUxOTc4IDE4LjQxNDNDNS4zMjgzNyAxOC41MTk4IDUuMDc0NDYgMTguNTcyNSA0Ljc1ODA2IDE4LjU3MjVIMy4zMDQ5M1pNMTEuMzI2MiAyMy4wMTk4SDEyLjExNzJDMTIuNjkxNCAyMy4wMTk4IDEzLjIxNjggMjIuOTIyMSAxMy42OTM0IDIyLjcyNjhDMTQuMTY5OSAyMi41MzE1IDE0LjU4MiAyMi4yNTQyIDE0LjkyOTcgMjEuODk0OEMxNS4yODEzIDIxLjUzMTUgMTUuNTUyNyAyMS4xMDE4IDE1Ljc0NDIgMjAuNjA1N0MxNS45MzU2IDIwLjEwNTcgMTYuMDMxMyAxOS41NTMgMTYuMDMxMyAxOC45NDc1VjE4LjU2NjdDMTYuMDMxMyAxNy45NTczIDE1LjkzNTYgMTcuNDA0NSAxNS43NDQyIDE2LjkwODRDMTUuNTUyNyAxNi40MTI0IDE1LjI4MTMgMTUuOTgyNyAxNC45Mjk3IDE1LjYxOTRDMTQuNTgyIDE1LjI1NjEgMTQuMTY4IDE0Ljk3NjggMTMuNjg3NSAxNC43ODE1QzEzLjIxMDkgMTQuNTg2MiAxMi42ODM2IDE0LjQ4ODUgMTIuMTA1NSAxNC40ODg1SDExLjMyNjJIMTAuMjA3SDkuNDE2MDNWMjMuMDE5OEgxMC4yNDIySDExLjMyNjJaTTExLjMyNjIgMjEuNTQzMkgxMi4xMTcyQzEyLjU0MyAyMS41NDMyIDEyLjkwMjQgMjEuNDQ1NiAxMy4xOTUzIDIxLjI1MDJDMTMuNDg4MyAyMS4wNTEgMTMuNzEwOSAyMC43NTgxIDEzLjg2MzMgMjAuMzcxM0MxNC4wMTU2IDE5Ljk4MDcgMTQuMDkxOCAxOS41MDYxIDE0LjA5MTggMTguOTQ3NVYxOC41NTQ5QzE0LjA5MTggMTguMTMzMSAxNC4wNDg4IDE3Ljc2MiAxMy45NjI5IDE3LjQ0MTdDMTMuODc3IDE3LjExNzQgMTMuNzUgMTYuODQ1OSAxMy41ODIgMTYuNjI3MkMxMy40MTQxIDE2LjQwODQgMTMuMjA1MSAxNi4yNDQ0IDEyLjk1NTEgMTYuMTM1QzEyLjcwOSAxNi4wMjU2IDEyLjQyNTggMTUuOTcwOSAxMi4xMDU1IDE1Ljk3MDlIMTEuMzI2MlYyMS41NDMyWk0xOS4zNDc0IDE4LjA4NjJWMTUuOTcwOUgyMy4wNzk5VjE0LjQ4ODVIMTkuMzQ3NEgxOC44MTQySDE3LjQzNzNWMjMuMDE5OEgxOS4zNDc0VjE5LjU2MjdIMjIuNzA0OVYxOC4wODYySDE5LjM0NzRaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
+}
+
+.masked-system-button{
+  padding: 0 !important;
+  background-color: #3d6780;
+  mask-size: 100%;
+  mask-repeat: no-repeat;
+}
+
+.print-excel-button{
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjAwMDAxIDAuOTg5OTlDMy40NDc3MiAwLjk4OTk5IDMuMDAwMDEgMS40Mzc3MSAzLjAwMDAxIDEuOTg5OTlWMTAuOTlDMy4wMDAwMSAxMS41NDIzIDMuNDQ3NzIgMTEuOTkgNC4wMDAwMSAxMS45OUM0LjU1MjI5IDExLjk5IDUuMDAwMDEgMTEuNTQyMyA1LjAwMDAxIDEwLjk5VjIuOTg5OTlIMTRWNi45ODk5OUMxNCA3LjU0MjI3IDE0LjQ0NzcgNy45ODk5OSAxNSA3Ljk4OTk5SDE5VjEwLjk5QzE5IDExLjU0MjMgMTkuNDQ3NyAxMS45OSAyMCAxMS45OUMyMC41NTIzIDExLjk5IDIxIDExLjU0MjMgMjEgMTAuOTlWNi45ODk5OUMyMSA2LjcyNDc3IDIwLjg5NDcgNi40NzA0MiAyMC43MDcxIDYuMjgyODhMMTUuNzA3MSAxLjI4Mjg4QzE1LjUxOTYgMS4wOTUzNSAxNS4yNjUyIDAuOTg5OTkgMTUgMC45ODk5OUg0LjAwMDAxWk0xNy41ODU4IDUuOTg5OTlMMTYgNC40MDQyVjUuOTg5OTlIMTcuNTg1OFpNNC43ODE0OSAxNy4zOTQ4TDMuMjgxNDkgMTQuNDg4NUgxLjEwMTgxTDMuNTMzNDUgMTguNzE5TDEuMDM3MzUgMjMuMDE5OEgzLjI0MDQ4TDQuNzgxNDkgMjAuMDYwOEw2LjMyODM3IDIzLjAxOThIOC41MjU2M0w2LjAzNTQgMTguNzE5TDguNDYxMTggMTQuNDg4NUg2LjI4MTQ5TDQuNzgxNDkgMTcuMzk0OFpNMTUuMTExMyAyMy4wMTk4VjIxLjU0MzJIMTEuNDU1MVYxNC40ODg1SDkuNTQ0OTNWMjMuMDE5OEgxMC44MDQ3SDExLjQ1NTFIMTUuMTExM1pNMjAuNjQ4MiAyMC4zODMxQzIwLjY5MTIgMjAuNDk2MyAyMC43MTI3IDIwLjYyNTIgMjAuNzEyNyAyMC43Njk4QzIwLjcxMjcgMjAuOTQxNyAyMC42Njk3IDIxLjA5NzkgMjAuNTgzOCAyMS4yMzg1QzIwLjQ5NzggMjEuMzc5MiAyMC4zNjUgMjEuNDkwNSAyMC4xODUzIDIxLjU3MjVDMjAuMDA5NSAyMS42NTA2IDE5Ljc3OTEgMjEuNjg5NyAxOS40OTM5IDIxLjY4OTdDMTkuMjQ3OCAyMS42ODk3IDE5LjAyNTIgMjEuNjY2MyAxOC44MjU5IDIxLjYxOTRDMTguNjI2NyAyMS41NzI1IDE4LjQ1NjggMjEuNDk0NCAxOC4zMTYyIDIxLjM4NUMxOC4xNzk1IDIxLjI3NTYgMTguMDc0IDIxLjEzMzEgMTcuOTk5OCAyMC45NTczQzE3LjkyNTYgMjAuNzc3NiAxNy44ODg0IDIwLjU1ODggMTcuODg4NCAyMC4zMDFIMTUuOTc4M0MxNS45NzgzIDIwLjc5MzIgMTYuMDc3OSAyMS4yMTkgMTYuMjc3MSAyMS41Nzg0QzE2LjQ4MDIgMjEuOTMzOCAxNi43NDk4IDIyLjIyNjggMTcuMDg1NyAyMi40NTczQzE3LjQyNTYgMjIuNjg3NyAxNy44MDQ1IDIyLjg1OTYgMTguMjIyNCAyMi45NzI5QzE4LjY0MDQgMjMuMDgyMyAxOS4wNjQyIDIzLjEzNyAxOS40OTM5IDIzLjEzN0MxOS45NjY2IDIzLjEzNyAyMC4zOTQzIDIzLjA4NDIgMjAuNzc3MSAyMi45Nzg4QzIxLjE1OTkgMjIuODczMyAyMS40ODgxIDIyLjcxOSAyMS43NjE1IDIyLjUxNTlDMjIuMDM4OCAyMi4zMDg4IDIyLjI0OTggMjIuMDU4OCAyMi4zOTQzIDIxLjc2NTlDMjIuNTQyNyAyMS40NzI5IDIyLjYxNyAyMS4xMzcgMjIuNjE3IDIwLjc1ODFDMjIuNjE3IDIwLjQwMjYgMjIuNTU0NSAyMC4wODQyIDIyLjQyOTUgMTkuODAzQzIyLjMwODQgMTkuNTIxNyAyMi4xMjY3IDE5LjI2OTggMjEuODg0NSAxOS4wNDcxQzIxLjY0MjQgMTguODI0NSAyMS4zNDM1IDE4LjYyNTIgMjAuOTg4MSAxOC40NDk1QzIwLjYzNjUgMTguMjczNyAyMC4yMzIyIDE4LjExMzUgMTkuNzc1MiAxNy45NjlDMTkuNTEzNCAxNy44OTA5IDE5LjI4MSAxNy44MDg4IDE5LjA3NzkgMTcuNzIyOUMxOC44NzQ4IDE3LjYzNyAxOC43MDI5IDE3LjU0NzEgMTguNTYyMyAxNy40NTM0QzE4LjQyNTYgMTcuMzU1NyAxOC4zMjAxIDE3LjI1MjIgMTguMjQ1OSAxNy4xNDI4QzE4LjE3NTYgMTcuMDI5NSAxOC4xNDA0IDE2LjkwNDUgMTguMTQwNCAxNi43Njc4QzE4LjE0MDQgMTYuNTk1OSAxOC4xODczIDE2LjQzNzcgMTguMjgxIDE2LjI5MzJDMTguMzc4NyAxNi4xNDg3IDE4LjUyMTMgMTYuMDM1NCAxOC43MDg4IDE1Ljk1MzRDMTguOTAwMiAxNS44Njc0IDE5LjEzNjUgMTUuODI0NSAxOS40MTc3IDE1LjgyNDVDMTkuNzA2OCAxNS44MjQ1IDE5Ljk0NyAxNS44NzUyIDIwLjEzODQgMTUuOTc2OEMyMC4zMzM4IDE2LjA3ODQgMjAuNDc4MyAxNi4yMTkgMjAuNTcyIDE2LjM5ODdDMjAuNjY5NyAxNi41NzQ1IDIwLjcxODUgMTYuNzc3NiAyMC43MTg1IDE3LjAwODFIMjIuNjE3QzIyLjYxNyAxNi40ODQ2IDIyLjQ4NDEgMTYuMDI1NiAyMi4yMTg1IDE1LjYzMTFDMjEuOTUyOSAxNS4yMzI3IDIxLjU4MTggMTQuOTI0MSAyMS4xMDUyIDE0LjcwNTNDMjAuNjMyNiAxNC40ODI3IDIwLjA4MzggMTQuMzcxMyAxOS40NTg4IDE0LjM3MTNDMTguOTkgMTQuMzcxMyAxOC41NjAzIDE0LjQyOCAxOC4xNjk3IDE0LjU0MTNDMTcuNzc5MSAxNC42NTA2IDE3LjQzOTIgMTQuODEwOCAxNy4xNTAyIDE1LjAyMTdDMTYuODYxMSAxNS4yMjg4IDE2LjYzNjUgMTUuNDc4OCAxNi40NzYzIDE1Ljc3MTdDMTYuMzE2MiAxNi4wNjQ3IDE2LjIzNjEgMTYuMzkyOCAxNi4yMzYxIDE2Ljc1NjFDMTYuMjM2MSAxNy4xMzExIDE2LjMxMjMgMTcuNDU5MiAxNi40NjQ2IDE3Ljc0MDVDMTYuNjIwOSAxOC4wMjE3IDE2LjgzMzggMTguMjY3OCAxNy4xMDMzIDE4LjQ3ODhDMTcuMzcyOCAxOC42ODk3IDE3LjY3OTUgMTguODc1MiAxOC4wMjMyIDE5LjAzNTRDMTguMzcwOSAxOS4xOTE3IDE4LjczNjEgMTkuMzMyMyAxOS4xMTg5IDE5LjQ1NzNDMTkuNDU0OSAxOS41NjI3IDE5LjcyNjMgMTkuNjY2MyAxOS45MzM0IDE5Ljc2NzhDMjAuMTQwNCAxOS44NjU1IDIwLjMwMDYgMTkuOTYzMSAyMC40MTM4IDIwLjA2MDhDMjAuNTI3MSAyMC4xNTg0IDIwLjYwNTIgMjAuMjY1OSAyMC42NDgyIDIwLjM4MzFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
+}
+
+.print-csv-button{
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjAwMDAxIDAuOTg5OTlDMy40NDc3MiAwLjk4OTk5IDMuMDAwMDEgMS40Mzc3MSAzLjAwMDAxIDEuOTg5OTlWMTAuOTlDMy4wMDAwMSAxMS41NDIzIDMuNDQ3NzIgMTEuOTkgNC4wMDAwMSAxMS45OUM0LjU1MjI5IDExLjk5IDUuMDAwMDEgMTEuNTQyMyA1LjAwMDAxIDEwLjk5VjIuOTg5OTlIMTRWNi45ODk5OUMxNCA3LjU0MjI3IDE0LjQ0NzcgNy45ODk5OSAxNSA3Ljk4OTk5SDE5VjEwLjk5QzE5IDExLjU0MjMgMTkuNDQ3NyAxMS45OSAyMCAxMS45OUMyMC41NTIzIDExLjk5IDIxIDExLjU0MjMgMjEgMTAuOTlWNi45ODk5OUMyMSA2LjcyNDc3IDIwLjg5NDcgNi40NzA0MiAyMC43MDcxIDYuMjgyODhMMTUuNzA3MSAxLjI4Mjg4QzE1LjUxOTYgMS4wOTUzNSAxNS4yNjUyIDAuOTg5OTkgMTUgMC45ODk5OUg0LjAwMDAxWk0xNy41ODU4IDUuOTg5OTlMMTYgNC40MDQyVjUuOTg5OTlIMTcuNTg1OFpNNy42NjQzMSAyMC4xNjA0SDUuNzY1ODdDNS43NDYzNCAyMC40OTI0IDUuNjc2MDMgMjAuNzY3OCA1LjU1NDkzIDIwLjk4NjZDNS40MzM4NCAyMS4yMDUzIDUuMjYwMDEgMjEuMzY5NCA1LjAzMzQ1IDIxLjQ3ODhDNC44MDY4OCAyMS41ODQyIDQuNTIzNjggMjEuNjM3IDQuMTgzODQgMjEuNjM3QzMuODg2OTYgMjEuNjM3IDMuNjM1MDEgMjEuNTg0MiAzLjQyNzk4IDIxLjQ3ODhDMy4yMjA5NSAyMS4zNzMzIDMuMDUxMDMgMjEuMjEzMSAyLjkxODIxIDIwLjk5ODNDMi43ODkzMSAyMC43ODM0IDIuNjk1NTYgMjAuNTEyIDIuNjM2OTYgMjAuMTgzOEMyLjU3ODM3IDE5Ljg1NTcgMi41NDkwNyAxOS40NjcgMi41NDkwNyAxOS4wMTc4VjE4LjQ4NDZDMi41NDkwNyAxOC4wMzE1IDIuNTgyMjggMTcuNjQwOSAyLjY0ODY4IDE3LjMxMjdDMi43MTUwOSAxNi45ODA3IDIuODE0NyAxNi43MDczIDIuOTQ3NTEgMTYuNDkyNEMzLjA4NDIzIDE2LjI3NzYgMy4yNTQxNSAxNi4xMTk0IDMuNDU3MjggMTYuMDE3OEMzLjY2NDMxIDE1LjkxNjMgMy45MDQ1NCAxNS44NjU1IDQuMTc3OTggMTUuODY1NUM0LjU1Mjk4IDE1Ljg2NTUgNC44NTM3NiAxNS45MjQxIDUuMDgwMzIgMTYuMDQxM0M1LjMwNjg4IDE2LjE1ODQgNS40NzQ4NSAxNi4zMzIzIDUuNTg0MjMgMTYuNTYyN0M1LjY5MzYgMTYuNzg5MyA1Ljc1NjEgMTcuMDY4NiA1Ljc3MTczIDE3LjQwMDZINy42NzYwM0M3LjYyMTM0IDE2LjgxNDcgNy40NTUzMiAxNi4yOTMyIDcuMTc3OTggMTUuODM2MkM2LjkwNDU0IDE1LjM3OTIgNi41MTc4MiAxNS4wMTk4IDYuMDE3ODIgMTQuNzU4MUM1LjUxNzgyIDE0LjQ5NjMgNC45MDQ1NCAxNC4zNjU1IDQuMTc3OTggMTQuMzY1NUMzLjYzODkyIDE0LjM2NTUgMy4xNTA2MyAxNC40NjEyIDIuNzEzMTMgMTQuNjUyNkMyLjI3NTYzIDE0Ljg0NCAxLjkwMDYzIDE1LjExOTQgMS41ODgxMyAxNS40Nzg4QzEuMjc1NjMgMTUuODM4MSAxLjAzNTQgMTYuMjcxNyAwLjg2NzQzMiAxNi43Nzk1QzAuNjk5NDYzIDE3LjI4NzQgMC42MTU0NzkgMTcuODU5NiAwLjYxNTQ3OSAxOC40OTYzVjE5LjAxNzhDMC42MTU0NzkgMTkuNjU0NSAwLjY5NTU1NyAyMC4yMjY4IDAuODU1NzEzIDIwLjczNDZDMS4wMTk3OCAyMS4yMzg1IDEuMjU0MTUgMjEuNjcwMiAxLjU1ODg0IDIyLjAyOTVDMS44Njc0MyAyMi4zODUgMi4yNDI0MyAyMi42NTg0IDIuNjgzODQgMjIuODQ5OUMzLjEyNTI0IDIzLjA0MTMgMy42MjUyNCAyMy4xMzcgNC4xODM4NCAyMy4xMzdDNC44ODMwNiAyMy4xMzcgNS40ODY1NyAyMy4wMTIgNS45OTQzOCAyMi43NjJDNi41MDIyIDIyLjUwODEgNi44OTg2OCAyMi4xNTg0IDcuMTgzODQgMjEuNzEzMUM3LjQ3MjkgMjEuMjYzOSA3LjYzMzA2IDIwLjc0NjMgNy42NjQzMSAyMC4xNjA0Wk0xMy4zMjQyIDIwLjM4MzFDMTMuMzY3MiAyMC40OTYzIDEzLjM4ODcgMjAuNjI1MiAxMy4zODg3IDIwLjc2OThDMTMuMzg4NyAyMC45NDE3IDEzLjM0NTcgMjEuMDk3OSAxMy4yNTk4IDIxLjIzODVDMTMuMTczOCAyMS4zNzkyIDEzLjA0MSAyMS40OTA1IDEyLjg2MTMgMjEuNTcyNUMxMi42ODU2IDIxLjY1MDYgMTIuNDU1MSAyMS42ODk3IDEyLjE2OTkgMjEuNjg5N0MxMS45MjM4IDIxLjY4OTcgMTEuNzAxMiAyMS42NjYzIDExLjUwMiAyMS42MTk0QzExLjMwMjcgMjEuNTcyNSAxMS4xMzI4IDIxLjQ5NDQgMTAuOTkyMiAyMS4zODVDMTAuODU1NSAyMS4yNzU2IDEwLjc1IDIxLjEzMzEgMTAuNjc1OCAyMC45NTczQzEwLjYwMTYgMjAuNzc3NiAxMC41NjQ1IDIwLjU1ODggMTAuNTY0NSAyMC4zMDFIOC42NTQzMUM4LjY1NDMxIDIwLjc5MzIgOC43NTM5MiAyMS4yMTkgOC45NTMxMyAyMS41Nzg0QzkuMTU2MjYgMjEuOTMzOCA5LjQyNTc5IDIyLjIyNjggOS43NjE3MyAyMi40NTczQzEwLjEwMTYgMjIuNjg3NyAxMC40ODA1IDIyLjg1OTYgMTAuODk4NCAyMi45NzI5QzExLjMxNjQgMjMuMDgyMyAxMS43NDAyIDIzLjEzNyAxMi4xNjk5IDIzLjEzN0MxMi42NDI2IDIzLjEzNyAxMy4wNzAzIDIzLjA4NDIgMTMuNDUzMSAyMi45Nzg4QzEzLjgzNTkgMjIuODczMyAxNC4xNjQxIDIyLjcxOSAxNC40Mzc1IDIyLjUxNTlDMTQuNzE0OSAyMi4zMDg4IDE0LjkyNTggMjIuMDU4OCAxNS4wNzAzIDIxLjc2NTlDMTUuMjE4OCAyMS40NzI5IDE1LjI5MyAyMS4xMzcgMTUuMjkzIDIwLjc1ODFDMTUuMjkzIDIwLjQwMjYgMTUuMjMwNSAyMC4wODQyIDE1LjEwNTUgMTkuODAzQzE0Ljk4NDQgMTkuNTIxNyAxNC44MDI3IDE5LjI2OTggMTQuNTYwNiAxOS4wNDcxQzE0LjMxODQgMTguODI0NSAxNC4wMTk1IDE4LjYyNTIgMTMuNjY0MSAxOC40NDk1QzEzLjMxMjUgMTguMjczNyAxMi45MDgyIDE4LjExMzUgMTIuNDUxMiAxNy45NjlDMTIuMTg5NSAxNy44OTA5IDExLjk1NyAxNy44MDg4IDExLjc1MzkgMTcuNzIyOUMxMS41NTA4IDE3LjYzNyAxMS4zNzg5IDE3LjU0NzEgMTEuMjM4MyAxNy40NTM0QzExLjEwMTYgMTcuMzU1NyAxMC45OTYxIDE3LjI1MjIgMTAuOTIxOSAxNy4xNDI4QzEwLjg1MTYgMTcuMDI5NSAxMC44MTY0IDE2LjkwNDUgMTAuODE2NCAxNi43Njc4QzEwLjgxNjQgMTYuNTk1OSAxMC44NjMzIDE2LjQzNzcgMTAuOTU3IDE2LjI5MzJDMTEuMDU0NyAxNi4xNDg3IDExLjE5NzMgMTYuMDM1NCAxMS4zODQ4IDE1Ljk1MzRDMTEuNTc2MiAxNS44Njc0IDExLjgxMjUgMTUuODI0NSAxMi4wOTM4IDE1LjgyNDVDMTIuMzgyOCAxNS44MjQ1IDEyLjYyMzEgMTUuODc1MiAxMi44MTQ1IDE1Ljk3NjhDMTMuMDA5OCAxNi4wNzg0IDEzLjE1NDMgMTYuMjE5IDEzLjI0ODEgMTYuMzk4N0MxMy4zNDU3IDE2LjU3NDUgMTMuMzk0NSAxNi43Nzc2IDEzLjM5NDUgMTcuMDA4MUgxNS4yOTNDMTUuMjkzIDE2LjQ4NDYgMTUuMTYwMiAxNi4wMjU2IDE0Ljg5NDUgMTUuNjMxMUMxNC42Mjg5IDE1LjIzMjcgMTQuMjU3OCAxNC45MjQxIDEzLjc4MTMgMTQuNzA1M0MxMy4zMDg2IDE0LjQ4MjcgMTIuNzU5OCAxNC4zNzEzIDEyLjEzNDggMTQuMzcxM0MxMS42NjYgMTQuMzcxMyAxMS4yMzYzIDE0LjQyOCAxMC44NDU3IDE0LjU0MTNDMTAuNDU1MSAxNC42NTA2IDEwLjExNTIgMTQuODEwOCA5LjgyNjE4IDE1LjAyMTdDOS41MzcxMiAxNS4yMjg4IDkuMzEyNTEgMTUuNDc4OCA5LjE1MjM1IDE1Ljc3MTdDOC45OTIyIDE2LjA2NDcgOC45MTIxMiAxNi4zOTI4IDguOTEyMTIgMTYuNzU2MUM4LjkxMjEyIDE3LjEzMTEgOC45ODgyOSAxNy40NTkyIDkuMTQwNjMgMTcuNzQwNUM5LjI5Njg4IDE4LjAyMTcgOS41MDk3OCAxOC4yNjc4IDkuNzc5MzEgMTguNDc4OEMxMC4wNDg4IDE4LjY4OTcgMTAuMzU1NSAxOC44NzUyIDEwLjY5OTIgMTkuMDM1NEMxMS4wNDY5IDE5LjE5MTcgMTEuNDEyMSAxOS4zMzIzIDExLjc5NDkgMTkuNDU3M0MxMi4xMzA5IDE5LjU2MjcgMTIuNDAyNCAxOS42NjYzIDEyLjYwOTQgMTkuNzY3OEMxMi44MTY0IDE5Ljg2NTUgMTIuOTc2NiAxOS45NjMxIDEzLjA4OTkgMjAuMDYwOEMxMy4yMDMxIDIwLjE1ODQgMTMuMjgxMyAyMC4yNjU5IDEzLjMyNDIgMjAuMzgzMVpNMTkuNTIzMiAyMy4wMTk4SDE4Ljg2N0wxNS45NjA3IDE0LjQ4ODVIMTguMDgxOEwxOS44OTI1IDIwLjgzOTlMMjEuNzA4OCAxNC40ODg1SDIzLjgzNTdMMjAuOTExOSAyMy4wMTk4SDIwLjI3MzJIMTkuNTIzMloiIGZpbGw9ImJsYWNrIi8+PC9zdmc+");
+}
+
+.print-txt-button{
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjUwMDAxIDFDMy45NDc3MiAxIDMuNTAwMDEgMS40NDc3MiAzLjUwMDAxIDJWMTFDMy41MDAwMSAxMS41NTIzIDMuOTQ3NzIgMTIgNC41MDAwMSAxMkM1LjA1MjI5IDEyIDUuNTAwMDEgMTEuNTUyMyA1LjUwMDAxIDExVjNIMTQuNVY3QzE0LjUgNy41NTIyOCAxNC45NDc3IDggMTUuNSA4SDE5LjVWMTFDMTkuNSAxMS41NTIzIDE5Ljk0NzcgMTIgMjAuNSAxMkMyMS4wNTIzIDEyIDIxLjUgMTEuNTUyMyAyMS41IDExVjdDMjEuNSA2LjczNDc4IDIxLjM5NDcgNi40ODA0MyAyMS4yMDcxIDYuMjkyODlMMTYuMjA3MSAxLjI5Mjg5QzE2LjAxOTYgMS4xMDUzNiAxNS43NjUyIDEgMTUuNSAxSDQuNTAwMDFaTTE4LjA4NTggNkwxNi41IDQuNDE0MjFWNkgxOC4wODU4WiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNNS4xMDM3NiAyMy4yNDUyVjE2LjE5NjRINy42OTk0NlYxNC43MTM5SDAuNjU2NDk0VjE2LjE5NjRIMy4xOTk0NlYyMy4yNDUySDUuMTAzNzZaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xMiAxNy42MjAyTDEwLjUgMTQuNzEzOUg4LjMyMDMyTDEwLjc1MiAxOC45NDQ0TDguMjU1ODcgMjMuMjQ1MkgxMC40NTlMMTIgMjAuMjg2MkwxMy41NDY5IDIzLjI0NTJIMTUuNzQ0MkwxMy4yNTM5IDE4Ljk0NDRMMTUuNjc5NyAxNC43MTM5SDEzLjVMMTIgMTcuNjIwMloiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTIwLjczNjEgMjMuMjQ1MlYxNi4xOTY0SDIzLjMzMThWMTQuNzEzOUgxNi4yODg4VjE2LjE5NjRIMTguODMxOFYyMy4yNDUySDIwLjczNjFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
+}
+
+.indicator-elem{
+  position: absolute;
+  border-radius: 13px;
+  width: 12px;
+  height: 12px;
+  background-color: #9DB2BF;
+}

package/src/report/toolbar/dropdown/ToolbarOverflowPanel.js

@@ -0,0 +1,188 @@
+Ext.define('Coon.report.toolbar.dropdown.ToolbarOverflowPanel', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'ToolbarOverflowPanel',
+    cls: 'ToolbarOverflowPanel',
+    minWidth: 400,
+    width: 600,
+    maxWidth: 800,
+    maxHeight: 500,
+    layout: 'card',
+    focusable: true,
+    viewModel: {
+        data: {
+            configMode: false,
+        },
+    },
+    config: {
+        overflowedItems: [],
+    },
+    items: [
+        {
+            // По умолчанию отображаем кнопки 1. Пользователь скрыл специально. 2. Не вместились в тулбар (overflow)
+            xtype: 'panel',
+            minHeight: 0,
+            cls: 'panel-body-buttons',
+            margin: '20px 20px 20px 20px',
+            maxHeight: 350,
+            // scrollable: true,
+            width: '100%',
+            layout: 'column',
+            reference: 'foldedItems',
+            /* defaults: {
+                margin: '0 3 5px 3',
+            },*/
+            items: [],
+            bbar: {
+                /* style: {
+                    borderTop: '1px solid #9DB2BF !important',
+                },*/
+                reference: 'toConfigurationModeBbar',
+                items: [
+                    {width: 280, xtype: 'panel', margin: '14px 2px 2px 12px', html: 'Управление отображением кнопок отчета'},
+                    '->',
+                    {
+                        iconCls: 'svg-icon svg-icon-settings fix-btn-width',
+                        handler: 'toConfigurationMode',
+                    }
+                ],
+            },
+
+        },
+        {
+            // панель управления настройками кнопок (порядок, спрятанные кнопки по умолчанию)
+            xtype: 'ToolbarConfigurationPanel',
+            minHeight: 300,
+            reference: 'toolbarConfigurationPanel',
+            padding: '20px',
+            bbar: {
+                items: [
+                    {
+                        xtype: 'button',
+                        text: 'Сбросить настройки',
+                        handler: function(button) {
+                            button.up('ToolbarOverflowPanel').getController().setDefaultSettings();
+                        },
+                        focusOnToFront: false,
+                        focusable: false,
+                    },
+                    '->',
+                    {
+                        xtype: 'button',
+                        text: 'Применить',
+                        ui: 'orange-button',
+                        handler: function(button) {
+                            button.up('ToolbarOverflowPanel').getController().onApply();
+                        },
+                    },
+                    {
+                        xtype: 'button',
+                        text: 'Отмена',
+                        ui: 'green-button',
+                        handler: function(button) {
+                            button.up('ToolbarOverflowPanel').getController().onCancel();
+                        },
+                    }
+                ],
+            },
+        }
+
+    ],
+    listeners: {
+        afterrender: function(cmp) {
+            const div = document.createElement('div');
+            div.setAttribute('class', 'white-space');
+            cmp.getEl().dom.appendChild(div);
+        }
+        ,
+    },
+    controller: {
+        listen: {
+            global: {
+                mousedown: 'dismissWindowCheck',
+            }
+            ,
+        },
+        /**
+         * @param {string} reportId идентификатор отчета
+         * @param {Array} allItems все сущности тулбара
+         * @param {Array} overflowedItems что не поместилось
+         * @param {Array} userFoldItems спрятано пользователем
+         */
+        doInit: function(reportId, allItems, overflowedItems, userFoldItems) {
+            this.reportId = reportId;
+            this.allItems = allItems;
+            this.overflowedItems = overflowedItems;
+            this.userFoldItems = userFoldItems;
+            this.fillContainer();
+        },
+
+        setDefaultSettings() {
+            const toolbarConfigurationPanel = this.lookup('toolbarConfigurationPanel').getController();
+            toolbarConfigurationPanel.setDefaultSettings();
+            toolbarConfigurationPanel.saveConfig(true);
+            this.getView().getLayout().setActiveItem(0);
+            this.getView().hide();
+        },
+
+        fillContainer: function() {
+            // this.clearContainer();
+            if (Array.isArray(this.overflowedItems)) {
+                this.overflowedItems.forEach((item) => {
+                    this.addPanelElement(item);
+                });
+            }
+
+            if (Array.isArray(this.userFoldItems)) {
+                this.userFoldItems.forEach((item) => {
+                    this.addPanelElement(item);
+                });
+            }
+        },
+
+        clearContainer: function(reportToolbar) {
+            this.lookup('foldedItems').items.each((item) => reportToolbar.foldItemsContainer.add(item));
+        },
+
+        addPanelElement: function(element) {
+            this.lookup('foldedItems').add(element);
+        },
+
+        toConfigurationMode: function() {
+            // this.getViewModel().set('configMode', true);
+            this.lookup('toolbarConfigurationPanel').getController().doInit(this.reportId, this.allItems, this.userFoldItems);
+            this.getView().getLayout().setActiveItem(1);
+        },
+
+        onApply() {
+            // this.getViewModel().set('configMode', false);
+            // Получить и применить новую конфигурацию
+            this.lookup('toolbarConfigurationPanel').getController().saveConfig();
+            // this.getView().hide();
+            this.getView().getLayout().setActiveItem(0);
+        },
+
+        onCancel() {
+            // this.getViewModel().set('configMode', false);
+            // this.getView().hide();
+            this.getView().getLayout().setActiveItem(0);
+        },
+
+        /**
+         * Для закрытия панели при клике мимо.
+         * Поведение отключено.
+         * @param event
+         */
+        dismissWindowCheck: function(event) {
+            const view = this.getView();
+            if (view.isVisible()) {
+                if (!view.owns(event.getTarget())) {
+                    const btn = this.getView().overflowButton;
+                    if (btn.owns(event.getTarget())) {
+                        btn.disableHandler = true;
+                    }
+                    view.hide();
+                }
+            }
+        },
+    },
+});