From 1209bf4b80014d710f9179c58e7f7c6358b0c9e0 Mon Sep 17 00:00:00 2001
From: wengtad <wengtad93@gmail.com>
Date: Sat, 12 Jun 2021 14:59:14 +0800
Subject: [PATCH] add tooltip to fab (#497)

---
 .../src/components/Recipe/ContextMenu.vue     | 24 +++++++++++---
 .../src/components/Recipe/FavoriteBadge.vue   | 31 ++++++++++++-------
 .../Recipe/RecipePageActionMenu.vue           | 11 +++++--
 frontend/src/components/UI/TheRecipeFab.vue   | 25 ++++++++++-----
 frontend/src/locales/messages/en-US.json      |  7 +++--
 5 files changed, 68 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/Recipe/ContextMenu.vue b/frontend/src/components/Recipe/ContextMenu.vue
index e7b19379427d..c58a670a3031 100644
--- a/frontend/src/components/Recipe/ContextMenu.vue
+++ b/frontend/src/components/Recipe/ContextMenu.vue
@@ -17,10 +17,24 @@
       :nudge-top="menuTop ? '5' : '0'"
       allow-overflow
     >
-      <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-btn>
+      <template v-slot:activator="{ on: onMenu, attrs: attrsMenu }">
+        <v-tooltip bottom dark :color="color">
+          <template v-slot:activator="{ on: onTooltip, attrs: attrsTooltip }">
+            <v-btn
+              :fab="fab"
+              :small="fab"
+              :color="color"
+              :icon="!fab"
+              dark
+              v-bind="{ ...attrsMenu, ...attrsTooltip }"
+              v-on="{ ...onMenu, ...onTooltip }"
+              @click.prevent
+            >
+              <v-icon>{{ menuIcon }}</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $t("general.more") }}</span>
+        </v-tooltip>
       </template>
       <v-list dense>
         <v-list-item
@@ -142,7 +156,7 @@ export default {
                 url: this.recipeURL,
               })
               .then(() => console.log("Successful share"))
-              .catch((error) => {
+              .catch(error => {
                 console.log("WebShareAPI not supported", error);
                 this.updateClipboard();
               });
diff --git a/frontend/src/components/Recipe/FavoriteBadge.vue b/frontend/src/components/Recipe/FavoriteBadge.vue
index d6de97763145..d3dcd27c009d 100644
--- a/frontend/src/components/Recipe/FavoriteBadge.vue
+++ b/frontend/src/components/Recipe/FavoriteBadge.vue
@@ -1,16 +1,23 @@
 <template>
-  <v-btn
-    small
-    @click.prevent="toggleFavorite"
-    v-if="isFavorite || showAlways"
-    :color="buttonStyle ? 'primary' : 'secondary'"
-    :icon="!buttonStyle"
-    :fab="buttonStyle"
-  >
-    <v-icon :small="!buttonStyle" color="secondary">
-      {{ isFavorite ? "mdi-heart" : "mdi-heart-outline" }}
-    </v-icon>
-  </v-btn>
+  <v-tooltip right :color="buttonStyle ? 'primary' : 'secondary'">
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn
+        small
+        @click.prevent="toggleFavorite"
+        v-if="isFavorite || showAlways"
+        :color="buttonStyle ? 'primary' : 'secondary'"
+        :icon="!buttonStyle"
+        :fab="buttonStyle"
+        v-bind="attrs"
+        v-on="on"
+      >
+        <v-icon :small="!buttonStyle" color="secondary">
+          {{ isFavorite ? "mdi-heart" : "mdi-heart-outline" }}
+        </v-icon>
+      </v-btn>
+    </template>
+    <span>{{ isFavorite ? $t("recipe.remove-from-favorites") : $t("recipe.add-to-favorites") }}</span>
+  </v-tooltip>
 </template>
 
 <script>
diff --git a/frontend/src/components/Recipe/RecipePageActionMenu.vue b/frontend/src/components/Recipe/RecipePageActionMenu.vue
index 84ddeb6d779f..c55f5ea9a939 100644
--- a/frontend/src/components/Recipe/RecipePageActionMenu.vue
+++ b/frontend/src/components/Recipe/RecipePageActionMenu.vue
@@ -18,9 +18,14 @@
     />
     <v-spacer></v-spacer>
     <div v-if="!value" class="custom-btn-group ma-1">
-      <v-btn fab small class="mx-1" color="info" @click="$emit('input', true)">
-        <v-icon> {{ $globals.icons.edit }} </v-icon>
-      </v-btn>
+      <v-tooltip bottom color="info">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn fab small class="mx-1" color="info" v-bind="attrs" v-on="on" @click="$emit('input', true)">
+            <v-icon> {{ $globals.icons.edit }} </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t("general.edit") }}</span>
+      </v-tooltip>
       <ContextMenu
         :menu-top="false"
         :slug="slug"
diff --git a/frontend/src/components/UI/TheRecipeFab.vue b/frontend/src/components/UI/TheRecipeFab.vue
index b3c024477837..263f27d9cc19 100644
--- a/frontend/src/components/UI/TheRecipeFab.vue
+++ b/frontend/src/components/UI/TheRecipeFab.vue
@@ -90,12 +90,22 @@
           <v-icon> {{ $globals.icons.createAlt }} </v-icon>
         </v-btn>
       </template>
-      <v-btn fab dark small color="primary" @click="addRecipe = true">
-        <v-icon>mdi-link</v-icon>
-      </v-btn>
-      <v-btn fab dark small color="accent" @click="$router.push('/new')">
-        <v-icon>{{ $globals.icons.edit }}</v-icon>
-      </v-btn>
+      <v-tooltip left dark color="primary">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn fab dark small color="primary" v-bind="attrs" v-on="on" @click="addRecipe = true">
+            <v-icon>mdi-link</v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t("new-recipe.from-url") }}</span>
+      </v-tooltip>
+      <v-tooltip left dark color="accent">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn fab dark small color="accent" v-bind="attrs" v-on="on" @click="$router.push('/new')">
+            <v-icon>{{ $globals.icons.edit }}</v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t("general.new") }}</span>
+      </v-tooltip>
     </v-speed-dial>
   </div>
 </template>
@@ -160,8 +170,7 @@ export default {
       this.processing = false;
     },
     isValidWebUrl(url) {
-      let regEx =
-        /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,256}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/gm;
+      let regEx = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,256}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/gm;
       return regEx.test(url) ? true : "Must be a Valid URL";
     },
 
diff --git a/frontend/src/locales/messages/en-US.json b/frontend/src/locales/messages/en-US.json
index 308d93474c16..96832deb4caf 100644
--- a/frontend/src/locales/messages/en-US.json
+++ b/frontend/src/locales/messages/en-US.json
@@ -117,7 +117,8 @@
     "url": "URL",
     "view": "View",
     "wednesday": "Wednesday",
-    "yes": "Yes"
+    "yes": "Yes",
+    "more": "More"
   },
   "group": {
     "are-you-sure-you-want-to-delete-the-group": "Are you sure you want to delete <b>{groupName}<b/>?",
@@ -251,7 +252,9 @@
     "title": "Title",
     "total-time": "Total Time",
     "unable-to-delete-recipe": "Unable to Delete Recipe",
-    "view-recipe": "View Recipe"
+    "view-recipe": "View Recipe",
+    "add-to-favorites": "Add to Favorites",
+    "remove-from-favorites": "Remove from Favorites"
   },
   "search": {
     "and": "and",