public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 02:06:29 +00:00
Code Issues Releases Wiki Activity

Merge pull request #424 from BoostIO/Design-update

Browse Source 
Design update at v0.8.8
This commit is contained in:
Kazu Yokomizo
2017-04-15 13:00:36 +09:00
committed by GitHub
parent c120633f14 6ce6a7036b
commit 3dd49c287d
32 changed files with 389 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
browser/components/NoteItem.js
View File

@@ -13,7 +13,7 @@ import styles from './NoteItem.styl'
*/ */
const TagElement = ({ tagName }) => ( const TagElement = ({ tagName }) => (
<span styleName='item-bottom-tagList-item' key={tagName}> <span styleName='item-bottom-tagList-item' key={tagName}>
{tagName} #{tagName}
</span> </span>
) )
@@ -52,8 +52,10 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)} onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
> >
<div styleName='item-wrapper'> <div styleName='item-wrapper'>
<div styleName='item-bottom-time'>{dateDisplay}</div> {note.type === 'SNIPPET_NOTE'
? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
: <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
}
<div styleName='item-title'> <div styleName='item-title'>
{note.title.trim().length > 0 {note.title.trim().length > 0
? note.title ? note.title
@@ -61,23 +63,18 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
} }
</div> </div>
<div styleName='item-bottom-time'>{dateDisplay}</div>
{note.isStarred
? <i styleName='item-star' className='fa fa-star' /> : ''
}
<div styleName='item-bottom'> <div styleName='item-bottom'>
<div styleName='item-bottom-tagList'> <div styleName='item-bottom-tagList'>
{note.tags.length > 0 {note.tags.length > 0
? TagElementList(note.tags) ? TagElementList(note.tags)
: '' : <span styleName='item-bottom-tagList-empty' />
} }
</div> </div>
</div> </div>
{note.type === 'SNIPPET_NOTE'
? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
: <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
}
{note.isStarred
? <i styleName='item-star' className='fa fa-star' /> : ''
}
</div> </div>
</div> </div>
) )

128
browser/components/NoteItem.styl
View File

@@ -7,63 +7,64 @@ $control-height = 30px
.item .item
position relative position relative
padding 0 25px padding 0 20px
user-select none user-select none
cursor pointer cursor pointer
background-color $ui-noteList-backgroundColor background-color $ui-noteList-backgroundColor
transition background-color 0.15s transition background-color 0.2s
&:hover &:hover
background-color alpha($ui-active-color, 20%) background-color alpha($ui-button--active-backgroundColor, 40%)
&:active
background-color $ui-active-color
color white
.item-title .item-title
.item-title-empty
.item-bottom-tagList-empty
.item-bottom-time
.item-title-icon .item-title-icon
color white .item-bottom-time
.item-bottom-tagList-item .item-bottom-tagList-item
background-color transparent transition 0.15s
color white 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-wrapper .item-wrapper
padding 20px 0 padding 15px 0
border-bottom $ui-border border-bottom $ui-border
.item--active .item--active
@extend .item @extend .item
background-color $ui-active-color background-color $ui-button--active-backgroundColor
color white color $ui-text-color
.item-title .item-title
.item-title-empty .item-title-empty
.item-bottom-tagList-empty .item-bottom-tagList-empty
.item-bottom-time .item-bottom-time
.item-title-icon .item-title-icon
color white color $ui-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
background-color transparent background-color transparent
color white color $ui-text-color
.item-wrapper .item-wrapper
border-color transparent border-color transparent
&:hover &:hover
background-color $ui-active-color background-color $ui-button--active-backgroundColor
.item-title
font-size 14px
height 40px
box-sizing border-box
line-height 24px
padding-top 5px
padding-bottom 20px
overflow ellipsis
color $ui-text-color
.item-title-icon .item-title-icon
position absolute position relative
top 20px font-size 12px
right 25px color $ui-inactive-text-color
font-size 14px
.item-title
font-size 13px
position relative
top -12px
left 20px
padding-right 15px
padding-bottom 4px
overflow ellipsis
color $ui-inactive-text-color color $ui-inactive-text-color
.item-title-empty .item-title-empty
@@ -84,37 +85,33 @@ $control-height = 30px
flex 1 flex 1
overflow ellipsis overflow ellipsis
line-height 20px line-height 20px
color #FFFFFF padding-left 2px
.item-bottom-tagList-item .item-bottom-tagList-item
font-size 12px font-size 10px
margin-right 8px margin-right 8px
padding 0 10px padding 0
height 20px height 20px
box-sizing border-box box-sizing border-box
border-radius 20px border-radius 20px
vertical-align middle vertical-align middle
background-color $ui-tag-backgroundColor background-color transparent
color #FFFFFF
.item-bottom-tagList-empty
color $ui-inactive-text-color color $ui-inactive-text-color
vertical-align middle
font-size 10px
margin-left 5px
.item-bottom-time .item-bottom-time
color $ui-inactive-text-color color $ui-inactive-text-color
font-size 12px font-size 10px
padding-left 2px
padding-bottom 2px
.item-star .item-star
position absolute position absolute
top 20px top 19px
right 29px left 5px
width 34px width 34px
height 34px height 34px
color $ui-favorite-star-button-color color $ui-favorite-star-button-color
font-size 14px font-size 12px
padding 0 padding 0
border-radius 17px border-radius 17px
@@ -127,41 +124,50 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor background-color $ui-dark-noteList-backgroundColor
&:active &:active
background-color $ui-active-color 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 &:hover
background-color alpha($ui-active-color, 20%) background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.item-title
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color
.item-wrapper .item-wrapper
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
.item--active .item--active
@extend .item
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
background-color $ui-active-color background-color $ui-dark-button--active-backgroundColor
.item-wrapper .item-wrapper
border-color transparent border-color transparent
.item-title .item-title
color white .item-title-icon
.item-bottom-time
color $ui-dark-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
background-color transparent background-color transparent
color white color $ui-dark-text-color
.item-bottom-tagList-empty
color white
&:hover
background-color $ui-active-color
.item-title .item-title
color $ui-dark-text-color color $ui-inactive-text-color
.item-title-icon .item-title-icon
color $ui-darkinactive-text-color color $ui-inactive-text-color
.item-title-empty .item-title-empty
color $ui-dark-inactive-text-color color $ui-inactive-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
background-color $ui-dark-tag-backgroundColor background-color transparent
color $ui-dark-text-color color $ui-inactive-text-color
.item-bottom-tagList-empty .item-bottom-tagList-empty
color $ui-inactive-text-color color $ui-inactive-text-color

