style: fix style of recipe actions to be compliant with design schema

- always show the actions
- align text properly
- add icons to actions
This commit is contained in:
Felix Schneider 2025-07-16 21:48:20 +02:00
commit 9e91d14a91

View file

@ -125,25 +125,25 @@
</v-list-item> </v-list-item>
<div v-if="useItems.recipeActions && recipeActions && recipeActions.length"> <div v-if="useItems.recipeActions && recipeActions && recipeActions.length">
<v-divider /> <v-divider />
<v-list-group @click.stop> <v-list-item disabled>
<template #activator="{ props }"> <v-list-item-title>
<v-list-item-title v-bind="props"> {{ $t("recipe.recipe-actions") }}
{{ $t("recipe.recipe-actions") }} </v-list-item-title>
</v-list-item-title> </v-list-item>
<v-list-item
v-for="(action, index) in recipeActions"
:key="index"
@click="executeRecipeAction(action)"
>
<template #prepend>
<v-icon color="undefined">
{{ $globals.icons.primary }}
</v-icon>
</template> </template>
<v-list density="compact" class="ma-0 pa-0"> <v-list-item-title>
<v-list-item {{ action.title }}
v-for="(action, index) in recipeActions" </v-list-item-title>
:key="index" </v-list-item>
class="pl-6"
@click="executeRecipeAction(action)"
>
<v-list-item-title>
{{ action.title }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-list-group>
</div> </div>
</v-list> </v-list>
</v-menu> </v-menu>