feat: Shopping list UI overhaul #4077

Wetzel402 · 2024-08-22T16:49:45Z

What type of PR is this?

feature

What this PR does / why we need it:

The shopping list UI seemed a bit complex. This PR's goal is to...

Simplify the UI by moving buttons to an overflow menu in the upper corner
~~List items are in v-card now to help with readability~~
Each label now has it's own add button that should add to that label by default to speed up/simplify adding under that label. (in progress)
Default to the label sorted view rather than the unsorted view
Add keep screen awake

Screenshots

Which issue(s) this PR fixes:

None

Testing

Tested in dev container

modified: frontend/pages/group/data/labels.vue modified: frontend/pages/shopping-lists/_id.vue modified: mealie/schema/labels/multi_purpose_label.py

modified: docs/docs/documentation/community-guide/home-assistant.md

Kuchenpirat · 2024-08-22T17:17:03Z

Gonna leave some early feedback here.
In my opinion putting the items in cards adds a lot of unnecessairy noise to the ui.

I think its also more pronounced when not in dark mode, so additional screenshots bellow.

With Cards	Without Cards

The look without them just looks way cleaner.

Wetzel402 · 2024-08-22T17:24:23Z

The look without them just looks way cleaner.

I agree especially with the divider per label

boc-the-git · 2024-09-15T11:36:26Z

FYI @Wetzel402, this is failing CI, which is the reason I haven't spent any time to review it (and I imagine similar might be true for others). Oh, and it's marked as a draft.

Wetzel402 · 2024-09-16T14:17:59Z

FYI @Wetzel402, this is failing CI, which is the reason I haven't spent any time to review it (and I imagine similar might be true for others). Oh, and it's marked as a draft.

I removed the unused variable. The PR is in draft due to the major UI changes. @Kuchenpirat was reviewing the changes and we may still make changes to the PR before it is incorporated fully into mealie:next. There were also a few things I didn't fully finish working on due to my limited knowledge of vue and not knowing if the features would be fully approved or not. I think we should wait for @Kuchenpirat's feedback and go from there.

Kuchenpirat · 2024-09-16T14:19:50Z

Ah sorry was not aware this was blocked by me. Will review tomorrow during the day👍

Wetzel402 · 2024-09-16T21:25:46Z

Ah sorry was not aware this was blocked by me. Will review tomorrow during the day👍

I wouldn't say blocked. I just know you were looking at the UX changes based on our discord discussion. Thanks!

Kuchenpirat

Looking at all my comments i really suggest just sliming down this PR, focusing on the key elements while addressing the rest in separate PRs. This way, you'll have something merged quickly and can build on it, allowing us to review and discuss specific items more effectively instead of tackling such a broad PR.

I really like the general idea of cleaning up the shopping list interface, but some aspects still need work.

What is ready to go:

The visual change of having labels over each category
Wake lock

I'm happy to merge a PR with these updates, and we can address the rest in future PRs. 👍

