nikan
/
jukebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #12 from nikandlv/development 

Finished sidebar and added a better scrollbar
master
Nikan Dalvand 2019-07-22 13:32:06 +04:30 committed by GitHub
parent 7a5610b791 b1650bee08
commit 54114f198a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 173 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -12370,6 +12370,11 @@
"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
"dev": true
},
"perfect-scrollbar": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz",
"integrity": "sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw=="
},
"performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@ -16662,6 +16667,15 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
},
"vue-custom-scrollbar": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/vue-custom-scrollbar/-/vue-custom-scrollbar-1.1.0.tgz",
"integrity": "sha512-ZXf4Kjg7NZxVF6vo3OyXdueRkwHPp1qal+W08Ea6dJQcmm6FaCjJBrc6ukYbTEHMZHc2v8QNBpJg7pi4AYLhTA==",
"requires": {
"perfect-scrollbar": "^1.4.0",
"vue": "^2.5.17"
}
},
"vue-electron": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/vue-electron/-/vue-electron-1.0.6.tgz",

1
package.json
View File

@ -59,6 +59,7 @@
"axios": "^0.18.0",
"normalize-scss": "^7.0.1",
"vue": "^2.5.16",
"vue-custom-scrollbar": "^1.1.0",
"vue-electron": "^1.0.6",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",

1
src/renderer/components/Button.vue
View File

@ -27,7 +27,6 @@ export default {
border-radius: .375rem
transition: background-color 200ms
box-sizing: border-box
overflow: hidden
outline: unset
&--contained
background-color: #336cfb

77
src/renderer/layouts/DockableSidebar.vue
View File

@ -16,8 +16,25 @@
</div>
<Logo :nopadding="true"/>
</section>
<section class="sidebar" :class="{'open': menuStatus === true}">
<section class="overlay" :class="{'open': menuStatus === true}" @click="toggleMenuStatus" />
<section >
<vue-custom-scrollbar class="sidebar" :class="{'open': menuStatus === true}" :settings="settings">
<div class="logo-wrapper">
<div @click="toggleMenuStatus" class="icon">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
<g>
<g id="Menu_1_">
<path d="M12.03,120.303h360.909c6.641,0,12.03-5.39,12.03-12.03c0-6.641-5.39-12.03-12.03-12.03H12.03
c-6.641,0-12.03,5.39-12.03,12.03C0,114.913,5.39,120.303,12.03,120.303z"/>
<path d="M372.939,180.455H12.03c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03
S379.58,180.455,372.939,180.455z"/>
<path d="M372.939,264.667H132.333c-6.641,0-12.03,5.39-12.03,12.03c0,6.641,5.39,12.03,12.03,12.03h240.606
c6.641,0,12.03-5.39,12.03-12.03C384.97,270.056,379.58,264.667,372.939,264.667z"/>
</g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
</svg>
</div>
<Logo class="logo" />
</div>
<MenuGroup>
<template v-slot:title>Menu</template>
<MenuItem to="/artists">
@ -112,6 +129,7 @@
Version {{version}}
</MenuItem>
</MenuGroup>
</vue-custom-scrollbar>
</section>
</div>
</template>
@ -123,12 +141,13 @@ import projectPackage from '~/package.json'
import Logo from '../components/Logo'
import { mapActions, mapGetters } from 'vuex'
import Button from '../components/Button'
import vueCustomScrollbar from 'vue-custom-scrollbar'
export default {
name: 'DockableSidebar',
components: { MenuGroup, MenuItem, Logo, Button },
components: { MenuGroup, MenuItem, Logo, Button, vueCustomScrollbar },
data: () => {
return { version: projectPackage.version }
return { version: projectPackage.version, settings: { maxScrollbarLength: 60, swipeEasing: true, wheelSpeed: 0.5 } }
},
methods: {
...mapActions(['toggleMenuStatus'])
@ -164,18 +183,41 @@ section.handle
svg
width: 24px
height: 24px
section.overlay
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: rgba(0,0,0,0)
z-index: 1100
transition: background-color 200ms
pointer-events: none
&.open
pointer-events: all
background-color: rgba(0,0,0,0.1)
section.sidebar
width: 250px
max-width: 250px
min-height: 100vh
max-height: 100vh
padding: 2rem 2rem 0rem 2rem
padding: 2rem 0rem 0rem 2rem
box-sizing: border-box
background-color: #fcfcfc
display: flex
flex-direction: column
overflow-y: auto
overflow-y: hidden
transition: width 300ms,transform 300ms,padding 500ms
.logo-wrapper
min-height: 48px
.icon
display: none
&.open
transform: translateX(0%)
padding: 1rem 0rem 0rem 1rem
width: 300px
overflow-y: hidden
.playlist-button
align-self: flex-start
.icon
@ -189,13 +231,32 @@ section.sidebar
section.sidebar
width: 200px
overflow-y: auto
padding: 1rem 1rem 0rem 1rem
padding: 1rem 0rem 0rem 1rem
@media(max-width: 800px)
section.sidebar
transform: translateX(-100%)
width: 0
overflow-y: hidden
padding: 2rem 0rem 0rem 0rem
z-index: 1200
position: absolute
left: 0
top: 0
.logo-wrapper
display: flex
.icon
display: block
width: 24px
height: 24px
padding: 0.8rem
cursor: pointer
transition: background-color 200ms
border-radius: 100%
&:hover
background-color: rgba(black,0.05)
svg
width: 24px
height: 24px
.logo
display: none
section.handle
transform: translateY(0%)
</style>