[pbs-devel] [PATCH widget-toolkit v1 1/3] fix #4001: FileBrowser: add menu to button and selected entry label

[Stefan Sterz]

this commit adds a label showing the currently selected entry in the
file browser and merges the "Download .tar.zst" and "Download .zip"
button into one menu button.

Signed-off-by: Stefan Sterz <s.sterz at proxmox.com>
---
note: i am not really a fan of decoding the filepath via `atob()` 
here, but that is how the data is sent from PBS. if you have
suggestions on how to improve this, feedback is appreciated.

 src/window/FileBrowser.js | 59 +++++++++++++++++++++++++++++----------
 1 file changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/window/FileBrowser.js b/src/window/FileBrowser.js
index f4a22b6..bb262bc 100644
--- a/src/window/FileBrowser.js
+++ b/src/window/FileBrowser.js
@@ -76,7 +76,9 @@ Ext.define("Proxmox.window.FileBrowser", {
 	    'd': true, // directories
 	},
 
-	// set to true to show the tar download button
+	// enable tar download, this will add a menu to the
+	// "Download" button when the selection can be downloaded as
+	// .tar files
 	enableTar: false,
     },
 
@@ -135,13 +137,19 @@ Ext.define("Proxmox.window.FileBrowser", {
 	    if (!selection || selection.length < 1) return;
 
 	    let data = selection[0].data;
+	    let st = Ext.String.format(gettext('Selected "{0}"'), atob(data.filepath));
+	    view.lookup('selectText').setText(st);
+
 	    let canDownload = view.downloadURL && view.downloadableFileTypes[data.type];
-	    let zipBtn = me.lookup('downloadBtn');
-	    let tarBtn = me.lookup('downloadTar');
-	    zipBtn.setDisabled(!canDownload);
-	    tarBtn.setDisabled(!canDownload);
-	    zipBtn.setText(data.type === 'd' ? gettext('Download .zip') : gettext('Download'));
-	    tarBtn.setVisible(data.type === 'd' && view.enableTar);
+	    let enableMenu = view.enableTar && data.type === 'd';
+
+	    let downloadBtn = view.lookup('downloadBtn');
+	    downloadBtn.setDisabled(!canDownload || enableMenu);
+	    downloadBtn.setHidden(!canDownload || enableMenu);
+
+	    let menuBtn = view.lookup('menuBtn');
+	    menuBtn.setDisabled(!canDownload || !enableMenu);
+	    menuBtn.setHidden(!canDownload || !enableMenu);
 	},
 
 	errorHandler: function(error, msg) {
@@ -150,7 +158,7 @@ Ext.define("Proxmox.window.FileBrowser", {
 		return false;
 	    }
 	    me.lookup('downloadBtn').setDisabled(true);
-	    me.lookup('downloadTar').setDisabled(true);
+	    me.lookup('menuBtn').setDisabled(true);
 	    if (me.initialLoadDone) {
 		Ext.Msg.alert(gettext('Error'), msg);
 		return true;
@@ -300,19 +308,40 @@ Ext.define("Proxmox.window.FileBrowser", {
 	},
     ],
 
-    buttons: [
+    fbar: [
 	{
-	    text: gettext('Download .tar.zst'),
-	    handler: 'downloadTar',
-	    reference: 'downloadTar',
-	    hidden: true,
-	    disabled: true,
+	    text: '',
+	    xtype: 'label',
+	    reference: 'selectText',
 	},
 	{
-	    text: gettext('Download .zip'),
+	    text: gettext('Download'),
+	    xtype: 'button',
 	    handler: 'downloadZip',
 	    reference: 'downloadBtn',
 	    disabled: true,
+	    hidden: true,
+	},
+	{
+	    text: gettext('Download as'),
+	    xtype: 'button',
+	    reference: 'menuBtn',
+	    menu: {
+		items: [
+		    {
+			iconCls: 'fa fa-fw fa-file-zip-o',
+			text: gettext('.zip'),
+			handler: 'downloadZip',
+			reference: 'downloadZip',
+		    },
+		    {
+			iconCls: 'fa fa-fw fa-archive',
+			text: gettext('.tar.zst'),
+			handler: 'downloadTar',
+			reference: 'downloadTar',
+		    },
+		],
+	    },
 	},
     ],
 });
-- 
2.30.2