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

update NoteList

Browse Source 
sort by updatedAt
improve style
add auto-scrolling
This commit is contained in:
Dick Choi
2016-05-29 14:02:23 +09:00
parent 431ac5a403
commit 409a3de901
2 changed files with 57 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
browser/main/NoteList/NoteList.styl
View File

@@ -49,9 +49,26 @@
font-weight bold font-weight bold
overflow ellipsis overflow ellipsis
.item-tags .item-tagList
height 30px height 30px
font-size 12px font-size 12px
line-height 30px line-height 30px
color $ui-inactive-text-color
overflow ellipsis overflow ellipsis
.item-tagList-icon
vertical-align middle
color $ui-button-color
.item-tagList-item
margin 2px
padding 0 4px
height 20px
border-radius 5px
vertical-align middle
border $ui-border
color $ui-button-color
.item-tagList-empty
color $ui-inactive-text-color
vertical-align middle

57
browser/main/NoteList/index.js
View File

@@ -32,24 +32,29 @@ class NoteList extends React.Component {
key: `${this.notes[0]._repository.key}-${this.notes[0].key}` key: `${this.notes[0]._repository.key}-${this.notes[0].key}`
} }
}) })
return
} }
// return false
// var index = articles.indexOf(null)
// var el = ReactDOM.findDOMNode(this)
// var li = el.querySelectorAll('.NoteList>div')[index]
// if (li == null) { // Auto scroll
// return let targetIndex = _.findIndex(this.notes, (note) => {
// } let splitted = location.query.key.split('-')
let repoKey = splitted[0]
let noteKey = splitted[1]
return repoKey === note._repository.key && noteKey === note.key
})
if (targetIndex > -1) {
let list = this.refs.root
let item = list.childNodes[targetIndex]
// var overflowBelow = el.clientHeight + el.scrollTop < li.offsetTop + li.clientHeight let overflowBelow = list.clientHeight + list.scrollTop < item.offsetTop + list.clientHeight
// if (overflowBelow) { if (overflowBelow) {
// el.scrollTop = li.offsetTop + li.clientHeight - el.clientHeight list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
// } }
// var overflowAbove = el.scrollTop > li.offsetTop let overflowAbove = list.scrollTop > item.offsetTop
// if (overflowAbove) { if (overflowAbove) {
// el.scrollTop = li.offsetTop list.scrollTop = item.offsetTop
// } }
}
} }
focus () { focus () {
@@ -187,12 +192,18 @@ class NoteList extends React.Component {
render () { render () {
let { location } = this.props let { location } = this.props
let notes = this.notes = this.getNotes() let notes = this.notes = this.getNotes().sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
let noteElements = notes let noteElements = notes
.map((note) => { .map((note) => {
let folder = _.find(note._repository.folders, {key: note.folder}) let folder = _.find(note._repository.folders, {key: note.folder})
let tagElements = note.tags.map((tag) => { let tagElements = note.tags.map((tag) => {
return <span key={tag}>{tag}</span> return (
<span styleName='item-tagList-item'
key={tag}>
{tag}
</span>
)
}) })
let key = `${note._repository.key}-${note.key}` let key = `${note._repository.key}-${note.key}`
let isActive = location.query.key === key let isActive = location.query.key === key
@@ -219,8 +230,15 @@ class NoteList extends React.Component {
<div styleName='item-title'>{note.title}</div> <div styleName='item-title'>{note.title}</div>
<div styleName='item-tags'><i className='fa fa-tags fa-fw'/>{tagElements.length > 0 ? tagElements : <span>Not tagged yet</span>}</div> <div styleName='item-tagList'>
<i styleName='item-tagList-icon'
className='fa fa-tags fa-fw'
/>
{tagElements.length > 0
? tagElements
: <span styleName='item-tagList-empty'>Not tagged yet</span>
}
</div>
</div> </div>
) )
}) })
@@ -228,6 +246,7 @@ class NoteList extends React.Component {
return ( return (
<div className='NoteList' <div className='NoteList'
styleName='root' styleName='root'
ref='root'
tabIndex='0' tabIndex='0'
onKeyDown={(e) => this.handleNoteListKeyDown(e)} onKeyDown={(e) => this.handleNoteListKeyDown(e)}
style={this.props.style} style={this.props.style}