Use new table action pattern in main applist

dashboard/src/views/AppsView.vue

@@ -1,7 +1,11 @@
 <script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
 import { ref, computed, useTemplateRef, onMounted, onUnmounted, inject } from 'vue';
-import { Button, ButtonGroup, SingleSelect, Icon, TableView, TextInput, ProgressBar } from '@cloudron/pankow';
+import { Button, Menu, SingleSelect, Icon, TableView, TextInput, ProgressBar } from '@cloudron/pankow';
 import { API_ORIGIN, APP_TYPES, HSTATES, ISTATES, RSTATES } from '../constants.js';
 import AppsModel from '../models/AppsModel.js';
 import ApplinksModel from '../models/ApplinksModel.js';
@@ -97,6 +101,44 @@ const listColumns = {
   actions: {}
 };
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(app, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-arrow-up',
+    label: t('app.updateAvailableTooltip'),
+    visible: !!app.updateInfo,
+    href: `#/app/${app.id}/updates`,
+  }, {
+    separator: true,
+    visible: !!app.updateInfo,
+  }, {
+    icon: 'fa-solid fa-align-left',
+    label: t('app.logsActionTooltip'),
+    visible: app.type !== APP_TYPES.LINK,
+    target: '_blank',
+    href: '/logs.html?appId=' + app.id,
+  }, {
+    icon: 'fa-solid fa-terminal',
+    label: t('app.terminalActionTooltip'),
+    visible: app.type !== APP_TYPES.PROXIED && app.type !== APP_TYPES.LINK,
+    target: '_blank',
+    href: '/terminal.html?id=' + app.id,
+  }, {
+    icon: 'fa-solid fa-folder',
+    label: t('app.filemanagerActionTooltip'),
+    visible: !!app.manifest?.addons?.localstorage,
+    target: '_blank',
+    href: '/filemanager.html#/home/app/' + app.id,
+  }, {
+    icon: 'fa-solid fa-cog',
+    label: t('app.configureTooltip'),
+    href: `#/app/${app.id}/info`,
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const filteredApps = computed(() => {
   return apps.value.filter(a => {
     return a.fqdn.indexOf(filter.value) !== -1;
@@ -218,6 +260,7 @@ onUnmounted(() => {
 
 <template>
   <div class="content">
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <ApplinkDialog ref="applinkDialog" @success="refreshApps"/>
     <PostInstallDialog ref="postInstallDialog"/>
 
@@ -253,6 +296,7 @@ onUnmounted(() => {
       </TransitionGroup>
 
       <div class="list" v-if="viewType === VIEW_TYPE.LIST">
+
         <TableView :columns="listColumns" :model="filteredApps">
           <template #icon="app">
             <a :href="'https://' + app.fqdn" target="_blank">
@@ -290,16 +334,8 @@ onUnmounted(() => {
             </div>
           </template>
           <template #actions="app">
-            <div class="table-actions">
-              <Button small success tool v-if="app.updateInfo" :href="`#/app/${app.id}/updates`" v-tooltip="$t('app.updateAvailableTooltip')" icon="fa-fw fa-solid fa-arrow-up"></Button>
-
-              <ButtonGroup>
-                <Button small secondary tool v-if="app.type !== APP_TYPES.LINK" :href="'/logs.html?appId=' + app.id" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fa-fw fa-solid fa-align-left"></Button>
-                <Button small secondary tool v-if="app.type !== APP_TYPES.PROXIED && app.type !== APP_TYPES.LINK" :href="'/terminal.html?id=' + app.id" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa-fw fa fa-terminal"></Button>
-                <Button small secondary tool v-if="app.manifest.addons.localstorage" :href="'/filemanager.html#/home/app/' + app.id" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fa-fw fa-solid fa-folder"></Button>
-              </ButtonGroup>
-
-              <Button small secondary tool @click="openAppEdit(app, $event)" :href="`#/app/${app.id}/info`" icon="fa-fw fa-solid fa-cog"></Button>
+            <div style="text-align: right;">
+              <Button tool plain secondary @click.capture="onActionMenu(app, $event)" icon="fa-solid fa-ellipsis" />
             </div>
           </template>
         </TableView>