Use ActionBar for email related lists

dashboard/src/views/EmailMailboxesView.vue

@@ -5,9 +5,10 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, inject, computed } from 'vue';
-import { Button, TableView, Dialog, Checkbox, TextInput, Menu } from '@cloudron/pankow';
+import { Button, TableView, Dialog, Checkbox, TextInput } from '@cloudron/pankow';
 import { prettyDecimalSize } from '@cloudron/pankow/utils';
 import { eachLimit } from 'async';
+import ActionBar from '../components/ActionBar.vue';
 import Section from '../components/Section.vue';
 import MailboxDialog from '../components/MailboxDialog.vue';
 import AppsModel from '../models/AppsModel.js';
@@ -58,26 +59,22 @@ const columns = {
     width: '80px',
   },
   actions: {
-    width: '55px',
+    width: '100px',
   }
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(mailbox, event) {
-  actionMenuModel.value = [{
+function createActionMenu(mailbox) {
+  return [{
     icon: 'fa-solid fa-pencil-alt',
     label: t('main.action.edit'),
+    quickAction: true,
     action: onAddOrEdit.bind(null, mailbox),
-  }, {
-    separator: true,
   }, {
     icon: 'fa-solid fa-trash-alt',
     label: t('main.action.remove'),
+    quickAction: true,
     action: onRemove.bind(null, mailbox),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const busy = ref(true);
@@ -238,7 +235,6 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <Dialog ref="removeDialog"
       :title="$t('email.deleteMailboxDialog.title')"
       :confirm-label="$t('email.deleteMailboxDialog.deleteAction')"
@@ -280,9 +276,7 @@ onMounted(async () => {
           <span v-else>-</span>
         </template>
         <template #actions="mailbox">
-          <div style="text-align: right;">
-            <Button tool plain secondary @click.capture="onActionMenu(mailbox, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+          <ActionBar :actions="createActionMenu(mailbox)"/>
         </template>
       </TableView>
 

dashboard/src/views/EmailMailinglistsView.vue

@@ -5,8 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, Menu, TableView, Dialog, TextInput } from '@cloudron/pankow';
+import { Button, TableView, Dialog, TextInput } from '@cloudron/pankow';
 import { eachLimit } from 'async';
+import ActionBar from '../components/ActionBar.vue';
 import Section from '../components/Section.vue';
 import MailinglistDialog from '../components/MailinglistDialog.vue';
 import DomainsModel from '../models/DomainsModel.js';
@@ -26,25 +27,23 @@ const columns = {
     sort: true,
     hideMobile: true,
   },
-  actions: {}
+  actions: {
+    width: '100px'
+  }
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(mailinglist, event) {
-  actionMenuModel.value = [{
+function createActionMenu(mailinglist) {
+  return [{
     icon: 'fa-solid fa-pencil-alt',
     label: t('main.action.edit'),
+    quickAction: true,
     action: onAddOrEdit.bind(null, mailinglist),
-  }, {
-    separator: true,
   }, {
     icon: 'fa-solid fa-trash-alt',
     label: t('main.action.remove'),
+    quickAction: true,
     action: onRemove.bind(null, mailinglist),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const busy = ref(true);
@@ -141,7 +140,6 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <Dialog ref="removeDialog"
       :title="$t('email.deleteMailinglistDialog.title')"
       :confirm-label="$t('email.deleteMailinglistDialog.deleteAction')"
@@ -179,9 +177,7 @@ onMounted(async () => {
           {{ mailinglist.members.length }}
         </template>
         <template #actions="mailinglist">
-          <div style="text-align: right;">
-            <Button tool plain secondary @click.capture="onActionMenu(mailinglist, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+          <ActionBar :actions="createActionMenu(mailinglist)"/>
         </template>
       </TableView>
     </Section>