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

Button now defaults into flat mode

pull/29/head
Nikan Dalvand 2019-07-28 13:06:54 +04:30
parent 538d04bc2c
commit a7922beca2
3 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,36 +28,36 @@ export default {
transition: background-color 200ms transition: background-color 200ms
box-sizing: border-box box-sizing: border-box
outline: unset outline: unset
&--contained
background-color: #0076F9
color: white
font-weight: 600
&:hover
background-color: lighten(#0076F9,5)
&:focus,&:active
background-color: darken(#0076F9,5)
svg
width: 14px
height: 14px
fill: white
transition: fill 200ms
&--flat
color: grey color: grey
transition: all .2s ease-in-out transition: all .2s ease-in-out
svg svg
width: 14px
height: 14px
transition: fill 200ms
fill: gray fill: gray
&:hover &:hover
background-color: rgba(0,0,0,0.05) background-color: rgba(0,0,0,0.05)
&:focus,&:active &:focus,&:active
background-color: rgba(0,0,0,.15) background-color: rgba(0,0,0,.15)
&--contained
background-color: #0076F9
color: white
font-weight: 600
svg
fill: white
&:hover
background-color: lighten(#0076F9,5)
&:focus,&:active
background-color: darken(#0076F9,5)
&--raised &--raised
background-color: #0076F9 background-color: #0076F9
color: white color: white
font-weight: 600 font-weight: 600
box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5) box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
svg
fill: white
&:hover &:hover
background-color: lighten(#0076F9,5) background-color: lighten(#0076F9,5)
&:focus,&:active &:focus,&:active

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

@ -81,7 +81,7 @@
</MenuItem> </MenuItem>
</MenuGroup> </MenuGroup>
<Button variant="contained" class="playlist-button"> <Button class="playlist-button">
<template v-slot:icon> <template v-slot:icon>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 286.376 286.376" style="enable-background:new 0 0 286.376 286.376;" xml:space="preserve"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 286.376 286.376" style="enable-background:new 0 0 286.376 286.376;" xml:space="preserve">
<g id="Add"> <g id="Add">

4
src/renderer/layouts/PlayerBar.vue
View File

@ -14,7 +14,9 @@
<p class="remainingTime">{{duration}}</p> <p class="remainingTime">{{duration}}</p>
</div> </div>
<div class="control-buttons"> <div class="control-buttons">
<IconButton variant="outlined">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</IconButton>
<div class="play-pause-button" @click="togglePlay"> <div class="play-pause-button" @click="togglePlay">
<svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg> <svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
<svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg> <svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
@ -29,8 +31,10 @@ import WaveSurfer from 'wavesurfer.js'
import minimap from 'wavesurfer.js/dist/plugin/wavesurfer.minimap' import minimap from 'wavesurfer.js/dist/plugin/wavesurfer.minimap'
import color from 'dominant-color' import color from 'dominant-color'
import { formatSeconds } from '../utility/DateTime' import { formatSeconds } from '../utility/DateTime'
import IconButton from '../components/IconButton'
export default { export default {
name: 'PlayerBar', name: 'PlayerBar',
components: { IconButton },
mounted () { mounted () {
let progress = this.$el.getElementsByClassName('progress')[0] let progress = this.$el.getElementsByClassName('progress')[0]
this.wavesurfer = WaveSurfer.create({ this.wavesurfer = WaveSurfer.create({