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

Dragged note highlighting

Browse Source
This commit is contained in:
Guilherme Silva
2018-11-30 08:42:27 +00:00
parent 37933782d2
commit b8a295713c
1 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
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
} }
} }
@@ -231,14 +232,18 @@ class StorageItem extends React.Component {
} }
} }
handleDragEnter (e) { handleDragEnter (e, key) {
e.dataTransfer.setData('defaultColor', e.target.style.backgroundColor) if (this.state.draggedOver === key) { return }
e.target.style.backgroundColor = 'rgba(129, 130, 131, 0.08)' this.setState({
draggedOver: key
})
} }
handleDragLeave (e) { handleDragLeave (e) {
e.target.style.opacity = '1' if (this.state.draggedOver === null) { return }
e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor') this.setState({
draggedOver: null
})
} }
dropNote (storage, folder, dispatch, location, noteData) { dropNote (storage, folder, dispatch, location, noteData) {
@@ -263,8 +268,11 @@ class StorageItem extends React.Component {
} }
handleDrop (e, storage, folder, dispatch, location) { handleDrop (e, storage, folder, dispatch, location) {
e.target.style.opacity = '1' if (this.state.draggedOver !== null) {
e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor') 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)
} }
@@ -274,7 +282,7 @@ class StorageItem extends React.Component {
const { folderNoteMap, trashedSet } = data const { folderNoteMap, trashedSet } = data
const SortableStorageItemChild = SortableElement(StorageItemChild) const SortableStorageItemChild = SortableElement(StorageItemChild)
const folderList = storage.folders.map((folder, index) => { const folderList = storage.folders.map((folder, index) => {
let folderRegex = new RegExp(escapeStringRegexp(path.sep) + 'storages' + escapeStringRegexp(path.sep) + storage.key + escapeStringRegexp(path.sep) + 'folders' + escapeStringRegexp(path.sep) + folder.key) const folderRegex = new RegExp(escapeStringRegexp(path.sep) + 'storages' + escapeStringRegexp(path.sep) + storage.key + escapeStringRegexp(path.sep) + 'folders' + escapeStringRegexp(path.sep) + folder.key)
const isActive = !!(location.pathname.match(folderRegex)) const isActive = !!(location.pathname.match(folderRegex))
const noteSet = folderNoteMap.get(storage.key + '-' + folder.key) const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
@@ -291,16 +299,25 @@ 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} e.preventDefault()
handleDragLeave={this.handleDragLeave} this.handleDrop(e, storage, folder, dispatch, location)
}}
handleDragEnter={(e) => {
e.preventDefault()
this.handleDragEnter(e, folder.key)
}}
handleDragLeave={(e) => {
e.preventDefault()
this.handleDragLeave(e, folder)
}}
/> />
) )
}) })