Skip to content

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

added cooler title bar, added performance fixes

parent 39cd6c42
Hide whitespace changes
Inline Side-by-side
Showing with 279 additions and 58 deletions
src/App.vue
View file @ 729a967c
<template> <template>
<div id="app" :class="platform != 'darwin' ? 'app' : 'app-darwin'" tabindex="-1" v-on:keydown.esc="closeOverlays()"> <div id="app" :class="platform != 'darwin' ? 'app' : 'app-darwin'" tabindex="-1" v-on:keydown.esc="closeOverlays()">
<WindowTitleBar /> <!-- <WindowTitleBar /> -->
<main> <main>
<Navigation v-bind:downloadQueueCount="downloadQueue.length" v-bind:downloadOverlayShown="showDownloadOverlay" /> <Navigation v-bind:downloadQueueCount="downloadQueue.length" v-bind:downloadOverlayShown="showDownloadOverlay" />
...@@ -81,6 +81,7 @@ ...@@ -81,6 +81,7 @@
}); });
this.$root.$on('download', (url) => { this.$root.$on('download', (url) => {
this.$data.showDownloadOverlay = true;
this.addToQueue(url); this.addToQueue(url);
}); });
this.$root.$on('showDownloadOverlay', () => { this.$root.$on('showDownloadOverlay', () => {
...@@ -222,7 +223,7 @@ ...@@ -222,7 +223,7 @@
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
background: #212529; background: #212529;
width: 5px; width: 8px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #fff; background: #fff;
...@@ -233,9 +234,8 @@ ...@@ -233,9 +234,8 @@
} }
main { main {
display: grid; display: grid;
margin-left: 60px;
position: absolute; position: absolute;
top: 30px; top: 60px;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
...@@ -325,7 +325,7 @@ ...@@ -325,7 +325,7 @@
transition: transform .5s; transition: transform .5s;
} }
.slideDownloadOverlay-enter, .slideDownloadOverlay-leave-to { .slideDownloadOverlay-enter, .slideDownloadOverlay-leave-to {
transform: translateX(-400px); transform: translateX(400px);
} }
.tooltip { .tooltip {
background: #000000; background: #000000;
...@@ -335,40 +335,14 @@ ...@@ -335,40 +335,14 @@
&[x-placement='top'] { &[x-placement='top'] {
margin-bottom: 5px; 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'] { &[x-placement='right'] {
margin-left: 5px; margin-left: 5px;
}
&:after { &[x-placement='down'] {
right: 100%; margin-bottom: 5px;
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/background.js
View file @ 729a967c
...@@ -62,13 +62,11 @@ app.setAsDefaultProtocolClient("spinshare-user"); ...@@ -62,13 +62,11 @@ app.setAsDefaultProtocolClient("spinshare-user");
function createWindow () { function createWindow () {
win = new BrowserWindow({ win = new BrowserWindow({
title: "SpinSha.re", title: "SpinSha.re",
width: 1350, width: 1300,
height: 740, height: 800,
minHeight: 740, minHeight: 800,
minWidth: 1350, minWidth: 1300,
frame: false,
backgroundColor: '#212629', backgroundColor: '#212629',
titleBarStyle: 'hiddenInset',
webPreferences: { webPreferences: {
nodeIntegration: true nodeIntegration: true
} }
......
src/components/Navigation/Navigation.vue
View file @ 729a967c
<template> <template>
<aside> <aside>
<nav> <nav class="items-left">
<router-link to="/" exact class="item" v-tooltip.right="'Frontpage'"><i class="mdi mdi-home-outline"></i></router-link> <div class="logo">
<router-link to="/search" class="item" v-tooltip.right="'Search'"><i class="mdi mdi-magnify"></i></router-link> <router-link to="/"><img src="https://spinshare.b-cdn.net/assets/img/logo_colored_ondark.svg" alt="SpinShare Logo" /></router-link>
<router-link to="/library" class="item" v-tooltip.right="'Library'"><i class="mdi mdi-music-box-multiple-outline"></i></router-link> </div>
<div v-on:click="openExternal('https://spinsha.re/support');" class="item" v-tooltip.right="'Support'"><i class="mdi mdi-hand-heart"></i></div> <router-link to="/" exact class="item" v-tooltip.down="'Frontpage'"><i class="mdi mdi-home-outline"></i></router-link>
<router-link to="/search" class="item" v-tooltip.down="'Search'"><i class="mdi mdi-magnify"></i></router-link>
<router-link to="/library" class="item" v-tooltip.down="'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.down="'Support'"><i class="mdi mdi-hand-heart"></i></div>
</nav> </nav>
<nav> <nav class="items-right">
<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="openExternal('steam://run/1058830');" class="item" v-tooltip.down="'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'"> <div v-on:click="showDownloadOverlay();" :class="'item ' + (downloadOverlayShown ? 'router-link-active' : '')" v-tooltip.down="'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" v-tooltip.right="'Settings'"><i class="mdi mdi-cog-outline"></i></router-link> <router-link to="/settings" class="item" v-tooltip.down="'Settings'"><i class="mdi mdi-cog-outline"></i></router-link>
</nav> </nav>
</aside> </aside>
</template> </template>
...@@ -40,14 +43,259 @@ ...@@ -40,14 +43,259 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
aside {
background: #000;
box-shadow: 0px 4px 12px rgba(0,0,0,0.6);
display: grid;
position: fixed;
z-index: 1000;
top: 0px;
left: 0px;
right: 0px;
grid-template-columns: 1fr 1fr;
& nav {
display: flex;
flex-direction: row;
align-items: center;
&.items-left { justify-content: flex-start; }
&.items-right { justify-content: flex-end; }
& .logo {
width: 180px;
padding: 15px 30px;
height: 60px;
& img {
height: 100%;
}
}
& .upload-button {
align-items: center;
justify-content: center;
padding: 0px 15px;
}
& .item {
min-width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
border-bottom: 2px solid transparent;
color :#fff;
position: relative;
transition: 0.2s ease opacity, 0.2s ease background;
& .indicator {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
font-size: 10px;
font-weight: bold;
background: rgb(226, 44, 120);
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
&:hover {
cursor: pointer;
& > .mdi {
opacity: 1;
}
}
&.router-link-active {
border-color: rgb(226, 44, 120);
& .mdi {
opacity: 1;
}
}
& > .mdi {
font-size: 22px;
opacity: 0.4;
}
}
& .item-notifications {
position: relative;
& .notification-box {
width: 400px;
height: 500px;
position: absolute;
top: 70px;
right: 10px;
border-radius: 4px;
background: #000;
cursor: default;
box-shadow: 0px 4px 12px rgba(0,0,0,0.6);
display: none;
grid-template-rows: auto 1fr;
& > header {
display: grid;
grid-template-columns: 1fr auto;
padding: 10px 15px;
align-items: center;
& span {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.25em;
}
}
& .notification-list {
overflow-y: scroll;
display: flex;
background: rgba(255,255,255,0.075);
flex-direction: column;
& .notification-item {
display: grid;
grid-template-columns: 32px 1fr;
grid-gap: 10px;
padding: 10px;
color: #fff;
text-decoration: none;
align-items: center;
& .notification-icon {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
}
& .cover {
width: 32px;
height: 32px;
background-position: center;
background-size: cover;
}
& .notification-text {
font-size: 12px;
line-height: 1.5;
}
&:hover {
background: rgba(255,255,255,0.1);
cursor: pointer;
}
}
}
&:after {
bottom: 100%;
right: 12px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000;
border-width: 8px;
}
}
&:focus-within {
outline: 0;
& .notification-box {
display: grid;
}
& > .mdi {
opacity: 1;
}
}
}
& .item-user {
position: relative;
& .user-avatar {
width: 32px;
height: 32px;
background-position: center;
background-size: cover;
border-radius: 50px;
}
& .user-actions {
width: 300px;
position: absolute;
top: 70px;
right: 10px;
border-radius: 4px;
background: #000;
box-shadow: 0px 4px 12px rgba(0,0,0,0.6);
display: none;
& .user-action-item {
color: #fff;
text-decoration: none;
display: grid;
grid-template-columns: 50px 1fr;
& .mdi {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
opacity: 0.6;
}
& span {
align-self: center;
}
&:hover {
background: rgba(255,255,255,0.1);
}
}
&:after {
bottom: 100%;
right: 12px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000;
border-width: 8px;
}
}
&:focus-within {
outline: 0;
& .user-actions {
display: grid;
}
}
}
}
}
</style>
<!-- <style scoped lang="less">
aside { aside {
background: #383C3F; background: #383C3F;
display: grid; display: grid;
position: fixed; position: fixed;
z-index: 50; z-index: 50;
top: 30px; top: 0px;
left: 0px; left: 0px;
bottom: 0px; right: 0px;
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
& .item, & .external-item { & .item, & .external-item {
...@@ -117,3 +365,4 @@ ...@@ -117,3 +365,4 @@
top: 40px; top: 40px;
} }
</style> </style>
-->
\ No newline at end of file
src/components/Overlays/DownloadOverlay.vue
View file @ 729a967c
...@@ -62,9 +62,9 @@ ...@@ -62,9 +62,9 @@
.download-overlay { .download-overlay {
position: fixed; position: fixed;
z-index: 10; z-index: 10;
top: 30px; top: 60px;
bottom: 0px; bottom: 0px;
left: 60px; right: 0px;
width: 400px; width: 400px;
background: #383C3F; background: #383C3F;
display: grid; display: grid;
...@@ -151,6 +151,6 @@ ...@@ -151,6 +151,6 @@
} }
} }
.app-darwin .download-overlay { .app-darwin .download-overlay {
top: 40px; top: 100px;
} }
</style> </style>
src/components/Song/SongItem.vue
View file @ 729a967c
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
<style scoped lang="less"> <style scoped lang="less">
.song-item { .song-item {
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow; transition: 0.2s ease-in-out transform, 0.2s ease-in-out background, 0.2s ease-in-out box-shadow;
overflow: hidden; overflow: hidden;
border-radius: 6px; border-radius: 6px;
...@@ -168,8 +168,8 @@ ...@@ -168,8 +168,8 @@
} }
&:hover { &:hover {
transform: scale(1.1);
cursor: pointer; cursor: pointer;
background: rgba(255,255,255,0.2);
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
& .song-cover { & .song-cover {
......
src/components/Song/SongLocalItem.vue
View file @ 729a967c
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
<style scoped lang="less"> <style scoped lang="less">
.song-item-local { .song-item-local {
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow; transition: 0.2s ease-in-out transform, 0.2s ease-in-out background, 0.2s ease-in-out box-shadow;
overflow: hidden; overflow: hidden;
border-radius: 6px; border-radius: 6px;
...@@ -145,8 +145,8 @@ ...@@ -145,8 +145,8 @@
} }
&:not(.song-item-onlylocal):hover { &:not(.song-item-onlylocal):hover {
transform: scale(1.1);
cursor: pointer; cursor: pointer;
background: rgba(255,255,255,0.2);
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
& .song-cover { & .song-cover {
......
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