ui: fix align mode of two column container

[pve-manager.git] / www / manager6 / Workspace.js

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index d67a2472878d12911759595354b373fea8328327..52c66108ca247b39adae21c281239ab3480e2a02 100644 (file)
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -158,6 +158,8 @@ Ext.define('PVE.StdWorkspace', {
                },
            });
 
+           PVE.UIOptions.update();
+
            Proxmox.Utils.API2Request({
                url: '/cluster/sdn',
                method: 'GET',
@@ -221,7 +223,10 @@ Ext.define('PVE.StdWorkspace', {
        let appState = Ext.create('PVE.StateProvider');
        Ext.state.Manager.setProvider(appState);
 
-       let selview = Ext.create('PVE.form.ViewSelector');
+       let selview = Ext.create('PVE.form.ViewSelector', {
+           flex: 1,
+           padding: '0 5 0 0',
+       });
 
        let rtree = Ext.createWidget('pveResourceTree', {
            viewFilter: selview.getViewFilter(),
@@ -238,7 +243,7 @@ Ext.define('PVE.StdWorkspace', {
                            root: 'PVE.dc.Config',
                            node: 'PVE.node.Config',
                            qemu: 'PVE.qemu.Config',
-                           lxc: 'PVE.lxc.Config',
+                           lxc: 'pveLXCConfig',
                            storage: 'PVE.storage.Browser',
                            sdn: 'PVE.sdn.Browser',
                            pool: 'pvePoolConfig',
@@ -305,6 +310,8 @@ Ext.define('PVE.StdWorkspace', {
            items: [
                {
                    region: 'north',
+                   title: gettext('Header'), // for ARIA
+                   header: false, // avoid rendering the title
                    layout: {
                        type: 'hbox',
                        align: 'middle',
@@ -323,10 +330,10 @@ Ext.define('PVE.StdWorkspace', {
                            minWidth: 150,
                            id: 'versioninfo',
                            html: 'Virtual Environment',
-                       },
-                       {
-                           padding: 5,
-                           html: '<a href="https://bugzilla.proxmox.com" target="_blank">BETA</a>',
+                           style: {
+                               'font-size': '14px',
+                               'line-height': '18px',
+                           },
                        },
                        {
                            xtype: 'pveGlobalSearchField',
@@ -375,6 +382,7 @@ Ext.define('PVE.StdWorkspace', {
                                    handler: function() {
                                        var win = Ext.create('Proxmox.window.PasswordEdit', {
                                            userid: Proxmox.UserName,
+                                           confirmCurrentPassword: Proxmox.UserName !== 'root@pam',
                                        });
                                        win.show();
                                    },
@@ -384,10 +392,16 @@ Ext.define('PVE.StdWorkspace', {
                                    itemId: 'tfaitem',
                                    iconCls: 'fa fa-fw fa-lock',
                                    handler: function(btn, event, rec) {
-                                       var win = Ext.create('PVE.window.TFAEdit', {
-                                           userid: Proxmox.UserName,
-                                       });
-                                       win.show();
+                                       Ext.state.Manager.getProvider().set('dctab', { value: 'tfa' }, true);
+                                       me.selectById('root');
+                                   },
+                               },
+                               {
+                                   iconCls: 'fa fa-paint-brush',
+                                   text: gettext('Color Theme'),
+                                   handler: function() {
+                                       Ext.create('Proxmox.window.ThemeEditWindow')
+                                           .show();
                                    },
                                },
                                {
@@ -446,12 +460,33 @@ Ext.define('PVE.StdWorkspace', {
                    layout: { type: 'vbox', align: 'stretch' },
                    margin: '0 0 0 5',
                    split: true,
-                   width: 200,
-                   items: [selview, rtree],
+                   width: 300,
+                   items: [
+                       {
+                           xtype: 'container',
+                           layout: 'hbox',
+                           padding: '0 0 5 0',
+                           items: [
+                               selview,
+                               {
+                                   xtype: 'button',
+                                   cls: 'x-btn-default-toolbar-small',
+                                   iconCls: 'fa fa-fw fa-gear x-btn-icon-el-default-toolbar-small',
+                                   handler: () => {
+                                       Ext.create('PVE.window.TreeSettingsEdit', {
+                                           autoShow: true,
+                                           apiCallDone: () => PVE.UIOptions.fireUIConfigChanged(),
+                                       });
+                                   },
+                               },
+                           ],
+                       },
+                       rtree,
+                   ],
                    listeners: {
                        resize: function(panel, width, height) {
                            var viewWidth = me.getSize().width;
-                           if (width > viewWidth - 100) {
+                           if (width > viewWidth - 100 && viewWidth > 150) {
                                panel.setWidth(viewWidth - 100);
                            }
                        },
@@ -472,7 +507,7 @@ Ext.define('PVE.StdWorkspace', {
                    listeners: {
                        resize: function(panel, width, height) {
                            var viewHeight = me.getSize().height;
-                           if (height > viewHeight - 150) {
+                           if (height > viewHeight - 150 && viewHeight > 200) {
                                panel.setHeight(viewHeight - 150);
                            }
                        },
@@ -492,6 +527,35 @@ Ext.define('PVE.StdWorkspace', {
                modalWindows.forEach(win => win.alignTo(me, 'c-c'));
            }
        });
+
+       let tagSelectors = [];
+       ['circle', 'dense'].forEach((style) => {
+           ['dark', 'light'].forEach((variant) => {
+               tagSelectors.push(`.proxmox-tags-${style} .proxmox-tag-${variant}`);
+           });
+       });
+
+       Ext.create('Ext.tip.ToolTip', {
+           target: me.el,
+           delegate: tagSelectors.join(', '),
+           trackMouse: true,
+           renderTo: Ext.getBody(),
+           border: 0,
+           minWidth: 0,
+           padding: 0,
+           bodyBorder: 0,
+           bodyPadding: 0,
+           dismissDelay: 0,
+           userCls: 'pmx-tag-tooltip',
+           shadow: false,
+           listeners: {
+               beforeshow: function(tip) {
+                   let tag = Ext.htmlEncode(tip.triggerElement.innerHTML);
+                   let tagEl = Proxmox.Utils.getTagElement(tag, PVE.UIOptions.tagOverrides);
+                   tip.update(`<span class="proxmox-tags-full">${tagEl}</span>`);
+               },
+           },
+       });
     },
 });