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

Merge pull request #2684 from GuilhermeJSilva/fix/highlight-folder-on-hover

Browse Source 
Dragged note highlighting
This commit is contained in:
Junyoung Choi
2018-12-13 13:59:10 +09:00
committed by GitHub
parent 7c839a1df9 4061866042
commit 3f77cb2214
1 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
browser/main/SideNav/StorageItem.js
View File

@@ -25,7 +25,8 @@ class StorageItem extends React.Component {
const { storage } = this.props const { storage } = this.props
this.state = { this.state = {
isOpen: !!storage.isOpen isOpen: !!storage.isOpen,
draggedOver: null
} }
} }
@@ -245,14 +246,20 @@ class StorageItem extends React.Component {
} }
} }
handleDragEnter (e) { handleDragEnter (e, key) {
e.dataTransfer.setData('defaultColor', e.target.style.backgroundColor) e.preventDefault()
e.target.style.backgroundColor = 'rgba(129, 130, 131, 0.08)' if (this.state.draggedOver === key) { return }
this.setState({
draggedOver: key
})
} }
handleDragLeave (e) { handleDragLeave (e) {
e.target.style.opacity = '1' e.preventDefault()
e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor') if (this.state.draggedOver === null) { return }
this.setState({
draggedOver: null
})
} }
dropNote (storage, folder, dispatch, location, noteData) { dropNote (storage, folder, dispatch, location, noteData) {
@@ -277,8 +284,12 @@ class StorageItem extends React.Component {
} }
handleDrop (e, storage, folder, dispatch, location) { handleDrop (e, storage, folder, dispatch, location) {
e.target.style.opacity = '1' e.preventDefault()
e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor') if (this.state.draggedOver !== null) {
this.setState({
draggedOver: null
})
}
const noteData = JSON.parse(e.dataTransfer.getData('note')) const noteData = JSON.parse(e.dataTransfer.getData('note'))
this.dropNote(storage, folder, dispatch, location, noteData) this.dropNote(storage, folder, dispatch, location, noteData)
} }
@@ -305,16 +316,22 @@ class StorageItem extends React.Component {
<SortableStorageItemChild <SortableStorageItemChild
key={folder.key} key={folder.key}
index={index} index={index}
isActive={isActive} isActive={isActive || folder.key === this.state.draggedOver}
handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)} handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)} handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
folderName={folder.name} folderName={folder.name}
folderColor={folder.color} folderColor={folder.color}
isFolded={isFolded} isFolded={isFolded}
noteCount={noteCount} noteCount={noteCount}
handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)} handleDrop={(e) => {
handleDragEnter={this.handleDragEnter} this.handleDrop(e, storage, folder, dispatch, location)
handleDragLeave={this.handleDragLeave} }}
handleDragEnter={(e) => {
this.handleDragEnter(e, folder.key)
}}
handleDragLeave={(e) => {
this.handleDragLeave(e, folder)
}}
/> />
) )
}) })