60
browser/components/NoteItemSimple.styl
View File

@@ -13,36 +13,40 @@ $control-height = 30px
background-color $ui-noteList-backgroundColor background-color $ui-noteList-backgroundColor
transition background-color 0.15s transition background-color 0.15s
&:hover &:hover
background-color alpha($ui-active-color, 20%) background-color alpha($ui-button--active-backgroundColor, 40%)
&:active
background-color $ui-active-color
color white
.item-simple-title .item-simple-title
.item-simple-title-empty .item-simple-title-empty
.item-simple-title-icon .item-simple-title-icon
color white color $ui-text-color
&:active
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
color $ui-text-color
.item-simple--active .item-simple--active
@extend .item-simple @extend .item-simple
background-color $ui-active-color background-color $ui-button--active-backgroundColor
color white color $ui-text-color
.item-simple-title .item-simple-title
.item-simple-title-empty .item-simple-title-empty
border-color transparent border-color transparent
color white color $ui-text-color
.item-simple-title-icon .item-simple-title-icon
color white color $ui-text-color
&:hover &:hover
background-color $ui-active-color background-color $ui-button--active-backgroundColor
.item-simple-title .item-simple-title
font-size 14px font-size 12px
height 40px height 40px
box-sizing border-box box-sizing border-box
line-height 24px line-height 24px
padding-top 8px padding-top 8px
overflow ellipsis overflow ellipsis
color $ui-text-color color $ui-inactive-text-color
border-bottom $ui-border border-bottom $ui-border
.item-simple-title-icon .item-simple-title-icon
@@ -63,23 +67,35 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor background-color $ui-dark-noteList-backgroundColor
&:active &:active
background-color $ui-active-color background-color $ui-dark-button--active-backgroundColor
.item-simple-title
.item-simple-title-icon
.item-simple-bottom-time
.item-simple-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color
&:hover &:hover
background-color alpha($ui-active-color, 20%) background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.item-simple-title
.item-simple-title-icon
.item-simple-bottom-time
.item-simple-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color
.item-simple--active .item-simple--active
@extend .item-simple
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
background-color $ui-active-color background-color $ui-dark-button--active-backgroundColor
.item-simple-title .item-simple-title
.item-simple-title-empty .item-simple-title-icon
color white .item-simple-bottom-time
border-color transparent color $ui-dark-text-color
&:hover .item-simple-bottom-tagList-item
background-color $ui-active-color background-color transparent
color $ui-dark-text-color
.item-simple-title .item-simple-title
color $ui-dark-text-color color $ui-inactive-text-color
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
.item-simple-title-icon .item-simple-title-icon

2
browser/components/SideNavFilter.js
View File

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

19
browser/components/SideNavFilter.styl
View File

@@ -5,17 +5,18 @@
navButtonColor() navButtonColor()
height 32px height 32px
padding 0 15px padding 0 15px
font-size 14px font-size 12px
width 100% width 100%
text-align left text-align left
overflow ellipsis overflow ellipsis
.menu-button--active .menu-button--active
@extend .menu-button @extend .menu-button
color $ui-text-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
color $ui-button--active-color
&:hover &:hover
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
color $ui-text-color
.menu-button-label .menu-button-label
margin-left 5px margin-left 5px
@@ -48,11 +49,15 @@
body[data-theme="dark"] body[data-theme="dark"]
.menu-button .menu-button
navDarkButtonColor() &:active
.menu-button--active
@extend .menu-button
background-color $ui-dark-button--active-backgroundColor background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color color $ui-dark-text-color
&:hover &:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-dark-text-color
.menu-button--active
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor background-color $ui-dark-button--active-backgroundColor
&:active
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color

8
browser/components/SnippetTab.styl
View File

