Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-12-23 18:55:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Animate shopping list and increase touch target (#6569)

Browse Source 
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
This commit is contained in:
miah
2025-12-22 11:55:25 -06:00
committed by GitHub
parent 95e1bbce2b
commit 9d601ea4b5
2 changed files with 136 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/pages/shopping-lists/[id].vue
View File

@@ -179,41 +179,45 @@
</BaseButton>
</div>
<BaseExpansionPanels v-for="(value, key) in itemsByLabel" :key="key" :v-model="0" start-open>
<v-expansion-panel class="shopping-list-section">
<v-expansion-panel-title
:color="getLabelColor(key)"
class="body-1 font-weight-bold section-title"
>
{{ key }}
</v-expansion-panel-title>
<v-expansion-panel-text eager>
<VueDraggable
:model-value="value"
handle=".handle"
:delay="250"
:delay-on-touch-only="true"
@start="loadingCounter += 1"
@end="loadingCounter -= 1"
@update:model-value="updateIndexUncheckedByLabel(key.toString(), $event)"
<TransitionGroup name="scroll-x-transition">
<BaseExpansionPanels v-for="(value, key) in itemsByLabel" :key="key" :v-model="0" start-open>
<v-expansion-panel class="shopping-list-section">
<v-expansion-panel-title
:color="getLabelColor(key)"
class="body-1 font-weight-bold section-title"
>
<ShoppingListItem
v-for="(item, index) in value"
:key="item.id"
v-model="value[index]"
class="ml-2 my-2 w-auto"
:labels="allLabels || []"
:units="allUnits || []"
:foods="allFoods || []"
:recipes="recipeMap"
@checked="saveListItem"
@save="saveListItem"
@delete="deleteListItem(item)"
/>
</VueDraggable>
</v-expansion-panel-text>
</v-expansion-panel>
</BaseExpansionPanels>
{{ key }}
</v-expansion-panel-title>
<v-expansion-panel-text eager>
<VueDraggable
:model-value="value"
handle=".handle"
:delay="250"
:delay-on-touch-only="true"
@start="loadingCounter += 1"
@end="loadingCounter -= 1"
@update:model-value="updateIndexUncheckedByLabel(key.toString(), $event)"
>
<TransitionGroup name="scroll-x-transition">
<ShoppingListItem
v-for="(item, index) in value"
:key="item.id"
v-model="value[index]"
class="ml-2 my-2 w-auto"
:labels="allLabels || []"
:units="allUnits || []"
:foods="allFoods || []"
:recipes="recipeMap"
@checked="saveListItem"
@save="saveListItem"
@delete="deleteListItem(item)"
/>
</TransitionGroup>
</VueDraggable>
</v-expansion-panel-text>
</v-expansion-panel>
</BaseExpansionPanels>
</TransitionGroup>
<!-- Checked Items -->
<v-expansion-panels flat>
<v-expansion-panel v-if="listItems.checked && listItems.checked.length > 0">
@@ -243,18 +247,20 @@
</div>
</v-expansion-panel-title>
<v-expansion-panel-text eager>
<div v-for="(item, idx) in listItems.checked" :key="item.id">
<ShoppingListItem
v-model="listItems.checked[idx]"
class="strike-through-note"
:labels="allLabels || []"
:units="allUnits || []"
:foods="allFoods || []"
@checked="saveListItem"
@save="saveListItem"
@delete="deleteListItem(item)"
/>
</div>
<TransitionGroup name="scroll-x-transition">
<div v-for="(item, idx) in listItems.checked" :key="item.id">
<ShoppingListItem
v-model="listItems.checked[idx]"
class="strike-through-note"
:labels="allLabels || []"
:units="allUnits || []"
:foods="allFoods || []"
@checked="saveListItem"
@save="saveListItem"
@delete="deleteListItem(item)"
/>
</div>
</TransitionGroup>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>