diff --git a/dashboard/src/components/MailboxDialog.vue b/dashboard/src/components/MailboxDialog.vue index 7a1f31462..f915b5254 100644 --- a/dashboard/src/components/MailboxDialog.vue +++ b/dashboard/src/components/MailboxDialog.vue @@ -18,7 +18,7 @@ const domain = ref(''); const mailbox = ref(null); const aliases = ref([]); const ownerId = ref(''); -const usersAndGroups = ref([]); +const usersAndGroupsAndApps = ref([]); const storageQuotaEnabled = ref(false); const storageQuotaTicks = [ 500*1000*1000, 5*1000*1000*1000, 15*1000*1000*1000, 50*1000*1000*1000, 100*1000*1000*1000 ]; const storageQuota = ref(5*1000*1000*1000); @@ -97,10 +97,15 @@ defineExpose({ enablePop3.value = m ? m.enablePop3 : false; storageQuotaEnabled.value = m && m.storageQuota ? true : false; storageQuota.value = m ? m.storageQuota : 5*1000*1000*1000; - usersAndGroups.value = props.users.concat(props.groups).concat(props.apps); + usersAndGroupsAndApps.value = [{ separator: true, label: 'Users' }] + .concat(props.users) + .concat([{ separator: true, label: 'Groups' }]) + .concat(props.groups) + .concat([{ separator: true, label: 'Apps' }]) + .concat(props.apps); // unify on .name for multiselect - usersAndGroups.value.forEach(u => { + usersAndGroupsAndApps.value.forEach(u => { u.icon = u.name ? 'fa-solid fa-users' : (u.username ? 'fa-solid fa-user' : 'fa-solid fa-cube') ; u.name = u.name || u.username || u.label || u.fqdn; }); @@ -148,7 +153,7 @@ defineExpose({ - + diff --git a/dashboard/src/style.css b/dashboard/src/style.css index 46cb87045..2b13e7e83 100644 --- a/dashboard/src/style.css +++ b/dashboard/src/style.css @@ -235,6 +235,22 @@ a.pankow-breadcrumb-item { justify-content: end; } +.table-actions-hover { + display: none; +} + +.pankow-table-row:hover .pankow-table-cell .table-actions .table-actions-hover { + display: block; +} + +.table-actions-no-hover { + display: block; +} + +.pankow-table-row:hover .pankow-table-cell .table-actions .table-actions-no-hover { + display: none; +} + /* info table label:value in Sections */ .info-row { display: flex;