added ripple effects to buttons using vue-ripple-directive

package-lock.json

 {
   "name": "spinshare-client",
-  "version": "2.2.1",
+  "version": "2.2.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -13326,6 +13326,14 @@
       "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
       "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
     },
+    "vue-ripple-directive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-ripple-directive/-/vue-ripple-directive-2.0.1.tgz",
+      "integrity": "sha512-jXZEX6uZpo89wxmdcw02uFpsMBpm1pxjQ60uqghNLQ8H8ju9eon2vE0+vvSWJ1WGCOTEfxGDR4InabJJu5f1GA==",
+      "requires": {
+        "vue": "^2.2.1"
+      }
+    },
     "vue-router": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",

package.json

@@ -31,6 +31,7 @@
     "vue-axios": "^2.1.5",
     "vue-i18n": "^8.17.4",
     "vue-observe-visibility": "^0.4.6",
+    "vue-ripple-directive": "^2.0.1",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"
   },

src/components/Startup/StaffPromo.vue

@@ -2,7 +2,7 @@
     <div :style="'background-image: url(' + image_path + ');'" :class="isLoading ? 'staff-promo promo-loading' : 'staff-promo' ">
         <div class="promo-type" :style="'color:' + color">{{ type }}</div>
         <div class="promo-title" :style="'color:' + textColor" v-html="title"></div>
-        <div class="promo-button" :style="'background-color:' + color" v-on:click="buttonClick()">{{ $t('startup.staffpromo.action') }}</div>
+        <div v-ripple class="promo-button" :style="'background-color:' + color" v-on:click="buttonClick()">{{ $t('startup.staffpromo.action') }}</div>
     </div>
 </template>
 

src/main.js

@@ -6,9 +6,13 @@ import i18n from './i18n';
 import moment from 'moment'
 import { ipcRenderer } from 'electron';
 import VueObserveVisibility from 'vue-observe-visibility'
+import Ripple from 'vue-ripple-directive'
 
 Vue.use(VueObserveVisibility);
 
+Ripple.color = 'rgba(255, 255, 255, 0.35)';
+Vue.directive('ripple', Ripple);
+
 Vue.config.productionTip = false;
 
 

src/views/Library.vue

@@ -3,9 +3,9 @@
         <header>
             <div class="title">{{ $t('library.header') }}</div>
             <div class="actions">
-                <div class="button" v-on:click="install()">{{ $t('library.actions.install') }}</div>
-                <div class="button" v-on:click="refreshLibrary()">{{ $t('library.actions.refresh') }}</div>
-                <div class="button" v-on:click="openLibrary()">{{ $t('library.actions.open') }}</div>
+                <div v-ripple class="button" v-on:click="install()">{{ $t('library.actions.install') }}</div>
+                <div v-ripple class="button" v-on:click="refreshLibrary()">{{ $t('library.actions.refresh') }}</div>
+                <div v-ripple class="button" v-on:click="openLibrary()">{{ $t('library.actions.open') }}</div>
                 <span></span>
             </div>
         </header>

src/views/Search.vue

@@ -4,7 +4,7 @@
             <div class="title">{{ $t('search.header') }}</div>
             <div class="actions">
                 <input type="search" :placeholder="$t('search.input.placeholder')" v-on:input="searchInput()" v-model="searchQuery" ref="searchInput">
-                <div class="button" v-on:click="searchAll()">{{ $t('search.showall.button') }}</div>
+                <div v-ripple class="button" v-on:click="searchAll()">{{ $t('search.showall.button') }}</div>
             </div>
         </header>
         <div class="search-results">

src/views/Settings.vue

@@ -15,7 +15,7 @@
                 <div class="settings-item">
                     <div class="settings-label">{{ $t('settings.general.update.label') }}</div>
                     <div class="settings-input">
-                        <button v-on:click="CheckForUpdates()">{{ $t('settings.general.update.button') }}</button>
+                        <button v-ripple v-on:click="CheckForUpdates()">{{ $t('settings.general.update.button') }}</button>
                     </div>
                 </div>
             </div>
@@ -47,8 +47,8 @@
                     <div class="settings-label">{{ $t('settings.directories.gameDirectory.label') }}</div>
                     <div class="settings-input settings-input-twobuttons">
                         <input type="text" class="settings-input-gamedirectory" disabled v-model="settingGameDirectory">
-                        <button v-on:click="SelectGameDirectory()">{{ $t('settings.directories.gameDirectory.changeButton') }}</button>
-                        <button v-on:click="ResetGameDirectory()">{{ $t('settings.directories.gameDirectory.resetButton') }}</button>
+                        <button v-ripple v-on:click="SelectGameDirectory()">{{ $t('settings.directories.gameDirectory.changeButton') }}</button>
+                        <button v-ripple v-on:click="ResetGameDirectory()">{{ $t('settings.directories.gameDirectory.resetButton') }}</button>
                     </div>
                 </div>
             </div>

src/views/Startup.vue

 <template>
     <section class="section-startup">
         <div class="tabs">
