Merge pull request #14 from nikandlv/development

Finish off action bar and input

src/main/index.js

@@ -22,7 +22,9 @@ function createWindow () {
   mainWindow = new BrowserWindow({
     height: 563,
     useContentSize: true,
-    width: 1000
+    width: 1000,
+    minHeight:600,
+    minWidth:400,
   })
 
   mainWindow.loadURL(winURL)

src/renderer/components/Badge.vue

@@ -24,7 +24,7 @@ export default {
     align-items: center
     border-radius: 50%
     border: 2px solid white
-    // positioning according to the the notification icon
+    // positioning according to the the icon
     position: absolute
     top: -0.2rem
     right: -.3rem

src/renderer/components/BaseInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-      <input type="search" v-bind="query" :placeholder="placeholder">
+      <input :type="type" :placeholder="placeholder">
       <slot></slot>
   </div>
 </template>
@@ -8,12 +8,7 @@
 <script>
 export default {
   name: 'BaseInput',
-  data () {
+  props: ['placeholder', 'type']
-    return {
-      query: null
-    }
-  },
-  props: ['placeholder']
 }
 </script>
 
@@ -21,29 +16,30 @@ export default {
 <style lang="sass" scoped>
   div
     display: flex
-    justify-content: center
+    align-items: center
-    width: 40%
+    border: 1px solid lighten(grey, 40)
-  
+    background-color: #f9f9f9
+    border-radius: 100px
+    padding: .4rem 1.5rem .4rem 0rem
+    transition: width 200ms
     input
-      width: 90%
       height: 100%
-      border-radius: 15px
-      padding: .4rem 1.5rem
       color: lighten(black, 30) 
-      border: 1px solid lighten(grey, 40)
+      padding: .2rem 0rem .2rem 1.5rem
-      margin-right: -2rem
+      min-width: unset
-      background-color: #f9f9f9
+      border: unset
-      transition: all .2s ease-in-out
+      background-color: unset
+      box-sizing: border-box
+      outline: none
+      flex-grow: 1
       &::placeholder
         color: #a8abb3
 
-      &:focus
-        outline: none
-        width: 100%
-
     svg
       width: 1.2rem
       height: 1.2rem
+      min-width: 1.2rem
+      min-height: 1.2rem
       cursor: pointer
       fill: #3b3c3d
 </style>

src/renderer/components/Profile.vue

@@ -21,12 +21,12 @@ export default {
     padding: 0
     margin-left: 1.5rem
     display: flex
-    flex-direction: row
+    align-items: center
     cursor: pointer
 
   &__image
-    width: 1.5rem
+    width: 2rem
-    height: 1.5rem
+    height: 2rem
     border-radius: 50%
 
   &__icon

src/renderer/layouts/ActionBar.vue

@@ -1,21 +1,24 @@
 <template>
-    <div>
+    <section class="action-bar">
-        <BaseInput placeholder="Search">
+        <div class="search-wrapper">
-          <svg version="1.1" class="search__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
+          <BaseInput placeholder="Search" type="search">
-            <path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
+            <svg version="1.1" class="search__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
-              c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
+              <path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
-              C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
+                c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
-              S32.459,40,21.983,40z"/>
+                C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
-            <g></g>
+                S32.459,40,21.983,40z"/>
-          </svg>
+              <g></g>
-        </BaseInput>
+            </svg>
+          </BaseInput>
+        </div>
+        <div class="icon-wrapper">
+          <Notification :BadgeNumber="5"></Notification>
 
-        <Notification :BadgeNumber="5"></Notification>
+          <Profile></Profile>
 
-        <Profile></Profile>
+          <History></History>
-
+        </div>
-        <History></History>
+    </section>
-    </div>
 </template>
 
 <script>
@@ -31,13 +34,27 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-div
+section.action-bar
   display: flex
   padding: 1rem 2.5rem
   align-items: center
-
+  .search-wrapper
-@media(max-width: 1000px)    
+    transition: width 200ms
-  div
+    transition: margin-top 100ms
-    flex-wrap: wrap
+    flex-grow: 0.3
+  .icon-wrapper
+    flex-grow: 1
+    align-items: center
+    display: flex
+@media(max-width: 800px)
+  section.action-bar
+    .search-wrapper
+      flex-grow: 1
+@media(max-width: 600px)
+  section.action-bar
+    flex-direction: column-reverse
+    .search-wrapper
+      width: 100%
+      margin-top: 24px
 </style>
 

src/renderer/layouts/DockableSidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <section class="handle">
+        <section class="handle" :class="{'open': menuStatus === true}">
             <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>
@@ -20,19 +20,6 @@
         <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>
@@ -164,12 +151,15 @@ section.handle
     width: 100%
     height: 64px
     box-sizing: border-box
-    transition: transform 300ms
+    transition: transform 300ms,box-shadow 200ms
     background-color: #fcfcfc
     transform: translateY(-100%)
     display: flex
     align-items: center
+    z-index: 1210
     padding: 0 1rem
+    &.open
+        box-shadow: 0px 2px 4px -1px rgba(0,0,0,0), 0px 4px 5px 0px rgba(0,0,0,0.04), 0px 1px 10px 0px rgba(0,0,0,0)
     .icon
         margin: 0 10px
         width: 24px
@@ -217,7 +207,7 @@ section.sidebar
         padding: 1rem 0rem 0rem 1rem
         width: 300px
         overflow-y: hidden
-        
+        box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0), 0px 1px 10px 0px rgba(0,0,0,0.12)
     .playlist-button
         align-self: flex-start
     .icon