Skip to content

D
Desktop Client
Commit c968cd7d authored by Amy Yan's avatar Amy Yan
Browse files
Options

Merge branch 'master' into material-ripple-buttons

parents 093c08db 0c0620d3
Show whitespace changes
Inline Side-by-side
Showing with 91 additions and 28 deletions
README.md
View file @ c968cd7d
# 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 ## Project setup
``` ```
...@@ -9,11 +11,3 @@ npm install ...@@ -9,11 +11,3 @@ npm install
``` ```
npm run serve npm run serve
``` ```
\ No newline at end of file
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
package-lock.json
View file @ c968cd7d
...@@ -8258,8 +8258,7 @@ ...@@ -8258,8 +8258,7 @@
"lodash": { "lodash": {
"version": "4.17.15", "version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
"dev": true
}, },
"lodash.defaultsdeep": { "lodash.defaultsdeep": {
"version": "4.6.1", "version": "4.6.1",
...@@ -9613,6 +9612,11 @@ ...@@ -9613,6 +9612,11 @@
"ts-pnp": "^1.1.6" "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": { "portfinder": {
"version": "1.0.25", "version": "1.0.25",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
...@@ -12965,6 +12969,16 @@ ...@@ -12965,6 +12969,16 @@
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true "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": { "validate-npm-package-license": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
...@@ -13326,6 +13340,11 @@ ...@@ -13326,6 +13340,11 @@
"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz", "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
"integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==" "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-ripple-directive": { "vue-ripple-directive": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/vue-ripple-directive/-/vue-ripple-directive-2.0.1.tgz", "resolved": "https://registry.npmjs.org/vue-ripple-directive/-/vue-ripple-directive-2.0.1.tgz",
......
package.json
View file @ c968cd7d
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
"ncp": "^2.0.0", "ncp": "^2.0.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"uniqid": "^5.2.0", "uniqid": "^5.2.0",
"v-tooltip": "^2.0.3",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-axios": "^2.1.5", "vue-axios": "^2.1.5",
"vue-i18n": "^8.17.4", "vue-i18n": "^8.17.4",
......
src/App.vue
View file @ c968cd7d
...@@ -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 @ c968cd7d
<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 @ c968cd7d
...@@ -7,9 +7,14 @@ import moment from 'moment' ...@@ -7,9 +7,14 @@ 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 Ripple from 'vue-ripple-directive' import Ripple from 'vue-ripple-directive'
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);
Ripple.color = 'rgba(255, 255, 255, 0.35)'; Ripple.color = 'rgba(255, 255, 255, 0.35)';
Vue.directive('ripple', Ripple); Vue.directive('ripple', Ripple);
......
src/views/SongDetail.vue
View file @ c968cd7d
...@@ -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