From b9d84f253404affc11abd98abf83bd1376b68570 Mon Sep 17 00:00:00 2001
From: Denevola <denevola@scipnet.kro.kr>
Date: Sat, 24 Sep 2022 02:39:38 +0900
Subject: [PATCH] Add optional clickable animation to .bi

---
 src/assets/base.css          |  9 +++++++++
 src/components/Btn.vue       |  2 +-
 src/components/Modal.vue     |  2 +-
 src/components/NavBar.vue    |  8 ++++----
 src/components/Search.vue    |  6 +++---
 src/components/SongItem.vue  |  6 +++---
 src/components/StatusBar.vue | 18 +++++++++---------
 7 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index 420340e..8b3f441 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -200,6 +200,15 @@ button {
 .bi[data-active='true'] {
   color: var(--color-foreground);
 }
+.bi.clickable::before {
+  border-radius: 50%;
+  transition: background-color 0.1s ease, box-shadow 0.1s ease;
+}
+
+.bi.clickable:active::before {
+  background-color: var(--color-border);
+  box-shadow: 0 0 0 0.5rem var(--color-border);
+}
 
 .caps {
   text-transform: capitalize;
diff --git a/src/components/Btn.vue b/src/components/Btn.vue
index be567f8..d1222f5 100644
--- a/src/components/Btn.vue
+++ b/src/components/Btn.vue
@@ -4,7 +4,7 @@ defineEmits(['click']);
 </script>
 
 <template>
-  <button :class="'bi bi-' + (ico ? ico : 'play')" @click="$emit('click')">
+  <button :class="'bi clickable bi-' + (ico ? ico : 'play')" @click="$emit('click')">
     <slot name="menu"></slot>
   </button>
 </template>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 0a40040..9cafc51 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -20,7 +20,7 @@ watch(show, n => {
 <template>
   <Transition name="fade">
     <div class="modal" v-if="show">
-      <span class="bi bi-x-lg modal-close" @click="show = false"></span>
+      <span class="bi bi-x-lg clickable modal-close" @click="show = false"></span>
       <div class="modal-box">
         <div class="modal-title">{{ title }}</div>
         <div class="modal-content">
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index a6de840..778b79b 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -43,19 +43,19 @@ function set(page) {
 
     <div class="wrap">
       <span
-        class="nav-ico bi bi-house"
+        class="nav-ico bi bi-house clickable"
         :data-active="nav.state.page == 'home'"
         @click="set('home')"></span>
       <span
-        class="nav-ico bi bi-compass"
+        class="nav-ico bi bi-compass clickable"
         :data-active="nav.state.page == 'explore'"
         @click="set('explore')"></span>
       <span
-        class="nav-ico bi bi-collection"
+        class="nav-ico bi bi-collection clickable"
         :data-active="nav.state.page == 'library'"
         @click="set('library')"></span>
       <span
-        class="nav-ico bi bi-gear"
+        class="nav-ico bi bi-gear clickable"
         :data-active="nav.state.page == 'prefs'"
         @click="set('prefs')"></span>
     </div>
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 9d83f46..b1cdee0 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -141,10 +141,10 @@ onUpdated(() => {
       <template #menu>
         <Transition name="fade">
           <div v-if="albumMenu" class="alb popup">
-            <button class="bi bi-bookmark-plus" @click="saveAlbum"></button>
+            <button class="bi bi-bookmark-plus clickable" @click="saveAlbum"></button>
 
             <button
-              class="bi bi-plus-lg"
+              class="bi bi-plus-lg clickable"
               @click="
                 data.state.urls.push(
                   ...results.items.songs.items.map(i => ({
@@ -155,7 +155,7 @@ onUpdated(() => {
                 )
               "></button>
 
-            <button class="bi bi-shuffle" @click="shuffleAdd"></button>
+            <button class="bi bi-shuffle clickable" @click="shuffleAdd"></button>
           </div>
         </Transition>
       </template>
diff --git a/src/components/SongItem.vue b/src/components/SongItem.vue
index 8d1dd31..0939a75 100644
--- a/src/components/SongItem.vue
+++ b/src/components/SongItem.vue
@@ -117,12 +117,12 @@ onMounted(() => {
           <!-- TODO: Check if user is admin -->
           <span
             v-if="useStore().auth && playlistId"
-            class="bi bi-dash-lg ign"
+            class="bi bi-dash-lg clickable ign"
             @click="Remove"></span>
 
-          <span class="bi bi-plus-lg ign" @click="addSong"></span>
+          <span class="bi bi-plus-lg clickable ign" @click="addSong"></span>
 
-          <span class="bi bi-share ign" @click="Share"></span>
+          <span class="bi bi-share clickable ign" @click="Share"></span>
         </div>
       </Transition>
     </span>
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index 7e3272e..f4f3058 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -144,7 +144,7 @@ async function Like() {
       <button
         id="btn-play-pause"
         aria-label="Play or Pause"
-        class="bi"
+        class="bi clickable"
         :class="'bi-' + player.state.status"
         @click="player.toggle('play')"></button>
 
@@ -167,7 +167,7 @@ async function Like() {
         id="vol-btn"
         aria-label="Volume Buttons"
         @click="showme.vol = !showme.vol"
-        class="popup-wrap bi bi-volume-up">
+        class="popup-wrap bi bi-volume-up clickable">
         <Transition name="fade">
           <div v-if="showme.vol" id="vol" class="popup">
             <input
@@ -182,7 +182,7 @@ async function Like() {
         </Transition>
       </button>
       <button
-        class="bi bi-three-dots"
+        class="bi bi-three-dots clickable"
         aria-label="More Controls"
         @click="
           showme.menu = !showme.menu;
@@ -194,7 +194,7 @@ async function Like() {
         <div id="menu" v-if="showme.menu" class="popup">
           <button
             id="info-btn"
-            class="bi bi-info-circle"
+            class="bi bi-info-circle clickable"
             aria-label="Show Information About Song"
             :data-active="player.state.info"
             @click="player.toggle('info')"></button>
@@ -203,7 +203,7 @@ async function Like() {
             v-if="store.auth"
             id="like-btn"
             title="Add song to favorites"
-            class="bi blink"
+            class="bi blink clickable"
             :class="data.state.url == liked ? 'bi-heart-fill' : 'bi-heart'"
             :data-active="data.state.url == liked"
             :data-loading="liking"
@@ -213,20 +213,20 @@ async function Like() {
             id="addToPlaylist"
             title="Add Current Song to a Playlist"
             aria-label="Add Current Song to a Playlist"
-            class="bi bi-collection"
+            class="bi bi-collection clickable"
             @click="List"></button>
 
           <button
             id="list-btn"
             title="Current Playlist"
             aria-label="Current Playlist"
-            class="bi bi-music-note-list"
+            class="bi bi-music-note-list clickable"
             :data-active="player.state.playlist"
             @click="player.toggle('playlist')"></button>
 
           <button
             id="btn-lyrics"
-            class="bi bi-file-music"
+            class="bi bi-file-music clickable"
             :data-active="player.state.lyrics"
             @click="player.toggle('lyrics')"></button>
 
@@ -234,7 +234,7 @@ async function Like() {
             id="loop-btn"
             title="Loop"
             aria-label="Loop"
-            class="bi"
+            class="bi clickable"
             :class="player.state.loop < 2 ? 'bi-repeat' : 'bi-repeat-1'"
             :data-active="player.state.loop > 0"
             @click="