Refactoring + add tooltip

src/components/Bookmarks/BookmarkButton.vue

@@ -1,33 +1,23 @@
 <template>
   <div>
-    <v-btn v-if="mode === 'contract'"
-      class="mr-2 pl-2 pr-2 text--secondary"
-      outlined
-      small
-      @click="bookmarkState"
-    >
-      <v-icon class="text--secondary" small>{{ isBookmark ? 'mdi-star' : 'mdi-star-outline' }}</v-icon>
-      <span class="ml-1 text--secondary">{{ isBookmark ? 'Remove bookmark' : 'Add bookmark' }}</span>
-    </v-btn>
-
-    <v-btn v-else-if="mode === 'entrypoint'"
-      icon
-      small
-      class="mr-5 text--secondary"
-      @click="bookmarkState"
-    >
-      <v-icon>{{ isBookmark ? 'mdi-star' : 'mdi-star-outline' }}</v-icon>
-    </v-btn>
-    <v-btn v-else-if="mode === 'entrypoint-list'"
-      icon
-      small
-      class="mr-5 primary--text"
-      @click="bookmarkState"
-    >
-      <v-icon v-if="isBookmark">mdi-star</v-icon>
-    </v-btn>
-
-    <BookmarkDialog v-model="openBookMarkDialog" :alias="alias || ``" @added="onBookmarkAdded"/>
+    <v-tooltip top>
+      <template v-slot:activator="{ on }">
+        <v-btn v-if="isBookmark || showEmpty"
+          v-on="on"
+          small
+          :class="customClass"
+          :outlined="isTextButton"
+          :icon="!isTextButton"
+          @click="bookmarkState"
+        >
+          <v-icon v-if="showEmpty" :small="isTextButton">{{ isBookmark ? 'mdi-star' : 'mdi-star-outline' }}</v-icon>
+          <v-icon v-else small>mdi-star</v-icon>
+          <span v-if="isTextButton" class="ml-1 text--secondary">{{ isBookmark ? 'Remove bookmark' : 'Add bookmark' }}</span>
+        </v-btn>
+      </template>
+      <span v-if="!isTextButton">{{ isBookmark ? 'Remove bookmark' : 'Add bookmark' }}</span>
+    </v-tooltip>
+    <BookmarkDialog v-if="showEmpty" v-model="openBookMarkDialog" :alias="alias || ``" @added="onBookmarkAdded"/>
   </div>
 </template>
 
@@ -41,11 +31,14 @@ export default {
     BookmarkDialog,
   },
   props: {
-    mode: String,
-    bookmarkKey: String,
     address: String,
     network: String,
     alias: String,
+    entrypoint: String,
+    customClass: String,
+    size: String,
+    isTextButton: Boolean,
+    showEmpty: Boolean,
   },
   data: () => ({
     items: {},
@@ -60,6 +53,9 @@ export default {
   computed: {
     keysCount() {
         return Object.keys(this.items).length;
+    },
+    bookmarkKey() {
+      return `${this.network}_${this.address}${this.entrypoint ? '_' + this.entrypoint : ''}`
     }
   },
   methods: {
@@ -88,17 +84,17 @@ export default {
     },
     onBookmarkAdded(value) {
       let bookmark = {}
-      if (this.mode === 'contract') {
+      if (!this.entrypoint) {
         bookmark = {
           network: this.network,
           address: this.address,
           alias: value || this.alias,          
         }
-      } else if (this.mode === 'entrypoint') {
+      } else {
         bookmark = {
           network: this.network,
           address: this.address,
-          entrypoint: this.alias,
+          entrypoint: this.entrypoint,
           alias: value || this.alias,          
         }
       }

src/components/Bookmarks/Bookmarks.vue

@@ -7,7 +7,7 @@
         </v-btn>
       </template>
       <v-list v-if="keysCount > 0" class="pa-0">
-        <v-list-item v-for="(item, index) in items" :key="index" :to="`/${item.network}/${item.address}` + (item.entrypoint ? `/interact/${item.entrypoint}` : '')">
+        <v-list-item v-for="(item, index) in items" :key="index" :to="getItemLink(item)">
             <v-list-item-content>
                 <v-list-item-title>{{ item.alias || item.address }}</v-list-item-title>
                 <v-list-item-subtitle class="overline">{{ item.network }}</v-list-item-subtitle>
@@ -55,7 +55,10 @@ export default {
     },
     onStatusChanged() {
         this.updateBookmarks();
-    }
+    },
+    getItemLink(item) {
+        return `/${item.network}/${item.address}${item.entrypoint ? '/interact/' + item.entrypoint : ''}`;
+    },
   }
 }
 </script>

src/components/schema/schemaComponents/SchemaHeader.vue

@@ -5,12 +5,13 @@
       <span class="accent--text">{{ isForkPage ? (alias || shortcutOnly(address)) : storageName }}</span>
     </div>
     <BookmarkButton v-if="isInteractPage"
-      :key="network + '_' + address + '_' + storageName"
-      :mode="'entrypoint'"
-      :bookmarkKey="network + '_' + address + '_' + storageName"
+      :customClass="'text--secondary'"
+      :showEmpty=true
+      :key="storageName"
       :network="network"
       :address="address"
-      :alias="storageName"
+      :entrypoint="storageName"
+      :alias="`${storageName} ${alias}`"
     />
   </h2>
 </template>

src/views/contract/Contract.vue

@@ -12,8 +12,9 @@
       <v-col cols="3" class="d-flex justify-end pr-7">
         <div class="d-flex align-center justify-start pa-2 px-4">
           <BookmarkButton
-            :mode="'contract'"
-            :bookmarkKey="network + '_' + address"
+            :customClass="'mr-2 pl-2 pr-2 text--secondary'"
+            :isTextButton=true
+            :showEmpty=true
             :network="network"
             :address="address"
             :alias="alias"

src/views/contract/InteractTab.vue

@@ -21,12 +21,11 @@
                 </v-list-item-title>
               </v-list-item-content>
               <BookmarkButton
-                :key="network + '_' + address + '_' + item.name"
-                :mode="'entrypoint-list'"
-                :bookmarkKey="network + '_' + address + '_' + item.name"
+                :key="item.name"
+                :customClass="'primary--text'"
                 :network="network"
                 :address="address"
-                :alias="item.name"
+                :entrypoint="item.name"
               />
             </v-list-item>
           </v-list-item-group>