feat: Shopping list UI overhaul - three dot menu #4415
Conversation
|
This has been marked as draft for quite some time without progress, anything you need from us to get this over the finish line? |
I know there was some discussion among the core team regarding what should be in the menu vs what should be exposed as a separate button. I posted in the Discord asking for feedback and then honestly forgot about it. |
There was a problem hiding this comment.
Ok, so I finally made some free time and looked at your proposal, I think it is a good idea to tidy up the interface, but I think putting absolutely everything into the three dot menu is a bit too much.
So, I tried to move stuff around a bit and add it to its relevant places.
Delete & Uncheck All Icon
The delete icon (to delete all checked items) as well as the box to uncheck all items should be where the checked items are. Especially with the delete items people will assume that it deletes the shopping list instead of the checked items.
I’d suggest something like this:
Owner Menu
I would move the “owner” menu to the shopping lists overview page. I’d say it makes much more sense over there.
Something like this should be pretty intuitive
Copy & Check All
I'd think the copy and check all buttons are use pretty frequently so i would like them to not be hidden. I think a slimmed down version of the old button group is fine.
Remaing Buttons
The remaining buttons should be moved into the three dot menu since those will not be used on a super regular basis and don't need to take up prime real estate.
The result should look something like this which should be pretty clean.
The three dot menu contains Toggle Label Sort, Reorder Labels and Manage Labels
Miscellaneous
- I would also rename the button to the shopping lists overview to “All Lists” because it is not a back button since it does not go back where the user came from.
- The image on the top should be only shown on desktop view. On mobile it takes up to much of the most important space and makes the top section look crammed.
- I think we can remove the manage labels button from the shopping list overview page. There is nothing there happening with labels, so it is a bit confusing to have it over there.
I hope you like where i am going with this. As always happy for feedback from you or other members of the community. Always happy to have better ideas suggested.
|
This PR is stale because it has been open 45 days with no activity. |
|
hey @Wetzel402 any progress on this one? |
Sorry, between the holidays and work I haven't had any time to work on it. I will try to find some time to work on this. |
modified: frontend/pages/shopping-lists/index.vue
|
This is ready for review and I love how it all came together. So much cleaner. Thanks! |
There was a problem hiding this comment.
Thanks for the quick work.
There is one major problem with updating the shopping list owner.
The list items are deleted if an api call is made (every time you click confirm on that dialog). You probably have to get the full list(including its items) and send that to the api instead of the summary that is used by the shoping list overview page.
You probably can also skip the api call if the owner has not been updated.
Besides that some minor comments for the first feedback round.
modified: frontend/pages/shopping-lists/index.vue
|
Hopefully this one is ready to pull now. |
|
@Kuchenpirat, Thank you as well. Excited to see Mealie improve. |
What type of PR is this?
What this PR does / why we need it:
Moved shopping list action bar into a three dot menu to clean up the UI/UX.
Which issue(s) this PR fixes:
None
Testing
Tested in docker container