objects: add separator between match field selector and description

Make it easier to see that match-field selector and its description
are separate. For that we have to make the top level docked item a
'toolbar'.

Reported-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/js/ObjectGroup.js b/js/ObjectGroup.js
index 8c72dd229bd252b6a8a3e57e19263172283b785f..4fc74edfbbba47172e2e1c14562ca1eddfb1581a 100644 (file)
--- a/js/ObjectGroup.js
+++ b/js/ObjectGroup.js
@@ -40,6 +40,7 @@ Ext.define('PMG.ObjectGroup', {
 
        if (me.ogdata === undefined) {
            me.down('#oginfo').update(me.emptyText);
+           me.down('#separator').setHidden(true);
            me.down('#modeBox').setHidden(true);
            me.down('#whatWarning').setHidden(true);
        } else {
@@ -49,6 +50,7 @@ Ext.define('PMG.ObjectGroup', {
 
            me.down('#oginfo').update(html);
            me.down('#ogdata').setHidden(false);
+           me.down('#separator').setHidden(false);
            let modeSelector = me.down('#modeSelector');
            modeSelector.suspendEvents();
            me.down('#modeSelector').setValue(mode);
@@ -228,9 +230,13 @@ Ext.define('PMG.ObjectGroup', {
        me.dockedItems.push({
            dock: 'top',
            border: 1,
-           layout: 'hbox',
+           layout: {
+               type: 'hbox',
+               align: 'stretch',
+           },
            hidden: !!me.hideGroupInfo,
            itemId: 'ogdata',
+           xtype: 'toolbar',
            items: [
                {
                    xtype: 'container',
@@ -274,6 +280,11 @@ Ext.define('PMG.ObjectGroup', {
                        },
                    ],
                },
+               {
+                   xtype: 'tbseparator',
+                   itemId: 'separator',
+                   hidden: true,
+               },
                {
                    xtype: 'component',
                    flex: 1,