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

Merge pull request #14 from nikandlv/development 

Finish off action bar and input
master
Nikan Dalvand 2019-07-23 12:31:30 +04:30 committed by GitHub
parent 1412c87355 ad6cfa27e6
commit b5b78b1bb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 67 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/index.js
View File

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

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

@ -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

38
src/renderer/components/BaseInput.vue
View File

@ -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 () {
return {
query: null
}
},
props: ['placeholder']
props: ['placeholder', 'type']
}
</script>
@ -21,29 +16,30 @@ export default {
<style lang="sass" scoped>
div
display: flex
justify-content: center
width: 40%
align-items: center
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)
margin-right: -2rem
background-color: #f9f9f9
transition: all .2s ease-in-out
padding: .2rem 0rem .2rem 1.5rem
min-width: unset
border: unset
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>

6
src/renderer/components/Profile.vue
View File

@ -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
height: 1.5rem
width: 2rem
height: 2rem
border-radius: 50%
&__icon

57
src/renderer/layouts/ActionBar.vue
View File

@ -1,21 +1,24 @@
<template>
<div>
<BaseInput placeholder="Search">
<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">
<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
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
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
S32.459,40,21.983,40z"/>
<g></g>
</svg>
</BaseInput>
<section class="action-bar">
<div class="search-wrapper">
<BaseInput placeholder="Search" type="search">
<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">
<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
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
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
S32.459,40,21.983,40z"/>
<g></g>
</svg>
</BaseInput>
</div>
<div class="icon-wrapper">
<Notification :BadgeNumber="5"></Notification>
<Notification :BadgeNumber="5"></Notification>
<Profile></Profile>
<Profile></Profile>
<History></History>
</div>
<History></History>
</div>
</section>
</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
@media(max-width: 1000px)
div
flex-wrap: wrap
.search-wrapper
transition: width 200ms
transition: margin-top 100ms
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>

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

@ -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