dev-feature/analyze-bundle (#529)

* add bundle analyzer

* use svg icons - closes #522

* fix recent recipes icon

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/Recipe/CommentSection/index.vue

@@ -2,9 +2,9 @@
   <v-card>
     <v-card-title class="headline">
       <v-icon large class="mr-2">
-        mdi-comment-text-multiple-outline
+        {{ $globals.icons.commentTextMultipleOutline }}
       </v-icon>
-      {{ $t('recipe.comments') }}
+      {{ $t("recipe.comments") }}
     </v-card-title>
     <v-divider class="mx-2"></v-divider>
     <v-card class="ma-2" v-for="(comment, index) in comments" :key="comment.id">
@@ -43,7 +43,7 @@
     <v-card-text v-if="loggedIn">
       <v-textarea auto-grow row-height="1" outlined v-model="newComment"> </v-textarea>
       <div class="d-flex">
-        <TheButton class="ml-auto" create @click="createNewComment"> {{ $t('recipe.comment-action') }} </TheButton>
+        <TheButton class="ml-auto" create @click="createNewComment"> {{ $t("recipe.comment-action") }} </TheButton>
       </div>
     </v-card-text>
   </v-card>

frontend/src/components/Recipe/ContextMenu.vue

@@ -4,7 +4,7 @@
       :title="$t('recipe.delete-recipe')"
       :message="$t('recipe.delete-confirmation')"
       color="error"
-      icon="mdi-alert-circle"
+      :icon="$globals.icons.alertCircle"
       ref="deleteRecipieConfirm"
       v-on:confirm="deleteRecipe()"
     />
@@ -21,7 +21,7 @@
     >
       <template v-slot:activator="{ on, attrs }">
         <v-btn :fab="fab" :small="fab" :color="color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
-          <v-icon>{{ menuIcon }}</v-icon>
+          <v-icon>{{ effMenuIcon }}</v-icon>
         </v-btn>
       </template>
       <v-list dense>
@@ -65,7 +65,7 @@ export default {
       type: String,
     },
     menuIcon: {
-      default: "mdi-dots-vertical",
+      default: null,
     },
     name: {
       type: String,
@@ -76,6 +76,9 @@ export default {
     },
   },
   computed: {
+    effMenuIcon() {
+      return this.menuIcon ? this.menuIcon : this.$globals.icons.dotsVertical;
+    },
     loggedIn() {
       return this.$store.getters.getIsLoggedIn;
     },
@@ -89,13 +92,13 @@ export default {
       return [
         {
           title: this.$t("general.print"),
-          icon: "mdi-printer",
+          icon: this.$globals.icons.printer,
           color: "accent",
           action: "print",
         },
         {
           title: this.$t("general.share"),
-          icon: "mdi-share-variant",
+          icon: this.$globals.icons.shareVariant,
           color: "accent",
           action: "share",
         },

frontend/src/components/Recipe/FavoriteBadge.vue

@@ -12,7 +12,7 @@
         v-on="on"
       >
         <v-icon :small="!buttonStyle" color="secondary">
-          {{ isFavorite ? "mdi-heart" : "mdi-heart-outline" }}
+          {{ isFavorite ? $globals.icons.heart : $globals.icons.heartOutline }}
         </v-icon>
       </v-btn>
     </template>

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -34,11 +34,7 @@
               :value="rating"
             ></v-rating>
             <v-spacer></v-spacer>
-            <ContextMenu
-                :slug="slug"
-                menu-icon="mdi-dots-horizontal"
-                :name="name"
-            />
+            <ContextMenu :slug="slug" :menu-icon="$globals.icons.dotsHorizontal" :name="name" />
           </div>
         </v-list-item-content>
       </v-list-item>

frontend/src/components/Recipe/Parts/Assets.vue

@@ -8,14 +8,14 @@
       <v-list :flat="!edit" v-if="value.length > 0">
         <v-list-item v-for="(item, i) in value" :key="i">
           <v-list-item-icon class="ma-auto">
-            <v-icon v-text="item.icon"></v-icon>
+            <v-icon v-text="getIcon(item.icon)"></v-icon>
           </v-list-item-icon>
           <v-list-item-content>
             <v-list-item-title class="pl-2" v-text="item.name"></v-list-item-title>
           </v-list-item-content>
           <v-list-item-action>
             <v-btn v-if="!edit" color="primary" icon :href="assetURL(item.fileName)" target="_blank" top>
-              <v-icon> mdi-download</v-icon>
+              <v-icon> {{ $globals.icons.download }} </v-icon>
             </v-btn>
             <div v-else>
               <v-btn color="error" icon @click="deleteAsset(i)" top>
@@ -29,7 +29,7 @@
     </v-card>
     <div class="d-flex ml-auto mt-2">
       <v-spacer></v-spacer>
-      <base-dialog @submit="addAsset" :title="$t('recipe.new-asset')" :title-icon="newAsset.icon">
+      <base-dialog @submit="addAsset" :title="$t('recipe.new-asset')" :title-icon="getIcon(newAsset.icon)">
         <template v-slot:open="{ open }">
           <v-btn color="secondary" dark @click="open" v-if="edit">
             <v-icon>{{ $globals.icons.create }}</v-icon>
@@ -38,11 +38,17 @@
         <v-card-text class="pt-2">
           <v-text-field dense v-model="newAsset.name" :label="$t('general.name')"></v-text-field>
           <div class="d-flex justify-space-between">
-            <v-select dense :prepend-icon="newAsset.icon" v-model="newAsset.icon" :items="iconOptions" class="mr-2">
+            <v-select
+              dense
+              :prepend-icon="getIcon(newAsset.icon)"
+              v-model="newAsset.icon"
+              :items="iconOptions"
+              class="mr-2"
+            >
               <template v-slot:item="{ item }">
                 <v-list-item-avatar>
                   <v-icon class="mr-auto">
-                    {{ item }}
+                    {{ getIcon(item) }}
                   </v-icon>
                 </v-list-item-avatar>
                 {{ item }}
@@ -86,23 +92,6 @@ export default {
         icon: "mdi-file",
       },
       iconOptions: ["mdi-file", "mdi-file-pdf-box", "mdi-file-image", "mdi-code-json", "mdi-silverware-fork-knife"],
-      menu: [
-        {
-          title: "Link 1",
-          icon: "mdi-file",
-          action: "Do Something",
-        },
-        {
-          title: "Link 1",
-          icon: "mdi-file",
-          action: "Do Something",
-        },
-        {
-          title: "Link 1",
-          icon: "mdi-file",
-          action: "Do Something",
-        },
-      ],
     };
   },
   computed: {
@@ -111,6 +100,22 @@ export default {
     },
   },
   methods: {
+    getIcon(val) {
+      switch (val) {
+        case "mdi-file":
+          return this.$globals.icons.file;
+        case "mdi-file-pdf-box":
+          return this.$globals.icons.filePDF;
+        case "mdi-file-image":
+          return this.$globals.icons.fileImage;
+        case "mdi-code-json":
+          return this.$globals.icons.codeJson;
+        case "mdi-silverware-fork-knife":
+          return this.$globals.icons.primary;
+        default:
+          return this.$globals.icons.file;
+      }
+    },
     assetURL(assetName) {
       return api.recipes.recipeAssetPath(this.slug, assetName);
     },
@@ -138,4 +143,3 @@ export default {
 };
 </script>
 
-<style scoped></style>

frontend/src/components/Recipe/Parts/Helpers/ImageUploadBtn.vue

@@ -4,7 +4,7 @@
       <template v-slot:activator="{ on, attrs }">
         <v-btn color="accent" dark v-bind="attrs" v-on="on">
           <v-icon left>
-            mdi-image
+            {{ $globals.icons.fileImage }}
           </v-icon>
           {{ $t("general.image") }}
         </v-btn>

frontend/src/components/Recipe/Parts/Helpers/SettingsMenu.vue

@@ -4,7 +4,7 @@
       <template v-slot:activator="{ on, attrs }">
         <v-btn color="accent" dark v-bind="attrs" v-on="on">
           <v-icon left>
-            mdi-cog
+            {{ $globals.icons.cog }}
           </v-icon>
           {{ $t("general.settings") }}
         </v-btn>

frontend/src/components/Recipe/Parts/Ingredients.vue

@@ -10,14 +10,13 @@
                 class="mr-2"
                 :label="$t('recipe.ingredient')"
                 v-model="value[index].note"
-                mdi-move-resize
                 auto-grow
                 solo
                 dense
                 rows="1"
               >
                 <template slot="append-outer">
-                  <v-icon class="handle">mdi-arrow-up-down</v-icon>
+                  <v-icon class="handle">{{ $globals.icons.arrowUpDown }}</v-icon>
                 </template>
                 <v-icon class="mr-n1" slot="prepend" color="error" @click="removeByIndex(value, index)">
                   {{ $globals.icons.delete }}

frontend/src/components/Recipe/PrintView.vue

@@ -33,9 +33,9 @@
       <ul>
         <li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index">
           <v-icon>
-            mdi-checkbox-blank-outline
+            {{ $globals.icons.checkboxBlankOutline }}
           </v-icon>
-          <p>{{ ingredient }}</p>
+          <p>{{ ingredient.note }}</p>
         </li>
       </ul>
     </div>

frontend/src/components/Recipe/RecipePageActionMenu.vue

@@ -12,7 +12,7 @@
       :title="$t('recipe.delete-recipe')"
       :message="$t('recipe.delete-confirmation')"
       color="error"
-      icon="mdi-alert-circle"
+      :icon="$globals.icons.alertCircle"
       ref="deleteRecipieConfirm"
       v-on:confirm="emitDelete()"
     />
@@ -30,7 +30,7 @@
         :menu-top="false"
         :slug="slug"
         :name="name"
-        menu-icon="mdi-dots-horizontal"
+        :menu-icon="$globals.icons.mdiDotsHorizontal"
         fab
         color="info"
         :card-menu="false"
@@ -80,36 +80,36 @@ export default {
       edit: false,
     };
   },
-  
+
   computed: {
-      editorButtons() {
-        return [
-          {
-            text: this.$t('general.delete'),
-            icon: this.$globals.icons.delete,
-            event: DELETE_EVENT,
-            color: "error",
-          },
-          {
-            text: this.$t('general.json'),
-            icon: "mdi-code-braces",
-            event: JSON_EVENT,
-            color: "accent",
-          },
-          {
-            text: this.$t('general.close'),
-            icon: "mdi-close",
-            event: CLOSE_EVENT,
-            color: "",
-          },
-          {
-            text: this.$t('general.save'),
-            icon: this.$globals.icons.save,
-            event: SAVE_EVENT,
-            color: "success",
-          },
-        ]; 
-      },
+    editorButtons() {
+      return [
+        {
+          text: this.$t("general.delete"),
+          icon: this.$globals.icons.delete,
+          event: DELETE_EVENT,
+          color: "error",
+        },
+        {
+          text: this.$t("general.json"),
+          icon: this.$globals.icons.codeBraces,
+          event: JSON_EVENT,
+          color: "accent",
+        },
+        {
+          text: this.$t("general.close"),
+          icon: this.$globals.icons.close,
+          event: CLOSE_EVENT,
+          color: "",
+        },
+        {
+          text: this.$t("general.save"),
+          icon: this.$globals.icons.save,
+          event: SAVE_EVENT,
+          color: "success",
+        },
+      ];
+    },
   },
   methods: {
     emitHandler(event) {

frontend/src/components/Recipe/RecipeTimeCard.vue

@@ -2,7 +2,7 @@
   <div>
     <v-chip label color="accent custom-transparent" class="ma-1" v-for="(time, index) in allTimes" :key="index">
       <v-icon left>
-        mdi-clock-outline
+        {{ $globals.icons.clockOutline }}
       </v-icon>
       {{ time.name }} |
       {{ time.value }}