Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-12-31 14:11:22 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: Revert extended touch on shopping list (#6794)

Browse Source
This commit is contained in:
Michael Genson
2025-12-29 19:24:03 -06:00
committed by GitHub
parent 8ea9bb19f6
commit bde7cf6f9d
1 changed files with 82 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/components/Domain/ShoppingList/ShoppingListItem.vue
View File

@@ -7,23 +7,18 @@
no-gutters
class="flex-nowrap align-center"
>
<v-card
flat
link
class="grow"
@click="() => {
listItem.checked = !listItem.checked
$emit('checked', listItem)
}"
>
<div class="d-flex align-center flex-nowrap grow">
<v-col :cols="itemLabelCols">
<div class="d-flex align-center flex-nowrap">
<v-checkbox
v-model="listItem.checked"
hide-details
density="compact"
class="mt-0 flex-shrink-0"
color="null"
@change="$emit('checked', listItem)"
@click="() => {
listItem.checked = !listItem.checked
$emit('checked', listItem)
}"
/>
<div
class="ml-2 text-truncate"
@@ -33,78 +28,84 @@
<RecipeIngredientListItem :ingredient="listItem" />
</div>
</div>
</v-card>
<div
v-if="!listItem.checked"
style="min-width: 72px"
</v-col>
<v-spacer />
<v-col
cols="auto"
class="text-right"
>
<v-menu
offset-x
start
min-width="125px"
<div
v-if="!listItem.checked"
style="min-width: 72px"
>
<template #activator="{ props }">
<v-tooltip
v-if="recipeList && recipeList.length"
open-delay="200"
transition="slide-x-reverse-transition"
density="compact"
location="end"
content-class="text-caption"
>
<template #activator="{ props: tooltipProps }">
<v-btn
size="small"
variant="text"
class="ml-2"
icon
v-bind="tooltipProps"
@click="displayRecipeRefs = !displayRecipeRefs"
>
<v-icon>
{{ $globals.icons.potSteam }}
</v-icon>
</v-btn>
</template>
<span>Toggle Recipes</span>
</v-tooltip>
<v-btn
size="small"
variant="text"
class="ml-2"
icon
@click="toggleEdit(true)"
>
<v-icon>
{{ $globals.icons.edit }}
</v-icon>
</v-btn>
<v-btn
size="small"
variant="text"
class="handle"
icon
v-bind="props"
>
<v-icon>
{{ $globals.icons.arrowUpDown }}
</v-icon>
</v-btn>
</template>
<v-list density="compact">
<v-list-item
v-for="action in contextMenu"
:key="action.event"
density="compact"
@click="contextHandler(action.event)"
>
<v-list-item-title>
{{ action.text }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
<v-menu
offset-x
start
min-width="125px"
>
<template #activator="{ props }">
<v-tooltip
v-if="recipeList && recipeList.length"
open-delay="200"
transition="slide-x-reverse-transition"
density="compact"
location="end"
content-class="text-caption"
>
<template #activator="{ props: tooltipProps }">
<v-btn
size="small"
variant="text"
class="ml-2"
icon
v-bind="tooltipProps"
@click="displayRecipeRefs = !displayRecipeRefs"
>
<v-icon>
{{ $globals.icons.potSteam }}
</v-icon>
</v-btn>
</template>
<span>Toggle Recipes</span>
</v-tooltip>
<v-btn
size="small"
variant="text"
class="ml-2"
icon
@click="toggleEdit(true)"
>
<v-icon>
{{ $globals.icons.edit }}
</v-icon>
</v-btn>
<v-btn
size="small"
variant="text"
class="handle"
icon
v-bind="props"
>
<v-icon>
{{ $globals.icons.arrowUpDown }}
</v-icon>
</v-btn>
</template>
<v-list density="compact">
<v-list-item
v-for="action in contextMenu"
:key="action.event"
density="compact"
@click="contextHandler(action.event)"
>
<v-list-item-title>
{{ action.text }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</v-col>
</v-row>
<v-row
v-if="!listItem.checked && recipeList && recipeList.length && displayRecipeRefs"
@@ -313,8 +314,4 @@ export default defineNuxtComponent({
.strike-through {
text-decoration: line-through !important;
}
.grow {
flex-grow: 1;
}
</style>