From 1c1211ba7a695299b3cbfcbbc86a442be72b9770 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 27 Jul 2022 02:51:43 -0700
Subject: [PATCH] remove v-ripple

---
 .../main/components/sidebar-library-item.js        |  2 +-
 src/renderer/views/app/chrome-bottom.ejs           |  8 ++++----
 src/renderer/views/app/chrome-top.ejs              | 14 +++++++-------
 src/renderer/views/components/sidebar-playlist.ejs |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/renderer/main/components/sidebar-library-item.js b/src/renderer/main/components/sidebar-library-item.js
index 19c157f4..adf31689 100644
--- a/src/renderer/main/components/sidebar-library-item.js
+++ b/src/renderer/main/components/sidebar-library-item.js
@@ -2,7 +2,7 @@ import {html} from "../html.js"
 
 export const sidebarLibraryItem = Vue.component("sidebar-library-item", {
     template: html`
-        <button class="app-sidebar-item"  v-ripple
+        <button class="app-sidebar-item"
                 :class="$root.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
             <svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''"/>
             <span class="sidebar-item-text">{{ name }}</span>
diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs
index 782bec54..c12a0527 100644
--- a/src/renderer/views/app/chrome-bottom.ejs
+++ b/src/renderer/views/app/chrome-bottom.ejs
@@ -149,27 +149,27 @@
                    v-b-tooltip.hover :title="formatVolumeTooltip()">
         </div>
         <div class="app-chrome-item generic">
-            <button class="playback-button--small cast" v-ripple
+            <button class="playback-button--small cast" 
                     :title="$root.getLz('term.cast')"
                     v-b-tooltip.hover
                     @click="cfg.advanced.AudioContext ? modals.castMenu = true : (cfg.advanced.AudioContext = true, modals.castMenu = true)"></button>
         </div>
         <div class="app-chrome-item generic">
-            <button class="playback-button--small queue" v-ripple :class="{'active': drawer.panel == 'queue'}"
+            <button class="playback-button--small queue"  :class="{'active': drawer.panel == 'queue'}"
                     :title="$root.getLz('term.queue')"
                     v-b-tooltip.hover
                     @click="invokeDrawer('queue')"></button>
         </div>
         <div class="app-chrome-item generic">
             <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
-                <button class="playback-button--small lyrics" v-ripple
+                <button class="playback-button--small lyrics" 
                         :title="$root.getLz('term.lyrics')"
                         v-b-tooltip.hover
                         :class="{'active': drawer.panel == 'lyrics'}"
                         @click="invokeDrawer('lyrics')"></button>
             </template>
             <template v-else>
-                <button class="playback-button--small lyrics" v-ripple
+                <button class="playback-button--small lyrics" 
                         :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
             </template>
 
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 1ea16cad..fed618d8 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -16,19 +16,19 @@
     <template v-if="getThemeDirective('appNavigation') != 'seperate'">
       <div class="vdiv" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
       <div class="app-chrome-item">
-        <button class="playback-button navigation" v-ripple @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
+        <button class="playback-button navigation"  @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
           v-b-tooltip.hover>
           <svg-icon url="./views/svg/chevron-left.svg"></svg-icon>
         </button>
       </div>
       <div class="app-chrome-item">
-        <button class="playback-button navigation" v-ripple @click="navigateForward()"
+        <button class="playback-button navigation"  @click="navigateForward()"
           :title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
           <svg-icon url="./views/svg/chevron-right.svg"></svg-icon>
         </button>
       </div>
       <div class="app-chrome-item" v-if="getThemeDirective('windowLayout') == 'twopanel'">
-        <button class="playback-button collapseLibrary" v-ripple v-b-tooltip.hover
+        <button class="playback-button collapseLibrary"  v-b-tooltip.hover
           :title="chrome.sidebarCollapsed ? getLz('action.showLibrary') : getLz('action.hideLibrary')"
           @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
           <transition name="fade">
@@ -230,21 +230,21 @@
           :title="formatVolumeTooltip()" />
       </div>
       <div class="app-chrome-item generic">
-        <button class="playback-button--small cast" :title="$root.getLz('term.cast')" v-ripple
+        <button class="playback-button--small cast" :title="$root.getLz('term.cast')" 
           @click="cfg.advanced.AudioContext ? modals.castMenu = true : (cfg.advanced.AudioContext = true, modals.castMenu = true)"
           v-b-tooltip.hover></button>
       </div>
       <div class="app-chrome-item generic">
-        <button class="playback-button--small queue" :title="$root.getLz('term.queue')" v-b-tooltip.hover v-ripple
+        <button class="playback-button--small queue" :title="$root.getLz('term.queue')" v-b-tooltip.hover 
           :class="{'active': drawer.panel == 'queue'}" @click="invokeDrawer('queue')"></button>
       </div>
       <div class="app-chrome-item generic">
         <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
-          <button class="playback-button--small lyrics" :title="$root.getLz('term.lyrics')" v-b-tooltip.hover v-ripple
+          <button class="playback-button--small lyrics" :title="$root.getLz('term.lyrics')" v-b-tooltip.hover 
             :class="{'active': drawer.panel == 'lyrics'}" @click="invokeDrawer('lyrics')"></button>
         </template>
         <template v-else>
-          <button class="playback-button--small lyrics" :style="{'opacity': 0.3, 'pointer-events': 'none'}" v-ripple></button>
+          <button class="playback-button--small lyrics" :style="{'opacity': 0.3, 'pointer-events': 'none'}" ></button>
         </template>
       </div>
     </template>
diff --git a/src/renderer/views/components/sidebar-playlist.ejs b/src/renderer/views/components/sidebar-playlist.ejs
index f27cb56b..494b812e 100644
--- a/src/renderer/views/components/sidebar-playlist.ejs
+++ b/src/renderer/views/components/sidebar-playlist.ejs
@@ -1,6 +1,6 @@
 <script type="text/x-template" id="sidebar-playlist">
     <div class="sidebar-playlist" :key="item.id">
-        <button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-ripple
+        <button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" 
                 :class="item.type != 'library-playlist-folders' ? {'active': $root.page.includes(item.id)} : ['playlist-folder', {'folder-button-active': folderOpened}, isPlaylistSelected]"
                 @contextmenu="playlistContextMenu($event, item.id)"
                 @dragstart="startDrag($event, item)"