Add label to assets icons (#591)

* Add label to assets icons

* Add tooltip to asset icon

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

@@ -2,13 +2,18 @@
   <div v-if="value.length > 0 || edit">
     <v-card class="mt-2">
       <v-card-title class="py-2">
-        {{ $t("recipe.assets") }}
+        {{ $t("asset.assets") }}
       </v-card-title>
       <v-divider class="mx-2"></v-divider>
       <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="getIcon(item.icon)"></v-icon>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on, attrs }">
+                <v-icon v-text="getIconDefinition(item.icon).icon" v-bind="attrs" v-on="on"></v-icon>
+              </template>
+              <span>{{ getIconDefinition(item.icon).title }}</span>
+            </v-tooltip>
           </v-list-item-icon>
           <v-list-item-content>
             <v-list-item-title class="pl-2" v-text="item.name"></v-list-item-title>
@@ -29,7 +34,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="getIcon(newAsset.icon)">
+      <base-dialog @submit="addAsset" :title="$t('asset.new-asset')" :title-icon="getIconDefinition(newAsset.icon).icon">
         <template v-slot:open="{ open }">
           <v-btn color="secondary" dark @click="open" v-if="edit">
             <v-icon>{{ $globals.icons.create }}</v-icon>
@@ -40,18 +45,20 @@
           <div class="d-flex justify-space-between">
             <v-select
               dense
-              :prepend-icon="getIcon(newAsset.icon)"
+              :prepend-icon="getIconDefinition(newAsset.icon).icon"
               v-model="newAsset.icon"
               :items="iconOptions"
+              item-text="title"
+              item-value="name"
               class="mr-2"
             >
               <template v-slot:item="{ item }">
                 <v-list-item-avatar>
                   <v-icon class="mr-auto">
-                    {{ getIcon(item) }}
+                    {{ item.icon }}
                   </v-icon>
                 </v-list-item-avatar>
-                {{ item }}
+                {{ item.title }}
               </template>
             </v-select>
             <TheUploadBtn @uploaded="setFileObject" :post="false" file-name="file" :text-btn="false" />
@@ -91,30 +98,45 @@ export default {
         name: "",
         icon: "mdi-file",
       },
-      iconOptions: ["mdi-file", "mdi-file-pdf-box", "mdi-file-image", "mdi-code-json", "mdi-silverware-fork-knife"],
     };
   },
   computed: {
     baseURL() {
       return window.location.origin;
     },
+    iconOptions() {
+      return [ 
+        { 
+          name: "mdi-file",
+          title: this.$i18n.t('asset.file'),
+          icon: this.$globals.icons.file 
+        },
+        { 
+          name: "mdi-file-pdf-box",
+          title: this.$i18n.t('asset.pdf'),
+          icon: this.$globals.icons.filePDF 
+        },
+        { 
+          name: "mdi-file-image",
+          title: this.$i18n.t('asset.image'),
+          icon: this.$globals.icons.fileImage 
+        },
+        { 
+          name: "mdi-code-json",
+          title: this.$i18n.t('asset.code'),
+          icon: this.$globals.icons.codeJson 
+        },
+        { 
+          name: "mdi-silverware-fork-knife",
+          title: this.$i18n.t('asset.recipe'),
+          icon: this.$globals.icons.primary 
+        },
+      ];
+    },
   },
   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;
-      }
+    getIconDefinition(val) {
+      return this.iconOptions.find(({ name }) => name === val );
     },
     assetURL(assetName) {
       return api.recipes.recipeAssetPath(this.slug, assetName);

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

@@ -45,7 +45,7 @@ export default {
       return {
         public: this.$t("recipe.public-recipe"),
         showNutrition: this.$t("recipe.show-nutrition-values"),
-        showAssets: this.$t("recipe.show-assets"),
+        showAssets: this.$t("asset.show-assets"),
         landscapeView: this.$t("recipe.landscape-view-coming-soon"),
         disableComments: this.$t("recipe.disable-comments"),
         disableAmount: this.$t("recipe.disable-amount"),

frontend/src/locales/messages/en-US.json

@@ -22,6 +22,16 @@
     "support": "Support",
     "version": "Version"
   },
+  "asset": {
+    "assets": "Assets",
+    "code": "Code",
+    "file": "File",
+    "image": "Image",
+    "new-asset": "New Asset",
+    "pdf": "PDF",
+    "recipe": "Recipe",
+    "show-assets": "Show Assets"
+  },
   "category": {
     "category": "Category",
     "category-created": "Category created",
@@ -211,7 +221,6 @@
     "add-key": "Add Key",
     "add-to-favorites": "Add to Favorites",
     "api-extras": "API Extras",
-    "assets": "Assets",
     "calories": "Calories",
     "calories-suffix": "calories",
     "carbohydrate-content": "Carbohydrate",
@@ -233,7 +242,6 @@
     "key-name-required": "Key Name Required",
     "landscape-view-coming-soon": "Landscape View (Coming Soon)",
     "milligrams": "milligrams",
-    "new-asset": "New Asset",
     "new-key-name": "New Key Name",
     "no-white-space-allowed": "No White Space Allowed",
     "note": "Note",
@@ -260,7 +268,6 @@
     "section-title": "Section Title",
     "servings": "Servings",
     "share-recipe-message": "I wanted to share my {0} recipe with you.",
-    "show-assets": "Show Assets",
     "show-nutrition-values": "Show Nutrition Values",
     "sodium-content": "Sodium",
     "step-index": "Step: {step}",