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

Blended in the handle with sidebar when undocked and added box shadow to sidebar and the handle

pull/14/head
Nikan Dalvand 2019-07-23 12:25:25 +04:30
parent 7c9a9a0873
commit e32560a7e4
2 changed files with 7 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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