backups: use ActionBar

dashboard/src/components/app/Backups.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Switch, Checkbox, FormGroup, TextInput, TableView, Menu, Dialog, ProgressBar } from '@cloudron/pankow';
+import { Button, Switch, Checkbox, FormGroup, TextInput, TableView, Dialog, ProgressBar } from '@cloudron/pankow';
 import { prettyLongDate, prettyFileSize } from '@cloudron/pankow/utils';
 import { API_ORIGIN, RSTATES } from '../../constants.js';
 import { download } from '../../utils.js';
@@ -17,6 +17,7 @@ import BackupSitesModel from '../../models/BackupSitesModel.js';
 import TasksModel from '../../models/TasksModel.js';
 import { TASK_TYPES } from '../../constants.js';
 import BackupInfoDialog from '../BackupInfoDialog.vue';
+import ActionBar from '../../components/ActionBar.vue';
 
 const appsModel = AppsModel.create();
 const backupSitesModel = BackupSitesModel.create();
@@ -52,10 +53,8 @@ const columns = ref({
   }
 });
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(backup, event) {
-  actionMenuModel.value = [{
+function createActionMenu(backup) {
+  return [{
     icon: 'fa-solid fa-info',
     label: t('backups.archives.info'),
     action: onInfo.bind(null, backup),
@@ -89,6 +88,7 @@ function onActionMenu(backup, event) {
     label: t('app.backups.backups.restoreTooltip'),
     disabled: !!props.app.taskId || props.app.runState === 'stopped',
     action: onRestore.bind(null, backup),
+    quickAction: true
   // },  {
   //   separator: true,
   // }, {
@@ -97,8 +97,6 @@ function onActionMenu(backup, event) {
   //   visible: props.app.accessLevel === 'admin',
   //   action: onCheckIntegrity.bind(null, backup),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const busy = ref(true);
@@ -296,7 +294,6 @@ onMounted(async () => {
 
 <template>
   <div>
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <AppRestoreDialog ref="cloneDialog"/>
     <AppImportDialog ref="importDialog"/>
 
@@ -405,7 +402,7 @@ onMounted(async () => {
       </template>
       <template #actions="backup">
         <div style="text-align: right;">
-          <Button tool plain secondary @click="onActionMenu(backup, $event)" icon="fa-solid fa-ellipsis" />
+          <ActionBar style="width: 100px" :actions="createActionMenu(backup)"/>
         </div>
       </template>
     </TableView>