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

modify: add border line on NoteList component

Browse Source
This commit is contained in:
sota1235
2016-12-29 18:46:11 +09:00
parent 47925489fd
commit 856979b455
2 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -51,6 +51,7 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)} onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)} onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
> >
<div styleName='item-wrapper'>
<div styleName='item-bottom-time'>{dateDisplay}</div> <div styleName='item-bottom-time'>{dateDisplay}</div>
<div styleName='item-title'> <div styleName='item-title'>
@@ -73,6 +74,7 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
<i styleName='item-star' className='fa fa-star' /> : '' <i styleName='item-star' className='fa fa-star' /> : ''
} }
</div> </div>
</div>
) )
NoteItem.propTypes = { NoteItem.propTypes = {

9
browser/main/NoteList/NoteItem.styl
View File

@@ -7,7 +7,7 @@ $control-height = 30px
.item .item
position relative position relative
padding 20px 25px padding 0 25px
user-select none user-select none
cursor pointer cursor pointer
background-color $ui-noteList-backgroundColor background-color $ui-noteList-backgroundColor
@@ -26,6 +26,10 @@ $control-height = 30px
background-color transparent background-color transparent
color white color white
.item-wrapper
padding 20px 0
border-bottom $ui-border
.item--active .item--active
@extend .item @extend .item
background-color $ui-active-color background-color $ui-active-color
@@ -115,6 +119,9 @@ body[data-theme="dark"]
&:hover &:hover
background-color alpha($ui-active-color, 20%) background-color alpha($ui-active-color, 20%)
.item-wrapper
border-color $ui-dark-borderColor
.item--active .item--active
@extend .item @extend .item
border-color $ui-dark-borderColor border-color $ui-dark-borderColor