@@ -60,7 +60,7 @@ body[data-theme="dark"]
&:hover &:hover
background-color darken($ui-dark-button--hover-backgroundColor, 15%) background-color darken($ui-dark-button--hover-backgroundColor, 15%)
&:active &:active
color white color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor background-color $ui-dark-button--active-backgroundColor
.root--active .root--active
@@ -73,7 +73,7 @@ body[data-theme="dark"]
&:hover &:hover
background-color darken($ui-dark-button--hover-backgroundColor, 15%) background-color darken($ui-dark-button--hover-backgroundColor, 15%)
&:active &:active
color white color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor background-color $ui-dark-button--active-backgroundColor
.button .button
@@ -83,9 +83,9 @@ body[data-theme="dark"]
transition color background-color 0.15s transition color background-color 0.15s
border-left 4px solid transparent border-left 4px solid transparent
&:hover &:hover
color white color $ui-dark-text-color
background-color $ui-dark-button--hover-backgroundColor background-color $ui-dark-button--hover-backgroundColor
.input .input
background-color $ui-dark-button--hover-backgroundColor background-color $ui-dark-button--hover-backgroundColor
color white color $ui-dark-text-color

38
browser/components/StorageItem.styl
View File

@@ -13,30 +13,32 @@
text-align left text-align left
border none border none
overflow ellipsis overflow ellipsis
font-size 14px font-size 12px
&:first-child &:first-child
margin-top 0 margin-top 0
&:hover &:hover
background-color $ui-button--hover-backgroundColor color $ui-text-color
background-color alpha($ui-button--active-backgroundColor, 20%)
transition background-color 0.15s
&:active &:active
color $ui-button--active-color color $ui-text-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
.folderList-item--active .folderList-item--active
@extend .folderList-item @extend .folderList-item
color $ui-button--active-color color $ui-text-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
&:hover &:hover
color $ui-button--active-color color $ui-text-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
.folderList-item-name .folderList-item-name
display block display block
flex 1 flex 1
padding 0 30px padding 0 15px
height 26px height 26px
line-height 26px line-height 26px
border-width 0 0 0 3px border-width 0 0 0 1px
border-style solid border-style solid
border-color transparent border-color transparent
overflow hidden overflow hidden
@@ -67,4 +69,24 @@
.folderList-item-name--folded .folderList-item-name--folded
@extend .folderList-item-name @extend .folderList-item-name
padding-left 14px padding-left 12px
body[data-theme="dark"]
.folderList-item
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-dark-text-color
&:active
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.folderList-item--active
@extend .folderList-item
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
&:active
background-color $ui-dark-button--active-backgroundColor
&:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor

2
browser/main/Detail/FolderSelect.styl
View File

@@ -26,7 +26,7 @@
overflow ellipsis overflow ellipsis
.idle-label-name .idle-label-name
font-size 16px font-size 14px
padding 2px padding 2px
.idle-label-name-surfix .idle-label-name-surfix

6
browser/main/Detail/SnippetNoteDetail.styl
View File

@@ -22,6 +22,7 @@
height 80px height 80px
.body .description textarea .body .description textarea
outline none
display block display block
height 100% height 100%
width 100% width 100%
@@ -62,9 +63,6 @@
button button
navButtonColor() navButtonColor()
height 24px height 24px
border-width 0 1px 0 0
border-style solid
border-color $ui-borderColor
&:active .update-icon &:active .update-icon
color white color white
@@ -83,7 +81,7 @@ body[data-theme="dark"]
.body .description textarea .body .description textarea
background-color $ui-dark-noteDetail-backgroundColor background-color $ui-dark-noteDetail-backgroundColor
color white color $ui-dark-text-color
.tabList .tabList
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor

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

@@ -3,6 +3,7 @@
top 0 top 0
padding 0 padding 0
&:hover &:hover
background-color #DCDCDC
.icon .icon
transform rotate(-72deg) transform rotate(-72deg)
.tooltip .tooltip
@@ -18,3 +19,8 @@
.icon .icon
transition transform 0.15s transition transform 0.15s
body[data-theme="dark"]
.root
&:hover
background-color #272B32

2
browser/main/Detail/TagSelect.js
View File

@@ -107,7 +107,7 @@ class TagSelect extends React.Component {
<span styleName='tag' <span styleName='tag'
key={tag} key={tag}
> >
<span styleName='tag-label'>{tag}</span> <span styleName='tag-label'>#{tag}</span>
<button styleName='tag-removeButton' <button styleName='tag-removeButton'
onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)} onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
> >

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

@@ -16,7 +16,7 @@
padding-left 10px padding-left 10px
vertical-align middle vertical-align middle
height 20px height 20px
background-color $ui-tag-backgroundColor background-color alpha($ui-tag-backgroundColor, 10%)
border-radius 20px border-radius 20px
overflow hidden overflow hidden
clearfix() clearfix()
@@ -39,9 +39,9 @@
padding-right 4px padding-right 4px
.tag-label .tag-label
font-size 12px font-size 11px
font-weight bold font-weight 600
color: #FFFFFF color: alpha($ui-text-color, 80%)
float left float left
height 20px height 20px
line-height 20px line-height 20px
@@ -83,7 +83,7 @@ body[data-theme="dark"]
color $ui-dark-button-color color $ui-dark-button-color
.tag .tag
background-color $ui-dark-tag-backgroundColor background-color alpha($ui-dark-tag-backgroundColor, 60%)
.tag-removeButton .tag-removeButton
border-color $ui-button--focus-borderColor border-color $ui-button--focus-borderColor

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

