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

Added and configured vue-custom-scrollbar

pull/12/head
Nikan Dalvand 2019-07-22 13:28:42 +04:30
parent 4840a66f38
commit b1650bee08
3 changed files with 130 additions and 112 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",

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

@ -17,7 +17,8 @@
<Logo :nopadding="true"/>
</section>
<section class="overlay" :class="{'open': menuStatus === true}" @click="toggleMenuStatus" />
<section class="sidebar" :class="{'open': menuStatus === true}">
<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">
@ -128,6 +129,7 @@
Version {{version}}
</MenuItem>
</MenuGroup>
</vue-custom-scrollbar>
</section>
</div>
</template>
@ -139,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'])
@ -198,12 +201,12 @@ section.sidebar
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
@ -211,9 +214,9 @@ section.sidebar
display: none
&.open
transform: translateX(0%)
padding: 1rem 1rem 0rem 1rem
padding: 1rem 0rem 0rem 1rem
width: 300px
overflow-y: auto
overflow-y: hidden
.playlist-button
align-self: flex-start
@ -228,7 +231,7 @@ 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%)