mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
Show Arrows at snippets tab bar only when needed
This commit is contained in:
@@ -93,6 +93,7 @@ class SnippetNoteDetail extends React.Component {
|
||||
this.refs['code-' + index].reload()
|
||||
})
|
||||
if (this.refs.tags) this.refs.tags.reset()
|
||||
this.setState(this.getArrowsState())
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -340,7 +341,7 @@ class SnippetNoteDetail extends React.Component {
|
||||
const snippetIndex = this.state.snippetIndex >= snippets.length
|
||||
? snippets.length - 1
|
||||
: this.state.snippetIndex
|
||||
this.setState({ note, snippetIndex }, () => {
|
||||
this.setState(Object.assign({ note, snippetIndex }, this.getArrowsState()), () => {
|
||||
this.save()
|
||||
this.refs['code-' + this.state.snippetIndex].reload()
|
||||
})
|
||||
@@ -515,15 +516,22 @@ class SnippetNoteDetail extends React.Component {
|
||||
|
||||
moveTabBarBy (x) {
|
||||
this.allTabs.addEventListener('transitionend', () => {
|
||||
this.setState({
|
||||
enableRightArrow: this.allTabs.offsetLeft !== this.visibleTabs.offsetWidth - this.allTabs.offsetWidth,
|
||||
enableLeftArrow: this.allTabs.offsetLeft !== 0
|
||||
})
|
||||
this.setState(this.getArrowsState())
|
||||
}, {once: true})
|
||||
|
||||
this.allTabs.style.left = `${x}px`
|
||||
}
|
||||
|
||||
getArrowsState () {
|
||||
const allTabs = this.allTabs
|
||||
const visibleTabs = this.visibleTabs
|
||||
const showArrows = visibleTabs.offsetWidth < allTabs.offsetWidth
|
||||
const enableRightArrow = allTabs.offsetLeft !== visibleTabs.offsetWidth - allTabs.offsetWidth
|
||||
const enableLeftArrow = allTabs.offsetLeft !== 0
|
||||
|
||||
return {showArrows, enableRightArrow, enableLeftArrow}
|
||||
}
|
||||
|
||||
addSnippet () {
|
||||
const { note } = this.state
|
||||
|
||||
@@ -534,12 +542,14 @@ class SnippetNoteDetail extends React.Component {
|
||||
}])
|
||||
const snippetIndex = note.snippets.length - 1
|
||||
|
||||
this.setState({
|
||||
this.setState(Object.assign({
|
||||
note,
|
||||
snippetIndex
|
||||
}, () => {
|
||||
}, this.getArrowsState()), () => {
|
||||
if (this.state.showArrows) {
|
||||
const newLeft = this.visibleTabs.offsetWidth - this.allTabs.offsetWidth
|
||||
this.moveTabBarBy(newLeft)
|
||||
}
|
||||
this.refs['tab-' + snippetIndex].startRenaming()
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user