@@ -26,6 +26,8 @@ $control-height = 30px
padding 0 padding 0
border none border none
background-color transparent background-color transparent
outline none
cursor pointer
font-size 10px font-size 10px
.control-button .control-button
@@ -33,18 +35,18 @@ $control-height = 30px
padding 0 padding 0
background-color transparent background-color transparent
border none border none
color $ui-inactive-text-color color alpha($ui-inactive-text-color, 60%)
transition 0.15s transition 0.15s
&:active, &:active:hover &:active, &:active:hover
color $ui-active-color color $ui-inactive-text-color
&:hover &:hover
color $ui-text-color color $ui-inactive-text-color
.control-button--active .control-button--active
@extend .control-button @extend .control-button
color $ui-active-color color $ui-inactive-text-color
&:hover &:hover
color $ui-active-color color $ui-inactive-text-color
.list .list
absolute left right bottom absolute left right bottom
@@ -68,3 +70,7 @@ body[data-theme="dark"]
&:hover &:hover
color $ui-dark-text-color color $ui-dark-text-color
.control-button--active
color $ui-dark-text-color
&:active
color $ui-dark-text-color

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

@@ -12,9 +12,14 @@
navButtonColor() navButtonColor()
height $topBar-height height $topBar-height
padding 0 15px padding 0 15px
font-size 14px font-size 12px
width 100% width 100%
text-align left text-align left
&:hover
color $ui-text-color
&:active, &:active:hover
color $ui-text-color
background-color alpha($ui-button--active-backgroundColor, 20%)
.top-menu-label .top-menu-label
margin-left 5px margin-left 5px
@@ -110,10 +115,10 @@ body[data-theme="dark"]
.top-menu .top-menu
navDarkButtonColor() navDarkButtonColor()
&:active
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.storageList-empty .storageList-empty
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
.navToggle
navDarkButtonColor()

89
browser/main/SideNav/StorageItem.styl
View File

@@ -8,43 +8,37 @@
width 100% width 100%
margin-bottom 5px margin-bottom 5px
transition 0.15s transition 0.15s
&:hover
background-color $ui-button--hover-backgroundColor
&:active
.header-toggleButton
.header-addFolderButton
color white
&:active
color $ui-active-color
.header--active .header--active
@extend .header
.header-info
color $ui-button--active-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
transition color background-color 0.15s
.header--active
.header-toggleButton .header-toggleButton
color $ui-text-color
.header--active
.header-info
color $ui-text-color
.header--active
.header-addFolderButton .header-addFolderButton
color white color $ui-text-color
&:active
&:hover
&:hover:active
color white
.header-toggleButton .header-toggleButton
navButtonColor()
position absolute position absolute
left 0 left 0
width 25px width 25px
height 26px height 26px
padding 0 padding 0
border none border none
color $ui-inactive-text-color
background-color transparent
&:hover &:hover
background-color transparent
color $ui-text-color color $ui-text-color
&:active
color $ui-active-color
.header-info .header-info
navButtonColor()
display block display block
width 100% width 100%
height 30px height 30px
@@ -52,33 +46,26 @@
padding-right 10px padding-right 10px
line-height 26px line-height 26px
cursor pointer cursor pointer
font-size 14px font-size 13px
border none border none
overflow ellipsis overflow ellipsis
text-align left text-align left
background-color transparent
color $ui-inactive-text-color
&:active
color $ui-button--active-color
background-color $ui-button--active-backgroundColor
.header-info-path .header-info-path
font-size 10px font-size 10px
margin 0 5px margin 0 5px
.header-addFolderButton .header-addFolderButton
navButtonColor()
position absolute position absolute
right 0 right 0
width 25px width 25px
height 26px height 26px
padding 0 padding 0
border none border none
color $ui-inactive-text-color
background-color transparent
&:hover &:hover
background-color transparent
color $ui-text-color color $ui-text-color
&:active
color $ui-active-color
.root--folded .root--folded
@extend .root @extend .root
@@ -108,16 +95,38 @@
margin 0 5px margin 0 5px
body[data-theme="dark"] body[data-theme="dark"]
.header-toggleButton .header--active
.header-addFolderButton background-color $ui-dark-button--active-backgroundColor
color $ui-dark-inactive-text-color transition color background-color 0.15s
&:hover
color $ui-dark-text-color
&:active
color $ui-dark-active-color
.header--active .header--active
.header-toggleButton .header-toggleButton
.header-addFolderButton color $ui-dark-text-color
color white
.header--active
.header-info
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
&:active &:active
color white color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.header--active
.header-addFolderButton
color $ui-dark-text-color
.header-toggleButton
&:hover
color $ui-dark-text-color
.header-info
&:hover
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.header-addFolderButton
&:hover
color $ui-dark-text-color

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

@@ -4,7 +4,6 @@
absolute bottom left right absolute bottom left right
height $statusBar-height height $statusBar-height
background-color $ui-noteDetail-backgroundColor background-color $ui-noteDetail-backgroundColor
border-top $ui-border
display flex display flex
box-shadow $note-detail-box-shadow box-shadow $note-detail-box-shadow
@@ -24,9 +23,6 @@
.zoom .zoom
navButtonColor() navButtonColor()
height 24px height 24px
border-width 0 1px
border-style solid
border-color $ui-borderColor
.update .update
navButtonColor() navButtonColor()

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

