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

finished the favourite section click behaviour

pull/22/head^2
NoisyBoy-9 2019-07-26 18:43:23 +04:30
parent 440ad67a36
commit 450c5f4f07
3 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/Badge.vue
View File

@ -18,7 +18,7 @@ export default {
// base styles // base styles
width: 1rem width: 1rem
height: 1rem height: 1rem
background-color: #336cfb background-color: #0076F9
display: flex display: flex
justify-content: center justify-content: center
align-items: center align-items: center

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

@ -29,13 +29,13 @@ export default {
box-sizing: border-box box-sizing: border-box
outline: unset outline: unset
&--contained &--contained
background-color: #336cfb background-color: #0076F9
color: white color: white
font-weight: 600 font-weight: 600
&:hover &:hover
background-color: lighten(#336cfb,5) background-color: lighten(#0076F9,5)
&:focus,&:active &:focus,&:active
background-color: darken(#336cfb,5) background-color: darken(#0076F9,5)
svg svg
width: 14px width: 14px
@ -54,26 +54,26 @@ export default {
background-color: rgba(0,0,0,.15) background-color: rgba(0,0,0,.15)
&--raised &--raised
background-color: #336cfb background-color: #0076F9
color: white color: white
font-weight: 600 font-weight: 600
box-shadow: 0 .3rem .7rem rgba(#336cfb , .5) box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
&:hover &:hover
background-color: lighten(#336cfb,5) background-color: lighten(#0076F9,5)
&:focus,&:active &:focus,&:active
background-color: darken(#336cfb,5) background-color: darken(#0076F9,5)
&--outlined &--outlined
background-color: white background-color: white
border: 1px solid #336cfb border: 1px solid #0076F9
svg svg
fill: #336cfb fill: #0076F9
&:focus,&:active &:focus,&:active
background-color: darken(#336cfb,5) background-color: darken(#0076F9,5)
color: white color: white
svg svg
fill: white fill: white
&:hover &:hover
background-color: #336cfb background-color: #0076F9
color: white color: white
svg svg
fill: white fill: white

28
src/renderer/components/ListItem.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<li> <li :class="{ 'active': active === true }" @click="toggleActive">
<div class="song"> <div class="song">
<img @load="onLoad" :src="item.artwork" alt="Artwork"> <img :src="item.artwork" alt="Artwork">
{{item.title}} {{item.title}}
</div> </div>
@ -16,19 +16,20 @@
</template> </template>
<script> <script>
import color from 'dominant-color'
export default { export default {
name: 'ListItem', name: 'ListItem',
props: ['item'], props: ['item'],
methods: { data () {
onLoad () { return {
let img = this.$el.getElementsByTagName('img')[0] active: false
let list = this.$el.getElementsByTagName('li')[0] }
},
color(img.src, {format: 'hex'}, (_, color) => { methods: {
list.style.backgroundColor = `#${color}` toggleActive () {
}) this.active = !this.active
} }
} }
} }
@ -41,6 +42,13 @@ li
display: flex display: flex
justify-content: space-between justify-content: space-between
margin-bottom: .6rem margin-bottom: .6rem
padding: .4rem .8rem
border-radius: .5rem
&.active
background-color: #0076F9
color: white
box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)
div.song div.song
display: flex display: flex