mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 09:46:22 +00:00
modify: move components file
This commit is contained in:
sota1235
100
browser/components/NoteItem.js
Normal file
100
browser/components/NoteItem.js
Normal file
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* @fileoverview Note item component.
|
||||
*/
|
||||
import React, { PropTypes } from 'react'
|
||||
import { isArray } from 'lodash'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './NoteItem.styl'
|
||||
|
||||
/**
|
||||
* @description Tag element component.
|
||||
* @param {string} tagName
|
||||
* @return {React.Component}
|
||||
*/
|
||||
const TagElement = ({ tagName }) => (
|
||||
<span styleName='item-bottom-tagList-item' key={tagName}>
|
||||
{tagName}
|
||||
</span>
|
||||
)
|
||||
|
||||
/**
|
||||
* @description Tag element list component.
|
||||
* @param {Array|null} tags
|
||||
* @return {React.Component}
|
||||
*/
|
||||
const TagElementList = (tags) => {
|
||||
if (!isArray(tags)) {
|
||||
return []
|
||||
}
|
||||
|
||||
const tagElements = tags.map(tag => (
|
||||
TagElement({tagName: tag})
|
||||
))
|
||||
|
||||
return tagElements
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Note item component when using normal display mode.
|
||||
* @param {boolean} isActive
|
||||
* @param {Object} note
|
||||
* @param {Function} handleNoteClick
|
||||
* @param {Function} handleNoteContextMenu
|
||||
* @param {string} dateDisplay
|
||||
*/
|
||||
const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu }) => (
|
||||
<div styleName={isActive
|
||||
? 'item--active'
|
||||
: 'item'
|
||||
}
|
||||
key={`${note.storage}-${note.key}`}
|
||||
onClick={e => handleNoteClick(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-title'>
|
||||
{note.title.trim().length > 0
|
||||
? note.title
|
||||
: <span styleName='item-title-empty'>Empty</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div styleName='item-bottom'>
|
||||
<div styleName='item-bottom-tagList'>
|
||||
{note.tags.length > 0
|
||||
? TagElementList(note.tags)
|
||||
: ''
|
||||
}
|
||||
</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>
|
||||
)
|
||||
|
||||
NoteItem.propTypes = {
|
||||
isActive: PropTypes.bool.isRequired,
|
||||
dateDisplay: PropTypes.string.isRequired,
|
||||
note: PropTypes.shape({
|
||||
storage: PropTypes.string.isRequired,
|
||||
key: PropTypes.string.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isrequired,
|
||||
tags: PropTypes.array,
|
||||
isStarred: PropTypes.bool.isRequired,
|
||||
}),
|
||||
handleNoteClick: PropTypes.func.isRequired,
|
||||
handleNoteContextMenu: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
export default CSSModules(NoteItem, styles)
|
||||
168
browser/components/NoteItem.styl
Normal file
168
browser/components/NoteItem.styl
Normal file
@@ -0,0 +1,168 @@
|
||||
$control-height = 30px
|
||||
|
||||
.root
|
||||
absolute left bottom
|
||||
top $topBar-height - 1
|
||||
background-color $ui-noteList-backgroundColor
|
||||
|
||||
.item
|
||||
position relative
|
||||
padding 0 25px
|
||||
user-select none
|
||||
cursor pointer
|
||||
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
|
||||
.item-title
|
||||
.item-title-empty
|
||||
.item-bottom-tagList-empty
|
||||
.item-bottom-time
|
||||
.item-title-icon
|
||||
color white
|
||||
.item-bottom-tagList-item
|
||||
background-color transparent
|
||||
color white
|
||||
|
||||
.item-wrapper
|
||||
padding 20px 0
|
||||
border-bottom $ui-border
|
||||
|
||||
.item--active
|
||||
@extend .item
|
||||
background-color $ui-active-color
|
||||
color white
|
||||
.item-title
|
||||
.item-title-empty
|
||||
.item-bottom-tagList-empty
|
||||
.item-bottom-time
|
||||
.item-title-icon
|
||||
color white
|
||||
.item-bottom-tagList-item
|
||||
background-color transparent
|
||||
color white
|
||||
.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
|
||||
|
||||
.item-title-icon
|
||||
position absolute
|
||||
top 20px
|
||||
right 25px
|
||||
font-size 14px
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-title-empty
|
||||
font-weight normal
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.item-bottom
|
||||
position relative
|
||||
bottom 0px
|
||||
margin-top 2px
|
||||
height 20px
|
||||
font-size 12px
|
||||
line-height 20px
|
||||
overflow ellipsis
|
||||
display flex
|
||||
|
||||
.item-bottom-tagList
|
||||
flex 1
|
||||
overflow ellipsis
|
||||
line-height 20px
|
||||
color #FFFFFF
|
||||
|
||||
.item-bottom-tagList-item
|
||||
font-size 12px
|
||||
margin-right 8px
|
||||
padding 0 10px
|
||||
height 20px
|
||||
box-sizing border-box
|
||||
border-radius 20px
|
||||
vertical-align middle
|
||||
background-color $ui-tag-backgroundColor
|
||||
color #FFFFFF
|
||||
|
||||
.item-bottom-tagList-empty
|
||||
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
|
||||
|
||||
.item-star
|
||||
position absolute
|
||||
top 20px
|
||||
right 29px
|
||||
width 34px
|
||||
height 34px
|
||||
color $ui-favorite-star-button-color
|
||||
font-size 14px
|
||||
padding 0
|
||||
border-radius 17px
|
||||
|
||||
body[data-theme="dark"]
|
||||
.root
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
|
||||
.item
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
&:active
|
||||
background-color $ui-active-color
|
||||
&:hover
|
||||
background-color alpha($ui-active-color, 20%)
|
||||
|
||||
.item-wrapper
|
||||
border-color $ui-dark-borderColor
|
||||
|
||||
.item--active
|
||||
@extend .item
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-active-color
|
||||
.item-wrapper
|
||||
border-color transparent
|
||||
.item-title
|
||||
color white
|
||||
.item-bottom-tagList-item
|
||||
background-color transparent
|
||||
color white
|
||||
.item-bottom-tagList-empty
|
||||
color white
|
||||
&:hover
|
||||
background-color $ui-active-color
|
||||
|
||||
.item-title
|
||||
color $ui-dark-text-color
|
||||
|
||||
.item-title-icon
|
||||
color $ui-darkinactive-text-color
|
||||
|
||||
.item-title-empty
|
||||
color $ui-dark-inactive-text-color
|
||||
|
||||
.item-bottom-tagList-item
|
||||
background-color $ui-dark-tag-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
|
||||
.item-bottom-tagList-empty
|
||||
color $ui-inactive-text-color
|
||||
vertical-align middle
|
||||
49
browser/components/NoteItemSimple.js
Normal file
49
browser/components/NoteItemSimple.js
Normal file
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* @fileoverview Note item component with simple display mode.
|
||||
*/
|
||||
import React, { PropTypes } from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './NoteItemSimple.styl'
|
||||
|
||||
/**
|
||||
* @description Note item component when using simple display mode.
|
||||
* @param {boolean} isActive
|
||||
* @param {Object} note
|
||||
* @param {Function} handleNoteClick
|
||||
* @param {Function} handleNoteContextMenu
|
||||
*/
|
||||
const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
|
||||
<div styleName={isActive
|
||||
? 'item-simple--active'
|
||||
: 'item-simple'
|
||||
}
|
||||
key={`${note.storage}-${note.key}`}
|
||||
onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
|
||||
onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
|
||||
>
|
||||
<div styleName='item-simple-title'>
|
||||
{note.type === 'SNIPPET_NOTE'
|
||||
? <i styleName='item-simple-title-icon' className='fa fa-fw fa-code' />
|
||||
: <i styleName='item-simple-title-icon' className='fa fa-fw fa-file-text-o' />
|
||||
}
|
||||
{note.title.trim().length > 0
|
||||
? note.title
|
||||
: <span styleName='item-simple-title-empty'>Empty</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
NoteItemSimple.propTypes = {
|
||||
isActive: PropTypes.bool.isRequired,
|
||||
note: PropTypes.shape({
|
||||
storage: PropTypes.string.isRequired,
|
||||
key: PropTypes.string.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isrequired,
|
||||
}),
|
||||
handleNoteClick: PropTypes.func.isRequired,
|
||||
handleNoteContextMenu: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
export default CSSModules(NoteItemSimple, styles)
|
||||
89
browser/components/NoteItemSimple.styl
Normal file
89
browser/components/NoteItemSimple.styl
Normal file
@@ -0,0 +1,89 @@
|
||||
$control-height = 30px
|
||||
|
||||
.root
|
||||
absolute left bottom
|
||||
top $topBar-height - 1
|
||||
background-color $ui-noteList-backgroundColor
|
||||
|
||||
.item-simple
|
||||
position relative
|
||||
padding 0 25px
|
||||
user-select none
|
||||
cursor pointer
|
||||
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
|
||||
.item-simple-title
|
||||
.item-simple-title-empty
|
||||
.item-simple-title-icon
|
||||
color white
|
||||
|
||||
.item-simple--active
|
||||
@extend .item-simple
|
||||
background-color $ui-active-color
|
||||
color white
|
||||
.item-simple-title
|
||||
.item-simple-title-empty
|
||||
border-color transparent
|
||||
color white
|
||||
.item-simple-title-icon
|
||||
color white
|
||||
&:hover
|
||||
background-color $ui-active-color
|
||||
|
||||
.item-simple-title
|
||||
font-size 14px
|
||||
height 40px
|
||||
box-sizing border-box
|
||||
line-height 24px
|
||||
padding-top 8px
|
||||
overflow ellipsis
|
||||
color $ui-text-color
|
||||
border-bottom $ui-border
|
||||
|
||||
.item-simple-title-icon
|
||||
font-size 12px
|
||||
color $ui-inactive-text-color
|
||||
padding-right 6px
|
||||
|
||||
.item-simple-title-empty
|
||||
font-weight normal
|
||||
color $ui-inactive-text-color
|
||||
|
||||
body[data-theme="dark"]
|
||||
.root
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
|
||||
.item-simple
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
&:active
|
||||
background-color $ui-active-color
|
||||
&:hover
|
||||
background-color alpha($ui-active-color, 20%)
|
||||
|
||||
.item-simple--active
|
||||
@extend .item-simple
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-active-color
|
||||
.item-simple-title
|
||||
.item-simple-title-empty
|
||||
color white
|
||||
border-color transparent
|
||||
&:hover
|
||||
background-color $ui-active-color
|
||||
|
||||
.item-simple-title
|
||||
color $ui-dark-text-color
|
||||
border-color $ui-dark-borderColor
|
||||
|
||||
.item-simple-title-icon
|
||||
color $ui-darkinactive-text-color
|
||||
|
||||
.item-simple-title-empty
|
||||
color $ui-dark-inactive-text-color
|
||||
Reference in New Issue
Block a user