Skip to content

D
Desktop Client
Commit 0c0620d3 authored by thatanimeweirdo's avatar thatanimeweirdo
Browse files
Options

Merge branch 'tooltips' into 'master' 

Tooltips

See merge request spinshare/client!40
parents fd07bda2 f6160d1b
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 29 deletions
README.md
View file @ 0c0620d3
# client
# SpinSha.re Client
**This repo is a mirror of our internal client repository. Please do not create pull requests or issues, as we can't answer them here**
## Project setup
```
......@@ -8,12 +10,4 @@ npm install
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
```
\ No newline at end of file
package-lock.json
View file @ 0c0620d3
{
"name": "spinshare-client",
"version": "2.2.1",
"version": "2.2.4",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......@@ -8258,8 +8258,7 @@
"lodash": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
"dev": true
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash.defaultsdeep": {
"version": "4.6.1",
......@@ -9613,6 +9612,11 @@
"ts-pnp": "^1.1.6"
}
},
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"portfinder": {
"version": "1.0.25",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
......@@ -12965,6 +12969,16 @@
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
},
"v-tooltip": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.3.tgz",
"integrity": "sha512-KZZY3s+dcijzZmV2qoDH4rYmjMZ9YKGBVoUznZKQX0e3c2GjpJm3Sldzz8HHH2Ud87JqhZPB4+4gyKZ6m98cKQ==",
"requires": {
"lodash": "^4.17.15",
"popper.js": "^1.16.0",
"vue-resize": "^0.4.5"
}
},
"validate-npm-package-license": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
......@@ -13326,6 +13340,11 @@
"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
"integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
},
"vue-resize": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
},
"vue-router": {
"version": "3.1.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
......
package.json
View file @ 0c0620d3
......@@ -27,6 +27,7 @@
"ncp": "^2.0.0",
"rimraf": "^3.0.2",
"uniqid": "^5.2.0",
"v-tooltip": "^2.0.3",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-i18n": "^8.17.4",
......
src/App.vue
View file @ 0c0620d3
......@@ -327,4 +327,48 @@
.slideDownloadOverlay-enter, .slideDownloadOverlay-leave-to {
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>
src/components/Navigation/Navigation.vue
View file @ 0c0620d3
<template>
<aside>
<nav>
<router-link to="/" exact class="item"><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="/library" class="item"><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>
<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" v-tooltip.right="'Search'"><i class="mdi mdi-magnify"></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" v-tooltip.right="'Support'"><i class="mdi mdi-hand-heart"></i></div>
</nav>
<nav>
<div v-on:click="openExternal('steam://run/1058830');" class="item"><i class="mdi mdi-play-outline"></i></div>
<div v-on:click="showDownloadOverlay();" :class="'item ' + (downloadOverlayShown ? 'router-link-active' : '')">
<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' : '')" v-tooltip.right="'Download Queue'">
<i class="mdi mdi-download-outline"></i>
<span class="badge" v-show="downloadQueueCount > 0">{{ downloadQueueCount }}</span>
</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>
</aside>
</template>
......
src/main.js
View file @ 0c0620d3
......@@ -6,9 +6,14 @@ import i18n from './i18n';
import moment from 'moment'
import { ipcRenderer } from 'electron';
import VueObserveVisibility from 'vue-observe-visibility'
import { VTooltip, VPopover, VClosePopover } from 'v-tooltip'
Vue.use(VueObserveVisibility);
Vue.directive('tooltip', VTooltip);
Vue.directive('close-popover', VClosePopover);
Vue.component('v-popover', VPopover);
Vue.config.productionTip = false;
......
src/views/SongDetail.vue
View file @ 0c0620d3
......@@ -13,23 +13,23 @@
</div>
</div>
<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">
<i class="mdi mdi-download"></i>
</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">
<i class="mdi mdi-gamepad-variant"></i>
</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">
<i class="mdi mdi-refresh"></i>
</div>
</div>
<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-stop" v-if="previewIsPlaying"></i>
</div>
......@@ -37,12 +37,12 @@
<input type="range" min="0" max="100" value="50" v-model="previewVolume" class="playerVolume" v-on:input="UpdateVolume()" />
</div>
</div>
<div v-on:click="CopyLink()" class="action">
<div v-on:click="CopyLink()" class="action" v-tooltip="'Copy Link'">
<div class="icon">
<i class="mdi mdi-content-copy"></i>
</div>
</div>
<div v-on:click="OpenReport()" class="action">
<div v-on:click="OpenReport()" class="action" v-tooltip="'Report'">
<div class="icon">
<i class="mdi mdi-flag-outline"></i>
</div>
......@@ -62,7 +62,7 @@
</div>
</div>
<div class="stat" v-if="uploadDate">
<div class="icon">
<div class="icon" v-tooltip="'Upload Date'">
<i class="mdi mdi-calendar-clock"></i>
</div>
<div class="content">
......@@ -70,7 +70,7 @@
</div>
</div>
<div class="stat">
<div class="icon">
<div class="icon" v-tooltip="'Views'">
<i class="mdi mdi-eye"></i>
</div>
<div class="content">
......@@ -78,7 +78,7 @@
</div>
</div>
<div class="stat">
<div class="icon">
<div class="icon" v-tooltip="'Downloads'">
<i class="mdi mdi-download"></i>
</div>
<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