From a3faf027a1157870c5af52112b36d3775972846c Mon Sep 17 00:00:00 2001
From: Stefan Sterz <s.sterz@proxmox.com>
Date: Thu, 5 May 2022 15:52:48 +0200
Subject: [PATCH] fix #4001: FileBrowser: add menu to button and selected entry
 label

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@proxmox.com>
---
 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',
+		    },
+		],
+	    },
 	},
     ],
 });