backup config: add icons to tab buttons

[pmg-gui.git] / js / QuarantineView.js

diff --git a/js/QuarantineView.js b/js/QuarantineView.js
index 6b85974ef2666512f10423e955ce1963516fccea..5b70487ff2058bed6379c2d84d76d467371f6cf7 100644 (file)
--- a/js/QuarantineView.js
+++ b/js/QuarantineView.js
@@ -1,11 +1,10 @@
-/*global Proxmox*/
 Ext.define('PMG.QuarantineNavigationTree', {
     extend: 'Ext.list.Tree',
     xtype: 'quarantinenavigationtree',
 
     select: function(path) {
-       var me = this;
-       var item = me.getStore().findRecord('path', path, 0, false, true, true);
+       let me = this;
+       let item = me.getStore().findRecord('path', path, 0, false, true, true);
        me.setSelection(item);
     },
 
@@ -40,7 +39,7 @@ Ext.define('PMG.QuarantineNavigationTree', {
     animation: false,
     expanderOnly: true,
     expanderFirst: false,
-    ui: 'nav',
+    ui: 'pve-nav',
 });
 
 Ext.define('PMG.QuarantineView', {
@@ -62,8 +61,14 @@ Ext.define('PMG.QuarantineView', {
            },
        },
 
-       beforeChangePath: function(path, subpath, action) {
-           var me = this;
+       beforeChangePath: function(path, subpathOrAction, action) {
+           let me = this;
+
+           let subpath = subpathOrAction;
+           if (!action) {
+               action = subpathOrAction;
+               subpath = undefined;
+           }
 
            if (!Ext.ClassManager.getByAlias('widget.'+ path)) {
                console.warn('xtype "'+path+'" not found');
@@ -71,7 +76,7 @@ Ext.define('PMG.QuarantineView', {
                return;
            }
 
-           var lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
+           let lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
            if (lastpanel && lastpanel.xtype === path) {
                // we have the right component already,
                // we just need to select the correct tab
@@ -93,12 +98,12 @@ Ext.define('PMG.QuarantineView', {
        },
 
        changePath: function(path, subpath) {
-           var me = this;
-           var contentpanel = me.lookupReference('contentpanel');
-           var lastpanel = contentpanel.getLayout().getActiveItem();
+           let me = this;
+           let contentpanel = me.lookupReference('contentpanel');
+           let lastpanel = contentpanel.getLayout().getActiveItem();
 
-           var obj = contentpanel.add({ xtype: path, cselect: subpath });
-           var treelist = me.lookupReference('navtree');
+           let obj = contentpanel.add({ xtype: path, cselect: subpath });
+           let treelist = me.lookupReference('navtree');
 
            treelist.suspendEvents();
            treelist.select(path);
@@ -107,7 +112,7 @@ Ext.define('PMG.QuarantineView', {
            if (Ext.isFunction(obj.setActiveTab)) {
                obj.setActiveTab(subpath || 0);
                obj.addListener('tabchange', function(tabpanel, newc, oldc) {
-                   var newpath = path;
+                   let newpath = path;
 
                    // only add the subpath part for the
                    // non-default tabs
@@ -136,6 +141,10 @@ Ext.define('PMG.QuarantineView', {
            }).show();
        },
 
+       changeTheme: () => Ext.create('Proxmox.window.ThemeEditWindow', {
+               cookieName: 'PMGThemeCookie',
+               autoShow: true,
+       }),
        navigate: function(treelist, item) {
            this.redirectTo(item.get('path'));
        },
@@ -151,25 +160,28 @@ Ext.define('PMG.QuarantineView', {
            '[reference=languageButton]': {
                click: 'changeLanguage',
            },
+           '[reference=themeButton]': {
+               click: 'changeTheme',
+           },
        },
 
        init: function(view) {
-           var me = this;
+           let me = this;
 
            // load username
-           var username = Proxmox.UserName.replace(/\@quarantine$/, '');
+           let username = Proxmox.UserName.replace(/@quarantine$/, '');
            me.lookupReference('usernameinfo').setText(username);
 
            // show login on requestexception
            // fixme: what about other errors
            Ext.Ajax.on('requestexception', function(conn, response, options) {
-               if (response.status == 401) { // auth failure
+               if (response.status === 401) { // auth failure
                    me.logout();
                }
            });
 
-           var qa = PMG.Utils.extractQuarantineAction();
-           var token;
+           let qa = PMG.Utils.extractQuarantineAction();
+           let token;
            if (qa) {
                token = 'pmgSpamQuarantine';
                if (qa.action === 'blacklist') { token = 'pmgUserBlacklist'; }
@@ -228,6 +240,11 @@ Ext.define('PMG.QuarantineView', {
                    margin: '0 5 0 0',
                    iconCls: 'fa fa-user',
                    menu: [
+                       {
+                           reference: 'themeButton',
+                           iconCls: 'fa fa-paint-brush',
+                           text: gettext('Color Theme'),
+                       },
                        {
                            iconCls: 'fa fa-language',
                            text: gettext('Language'),
@@ -244,17 +261,31 @@ Ext.define('PMG.QuarantineView', {
            ],
        },
        {
-           xtype: 'quarantinenavigationtree',
-           reference: 'navtree',
-           minWidth: 177,
+           xtype: 'panel',
+           scrollable: 'y',
            border: false,
            region: 'west',
-           // we have to define it here until extjs 6.2
-           // because of a bug where a viewcontroller does not detect
-           // the selectionchange event of a treelist
-           listeners: {
-               selectionchange: 'navigate',
+           layout: {
+               type: 'vbox',
+               align: 'stretch',
            },
+           items: [
+               {
+                   xtype: 'quarantinenavigationtree',
+                   reference: 'navtree',
+                   minWidth: 180,
+                   // we have to define it here until extjs 6.2 because of a bug where a
+                   // viewcontroller does not detect the selectionchange event of a treelist
+                   listeners: {
+                       selectionchange: 'navigate',
+                   },
+               },
+               {
+                   xtype: 'box',
+                   cls: 'x-treelist-pve-nav',
+                   flex: 1,
+               },
+           ],
        },
        {
            xtype: 'panel',