public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

Merge pull request #462 from BoostIO/Design-update

Browse Source 
Design update
This commit is contained in:
Kazu Yokomizo
2017-04-21 18:21:16 +09:00
committed by GitHub
parent 6440ab423e d039b17715
commit 091d2618a2
12 changed files with 134 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
browser/components/NoteItem.styl
View File

@@ -17,18 +17,22 @@ $control-height = 30px
.item-title
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
color $ui-text-color
.item-bottom-tagList-item
background-color alpha(white, 0.6)
color $ui-text-color
&:active
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-title
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
color $ui-text-color
.item-bottom-tagList-item
background-color alpha(white, 0.6)
color $ui-text-color
.item-wrapper
padding 15px 0
@@ -45,7 +49,7 @@ $control-height = 30px
.item-title-icon
color $ui-text-color
.item-bottom-tagList-item
background-color transparent
background-color alpha(white, 0.6)
color $ui-text-color
.item-wrapper
border-color transparent
@@ -93,9 +97,10 @@ $control-height = 30px
padding 0
height 20px
box-sizing border-box
border-radius 20px
border-radius 2px
padding 1px 2px
vertical-align middle
background-color transparent
background-color white
color $ui-inactive-text-color
.item-bottom-time
@@ -123,21 +128,29 @@ body[data-theme="dark"]
.item
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:active
background-color $ui-dark-button--active-backgroundColor
.item-title
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color
&:hover
transition 0.15s
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color $ui-dark-text-color
.item-bottom-tagList-item
transition 0.15s
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
color $ui-dark-text-color
&:active
transition 0.15s
background-color $ui-dark-button--active-backgroundColor
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color $ui-dark-text-color
.item-bottom-tagList-item
transition 0.15s
background-color alpha(white, 10%)
color $ui-dark-text-color
.item-wrapper
@@ -153,7 +166,7 @@ body[data-theme="dark"]
.item-bottom-time
color $ui-dark-text-color
.item-bottom-tagList-item
background-color transparent
background-color alpha(white, 10%)
color $ui-dark-text-color
.item-title
@@ -166,7 +179,7 @@ body[data-theme="dark"]
color $ui-inactive-text-color
.item-bottom-tagList-item
background-color transparent
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
color $ui-inactive-text-color
.item-bottom-tagList-empty

2
browser/components/SideNavFilter.js
View File