Kuchenpirat · 2024-09-17T06:33:17Z

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -140,7 +140,7 @@ export default defineComponent({
  setup(props, context) {
    const { i18n } = useContext();
    const displayRecipeRefs = ref(false);
-    const itemLabelCols = ref<string>(props.value.checked ? "auto" : props.showLabel ? "4" : "6");
+    const itemLabelCols = ref<string>(props.value.checked ? "auto" : props.showLabel ? "8" : "9");


This makes a lot more sense for long list items 👍

PR for this change...
#4237

Kuchenpirat · 2024-09-17T06:40:14Z

frontend/pages/group/data/labels.vue

@@ -231,7 +231,7 @@ export default defineComponent({
      editLabel.value = item;

      if (!editLabel.value.color) {
-        editLabel.value.color = "#E0E0E0";
+        editLabel.value.color = "#757575";


Any particular reason you changed this?

If I remember correctly the new label dividers made visibility poor on one of the themes so I made it a bit darker gray to compensate. I would have to play with it to let you know for sure.

Edit: Yes, in the dark theme readability is an issue so I darkened the color...

Kuchenpirat · 2024-09-17T06:53:25Z

frontend/pages/shopping-lists/_id.vue

+            <v-col cols="3" class="text-right">
+              <BaseButtonGroup
+                :buttons="[
+                  {
+                    icon: $globals.icons.dotsVertical,
+                    text: '',
+                    event: 'edit',
+                    children: [
+                      {
+                        icon: $globals.icons.contentCopy,
+                        text: $tc('shopping-list.copy-as-text'),
+                        event: 'copy-plain',
+                      },
+                      {
+                        icon: $globals.icons.contentCopy,
+                        text: $tc('shopping-list.copy-as-markdown'),
+                        event: 'copy-markdown',
+                      },
+                      {
+                        icon: $globals.icons.checkboxOutline,
+                        text: $tc('shopping-list.check-all-items'),
+                        event: 'check',
+                      },
+                      {
+                        icon: $globals.icons.checkboxBlankOutline,
+                        text: $tc('shopping-list.uncheck-all-items'),
+                        event: 'uncheck',
+                      },
+                      {
+                        icon: $globals.icons.cog,
+                        text: $tc('general.menu'),
+                        event: 'menu',
+                        color: 'info',
+                      },
+                      {
+                        icon: $globals.icons.delete,
+                        text: $tc('shopping-list.delete-checked'),
+                        event: 'delete',
+                        color: 'error',
+                      },
+                    ],
+                  },
+                ]"
+                @edit="edit = true"
+                @delete="openDeleteChecked"
+                @uncheck="openUncheckAll"
+                @check="openCheckAll"
+                @copy-plain="copyListItems('plain')"
+                @copy-markdown="copyListItems('markdown')"
+                @menu="toggleMenuDialog()"
+              />
+            </v-col>


I think this needs some more work.
It might be ok to hide a few things behind the three dot menue, but for some things it gets a bit to much.
E.g. the Owner Settings are now: Three Dot ➡️ Menu ➡️ Settings

My suggestion would be to have that in a later PR, this needs to be a bit more fleshed out.
The thing i am sure that makes sense to put in a three dot menu would be the owner settings menu. Im not too sure about the rest

I will try to separate out the changes as you suggest and we can look at the three dot menu separately.

Kuchenpirat · 2024-09-17T07:01:26Z

frontend/pages/shopping-lists/_id.vue

-              </v-icon>
-            </span>
-            {{ key }}
+            <!-- Create Item -->


i think it is clear that this needs to be polished quite a bit, but i really like the concept and think that this creation flow is the way to go 👍

Kuchenpirat · 2024-09-17T07:04:18Z

frontend/pages/shopping-lists/_id.vue

@@ -101,6 +164,45 @@
        </v-card>
      </BaseDialog>

+      <!-- Menu dialog -->


This needs still some work. Having a button in a three dot menue that leads to a modal with further menue options is not the way to do it.

Kuchenpirat · 2024-09-17T07:06:04Z

frontend/pages/shopping-lists/_id.vue

+      v-if="wakeIsSupported"
+      class="d-print-none d-flex px-2"
+      :class="$vuetify.breakpoint.smAndDown ? 'justify-center' : 'justify-end'"
+    >
+      <v-switch v-model="wakeLock" small :label="$t('recipe.screen-awake')" />
+    </div>


Having the options for wake lock in the shoping list makes absolutely sense 👍😍

Wetzel402 · 2024-09-19T18:55:04Z

Looking at all my comments i really suggest just sliming down this PR, focusing on the key elements while addressing the rest in separate PRs. This way, you'll have something merged quickly and can build on it, allowing us to review and discuss specific items more effectively instead of tackling such a broad PR.

I really like the general idea of cleaning up the shopping list interface, but some aspects still need work.

What is ready to go:

The visual change of having labels over each category

Wake lock

I'm happy to merge a PR with these updates, and we can address the rest in future PRs. 👍

PRs for these 2 changes:
#4235
#4236

Wetzel402 · 2024-09-19T19:26:18Z

PR for defaulting to the label sorted view...
#4238

Kuchenpirat · 2024-09-25T17:14:10Z

Will close this as this has been divided up on the following PRs:

The remaining features are not production ready yet. We are happy to get them in potential future PRs 👍

Wetzel402 added 7 commits August 13, 2024 11:25

Update home-assistant.md

ff66303

Add files via upload

96c28d8

Merge branch 'mealie-next' into mealie-next

a8f1fd8

Update home-assistant.md

29411ed

modified: frontend/components/global/BaseButtonGroup.vue

a839d7e

modified: frontend/pages/group/data/labels.vue modified: frontend/pages/shopping-lists/_id.vue modified: mealie/schema/labels/multi_purpose_label.py

Merge branch 'mealie-recipes:mealie-next' into mealie-next

d766cf6

deleted: docs/docs/assets/img/home-assistant-cards.png

d3b51c4

modified: docs/docs/documentation/community-guide/home-assistant.md

modified: frontend/pages/shopping-lists/_id.vue

94b5e42

Wetzel402 added 4 commits August 22, 2024 17:32

modified: frontend/pages/shopping-lists/_id.vue

970e9e6

modified: frontend/composables/use-users/preferences.ts

69c6c03

modified: frontend/pages/shopping-lists/_id.vue

79f76e0

modified: frontend/components/Domain/ShoppingList/ShoppingListItem.vue

98e6f99

boc-the-git added the feature label Sep 15, 2024

Update _id.vue

7f4ccbd

Wetzel402 closed this Sep 16, 2024

Wetzel402 reopened this Sep 16, 2024

Kuchenpirat requested changes Sep 17, 2024

View reviewed changes

This was referenced Sep 19, 2024

feat: Shopping list UI overhaul - add label headings per category #4235

Merged

feat: Shopping list UI overhaul - add wakelock #4236

Merged

This was referenced Sep 19, 2024

feat: Shopping list UI overhaul - increase list item width #4237

Merged

feat: Shopping list UI overhaul - label sorted by default #4238

Merged

Wetzel402 mentioned this pull request Sep 20, 2024

feat: Shopping list UI overhaul - increase list item width #4244

Closed

Kuchenpirat closed this Sep 25, 2024

Wetzel402 deleted the shopping-list-ui branch September 26, 2024 21:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Shopping list UI overhaul #4077

feat: Shopping list UI overhaul #4077

Wetzel402 commented Aug 22, 2024 •

edited by boc-the-git

Loading

Kuchenpirat commented Aug 22, 2024

Wetzel402 commented Aug 22, 2024

boc-the-git commented Sep 15, 2024 •

edited

Loading

Wetzel402 commented Sep 16, 2024

Kuchenpirat commented Sep 16, 2024 •

edited

Loading

Wetzel402 commented Sep 16, 2024

Kuchenpirat left a comment

Kuchenpirat Sep 17, 2024

Wetzel402 Sep 19, 2024

Kuchenpirat Sep 17, 2024

Wetzel402 Sep 19, 2024 •

edited

Loading

Kuchenpirat Sep 17, 2024

Wetzel402 Sep 19, 2024

Kuchenpirat Sep 17, 2024

Kuchenpirat Sep 17, 2024

Kuchenpirat Sep 17, 2024

Wetzel402 commented Sep 19, 2024

Wetzel402 commented Sep 19, 2024

Kuchenpirat commented Sep 25, 2024

feat: Shopping list UI overhaul #4077

feat: Shopping list UI overhaul #4077

Conversation

Wetzel402 commented Aug 22, 2024 • edited by boc-the-git Loading

What type of PR is this?

What this PR does / why we need it:

Which issue(s) this PR fixes:

Testing

Kuchenpirat commented Aug 22, 2024

Wetzel402 commented Aug 22, 2024

boc-the-git commented Sep 15, 2024 • edited Loading

Wetzel402 commented Sep 16, 2024

Kuchenpirat commented Sep 16, 2024 • edited Loading

Wetzel402 commented Sep 16, 2024

Kuchenpirat left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Wetzel402 Sep 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Wetzel402 commented Sep 19, 2024

Wetzel402 commented Sep 19, 2024

Kuchenpirat commented Sep 25, 2024

Wetzel402 commented Aug 22, 2024 •

edited by boc-the-git

Loading

boc-the-git commented Sep 15, 2024 •

edited

Loading

Kuchenpirat commented Sep 16, 2024 •

edited

Loading

Wetzel402 Sep 19, 2024 •

edited

Loading