@@ -44,12 +44,13 @@ $control-height = 34px
.control-search-optionList .control-search-optionList
position fixed position fixed
z-index 200 z-index 200
width 275px width 500px
height 175px height 250px
overflow-y auto overflow-y auto
background-color $modal-background background-color $modal-background
border-radius 2px border-radius 2px
box-shadow 2px 2px 10px gray border-none
box-shadow 0 0 1px rgba(76,86,103,.25), 0 2px 18px rgba(31,37,50,.32)
.control-search-optionList-item .control-search-optionList-item
height 50px height 50px
@@ -59,10 +60,10 @@ $control-height = 34px
cursor pointer cursor pointer
overflow ellipsis overflow ellipsis
&:hover &:hover
background-color alpha($ui-active-color, 10%) background-color alpha(#D4D4D4, 30%)
.control-search-optionList-item-folder .control-search-optionList-item-folder
border-left 4px solid transparent border-left 2px solid transparent
padding 2px 5px padding 2px 5px
color $ui-text-color color $ui-text-color
overflow ellipsis overflow ellipsis

4
browser/main/global.styl
View File

@@ -1,6 +1,6 @@
global-reset() global-reset()
DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif DEFAULT_FONTS = 'OpenSans', helvetica, arial, sans-serif
html, body html, body
width 100% width 100%
@@ -11,7 +11,7 @@ body
font-family DEFAULT_FONTS font-family DEFAULT_FONTS
color textColor color textColor
font-size fontSize font-size fontSize
font-weight 400 font-weight 200
button, input, select, textarea button, input, select, textarea
font-family DEFAULT_FONTS font-family DEFAULT_FONTS

4
browser/main/modals/CreateFolderModal.js
View File

@@ -78,7 +78,7 @@ class CreateFolderModal extends React.Component {
<div styleName='title'>Create new folder</div> <div styleName='title'>Create new folder</div>
</div> </div>
<button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}> <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
<div styleName='close-mark'>X</div> <div styleName='close-mark'>×</div>
<div styleName='close-text'>esc</div> <div styleName='close-text'>esc</div>
</button> </button>
@@ -95,7 +95,7 @@ class CreateFolderModal extends React.Component {
<button styleName='control-confirmButton' <button styleName='control-confirmButton'
onClick={(e) => this.handleConfirmButtonClick(e)} onClick={(e) => this.handleConfirmButtonClick(e)}
> >
Create Folder Create
</button> </button>
</div> </div>
</div> </div>

34
browser/main/modals/CreateFolderModal.styl
View File

@@ -1,15 +1,15 @@
.root .root
modal() modal()
width 700px width 500px
height 200px height 270px
overflow hidden overflow hidden
position relative position relative
padding 0 40px padding 0 40px
.header .header
height 50px height 70px
margin-bottom 10px margin-bottom 10px
margin-top 10px margin-top 20px
font-size 18px font-size 18px
line-height 50px line-height 50px
background-color $ui-backgroundColor background-color $ui-backgroundColor
@@ -19,34 +19,34 @@
font-size 15px font-size 15px
.close .close
height 50px height 70px
position absolute position absolute
background-color transparent background-color transparent
color $ui-inactive-text-color color $ui-inactive-text-color
border none border none
top 7px top 7px
right 10px right 30px
text-align center text-align center
width top-bar--height width top-bar--height
height top-bar--height height top-bar--height
.control-folder-label .control-folder-label
text-align left text-align left
font-size 14px font-size 12px
color $ui-text-color color $ui-text-color
.control-folder-input .control-folder-input
display block display block
height 30px height 30px
width 620px width 420px
padding 0 5px padding 0 5px
margin 10px auto 15px margin 10px auto 15px
border 1px solid #C9C9C9 // TODO: use variable. border 1px solid #C9C9C9 // TODO: use variable.
border-radius 5px border-radius 2px
background-color transparent background-color transparent
outline none outline none
vertical-align middle vertical-align middle
font-size 18px font-size 14px
&:disabled &:disabled
background-color $ui-input--disabled-backgroundColor background-color $ui-input--disabled-backgroundColor
&:focus, &:active &:focus, &:active
@@ -54,20 +54,21 @@
.control-confirmButton .control-confirmButton
display block display block
float right
height 30px height 30px
width 620px width 100px
border none border none
border-radius 5px border-radius 2px
padding 0 25px padding 0 25px
margin 20px auto margin 20px auto
font-size 14px font-size 12px
colorPrimaryButton() colorPrimaryButton()
body[data-theme="dark"] body[data-theme="dark"]
.root .root
modalDark() modalDark()
width 700px width 500px
height 200px height 270px
overflow hidden overflow hidden
position relative position relative
padding 0 40px padding 0 40px
@@ -91,3 +92,6 @@ body[data-theme="dark"]
.description .description
color $ui-inactive-text-color color $ui-inactive-text-color
.control-confirmButton
colorDarkPrimaryButton()

2
browser/main/modals/NewNoteModal.js
View File

@@ -103,7 +103,7 @@ class NewNoteModal extends React.Component {
<div styleName='title'>Make a Note</div> <div styleName='title'>Make a Note</div>
</div> </div>
<button styleName='closeButton' onClick={(e) => this.handleCloseButtonClick(e)}> <button styleName='closeButton' onClick={(e) => this.handleCloseButtonClick(e)}>
<div styleName='close-mark'>X</div> <div styleName='close-mark'>×</div>
<div styleName='close-text'>esc</div> <div styleName='close-text'>esc</div>
</button> </button>

2
browser/main/modals/NewNoteModal.styl
View File

@@ -73,7 +73,7 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
background-color transparent background-color transparent
&:focus &:focus
colorPrimaryButton() colorDarkPrimaryButton()
.description .description
color $ui-inactive-text-color color $ui-inactive-text-color

18
browser/main/modals/PreferencesModal/ConfigTab.styl
View File

@@ -32,14 +32,20 @@
.group-section-control .group-section-control
flex 1 flex 1
.group-section-control select
outline none
border 1px solid $ui-borderColor
background-color transparent
.group-section-control-input .group-section-control-input
height 30px height 30px
vertical-align middle vertical-align middle
width 400px width 400px
font-size $tab--button-font-size font-size $tab--button-font-size
border solid 1px $border-color border solid 1px $border-color
border-radius $tab--input-border-radius border-radius 2px
padding 0 5px padding 0 5px
outline none
&:disabled &:disabled
background-color $ui-input--disabled-backgroundColor background-color $ui-input--disabled-backgroundColor
@@ -64,7 +70,7 @@
.group-control-leftButton .group-control-leftButton
colorDefaultButton() colorDefaultButton()
border none border none
border-radius 5px border-radius 2px
font-size $tab--button-font-size font-size $tab--button-font-size
height $tab--button-height height $tab--button-height
padding 0 15px padding 0 15px
@@ -74,17 +80,17 @@
float right float right
colorPrimaryButton() colorPrimaryButton()
border none border none
border-radius $tab--button-border-radius border-radius 2px
font-size $tab--button-font-size font-size $tab--button-font-size
height $tab--button-height height 35px
padding 0 15px width 100px
margin-right 10px margin-right 10px
.group-hint .group-hint
border $ui-border border $ui-border
padding 10px 15px padding 10px 15px
margin 15px 0 margin 15px 0
border-radius 5px border-radius 2px
background-color $ui-backgroundColor background-color $ui-backgroundColor
color $ui-inactive-text-color color $ui-inactive-text-color
ul ul

39
browser/main/modals/PreferencesModal/InfoTab.js
View File

@@ -30,28 +30,37 @@ class InfoTab extends React.Component {
<div styleName='icon-right'> <div styleName='icon-right'>
<div styleName='appId'>Boostnote {appVersion}</div> <div styleName='appId'>Boostnote {appVersion}</div>
<div styleName='description'> <div styleName='description'>
A simple markdown/snippet note app for developer. An open source note-taking app made for programmers just like you.
</div> </div>
</div> </div>
</div> </div>
<div styleName='clear' />
<div styleName='madeBy'>Made by&nbsp;
<a href='http://maisin.co/'
onClick={(e) => this.handleLinkClick(e)}
>MAISIN&CO.</a></div>
<div styleName='copyright'>Copyright 2017 MAISIN&CO. All rights reserved.</div>
</div> </div>
<ul styleName='list'> <ul styleName='list'>
<li> <li>
The codes of this app is published under GPLv3 license. <a href='https://boostnote.io'
</li>
<li>
Any kinds of feedback, creating a new issue or a pull request, would be welcomed.
</li>
<li>
Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'
onClick={(e) => this.handleLinkClick(e)} onClick={(e) => this.handleLinkClick(e)}
>https://github.com/BoostIO/Boostnote/issues</a> >Website</a>
</li>
<li>
<a href='https://boostnote.paintory.com/'
onClick={(e) => this.handleLinkClick(e)}
>Boostnote Shop</a>: Products are shipped to all over the world 🌏
</li>
<li>
<a href='https://www.patreon.com/boostnote'
onClick={(e) => this.handleLinkClick(e)}
>Donation via Patreon</a>: Thank you for your support 🎉
</li>
<li>
<a href='https://github.com/BoostIO/Boostnote/issues'
onClick={(e) => this.handleLinkClick(e)}
>GitHub Issue</a>: Let us hear your feedback 🙌
</li>
<li styleName='cc'>
Copyright (C) 2017 Maisin&Co.
</li>
<li styleName='cc'>
License: GPL v3
</li> </li>
</ul> </ul>
</div> </div>

26
browser/main/modals/PreferencesModal/InfoTab.styl
View File

@@ -4,11 +4,9 @@
padding 15px padding 15px
white-space pre white-space pre
line-height 1.4 line-height 1.4
color $ui-text-color color alpha($ui-text-color, 90%)
width 100% width 100%
font-size 14px
.clear
clear both
.top .top
text-align left text-align left
@@ -34,26 +32,16 @@
.description .description
font-size 14px font-size 14px
.madeBy
font-size 14px
$ui-inactive-text-color
.copyright
font-size 14px
$ui-inactive-text-color
.list .list
list-style square list-style square
padding-left 2em padding-left 2em
li li
white-space normal white-space normal
padding-bottom 10px
a
color #4E8EC6
text-decoration none
body[data-theme="dark"] body[data-theme="dark"]
.root .root
color $tab--dark-text-color color alpha($tab--dark-text-color, 80%)
.madeBy
color $ui-dark-inactive-text-color
.copyright
color $ui-dark-inactive-text-color

21
browser/main/modals/PreferencesModal/PreferencesModal.styl
View File

@@ -45,22 +45,20 @@ top-bar--height = 50px
text-align left text-align left
width 100px width 100px
margin 4px 0 margin 4px 0
padding 7px 0 padding 5px 0
padding-left 7px padding-left 10px
border none border none
border-radius 3px border-radius 2px
background-color transparent background-color transparent
color $ui-text-color color $ui-text-color
font-size 14px font-size 14px
&:hover
color $ui-active-color
.nav-button--active .nav-button--active
@extend .nav-button @extend .nav-button
color white color $ui-text-color
background-color $ui-active-color background-color $ui-button--active-backgroundColor
&:hover &:hover
color white color $ui-text-color
.nav-button-icon .nav-button-icon
display block display block
@@ -91,3 +89,10 @@ body[data-theme="dark"]
color $tab--dark-text-color color $tab--dark-text-color
&:hover &:hover
color $ui-dark-text-color color $ui-dark-text-color
.nav-button--active
@extend .nav-button
color white
background-color $dark-primary-button-background--active
&:hover
color white

5
browser/main/modals/PreferencesModal/StorageItem.styl
View File

@@ -35,7 +35,7 @@
border $ui-border border $ui-border
border-radius 2px border-radius 2px
padding 0 5px padding 0 5px
outline none
.header-control .header-control
float right float right
@@ -71,7 +71,7 @@
background-color darken(white, 3%) background-color darken(white, 3%)
.folderList-item-left .folderList-item-left
height 30px height 30px
border-left solid 4px transparent border-left solid 1px transparent
padding 0 10px padding 0 10px
line-height 30px line-height 30px
float left float left
@@ -105,6 +105,7 @@
border $ui-border border $ui-border
border-radius 2px border-radius 2px
padding 0 5px padding 0 5px
outline none
.folderList-item-right .folderList-item-right
float right float right

5
browser/main/modals/PreferencesModal/StoragesTab.styl
View File

@@ -28,12 +28,15 @@
.list-control .list-control
height 30px height 30px
.list-control-addStorageButton .list-control-addStorageButton
position absolute
top 7px
right 20px
height $tab--button-height height $tab--button-height
padding 0 15px padding 0 15px
border $ui-border border $ui-border
colorDefaultButton() colorDefaultButton()
font-size $tab--button-font-size font-size $tab--button-font-size
border-radius $tab--button-border-radius border-radius 2px
.addStorage .addStorage
margin-bottom 15px margin-bottom 15px

2
browser/main/modals/PreferencesModal/UiTab.js
View File

@@ -253,7 +253,7 @@ class UiTab extends React.Component {
<button styleName='group-control-rightButton' <button styleName='group-control-rightButton'
onClick={(e) => this.handleSaveUIClick(e)} onClick={(e) => this.handleSaveUIClick(e)}
> >
Save UI Config Save
</button> </button>
</div> </div>
</div> </div>

2
browser/main/modals/PreferencesModal/index.js
View File

@@ -118,7 +118,7 @@ class Preferences extends React.Component {
<p>Your menu for Boostnote</p> <p>Your menu for Boostnote</p>
</div> </div>
<button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}> <button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
<div styleName='top-bar-close-mark'>X</div> <div styleName='top-bar-close-mark'>×</div>
<div styleName='top-bar-close-text'>esc</div> <div styleName='top-bar-close-text'>esc</div>
</button> </button>
<div styleName='nav'> <div styleName='nav'>

7
browser/main/modals/RenameFolderModal.styl
View File

@@ -6,7 +6,7 @@
.header .header
height 50px height 50px
font-size 18px font-size 16px
line-height 50px line-height 50px
padding 0 15px padding 0 15px
background-color $ui-backgroundColor background-color $ui-backgroundColor
@@ -40,7 +40,7 @@
background-color transparent background-color transparent
outline none outline none
vertical-align middle vertical-align middle
font-size 18px font-size 14px
text-align center text-align center
&:disabled &:disabled
background-color $ui-input--disabled-backgroundColor background-color $ui-input--disabled-backgroundColor
@@ -76,3 +76,6 @@ body[data-theme="dark"]
.control-input .control-input
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
color $ui-dark-text-color color $ui-dark-text-color
.control-confirmButton
colorDarkPrimaryButton()

54
browser/styles/index.styl
View File

@@ -11,7 +11,7 @@ $sideNav--folded-width = 44px
$topBar-height = 60px $topBar-height = 60px
// UI default // UI default
$ui-text-color = #515151 $ui-text-color = #333333
$ui-inactive-text-color = #939395 $ui-inactive-text-color = #939395
$ui-borderColor = #D1D1D1 $ui-borderColor = #D1D1D1
$ui-backgroundColor = #FFFFFF $ui-backgroundColor = #FFFFFF
@@ -23,9 +23,9 @@ $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
// UI Button // UI Button
$ui-button-color = #939395 $ui-button-color = #939395
$ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08) $ui-button--hover-backgroundColor = #D9D9D9
$ui-button--active-color = white $ui-button--active-color = white
$ui-button--active-backgroundColor = #6AA5E9 $ui-button--active-backgroundColor = #D9D9D9
$ui-button--focus-borderColor = lighten(#369DCD, 25%) $ui-button--focus-borderColor = lighten(#369DCD, 25%)
// UI Tooltip // UI Tooltip
@@ -67,29 +67,43 @@ $active-border = solid 1px $active-border-color
// Default button // Default button
$default-button-background = white $default-button-background = white
$default-button-background--hover = #e6e6e6 $default-button-background--hover = #e6e6e6
$default-button-background--active = #d4d4d4 $default-button-background--active = #D9D9D9
colorDefaultButton() colorDefaultButton()
background-color $default-button-background background-color $default-button-background
&:hover &:hover
background-color $default-button-background--hover background-color transparent
&:active &:active
&:active:hover &:active:hover
background-color $default-button-background--active background-color $default-button-background--active
// Primary button(Brand color) // Primary button(Brand color)
$primary-button-background = $brand-color $primary-button-background = alpha($brand-color, 60%)
$primary-button-background--hover = darken($brand-color, 5%) $primary-button-background--hover = darken($brand-color, 5%)
$primary-button-background--active = darken($brand-color, 10%) $primary-button-background--active = darken($brand-color, 10%)
colorPrimaryButton() colorPrimaryButton()
color white color $ui-text-color
background-color $primary-button-background background-color $default-button-background--hover
&:hover &:hover
background-color $primary-button-background--hover background-color $default-button-background--active
&:active &:active
&:active:hover &:active:hover
background-color $primary-button-background--active background-color $default-button-background--active
// Dark Primary button(Brand color)
$dark-primary-button-background = alpha(#3A404C, 80%)
$dark-primary-button-background--hover = #3A404C
$dark-primary-button-background--active = #3A404C
colorDarkPrimaryButton()
color white
background-color $dark-primary-button-background
&:hover
background-color $dark-primary-button-background--hover
&:active
&:active:hover
background-color $dark-primary-button-background--active
// Danger button(Brand color) // Danger button(Brand color)
$danger-button-background = #c9302c $danger-button-background = #c9302c
@@ -115,11 +129,13 @@ navButtonColor()
background-color transparent background-color transparent
transition color background-color 0.15s transition color background-color 0.15s
&:hover &:hover
background-color $ui-button--hover-backgroundColor background-color alpha($ui-button--active-backgroundColor, 20%)
transition color background-color 0.15s
color $ui-text-color
&:active, &:active:hover &:active, &:active:hover
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
color $ui-button--active-color color $ui-text-color
transition color background-color 0.15s
/** /**
* # Modal Stuff * # Modal Stuff
* These will be moved lib/modal * These will be moved lib/modal
@@ -137,7 +153,7 @@ modal()
background-color $modal-background background-color $modal-background
overflow hidden overflow hidden
border-radius $modal-border-radius border-radius $modal-border-radius
box-shadow 2px 2px 10px gray box-shadow 0 0 1px rgba(76,86,103,.15), 0 2px 18px rgba(31,37,50,.22)
topBarButtonLight() topBarButtonLight()
width 34px width 34px
@@ -158,15 +174,16 @@ topBarButtonLight()
opacity 1 opacity 1
// Dark theme // Dark theme
$ui-dark-active-color = #3A404C
$ui-dark-borderColor = lighten(#21252B, 20%) $ui-dark-borderColor = lighten(#21252B, 20%)
$ui-dark-backgroundColor = #1D1D1D $ui-dark-backgroundColor = #1D1D1D
$ui-dark-noteList-backgroundColor = #181818 $ui-dark-noteList-backgroundColor = #181818
$ui-dark-noteDetail-backgroundColor = #0D0D0D $ui-dark-noteDetail-backgroundColor = #0D0D0D
$ui-dark-tag-backgroundColor = rgba(255, 255, 255, 0.3) $ui-dark-tag-backgroundColor = #3A404C
$dark-background-color = lighten($ui-dark-backgroundColor, 10%) $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-text-color = #DDDDDD $ui-dark-text-color = #DDDDDD
$ui-dark-button--active-color = white $ui-dark-button--active-color = white
$ui-dark-button--active-backgroundColor = #6AA5E9 $ui-dark-button--active-backgroundColor = #3A404C
$ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
$ui-dark-topbar-button-color = #939395 $ui-dark-topbar-button-color = #939395
@@ -202,12 +219,11 @@ navDarkButtonColor()
background-color transparent background-color transparent
transition color background-color 0.15s transition color background-color 0.15s
&:hover &:hover
color white color $ui-dark-text-color
background-color $ui-dark-button--hover-backgroundColor background-color $ui-dark-button--hover-backgroundColor
&:active &:active
&:active:hover &:active:hover
background-color $ui-dark-button--active-backgroundColor color $ui-dark-text-color
color $ui-dark-button--active-color
topBarButtonDark() topBarButtonDark()
border-color $ui-dark-borderColor border-color $ui-dark-borderColor