add clear queue tooltip

tamland · Oct 25, 2024 · 696c9b7 · 696c9b7
1 parent d3d1984
commit 696c9b7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/player/Queue.vue b/src/player/Queue.vue
@@ -5,11 +5,16 @@
         Playing
       </h1>
       <div>
-        <b-button variant="link" class="mr-2" @click="shuffle">
+        <b-button variant="link" class="mr-2" :disabled="!tracks?.length" @click="shuffle">
           <Icon icon="shuffle" /> Shuffle
         </b-button>
-        <b-button variant="link" @click="clear">
+        <b-button class="clear-btn" variant="link" :disabled="!tracks?.length" @click="clear">
           <Icon icon="x" /> Clear
+          <div v-if="tracks?.length === 1 " class="tooltip bs-tooltip-bottom">
+            <div class="tooltip-inner">
+              Click again to clear current track
+            </div>
+          </div>
         </b-button>
       </div>
     </div>
@@ -107,3 +112,18 @@
     }
   })
 </script>
+<style scoped>
+  .clear-btn {
+    position: relative;
+  }
+
+  .tooltip-inner {
+    width: 300px;
+  }
+
+  .clear-btn:hover .tooltip {
+    display: block;
+    opacity: 1;
+    right: 0;
+  }
+</style>
diff --git a/src/style/main.scss b/src/style/main.scss
@@ -21,6 +21,10 @@ $dropdown-divider-bg: $theme-elevation-2;
 $popover-bg: $theme-elevation-1;
 $popover-border-color: $theme-elevation-2;
 
+// Tooltip
+$tooltip-bg: $theme-elevation-1;
+$tooltip-color: $theme-text;
+
 // Form
 $input-bg: $theme-elevation-2;
 $input-border-color: $theme-elevation-2;