From 3322a611afdeb8eb1829b1df8c26daf07652b8fe Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Sat, 5 Nov 2022 14:13:17 +0100
Subject: [PATCH] Collapse app backup options into dropdown

---
 src/views/app.html | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/views/app.html b/src/views/app.html
index 9ec754259..1e53d2c2b 100644
--- a/src/views/app.html
+++ b/src/views/app.html
@@ -1395,13 +1395,22 @@
                   <td><i class="fas fa-archive" ng-show="backup.preserveSecs === -1" uib-tooltip="{{ 'backups.listing.tooltipPreservedBackup' | tr }}"></i></td>
                   <!-- <td><div class="hand clipboard" data-clipboard-text="{{ backup.id }}" uib-tooltip="{{ copyBackupIdDone ? ('main.clipboard.copied' | tr) : ('main.clipboard.clickToCopyBackupId' | tr) }}" tooltip-placement="right"><i class="fa fa-copy"></i></div></td> -->
                   <td><div>v{{ backup.packageVersion }}</div></td>
-                  <td><div uib-tooltip="{{ backup.creationTime | prettyLongDate }}">{{ backup.creationTime | prettyDate }} <b ng-show="backup.label">({{ backup.label }})</b></div></td>
-                  <td class="text-right no-wrap" style="vertical-align: bottom">
-                    <a class="btn btn-xs btn-default" ng-show="backup.format === 'tgz' && app.accessLevel === 'admin'" ng-href="{{ getAppBackupDownloadLink(backup) }}" target="_blank" uib-tooltip="{{ 'app.backups.backups.downloadBackupTooltip' | tr }}"><i class="fas fa-download"></i></a>
-                    <button class="btn btn-xs btn-default" ng-show="app.accessLevel === 'admin'" ng-click="downloadConfig(backup)" uib-tooltip="{{ 'app.backups.backups.downloadConfigTooltip' | tr }}"><i class="fas fa-file-alt"></i></button>
-                    <button class="btn btn-xs btn-default" ng-show="app.accessLevel === 'admin'" ng-click="editBackup.show(backup)" uib-tooltip="{{ 'backups.listing.tooltipEditBackup' | tr }}"><i class="fa fa-pencil-alt"></i></button>
-                    <button class="btn btn-xs btn-default" ng-show="app.accessLevel === 'admin'" ng-click="clone.show(backup)" uib-tooltip="{{ 'app.backups.backups.cloneTooltip' | tr }}"><i class="far fa-clone"></i></button>
-                    <button class="btn btn-xs btn-danger" ng-click="restore.show(backup)" ng-disabled="app.taskId || app.runState === 'stopped'" uib-tooltip="{{ 'app.backups.backups.restoreTooltip' | tr }}"><i class="fas fa-history"></i></button>
+                  <td><span uib-tooltip="{{ backup.creationTime | prettyLongDate }}">{{ backup.creationTime | prettyDate }} <b ng-show="backup.label">({{ backup.label }})</b></span></td>
+                  <td class="text-right" style="vertical-align: bottom">
+                    <div class="dropdown">
+                      <button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                        <i class="fas fa-ellipsis-h"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
+                        <li><a class="hand" ng-show="app.accessLevel === 'admin'" ng-click="editBackup.show(backup)"><i class="fa fa-pencil-alt fa-fw"></i> {{ 'backups.listing.tooltipEditBackup' | tr }}</a></li>
+                        <li role="separator" class="divider"></li>
+                        <li><a class="hand" ng-show="backup.format === 'tgz' && app.accessLevel === 'admin'" ng-href="{{ getAppBackupDownloadLink(backup) }}" target="_blank"><i class="fas fa-download fa-fw"></i> {{ 'app.backups.backups.downloadBackupTooltip' | tr }}</a></li>
+                        <li><a class="hand" ng-show="app.accessLevel === 'admin'" ng-click="downloadConfig(backup)"><i class="fas fa-file-alt fa-fw"></i> {{ 'app.backups.backups.downloadConfigTooltip' | tr }}</a></li>
+                        <li role="separator" class="divider"></li>
+                        <li><a class="hand" ng-show="app.accessLevel === 'admin'" ng-click="clone.show(backup)"><i class="far fa-clone fa-fw"></i> {{ 'app.backups.backups.cloneTooltip' | tr }}</a></li>
+                        <li><a class="hand" ng-click="restore.show(backup)" ng-disabled="app.taskId || app.runState === 'stopped'"><i class="fas fa-history fa-fw"></i> {{ 'app.backups.backups.restoreTooltip' | tr }}</a></li>
+                      </ul>
+                    </div>
                   </td>
                 </tr>
               </tbody>