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

change color with hover during dragging

Browse Source
This commit is contained in:
Sosuke Suzuki
2017-04-05 10:08:09 +09:00
parent 720f07f62c
commit 50cd0b794b
2 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
browser/components/StorageItem.js
View File

@@ -15,11 +15,13 @@ import { isNumber } from 'lodash'
* @param {boolean} isFolded * @param {boolean} isFolded
* @param {number} noteCount * @param {number} noteCount
* @param {Function} handleDrop * @param {Function} handleDrop
* @param {Function} handleDragEnter
* @param {Function} handleDragOut
* @return {React.Component} * @return {React.Component}
*/ */
const StorageItem = ({ const StorageItem = ({
isActive, handleButtonClick, handleContextMenu, folderName, isActive, handleButtonClick, handleContextMenu, folderName,
folderColor, isFolded, noteCount, handleDrop folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
}) => ( }) => (
<button styleName={isActive <button styleName={isActive
? 'folderList-item--active' ? 'folderList-item--active'
@@ -28,6 +30,8 @@ const StorageItem = ({
onClick={handleButtonClick} onClick={handleButtonClick}
onContextMenu={handleContextMenu} onContextMenu={handleContextMenu}
onDrop={handleDrop} onDrop={handleDrop}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
> >
<span styleName={isFolded <span styleName={isFolded
? 'folderList-item-name--folded' : 'folderList-item-name' ? 'folderList-item-name--folded' : 'folderList-item-name'
@@ -54,6 +58,8 @@ StorageItem.propTypes = {
folderName: PropTypes.string.isRequired, folderName: PropTypes.string.isRequired,
folderColor: PropTypes.string, folderColor: PropTypes.string,
isFolded: PropTypes.bool.isRequired, isFolded: PropTypes.bool.isRequired,
handleDragEnter: PropTypes.func.isRequired,
handleDragLeave: PropTypes.func.isRequired,
noteCount: PropTypes.number noteCount: PropTypes.number
} }

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

@@ -132,7 +132,19 @@ class StorageItem extends React.Component {
} }
} }
handleDragEnter (e) {
e.dataTransfer.setData("defaultColor", e.target.style.backgroundColor)
e.target.style.backgroundColor = "rgba(129, 130, 131, 0.08)"
}
handleDragLeave (e) {
e.target.style.opacity = "1"
e.target.style.backgroundColor = e.dataTransfer.getData("defaultColor")
}
handleDrop (e, storage, folder, dispatch, location) { handleDrop (e, storage, folder, dispatch, location) {
e.target.style.opacity = "1"
e.target.style.backgroundColor = e.dataTransfer.getData("defaultColor")
const noteData = JSON.parse(e.dataTransfer.getData("note")) const noteData = JSON.parse(e.dataTransfer.getData("note"))
if (folder.key !== noteData.folder) { if (folder.key !== noteData.folder) {
dataApi dataApi
@@ -197,6 +209,8 @@ class StorageItem extends React.Component {
isFolded={isFolded} isFolded={isFolded}
noteCount={noteCount} noteCount={noteCount}
handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)} handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)}
handleDragEnter={this.handleDragEnter}
handleDragLeave={this.handleDragLeave}
/> />
) )
}) })