public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2026-01-20 20:35:30 +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 }) => (
<span styleName='item-bottom-tagList-item' key={tagName}>
{tagName}
#{tagName}
</span>
)
@@ -52,8 +52,10 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
>
<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'>
{note.title.trim().length > 0
? note.title
@@ -61,23 +63,18 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
}
</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-tagList'>
{note.tags.length > 0
? TagElementList(note.tags)
: ''
: <span styleName='item-bottom-tagList-empty' />
}
</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>
)

130
browser/components/NoteItem.styl
View File

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

60
browser/components/NoteItemSimple.styl
View File

@@ -13,36 +13,40 @@ $control-height = 30px
background-color $ui-noteList-backgroundColor
transition background-color 0.15s
&:hover
background-color alpha($ui-active-color, 20%)
&:active
background-color $ui-active-color
color white
background-color alpha($ui-button--active-backgroundColor, 40%)
.item-simple-title
.item-simple-title-empty
.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
@extend .item-simple
background-color $ui-active-color
color white
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-simple-title
.item-simple-title-empty
border-color transparent
color white
color $ui-text-color
.item-simple-title-icon
color white
color $ui-text-color
&:hover
background-color $ui-active-color
background-color $ui-button--active-backgroundColor
.item-simple-title
font-size 14px
font-size 12px
height 40px
box-sizing border-box
line-height 24px
padding-top 8px
overflow ellipsis
color $ui-text-color
color $ui-inactive-text-color
border-bottom $ui-border
.item-simple-title-icon
@@ -63,23 +67,35 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&: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
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
@extend .item-simple
border-color $ui-dark-borderColor
background-color $ui-active-color
background-color $ui-dark-button--active-backgroundColor
.item-simple-title
.item-simple-title-empty
color white
border-color transparent
&:hover
background-color $ui-active-color
.item-simple-title-icon
.item-simple-bottom-time
color $ui-dark-text-color
.item-simple-bottom-tagList-item
background-color transparent
color $ui-dark-text-color
.item-simple-title
color $ui-dark-text-color
color $ui-inactive-text-color
border-color $ui-dark-borderColor
.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'}
onClick={handleAllNotesButtonClick}
>
<i className='fa fa-book fa-fw' />
<i className='fa fa-archive fa-fw' />
<span styleName='menu-button-label'>All Notes</span>
</button>
<button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}

23
browser/components/SideNavFilter.styl
View File

@@ -5,17 +5,18 @@
navButtonColor()
height 32px
padding 0 15px
font-size 14px
font-size 12px
width 100%
text-align left
overflow ellipsis
.menu-button--active
@extend .menu-button
color $ui-text-color
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
&:hover
background-color $ui-button--active-backgroundColor
color $ui-text-color
.menu-button-label
margin-left 5px
@@ -48,11 +49,15 @@
body[data-theme="dark"]
.menu-button
navDarkButtonColor()
.menu-button--active
@extend .menu-button
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
&:hover
&:active
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color
&: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
&: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
background-color darken($ui-dark-button--hover-backgroundColor, 15%)
&:active
color white
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.root--active
@@ -73,7 +73,7 @@ body[data-theme="dark"]
&:hover
background-color darken($ui-dark-button--hover-backgroundColor, 15%)
&:active
color white
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.button
@@ -83,9 +83,9 @@ body[data-theme="dark"]
transition color background-color 0.15s
border-left 4px solid transparent
&:hover
color white
color $ui-dark-text-color
background-color $ui-dark-button--hover-backgroundColor
.input
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
border none
overflow ellipsis
font-size 14px
font-size 12px
&:first-child
margin-top 0
&: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
color $ui-button--active-color
color $ui-text-color
background-color $ui-button--active-backgroundColor
.folderList-item--active
@extend .folderList-item
color $ui-button--active-color
color $ui-text-color
background-color $ui-button--active-backgroundColor
&:hover
color $ui-button--active-color
color $ui-text-color
background-color $ui-button--active-backgroundColor
.folderList-item-name
display block
flex 1
padding 0 30px
padding 0 15px
height 26px
line-height 26px
border-width 0 0 0 3px
border-width 0 0 0 1px
border-style solid
border-color transparent
overflow hidden
@@ -67,4 +69,24 @@
.folderList-item-name--folded
@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