@@ -24,7 +24,7 @@ const SideNavFilter = ({
<i className='fa fa-archive fa-fw' />
<span styleName='menu-button-label'>All Notes</span>
</button>
<button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
<button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
onClick={handleStarredButtonClick}
>
<i className='fa fa-star fa-fw' />

40
browser/components/SideNavFilter.styl
View File

@@ -12,11 +12,27 @@
.menu-button--active
@extend .menu-button
color $ui-text-color
color #e74c3c
background-color $ui-button--active-backgroundColor
.menu-button-label
color $ui-text-color
&:hover
background-color $ui-button--active-backgroundColor
color #e74c3c
.menu-button-label
color $ui-text-color
.menu-button-star--active
@extend .menu-button
color #F9BF3B
background-color $ui-button--active-backgroundColor
.menu-button-label
color $ui-text-color
&:hover
background-color $ui-button--active-backgroundColor
color #F9BF3B
.menu-button-label
color $ui-text-color
.menu-button-label
margin-left 5px
@@ -55,9 +71,25 @@ body[data-theme="dark"]
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-dark-text-color
.menu-button--active
color $ui-dark-text-color
color #c0392b
background-color $ui-dark-button--active-backgroundColor
&:active
background-color $ui-dark-button--active-backgroundColor
.menu-button-label
color $ui-dark-text-color
&:hover
background-color $ui-dark-button--active-backgroundColor
color #c0392b
.menu-button-label
color $ui-dark-text-color
.menu-button-star--active
color $ui-favorite-star-button-color
background-color $ui-dark-button--active-backgroundColor
.menu-button-label
color $ui-dark-text-color
&:hover
background-color $ui-dark-button--active-backgroundColor
color $ui-favorite-star-button-color
.menu-button-label
color $ui-dark-text-color

4
browser/main/Detail/Detail.styl
View File

@@ -1,8 +1,5 @@
.root
absolute top bottom right
border-width 1px 0
border-style solid
border-color $ui-borderColor
.empty
height 320px
@@ -18,7 +15,6 @@
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
.empty-message
color $ui-dark-inactive-text-color

37
browser/main/Detail/StarButton.styl
View File

@@ -2,20 +2,27 @@
left 7px
top 0
padding 0
color alpha($ui-favorite-star-button-color, 60%)
&:hover
background-color #DCDCDC
.icon
transform rotate(-72deg)
.tooltip
opacity 1
transition 0.15s
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-favorite-star-button-color
&:active
transition 0.15s
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-favorite-star-button-color
.root--active
@extend .root
color $ui-favorite-star-button-color
&:hover
transition 0.15s
color $ui-favorite-star-button-color
.icon
transform rotate(-72deg)
background-color alpha($ui-button--active-backgroundColor, 40%)
&:active
transition 0.15s
color $ui-favorite-star-button-color
background-color alpha($ui-button--active-backgroundColor, 40%)
.icon
transition transform 0.15s
@@ -23,4 +30,18 @@
body[data-theme="dark"]
.root
&:hover
background-color #272B32
transition 0.15s
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-favorite-star-button-color
&:active
transition 0.15s
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-favorite-star-button-color
.root--active
@extend .root
color $ui-favorite-star-button-color
&:hover
transition 0.15s
color $ui-favorite-star-button-color
background-color alpha($ui-dark-button--active-backgroundColor, 20%)

42
browser/main/Detail/TagSelect.styl
View File

@@ -12,12 +12,12 @@
.tag
display inline-block
margin 0 2px
padding-left 10px
margin 1px 3px
padding 0
vertical-align middle
height 20px
background-color alpha($ui-tag-backgroundColor, 10%)
border-radius 20px
border-radius 3px
overflow hidden
clearfix()
@@ -54,34 +54,11 @@
height 24px
box-sizing borde-box
border none
border-bottom $ui-border
background-color transparent
outline none
padding 0 4px
&:focus
border-color $ui-input--focus-borderColor = #369DCD
&:disabled
background-color $ui-input--disabled-backgroundColor = #DDD
.add-tag-button
display inline
margin-left 5px
width 20px
height 20px
border none
border-radius 20px
padding 0
color #FFFFFF
&:hover
background-color rgba(0, 0, 0, 0.3)
&:active, &:active:hover
background-color rgba(0, 0, 0, 0.5)
color $ui-button--active-color
body[data-theme="dark"]
.icon
color $ui-dark-button-color
.tag
background-color alpha($ui-dark-tag-backgroundColor, 60%)
@@ -94,17 +71,6 @@ body[data-theme="dark"]
color $ui-dark-text-color
.newTag
border-color $ui-dark-borderColor
border-color none
background-color transparent
color $ui-dark-text-color
&:focus
border-color $ui-input--focus-borderColor = #369DCD
&:disabled
background-color $ui-input--disabled-backgroundColor = #DDD
.add-tag-button
&:hover
background-color rgba(255, 255, 255, 0.3)
&:active, &:active:hover
background-color rgba(255, 255, 255, 0.5)
color $ui-button--active-color

15
browser/main/NoteList/NoteList.styl
View File

@@ -20,8 +20,8 @@ $control-height = 30px
padding-left 25px
.control-sortBy-select
margin-left 0
font-size 12px
appearance: none;
margin-left 3px
color $ui-inactive-text-color
padding 0
border none
@@ -29,6 +29,9 @@ $control-height = 30px
outline none
cursor pointer
font-size 10px
&:hover
transition 0.2s
color $ui-text-color
.control-button
width 25px
@@ -58,13 +61,15 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
.control
background-color $ui-dark-noteList-backgroundColor
.control
background-color $ui-dark-noteList-backgroundColor
border-color $ui-dark-borderColor
.control-sortBy-select
&:hover
transition 0.2s
color $ui-dark-text-color
.control-button
color $ui-dark-inactive-text-color
&:hover

2
browser/main/NoteList/index.js
View File

@@ -404,7 +404,7 @@ class NoteList extends React.Component {
>
<div styleName='control'>
<div styleName='control-sortBy'>
Sort by
<i className='fa fa-bolt' />
<select styleName='control-sortBy-select'
value={config.sortBy}
onChange={(e) => this.handleSortByChange(e)}

6
browser/main/SideNav/SideNav.styl
View File

@@ -122,3 +122,9 @@ body[data-theme="dark"]
.storageList-empty
color $ui-dark-inactive-text-color
.navToggle
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
transition 0.15s
color $ui-dark-text-color

5
browser/main/StatusBar/StatusBar.styl
View File

@@ -5,7 +5,6 @@
height $statusBar-height
background-color $ui-noteDetail-backgroundColor
display flex
box-shadow $note-detail-box-shadow
.blank
flex 1
@@ -44,6 +43,10 @@ body[data-theme="dark"]
.zoom
border-color $ui-dark-borderColor
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
transition 0.15s
color $ui-dark-text-color
.help
navButtonColor()

8
browser/main/TopBar/TopBar.styl
View File

@@ -145,7 +145,7 @@ body[data-theme="dark"]
.control-search-optionList-item
border-color $ui-dark-borderColor
&:hover
background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.control-search-optionList-item-folder
color $ui-dark-text-color
.control-search-optionList-item-folder-surfix
@@ -160,10 +160,14 @@ body[data-theme="dark"]
color $ui-inactive-text-color
.control-newPostButton
colorDarkDefaultButton()
color $ui-inactive-text-color
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:hover
transition 0.15s
color $ui-dark-text-color
&:active
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
border-color $ui-dark-button--active-backgroundColor
.control-newPostButton-tooltip

10
browser/styles/index.styl
View File

@@ -127,15 +127,15 @@ navButtonColor()
border none
color $ui-button-color
background-color transparent
transition color background-color 0.15s
transition 0.15s
&:hover
background-color alpha($ui-button--active-backgroundColor, 20%)
transition color background-color 0.15s
transition 0.15s
color $ui-text-color
&:active, &:active:hover
background-color $ui-button--active-backgroundColor
color $ui-text-color
transition color background-color 0.15s
transition 0.15s
/**
* # Modal Stuff
* These will be moved lib/modal
@@ -217,12 +217,14 @@ navDarkButtonColor()
border none
color $ui-dark-button-color
background-color transparent
transition color background-color 0.15s
transition 0.15s
&:hover
color $ui-dark-text-color
background-color $ui-dark-button--hover-backgroundColor
transition 0.15s
&:active
&:active:hover
transition 0.15s
color $ui-dark-text-color
topBarButtonDark()