jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Show all actions as quick actions, if ActionBar only has 2 or less actions

Browse Source
This commit is contained in:
Johannes Zellner
2026-01-14 15:19:27 +01:00
parent f8f768337e
commit f6c344873d
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/ActionBar.vue
+12 -3
View File
@@ -11,7 +11,14 @@ const props = defineProps({
});
const quickActions = computed(() => {
return props.actions.filter(a => a.quickAction && !(typeof a.visible !== 'undefined' && !a.visible));
const visibleActions = props.actions.filter(a => !(typeof a.visible !== 'undefined' && !a.visible) && !a.separator);
if (visibleActions.length <= 2) return visibleActions;
return visibleActions.filter(a => a.quickAction);
});
const visibleActionCount = computed(() => {
return props.actions.filter(a => !(typeof a.visible !== 'undefined' && !a.visible) && !a.separator).length;
});
const isMenuOpen = ref(false);
@@ -29,9 +36,9 @@ function onMenu(event) {
<Menu ref="menuElement" :model="actions" @close="isMenuOpen = false" />
<ButtonGroup class="quick-action-group">
<Button tool v-for="quickAction in quickActions" :key="quickAction" :icon="quickAction.icon" @click="quickAction.action()" :href="quickAction.href || null" :target="quickAction.target || null" v-tooltip.top="quickAction.label"/>
<Button tool @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0 && actions.length !== quickActions.length"/>
<Button tool @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="visibleActionCount > 0 && visibleActionCount !== quickActions.length"/>
</ButtonGroup>
<Button tool :plain="isMenuOpen ? null : true" secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0 && actions.length !== quickActions.length" class="menu-action" />
<Button tool :plain="isMenuOpen ? null : true" secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="visibleActionCount > 0 && visibleActionCount !== quickActions.length" class="menu-action" />
</div>
</template>
@@ -43,6 +50,7 @@ function onMenu(event) {
justify-content: end;
min-height: 31px;
align-items: center;
min-width: 55px;
}
.menu-action {
@@ -56,6 +64,7 @@ function onMenu(event) {
.action-bar .quick-action-group .pankow-button {
background-color: white;
color: var(--pankow-color-text);
border: 1px solid transparent;
}
.action-bar .quick-action-group .pankow-button:hover {