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

Fix the layout at NoteItem

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-04-10 23:08:06 +09:00
parent d092e75f3c
commit 658a90bf15
2 changed files with 25 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
browser/components/NoteItem.js
View File

@@ -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'></span>
} }
</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>
) )

35
browser/components/NoteItem.styl
View File

@@ -7,7 +7,7 @@ $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
@@ -48,21 +48,19 @@ $control-height = 30px
&:hover &:hover
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
.item-title .item-title-icon
position relative
font-size 12px font-size 12px
height 40px
box-sizing border-box
line-height 24px
padding-top 5px
padding-bottom 20px
overflow ellipsis
color $ui-inactive-text-color color $ui-inactive-text-color
.item-title-icon .item-title
position absolute font-size 13px
top 15px position relative
right 25px top -12px
font-size 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
@@ -83,6 +81,7 @@ $control-height = 30px
flex 1 flex 1
overflow ellipsis overflow ellipsis
line-height 20px line-height 20px
padding-left 2px
.item-bottom-tagList-item .item-bottom-tagList-item
font-size 10px font-size 10px
@@ -96,19 +95,17 @@ $control-height = 30px
color $ui-inactive-text-color color $ui-inactive-text-color
.item-bottom-tagList-empty .item-bottom-tagList-empty
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 10px 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