Skip to content

D
Desktop Client
Commit d6a035fc authored by SpinShare's avatar SpinShare
Browse files
Options

added tooltips

parent 1ae4cef4
Show whitespace changes
Inline Side-by-side
Showing with 65 additions and 16 deletions
src/App.vue
View file @ d6a035fc
...@@ -327,4 +327,48 @@ ...@@ -327,4 +327,48 @@
.slideDownloadOverlay-enter, .slideDownloadOverlay-leave-to { .slideDownloadOverlay-enter, .slideDownloadOverlay-leave-to {
transform: translateX(-400px); transform: translateX(-400px);
} }
.tooltip {
background: #000000;
font-size: 12px;
padding: 5px 15px;
border-radius: 4px;
&[x-placement='top'] {
margin-bottom: 5px;
&:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-top-color: #000000;
border-width: 8px;
margin-left: -8px;
}
}
&[x-placement='right'] {
margin-left: 5px;
&:after {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 8px;
margin-top: -8px;
}
}
}
</style> </style>
src/components/Navigation/Navigation.vue
View file @ d6a035fc
<template> <template>
<aside> <aside>
<nav> <nav>
<router-link to="/" exact class="item"><i class="mdi mdi-home-outline"></i></router-link> <router-link to="/" exact class="item" v-tooltip.right="'Frontpage'"><i class="mdi mdi-home-outline"></i></router-link>
<router-link to="/search" class="item"><i class="mdi mdi-magnify"></i></router-link> <router-link to="/search" class="item" v-tooltip.right="'Search'"><i class="mdi mdi-magnify"></i></router-link>
<router-link to="/library" class="item"><i class="mdi mdi-music-box-multiple-outline"></i></router-link> <router-link to="/library" class="item" v-tooltip.right="'Library'"><i class="mdi mdi-music-box-multiple-outline"></i></router-link>
<div v-on:click="openExternal('https://spinsha.re/support');" class="item"><i class="mdi mdi-hand-heart"></i></div> <div v-on:click="openExternal('https://spinsha.re/support');" class="item" v-tooltip.right="'Support'"><i class="mdi mdi-hand-heart"></i></div>
</nav> </nav>
<nav> <nav>
<div v-on:click="openExternal('steam://run/1058830');" class="item"><i class="mdi mdi-play-outline"></i></div> <div v-on:click="openExternal('steam://run/1058830');" class="item" v-tooltip.right="'Start SpinRhythm XD'"><i class="mdi mdi-play-outline"></i></div>
<div v-on:click="showDownloadOverlay();" :class="'item ' + (downloadOverlayShown ? 'router-link-active' : '')"> <div v-on:click="showDownloadOverlay();" :class="'item ' + (downloadOverlayShown ? 'router-link-active' : '')" v-tooltip.right="'Download Queue'">
<i class="mdi mdi-download-outline"></i> <i class="mdi mdi-download-outline"></i>
<span class="badge" v-show="downloadQueueCount > 0">{{ downloadQueueCount }}</span> <span class="badge" v-show="downloadQueueCount > 0">{{ downloadQueueCount }}</span>
</div> </div>
<router-link to="/settings" class="item"><i class="mdi mdi-cog-outline"></i></router-link> <router-link to="/settings" class="item" v-tooltip.right="'Settings'"><i class="mdi mdi-cog-outline"></i></router-link>
</nav> </nav>
</aside> </aside>
</template> </template>
......
src/main.js
View file @ d6a035fc
...@@ -6,9 +6,14 @@ import i18n from './i18n'; ...@@ -6,9 +6,14 @@ import i18n from './i18n';
import moment from 'moment' import moment from 'moment'
import { ipcRenderer } from 'electron'; import { ipcRenderer } from 'electron';
import VueObserveVisibility from 'vue-observe-visibility' import VueObserveVisibility from 'vue-observe-visibility'
import { VTooltip, VPopover, VClosePopover } from 'v-tooltip'
Vue.use(VueObserveVisibility); Vue.use(VueObserveVisibility);
Vue.directive('tooltip', VTooltip);
Vue.directive('close-popover', VClosePopover);
Vue.component('v-popover', VPopover);
Vue.config.productionTip = false; Vue.config.productionTip = false;
......
src/views/SongDetail.vue
View file @ d6a035fc
...@@ -13,23 +13,23 @@ ...@@ -13,23 +13,23 @@
</div> </div>
</div> </div>
<div :class="'song-actions ' + (previewIsPlaying ? 'player-active' : '')"> <div :class="'song-actions ' + (previewIsPlaying ? 'player-active' : '')">
<div v-on:click="AddToQueue()" class="action" v-if="!isInstalled"> <div v-on:click="AddToQueue()" class="action" v-if="!isInstalled" v-tooltip="'Download'">
<div class="icon"> <div class="icon">
<i class="mdi mdi-download"></i> <i class="mdi mdi-download"></i>
</div> </div>
</div> </div>
<div v-on:click="ShowPlayOverlay()" class="action" v-if="isInstalled"> <div v-on:click="ShowPlayOverlay()" class="action" v-if="isInstalled" v-tooltip="'Play'">
<div class="icon"> <div class="icon">
<i class="mdi mdi-gamepad-variant"></i> <i class="mdi mdi-gamepad-variant"></i>
</div> </div>
</div> </div>
<div v-on:click="AddToQueue()" class="action" v-if="isInstalled"> <div v-on:click="AddToQueue()" class="action" v-if="isInstalled" v-tooltip="'Redownload'">
<div class="icon"> <div class="icon">
<i class="mdi mdi-refresh"></i> <i class="mdi mdi-refresh"></i>
</div> </div>
</div> </div>
<div class="action-player"> <div class="action-player">
<div class="icon" v-on:click="TogglePreview()"> <div class="icon" v-on:click="TogglePreview()" v-tooltip="previewIsPlaying ? 'Stop Preview' : 'Play Preview'">
<i class="mdi mdi-play" v-if="!previewIsPlaying"></i> <i class="mdi mdi-play" v-if="!previewIsPlaying"></i>
<i class="mdi mdi-stop" v-if="previewIsPlaying"></i> <i class="mdi mdi-stop" v-if="previewIsPlaying"></i>
</div> </div>
...@@ -37,12 +37,12 @@ ...@@ -37,12 +37,12 @@
<input type="range" min="0" max="100" value="50" v-model="previewVolume" class="playerVolume" v-on:input="UpdateVolume()" /> <input type="range" min="0" max="100" value="50" v-model="previewVolume" class="playerVolume" v-on:input="UpdateVolume()" />
</div> </div>
</div> </div>
<div v-on:click="CopyLink()" class="action"> <div v-on:click="CopyLink()" class="action" v-tooltip="'Copy Link'">
<div class="icon"> <div class="icon">
<i class="mdi mdi-content-copy"></i> <i class="mdi mdi-content-copy"></i>
</div> </div>
</div> </div>
<div v-on:click="OpenReport()" class="action"> <div v-on:click="OpenReport()" class="action" v-tooltip="'Report'">
<div class="icon"> <div class="icon">
<i class="mdi mdi-flag-outline"></i> <i class="mdi mdi-flag-outline"></i>
</div> </div>
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
</div> </div>
</div> </div>
<div class="stat" v-if="uploadDate"> <div class="stat" v-if="uploadDate">
<div class="icon"> <div class="icon" v-tooltip="'Upload Date'">
<i class="mdi mdi-calendar-clock"></i> <i class="mdi mdi-calendar-clock"></i>
</div> </div>
<div class="content"> <div class="content">
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
</div> </div>
</div> </div>
<div class="stat"> <div class="stat">
<div class="icon"> <div class="icon" v-tooltip="'Views'">
<i class="mdi mdi-eye"></i> <i class="mdi mdi-eye"></i>
</div> </div>
<div class="content"> <div class="content">
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
</div> </div>
</div> </div>
<div class="stat"> <div class="stat">
<div class="icon"> <div class="icon" v-tooltip="'Downloads'">
<i class="mdi mdi-download"></i> <i class="mdi mdi-download"></i>
</div> </div>
<div class="content"> <div class="content">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment