mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-14 02:06:29 +00:00
modify: add icon for NoteItem component
This commit is contained in:
@@ -70,6 +70,11 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
|
|||||||
</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 ?
|
{note.isStarred ?
|
||||||
<i styleName='item-star' className='fa fa-star' /> : ''
|
<i styleName='item-star' className='fa fa-star' /> : ''
|
||||||
}
|
}
|
||||||
@@ -83,6 +88,7 @@ NoteItem.propTypes = {
|
|||||||
note: PropTypes.shape({
|
note: PropTypes.shape({
|
||||||
storage: PropTypes.string.isRequired,
|
storage: PropTypes.string.isRequired,
|
||||||
key: PropTypes.string.isRequired,
|
key: PropTypes.string.isRequired,
|
||||||
|
type: PropTypes.string.isRequired,
|
||||||
title: PropTypes.string.isrequired,
|
title: PropTypes.string.isrequired,
|
||||||
tags: PropTypes.array,
|
tags: PropTypes.array,
|
||||||
isStarred: PropTypes.bool.isRequired,
|
isStarred: PropTypes.bool.isRequired,
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ $control-height = 30px
|
|||||||
.item-title-empty
|
.item-title-empty
|
||||||
.item-bottom-tagList-empty
|
.item-bottom-tagList-empty
|
||||||
.item-bottom-time
|
.item-bottom-time
|
||||||
|
.item-title-icon
|
||||||
color white
|
color white
|
||||||
.item-bottom-tagList-item
|
.item-bottom-tagList-item
|
||||||
background-color transparent
|
background-color transparent
|
||||||
@@ -38,6 +39,7 @@ $control-height = 30px
|
|||||||
.item-title-empty
|
.item-title-empty
|
||||||
.item-bottom-tagList-empty
|
.item-bottom-tagList-empty
|
||||||
.item-bottom-time
|
.item-bottom-time
|
||||||
|
.item-title-icon
|
||||||
color white
|
color white
|
||||||
.item-bottom-tagList-item
|
.item-bottom-tagList-item
|
||||||
background-color transparent
|
background-color transparent
|
||||||
@@ -55,6 +57,13 @@ $control-height = 30px
|
|||||||
overflow ellipsis
|
overflow ellipsis
|
||||||
color $ui-text-color
|
color $ui-text-color
|
||||||
|
|
||||||
|
.item-title-icon
|
||||||
|
position absolute
|
||||||
|
top 20px
|
||||||
|
right 25px
|
||||||
|
font-size 14px
|
||||||
|
color $ui-inactive-text-color
|
||||||
|
|
||||||
.item-title-empty
|
.item-title-empty
|
||||||
font-weight normal
|
font-weight normal
|
||||||
color $ui-inactive-text-color
|
color $ui-inactive-text-color
|
||||||
@@ -98,7 +107,7 @@ $control-height = 30px
|
|||||||
.item-star
|
.item-star
|
||||||
position absolute
|
position absolute
|
||||||
top 20px
|
top 20px
|
||||||
right 20px
|
right 29px
|
||||||
width 34px
|
width 34px
|
||||||
height 34px
|
height 34px
|
||||||
color $ui-favorite-star-button-color
|
color $ui-favorite-star-button-color
|
||||||
@@ -139,6 +148,9 @@ body[data-theme="dark"]
|
|||||||
.item-title
|
.item-title
|
||||||
color $ui-dark-text-color
|
color $ui-dark-text-color
|
||||||
|
|
||||||
|
.item-title-icon
|
||||||
|
color $ui-darkinactive-text-color
|
||||||
|
|
||||||
.item-title-empty
|
.item-title-empty
|
||||||
color $ui-dark-inactive-text-color
|
color $ui-dark-inactive-text-color
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user