Skip to content

Improvement of sidebar uiux #520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kazup01 merged 2 commits into from
Apr 29, 2017
Merged

Improvement of sidebar uiux #520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7aa9828
Fix the layout and UX at create-folder-btn at sidebar
Apr 28, 2017
60e5665
Fix the layout and UX of StorageItem at SIdebra
Apr 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion browser/components/StorageItem.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
.folderList-item-name
display block
flex 1
padding 0 15px
padding 0 25px
height 26px
line-height 26px
border-width 0 0 0 2px
Expand Down
37 changes: 28 additions & 9 deletions browser/main/SideNav/StorageItem.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@

.header
position relative
height 26px
height 25px
width 100%
margin-bottom 5px
transition 0.15s

.header--active
margin-bottom 5px
background-color $ui-button--active-backgroundColor
transition color background-color 0.15s

Expand All @@ -30,26 +31,29 @@
position absolute
left 0
width 25px
height 26px
height 25px
padding 0
border none
border-radius 50%
&:hover
background-color transparent
transition 0.2s
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color

.header-info
navButtonColor()
display block
width 100%
height 30px
padding-left 25px
height 25px
padding-left 23px
padding-right 10px
line-height 26px
line-height 22px
cursor pointer
font-size 13px
border none
overflow ellipsis
text-align left
background-color alpha($ui-button--active-backgroundColor, 20%)

.header-info-path
font-size 10px
Expand All @@ -60,11 +64,14 @@
position absolute
right 0
width 25px
height 26px
height 25px
padding 0
border none
margin-right 5px
border-radius 50%
&:hover
background-color transparent
transition 0.2s
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color

.root--folded
Expand Down Expand Up @@ -117,10 +124,17 @@ body[data-theme="dark"]

.header-toggleButton
&:hover
transition 0.2s
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor

.header-info
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:hover
transition 0.2s
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:active, &:active:hover
Expand All @@ -129,4 +143,9 @@ body[data-theme="dark"]

.header-addFolderButton
&:hover
color $ui-dark-text-color
transition 0.2s
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor