feat(wizarr-frontend): 🚀 Add extended labels to buttons

Added hover labels to some buttons to make it easier to determine what they do
wizarrrr · Dec 10, 2023 · 72c7dc4 · 72c7dc4
1 parent dc1de89
commit 72c7dc4
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 0 deletions.
diff --git a/apps/wizarr-frontend/src/assets/scss/main.scss b/apps/wizarr-frontend/src/assets/scss/main.scss
@@ -183,3 +183,23 @@ button[disabled],
         margin-bottom: 0px !important;
     }
 }
+
+
+button {
+    position: relative;
+}
+button .ext-label {
+    position: absolute;
+    background: #1f2937;
+    color: white;
+    border-radius: 5px;
+    left: -100%;
+    top: 100%;
+    padding: 1rem;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 200ms;
+}
+button:hover .ext-label {
+    opacity: 1;
+}
diff --git a/apps/wizarr-frontend/src/components/Buttons/AccountButton.vue b/apps/wizarr-frontend/src/components/Buttons/AccountButton.vue
@@ -3,5 +3,7 @@
         <div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
             <i class="fa-solid fa-md fa-user"></i>
         </div>
+
+        <span class="ext-label">Account</span>
     </RouterLink>
 </template>
diff --git a/apps/wizarr-frontend/src/components/Buttons/LanguageSelector.vue b/apps/wizarr-frontend/src/components/Buttons/LanguageSelector.vue
@@ -3,6 +3,7 @@
         <div :class="iconClasses" class="flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
             <i class="fa-solid fa-md fa-globe"></i>
         </div>
+        <span class="ext-label">Change Language</span>
     </button>
 </template>
 

diff --git a/apps/wizarr-frontend/src/components/Buttons/LogoutButton.vue b/apps/wizarr-frontend/src/components/Buttons/LogoutButton.vue
@@ -4,6 +4,8 @@
             <i class="fa-solid fa-lg fa-right-from-bracket"></i>
         </div>
     </button>
+
+    <span class="ext-label">Logout</span>
 </template>
 
 <script lang="ts">

diff --git a/apps/wizarr-frontend/src/components/Buttons/SettingsButton.vue b/apps/wizarr-frontend/src/components/Buttons/SettingsButton.vue
@@ -13,6 +13,8 @@
                 </div>
             </div>
         </div>
+
+        <span class="ext-label">Settings</span>
     </button>
 </template>
 

diff --git a/apps/wizarr-frontend/src/components/Buttons/ThemeToggle.vue b/apps/wizarr-frontend/src/components/Buttons/ThemeToggle.vue
@@ -5,9 +5,11 @@
             <i v-if="theme == LIGHT_VALUE" class="fa-solid fa-md fa-sun"></i>
             <i v-if="theme == SYSTEM_VALUE" class="fa-solid fa-md fa-desktop"></i>
         </div>
+        <span class="ext-label">Change Theme</span>
     </button>
 </template>
 
+
 <script lang="ts">
 import { defineComponent } from "vue";
 import { mapState, mapActions } from "pinia";

diff --git a/apps/wizarr-frontend/src/components/Buttons/ViewToggle.vue b/apps/wizarr-frontend/src/components/Buttons/ViewToggle.vue
@@ -7,6 +7,8 @@
             <!-- List Icon -->
             <i v-else class="fas fa-list"></i>
         </div>
+
+        <span class="ext-label">Toggle Box View</span>
     </button>
 </template>
 

diff --git a/apps/wizarr-frontend/src/components/NavBars/AdminNavBar.vue b/apps/wizarr-frontend/src/components/NavBars/AdminNavBar.vue
@@ -100,3 +100,5 @@ export default defineComponent({
     },
 });
 </script>
+
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,8 @@ @@
                     </div>
                 </div>
             </div>
+            <span class="ext-label">Settings</span>
         </button>
     </template>
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -100,3 +100,5 @@ export default defineComponent({
		},
		});
		</script>