-            <router-link to="/"><span>{{ $t('startup.tabs.frontpage') }}</span></router-link>
-            <router-link to="/new"><span>{{ $t('startup.tabs.new') }}</span></router-link>
-            <router-link to="/hot"><span>{{ $t('startup.tabs.hot') }}</span></router-link>
-            <router-link to="/popular"><span>{{ $t('startup.tabs.popular') }}</span></router-link>
+            <router-link v-ripple to="/"><span>{{ $t('startup.tabs.frontpage') }}</span></router-link>
+            <router-link v-ripple to="/new"><span>{{ $t('startup.tabs.new') }}</span></router-link>
+            <router-link v-ripple to="/hot"><span>{{ $t('startup.tabs.hot') }}</span></router-link>
+            <router-link v-ripple to="/popular"><span>{{ $t('startup.tabs.popular') }}</span></router-link>
         </div>
 
         <router-view></router-view>

src/views/StartupFrontpage.vue

@@ -15,11 +15,11 @@
         </div>
 
         <div class="social-buttons">
-            <div v-on:click="OpenDiscord()" class="item item-discord"><i class="mdi mdi-discord"></i></div>
-            <div v-on:click="OpenTwitter()" class="item item-twitter"><i class="mdi mdi-twitter"></i></div>
-            <div v-on:click="OpenYouTube()" class="item item-youtube"><i class="mdi mdi-youtube"></i></div>
-            <div v-on:click="OpenTwitch()" class="item item-twitch"><i class="mdi mdi-twitch"></i></div>
-            <div v-on:click="OpenPatreon()" class="item item-patreon"><i class="mdi mdi-patreon"></i></div>
+            <div v-ripple v-on:click="OpenDiscord()" class="item item-discord"><i class="mdi mdi-discord"></i></div>
+            <div v-ripple v-on:click="OpenTwitter()" class="item item-twitter"><i class="mdi mdi-twitter"></i></div>
+            <div v-ripple v-on:click="OpenYouTube()" class="item item-youtube"><i class="mdi mdi-youtube"></i></div>
+            <div v-ripple v-on:click="OpenTwitch()" class="item item-twitch"><i class="mdi mdi-twitch"></i></div>
+            <div v-ripple v-on:click="OpenPatreon()" class="item item-patreon"><i class="mdi mdi-patreon"></i></div>
         </div>
     </div>
 </template>

src/views/StartupHotSongs.vue

@@ -2,8 +2,8 @@
     <SongRow
         :title="$t('startup.hotsongs.header')">
         <template v-slot:controls>
-            <div :class="'item ' + (hotSongsOffset == 0 ? 'disabled' : '')" v-on:click="hotPrevious()"><i class="mdi mdi-chevron-left"></i></div>
-            <div :class="'item ' + (hotSongs.length < 11 ? 'disabled' : '')" v-on:click="hotNext()"><i class="mdi mdi-chevron-right"></i></div>
+            <div v-ripple :class="'item ' + (hotSongsOffset == 0 ? 'disabled' : '')" v-on:click="hotPrevious()"><i class="mdi mdi-chevron-left"></i></div>
+            <div v-ripple :class="'item ' + (hotSongs.length < 11 ? 'disabled' : '')" v-on:click="hotNext()"><i class="mdi mdi-chevron-right"></i></div>
         </template>
         <template v-slot:song-list>
             <SongItemPlaceholder

src/views/StartupNewSongs.vue

@@ -2,8 +2,8 @@
     <SongRow
         :title="$t('startup.newsongs.header')">
         <template v-slot:controls>
-            <div :class="'item ' + (newSongsOffset == 0 ? 'disabled' : '')" v-on:click="newPrevious()"><i class="mdi mdi-chevron-left"></i></div>
-            <div :class="'item ' + (newSongs.length < 11 ? 'disabled' : '')" v-on:click="newNext()"><i class="mdi mdi-chevron-right"></i></div>
+            <div v-ripple :class="'item ' + (newSongsOffset == 0 ? 'disabled' : '')" v-on:click="newPrevious()"><i class="mdi mdi-chevron-left"></i></div>
+            <div v-ripple :class="'item ' + (newSongs.length < 11 ? 'disabled' : '')" v-on:click="newNext()"><i class="mdi mdi-chevron-right"></i></div>
         </template>
         <template v-slot:song-list>
             <SongItemPlaceholder

src/views/StartupPopularSongs.vue

@@ -2,8 +2,8 @@
     <SongRow
         :title="$t('startup.popularsongs.header')">
         <template v-slot:controls>
-            <div :class="'item ' + (popularSongsOffset == 0 ? 'disabled' : '')" v-on:click="popularPrevious()"><i class="mdi mdi-chevron-left"></i></div>
-            <div :class="'item ' + (popularSongs.length < 11 ? 'disabled' : '')" v-on:click="popularNext()"><i class="mdi mdi-chevron-right"></i></div>
+            <div v-ripple :class="'item ' + (popularSongsOffset == 0 ? 'disabled' : '')" v-on:click="popularPrevious()"><i class="mdi mdi-chevron-left"></i></div>
+            <div v-ripple :class="'item ' + (popularSongs.length < 11 ? 'disabled' : '')" v-on:click="popularNext()"><i class="mdi mdi-chevron-right"></i></div>
         </template>
         <template v-slot:song-list>
             <SongItemPlaceholder