fix: shopping list UI improvements (#7215)

frontend/app/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue

@@ -170,12 +170,12 @@
         <BaseButtonGroup
           :buttons="[
             {
-              icon: $globals.icons.checkboxBlankOutline,
+              icon: $globals.icons.checkboxMultipleBlankOutline,
               text: $t('shopping-list.uncheck-all-items'),
               event: 'uncheck',
             },
             {
-              icon: $globals.icons.checkboxOutline,
+              icon: $globals.icons.checkboxMultipleMarkedOutline,
               text: $t('shopping-list.check-all-items'),
               event: 'check',
             },

frontend/app/components/Domain/Recipe/RecipeList.vue

@@ -1,11 +1,11 @@
 <template>
-  <v-list :class="tile ? 'd-flex flex-wrap background' : 'background'" style="background-color: transparent;">
+  <v-list :class="attrs.class.list">
     <v-sheet
       v-for="recipe, index in recipes"
-      :key="recipe.id"
+      :key="recipe.id || recipe.slug"
       :elevation="2"
       :class="attrs.class.sheet"
-      :style="tile ? 'max-width: 100%; width: fit-content;' : 'width: 100%;'"
+      :style="attrs.style.sheet"
     >
       <v-list-item
         :to="disabled ? '' : '/g/' + groupSlug + '/r/' + recipe.slug"
@@ -13,10 +13,15 @@
       >
         <template #prepend>
           <v-avatar color="primary" :class="attrs.class.avatar">
+            <v-img
+              v-if="recipe.image"
+              :src="getRecipeImageUrl(recipe)"
+            />
             <v-icon
+              v-else
               :class="attrs.class.icon"
               dark
-              :size="small ? 'small' : 'default'"
+              size="x-large"
             >
               {{ $globals.icons.primary }}
             </v-icon>
@@ -54,20 +59,19 @@
 <script setup lang="ts">
 import DOMPurify from "dompurify";
 import { useFraction } from "~/composables/recipes/use-fraction";
+import { useStaticRoutes } from "~/composables/api";
 import type { ShoppingListItemOut } from "~/lib/api/types/household";
 import type { RecipeSummary } from "~/lib/api/types/recipe";
 
 interface Props {
   recipes: RecipeSummary[];
   listItem?: ShoppingListItemOut;
-  small?: boolean;
   tile?: boolean;
   showDescription?: boolean;
   disabled?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
   listItem: undefined,
-  small: false,
   tile: false,
   showDescription: false,
   disabled: false,
@@ -75,35 +79,40 @@ const props = withDefaults(defineProps<Props>(), {
 
 const auth = useMealieAuth();
 const { frac } = useFraction();
+const { recipeTinyImage } = useStaticRoutes();
 const route = useRoute();
+const display = useDisplay();
 const groupSlug = computed(() => route.params.groupSlug || auth.user?.value?.groupSlug || "");
 
+// Determine if we should show tiles based on screen size and number of recipes
+const shouldShowTiles = computed(() => {
+  return props.tile && display.smAndUp.value;
+});
+
+function getRecipeImageUrl(recipe: RecipeSummary) {
+  return recipeTinyImage(String(recipe.id), recipe.image ?? "");
+}
+
 const attrs = computed(() => {
-  return props.small
-    ? {
+  const tileClasses = shouldShowTiles.value ? "d-flex flex-wrap" : "bg-transparent";
+  const sheetClasses = shouldShowTiles.value
+    ? "flex-grow-0 flex-shrink-0 mb-2 me-3"
+    : props.tile ? "mb-2 mx-2" : "mb-1";
+  const sheetStyle = shouldShowTiles.value
+    ? { flexBasis: "calc(50% - 12px)", width: "calc(50% - 12px)" }
+    : {};
+
+  return {
     class: {
-          sheet: props.tile ? "mb-1 me-1 justify-center align-center" : "mb-1 justify-center align-center",
-          listItem: "px-0",
-          avatar: "ma-0",
-          icon: "ma-0 pa-0 primary",
-          text: "pa-0",
-        },
-        style: {
-          text: {
-            title: "font-size: small;",
-            subTitle: "font-size: x-small;",
-          },
-        },
-      }
-    : {
-        class: {
-          sheet: props.tile ? "mx-1 justify-center align-center" : "mb-1 justify-center align-center",
-          listItem: "px-4",
+      list: tileClasses,
+      sheet: sheetClasses,
+      listItem: "px-4 py-2",
       avatar: "",
       icon: "pa-1 primary",
       text: "",
     },
     style: {
+      sheet: sheetStyle,
       text: {
         title: "",
         subTitle: "",
@@ -158,6 +167,10 @@ const listItemDescriptions = computed<string[]>(() => {
 
       listItemDescription += ` ${unitDisplay}`;
     }
+    if (props.listItem.food) {
+      const foodName = props.listItem.food.name;
+      listItemDescription += ` ${foodName}`;
+    }
 
     if (itemRef.recipeNote) {
       listItemDescription += `, ${itemRef.recipeNote}`;

frontend/app/components/Domain/ShoppingList/MultiPurposeLabel.vue

@@ -4,7 +4,6 @@
     label
     variant="flat"
     :color="label.color || undefined"
-    :text-color="textColor"
   >
     <span style="max-width: 100%; overflow: hidden; text-overflow: ellipsis;">
       {{ label.name }}
@@ -13,12 +12,9 @@
 </template>
 
 <script setup lang="ts">
-import { getTextColor } from "~/composables/use-text-color";
 import type { MultiPurposeLabelSummary } from "~/lib/api/types/recipe";
 
-const props = defineProps<{
+defineProps<{
   label: MultiPurposeLabelSummary;
 }>();
-
-const textColor = computed(() => getTextColor(props.label.color));
 </script>

frontend/app/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -68,7 +68,7 @@
                       @click="displayRecipeRefs = !displayRecipeRefs"
                     >
                       <v-icon>
-                        {{ $globals.icons.potSteam }}
+                        {{ $globals.icons.silverwareForkKnife }}
                       </v-icon>
                     </v-btn>
                   </template>
@@ -79,7 +79,7 @@
                   variant="text"
                   class="ml-2"
                   icon
-                  @click="toggleEdit(true)"
+                  @click="toggleEdit(!edit)"
                 >
                   <v-icon>
                     {{ $globals.icons.edit }}
@@ -113,24 +113,17 @@
           </div>
         </v-col>
       </v-row>
-      <v-row
+      <v-container
         v-if="!listItem.checked && recipeList && recipeList.length && displayRecipeRefs"
-        no-gutters
-        class="mb-2"
-      >
-        <v-col
-          cols="auto"
-          style="width: 100%;"
+        class="pa-0"
       >
         <RecipeList
           :recipes="recipeList"
           :list-item="listItem"
           :disabled="isOffline"
-            size="small"
-            tile
+          :tile="true"
         />
-        </v-col>
-      </v-row>
+      </v-container>
       <v-row
         v-if="listItem.checked"
         no-gutters
@@ -146,8 +139,8 @@
       </v-row>
     </v-container>
     <div
-      v-else
-      class="mb-1 mt-6"
+      v-if="edit"
+      class="mb-4"
     >
       <ShoppingListItemEditor
         v-model="localListItem"

frontend/app/composables/use-text-color.ts

@@ -1,39 +0,0 @@
-import Color from "@sphinxxxx/color-conversion";
-
-const LIGHT_COLOR = "white";
-const DARK_COLOR = "black";
-const ACCESSIBILITY_THRESHOLD = 0.179;
-
-/*
-Function to pick the text color based on the background color.
-
-Based on -> https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
-*/
-export function getTextColor(bgColor: string | undefined): string {
-  if (!bgColor) {
-    return DARK_COLOR;
-  }
-
-  try {
-    const color = new Color(bgColor);
-
-    // if opacity is less than 0.3 always return dark color
-    if (color._rgba[3] < 0.3) {
-      return DARK_COLOR;
-    }
-
-    const uicolors = [color._rgba[0] / 255, color._rgba[1] / 255, color._rgba[2] / 255];
-    const c = uicolors.map((col) => {
-      if (col <= 0.03928) {
-        return col / 12.92;
-      }
-      return Math.pow((col + 0.055) / 1.055, 2.4);
-    });
-    const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-    return L > ACCESSIBILITY_THRESHOLD ? DARK_COLOR : LIGHT_COLOR;
-  }
-  catch (error) {
-    console.warn(error);
-    return DARK_COLOR;
-  }
-}

frontend/app/lib/icons/icons.ts

@@ -31,9 +31,9 @@ import {
   mdiChartLine,
   mdiCheck,
   mdiCheckBold,
-  mdiCheckboxBlankOutline,
   mdiCheckboxMarkedCircle,
-  mdiCheckboxOutline,
+  mdiCheckboxMultipleBlankOutline,
+  mdiCheckboxMultipleOutline,
   mdiChefHat,
   mdiChevronDown,
   mdiChevronRight,
@@ -198,8 +198,8 @@ export const icons = {
   cartCheck: mdiCartCheck,
   check: mdiCheck,
   checkBold: mdiCheckBold,
-  checkboxBlankOutline: mdiCheckboxBlankOutline,
-  checkboxOutline: mdiCheckboxOutline,
+  checkboxMultipleBlankOutline: mdiCheckboxMultipleBlankOutline,
+  checkboxMultipleMarkedOutline: mdiCheckboxMultipleOutline,
   checkboxMarkedCircle: mdiCheckboxMarkedCircle,
   chefHat: mdiChefHat,
   clipboardCheck: mdiClipboardCheck,

frontend/app/pages/shopping-lists/[id].vue

@@ -71,27 +71,16 @@
       <template #header>
         <v-container class="px-0">
           <v-row no-gutters>
-            <v-col
-              class="text-left"
-            >
             <ButtonLink
               :to="`/shopping-lists?disableRedirect=true`"
               :text="$t('shopping-list.all-lists')"
               :icon="$globals.icons.backArrow"
             />
-            </v-col>
-            <v-col
-              v-if="mdAndUp"
-              cols="6"
-              class="d-none d-sm-flex justify-center"
-            >
-              <v-img
-                max-height="100"
-                max-width="100"
-                src="/svgs/shopping-cart.svg"
-              />
-            </v-col>
-            <v-col class="d-flex justify-end">
+            <v-spacer />
+            <h2 v-if="smAndUp" class="text-h5">
+              {{ shoppingList.name }}
+            </h2>
+            <v-spacer />
             <BaseButtonGroup
               class="d-flex"
               :buttons="[
@@ -113,7 +102,7 @@
                   ],
                 },
                 {
-                    icon: $globals.icons.checkboxOutline,
+                  icon: $globals.icons.checkboxMultipleMarkedOutline,
                   text: $t('shopping-list.check-all-items'),
                   event: 'check',
                 },
@@ -143,12 +132,11 @@
               @reorder-labels="toggleReorderLabelsDialog()"
               @manage-labels="$router.push(`/group/data/labels`)"
             />
-            </v-col>
           </v-row>
         </v-container>
       </template>
       <template #title>
-        {{ shoppingList.name }}
+        {{ smAndUp ? "" : shoppingList.name }}
       </template>
     </BasePageTitle>
     <BannerWarning
@@ -248,7 +236,7 @@
                 <BaseButtonGroup
                   :buttons="[
                     {
-                      icon: $globals.icons.checkboxBlankOutline,
+                      icon: $globals.icons.checkboxMultipleBlankOutline,
                       text: $t('shopping-list.uncheck-all-items'),
                       event: 'uncheck',
                     },
@@ -293,7 +281,7 @@
         <div>
           <span>
             <v-icon start class="mb-1">
-              {{ $globals.icons.primary }}
+              {{ $globals.icons.silverwareForkKnife }}
             </v-icon>
           </span>
           {{ $t('shopping-list.linked-recipes-count', shoppingList.recipeReferences
@@ -361,7 +349,7 @@ import { useLabelStore, useUnitStore, useFoodStore } from "~/composables/store";
 import { alert } from "~/composables/use-toast";
 import type { ShoppingListItemOut } from "~/lib/api/types/household";
 
-const { mdAndUp } = useDisplay();
+const { smAndUp } = useDisplay();
 const i18n = useI18n();
 
 useSeoMeta({

frontend/package.json

@@ -23,7 +23,6 @@
     "@mdi/js": "^7.4.47",
     "@nuxt/fonts": "^0.11.4",
     "@nuxtjs/i18n": "^9.2.1",
-    "@sphinxxxx/color-conversion": "^2.2.2",
     "@vite-pwa/nuxt": "^0.10.6",
     "@vueuse/core": "^12.7.0",
     "@vueuse/shared": "^14.3.0",