Merge pull request #29 from nikandlv/development

Added new components, icons and Fixed some issues

src/renderer/components/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <a href="#" role="button" class="btn" :class="className">
+  <a href="#" role="button" class="button" :class="className">
     <slot name="icon"></slot>
     <slot></slot>
   </a>
@@ -7,9 +7,10 @@
 
 <script>
 export default {
+  name: 'Button',
   data () {
     return {
-      className: `btn--` + this.variant
+      className: `button--` + this.variant
     }
   },
 
@@ -19,7 +20,7 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.btn 
+.button 
   font-size: .9rem
   text-decoration: none
   padding: .5rem 1rem
@@ -28,36 +29,36 @@ export default {
   transition: background-color 200ms
   box-sizing: border-box
   outline: unset
+  color: grey
+  transition: all .2s ease-in-out
+  svg
+    width: 14px
+    height: 14px
+    transition: fill 200ms
+    fill: gray
+  &:hover
+    background-color: rgba(0,0,0,0.05)
+  &:focus,&:active
+    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)
 
-  svg
-    width: 14px
-    height: 14px
-    fill: white
-    transition: fill 200ms
-
-  &--flat 
-    color: grey
-    transition: all .2s ease-in-out
-    svg
-      fill: gray
-    &:hover
-      background-color: rgba(0,0,0,0.05)
-    &:focus,&:active
-      background-color: rgba(0,0,0,.15)
-
   &--raised 
     background-color: #0076F9
     color: white
     font-weight: 600
     box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
+    svg
+        fill: white
     &:hover
       background-color: lighten(#0076F9,5)
     &:focus,&:active

src/renderer/components/IconButton.vue

@@ -0,0 +1,99 @@
+<template>
+  <span @click="onClick" role="button" class="icon-button" :class="className">
+    <slot name="icon"></slot>
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'IconButton',
+  data () {
+    return {
+      className: `icon-button--` + this.variant,
+      onClick: this.click || (() => {})
+    }
+  },
+  props: ['variant', 'click']
+
+}
+</script>
+
+<style lang="sass" scoped>
+.icon-button 
+  display: flex
+  justify-content: center
+  align-items: center
+  width: 38px
+  cursor: pointer
+  height: 38px
+  text-decoration: none
+  text-transform: capitalize
+  border-radius: 100%
+  transition: background-color 200ms
+  box-sizing: border-box
+  outline: unset
+  color: grey
+  transition: all .2s ease-in-out
+  &.large
+    width: 48px
+    height: 48px
+    svg
+        width: 32px
+        height: 32px    
+  &.small
+    width: 32px
+    height: 32px
+    svg
+        width: 14px
+        height: 14px    
+  svg
+    width: 24px
+    height: 24px
+    transition: fill 200ms
+    fill: gray
+  &:hover
+    background-color: rgba(0,0,0,0.05)
+  &:focus,&:active
+    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 
+    background-color: #0076F9
+    color: white
+    font-weight: 600
+    box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
+    svg
+        fill: white
+    &:hover
+      background-color: lighten(#0076F9,5)
+    &:focus,&:active
+      background-color: darken(#0076F9,5)
+  &--outlined 
+     background-color: white
+     color: #0076F9
+     border: 1px solid #0076F9
+     svg
+      fill: #0076F9
+     &:focus,&:active
+      background-color: darken(#0076F9,5)
+      color: white
+      svg
+        fill: white
+     &:hover
+      background-color: #0076F9
+      color: white
+      svg
+        fill: white
+</style>
+

src/renderer/layouts/DockableSidebar.vue

@@ -81,7 +81,7 @@
                     </MenuItem>
                 </MenuGroup>
 
-                <Button variant="contained" class="playlist-button">
+                <Button class="playlist-button">
                     <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">
                             <g id="Add">

src/renderer/layouts/HomePage.vue

@@ -1,6 +1,6 @@
 <template>
     <section>
-      <ActionBar />
+      <ActionBar class="action-bar" />
       <div class="upper-row">
         <MusicRow :items='items' />
       </div>
@@ -273,11 +273,13 @@ export default {
 
 <style lang="sass">
 section.page
-  padding: 1rem 2.5rem
   overflow-x: hidden
   .VueCarousel-wrapper
       overflow: unset
-
+  .action-bar
+    padding: 1rem 2.5rem
+  .upper-row
+    padding: 1rem 2.5rem
   .middle-row
     display: flex
 
@@ -286,6 +288,7 @@ section.page
 
 .favourite
   background: white
+  padding: 1rem 2.5rem
   z-index: 10
   &__list-header
     width: 100%
@@ -356,6 +359,7 @@ section.page
     margin-top: 1.5rem
 
 .genre
+  padding: 1rem 2.5rem
   &__title
     legend
       font-size: 2rem

src/renderer/layouts/PlayerBar.vue

@@ -1,23 +1,33 @@
 <template>
     <section class="player">
-        <img @load="onArtworkLoad" class="artwork" src="/static/demo/artwork.jpg" />
+        <img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
         <div>
-            <p class="title">Don't Let Me Down</p>
+            <p class="title">Yellow</p>
-            <p class="artist">The Chainsmokers</p>
+            <p class="artist">Rich Brian</p>
         </div>
         <div class="visualizer">
             <div id="visualizer"></div>
             <div id="minimap" class="shade"></div>
         </div>
         <div class="duration">
-            <p class="progress active">00:00</p>
+            <p class="currentTime progress active">00:00</p>
-            <p>{{duration}}</p>
+            <p class="remainingTime">{{duration}}</p>
         </div>
         <div class="control-buttons">
-            <div class="play-pause-button" @click="togglePlay">
+            <IconButton variant="theme-icon" :click="toggleFavorite">
-                <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="isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></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="!isFavorited" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path class="colorable" d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>
-            </div>
+            </IconButton>
+            <IconButton variant="contained">
+              <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>
+            <IconButton variant="contained large" :click="togglePlay">
+              <svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+              <svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+            </IconButton>
+            <IconButton variant="contained">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+            </IconButton>
         </div>
     </section>
 </template>
@@ -27,8 +37,10 @@ import WaveSurfer from 'wavesurfer.js'
 import minimap from 'wavesurfer.js/dist/plugin/wavesurfer.minimap'
 import color from 'dominant-color'
 import { formatSeconds } from '../utility/DateTime'
+import IconButton from '../components/IconButton'
 export default {
   name: 'PlayerBar',
+  components: { IconButton },
   mounted () {
     let progress = this.$el.getElementsByClassName('progress')[0]
     this.wavesurfer = WaveSurfer.create({
@@ -102,16 +114,40 @@ export default {
   data () {
     return {
       playingStatus: false,
+      isFavorited: false,
       duration: '00:00'
     }
   },
   methods: {
     onArtworkLoad () {
       let img = this.$el.getElementsByTagName('img')[0]
+      let controlIcons = this.$el.getElementsByClassName('control-buttons')[0].children
       color(img.src, (_, color) => {
         this.wavesurfer.setProgressColor(`#${color}`)
         this.wavesurfer.minimap.params.progressColor = `#${color}`
         this.wavesurfer.minimap.drawer.updateSize()
+        for (let child in controlIcons) {
+          if (typeof controlIcons[child] === 'object') {
+            if (controlIcons[child].className.includes('no-theme')) {
+              continue
+            }
+            if (controlIcons[child].className.includes('theme-icon')) {
+              let paths = controlIcons[child].getElementsByTagName('path')
+              for (let path in paths) {
+                if (typeof paths[path] === 'object') {
+                  if (paths[path].getAttribute('class') === null) {
+                    continue
+                  }
+                  if (paths[path].getAttribute('class').includes('colorable')) {
+                    paths[path].style.fill = `#${color}`
+                  }
+                }
+              }
+              continue
+            }
+            controlIcons[child].style.backgroundColor = `#${color}`
+          }
+        }
       })
     },
     play () {
@@ -147,6 +183,9 @@ export default {
     togglePlay () {
       this.wavesurfer.playPause()
       this.playingStatus = this.isPlaying()
+    },
+    toggleFavorite () {
+      this.isFavorited = !this.isFavorited
     }
   }
 }
@@ -159,13 +198,18 @@ section.player
     border-top: 1px solid rgba(0,0,0,0.1)
     height: 4.5rem
     min-height: 4.5rem
+    .control-buttons
+      span
+        margin: 0 0.2rem
+      display: flex
+      align-items: center
     img.artwork
         height: 4.5rem
         width: 4.5rem
-    p.title,p.artist
+    p.title,p.artist,.currentTime,.remainingTime
         font-size: .8rem
         margin: 8px 10px
-    p.artist
+    p.artist,.remainingTime
         color: lighten(black,45)
     .visualizer
         flex-grow: 1