From c28cd48bd0e1aeaacb05a1d17b541b6192a008bc Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 28 Jun 2017 16:26:55 +1200
Subject: [PATCH] Dropzone and track hover states now via classes rather than
 :hover, fixes #28

---
 src/js/components/Dropzone.js     | 29 +++++++++++++++++++++++++++--
 src/js/components/Track.js        | 19 +++++++++++++------
 src/scss/components/_dragger.scss | 17 ++++++++++++-----
 src/scss/components/_lists.scss   |  4 ++--
 4 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/js/components/Dropzone.js b/src/js/components/Dropzone.js
index f6525781..4a41ae16 100755
--- a/src/js/components/Dropzone.js
+++ b/src/js/components/Dropzone.js
@@ -8,14 +8,39 @@ import Icon from './Icon'
 export default class Dropzone extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
+
+		this.state = {
+			hover: false
+		}
+
+		this.handleMouseOver = this.handleMouseOver.bind(this)
+		this.handleMouseOut = this.handleMouseOut.bind(this)
+	}
+
+	componentWillMount(){
+		window.addEventListener("mouseover", this.handleMouseOver, false);
+		window.addEventListener("mouseout", this.handleMouseOut, false);
+	}
+
+	componentWillUnmount(){
+		window.removeEventListener("mouseover", this.handleMouseOver, false);
+		window.removeEventListener("mouseout", this.handleMouseOut, false);
+	}
+
+	handleMouseOver(e){
+		this.setState({hover: true})
+	}
+
+	handleMouseOut(e){
+		this.setState({hover: false})
 	}
 
 	render(){
 		if( !this.props.data ) return null
 
 		return (
-			<div className="dropzone" onMouseUp={ e => this.props.handleMouseUp(e) }>
+			<div className={this.state.hover?"dropzone hover":"dropzone"} onMouseUp={ e => this.props.handleMouseUp(e) }>
 				<Icon className="white" name={ this.props.data.icon } />
 				<span className="title">{ this.props.data.title }</span>
 			</div>
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 5f01e569..48aaa2a6 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -10,7 +10,11 @@ import * as helpers from '../helpers'
 export default class Track extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
+
+		this.state = {
+			hover: false
+		}
 	}
 
 	handleMouseDown(e){
@@ -35,11 +39,12 @@ export default class Track extends React.Component{
 	render(){
 		if( !this.props.track ) return null
 
-		var track = this.props.track;
-		var className = 'list-item track';
-		if( typeof(track.selected) !== 'undefined' && track.selected ) className += ' selected';
-		if( typeof(track.type) !== 'undefined' ) className += ' '+track.type;
-		if( track.playing ) className += ' playing';
+		var track = this.props.track
+		var className = 'list-item track'
+		if (typeof(track.selected) !== 'undefined' && track.selected) className += ' selected'
+		if (typeof(track.type) !== 'undefined') className += ' '+track.type
+		if (track.playing) className += ' playing'
+		if (this.state.hover) className += ' hover'
 		
 		var album = '-'
 		if( track.album ){
@@ -133,6 +138,8 @@ export default class Track extends React.Component{
 		return (
 			<div
 				className={className}
+				onMouseEnter={e => this.setState({hover: true})}
+				onMouseLeave={e => this.setState({hover: false})}
 				onTouchStart={ e => this.props.handleTouchStart(e) }
 				onTouchEnd={ e => this.handleTouchEnd(e) }
 				onMouseDown={ e => this.handleMouseDown(e) }
diff --git a/src/scss/components/_dragger.scss b/src/scss/components/_dragger.scss
index 7c8dc2eb..a3f80c03 100755
--- a/src/scss/components/_dragger.scss
+++ b/src/scss/components/_dragger.scss
@@ -16,7 +16,7 @@
 	top: 0;
 	z-index: 97;
 	background: $blue;
-	color: #FFFFFF;
+	color: $white;
 	padding: 12px 20px;
 	pointer-events: none;
 }
@@ -28,14 +28,17 @@
 	width: 100%;
 	height: 100%;
 	z-index: 98;
-	background: rgba(25, 25, 25, 0.9);
+	background: $off_white;
 
 	.dropzone {
 		@include animate();
+		@include gradient_overlay(3px,0);
 		margin: 15px;
 		padding: 40px 20px;
-		background: $dark_grey;
-		color: #FFFFFF;
+		background: $darkest_grey;
+		border: 5px solid transparent;
+		border-radius: 3px;
+		color: $white;
 		font-size: 18px;
 		text-align: center;
 
@@ -50,7 +53,11 @@
 		}
 
 		&.hover {
-			background: $turquoise;
+			border-color: $blue;
+
+			&:before {
+				opacity: 0.15;
+			}
 		}
 	}
 }
\ No newline at end of file
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index c328b77c..514564c8 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -32,7 +32,7 @@
 			display: none;
 		}
 
-		:root .notouch:not(.dragging) &:not(.header):not(.no-click):hover {
+		:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {
 			background: lighten($yellow, 10%);
 			cursor: pointer;
 		}
@@ -79,7 +79,7 @@
 				}
 			}
 
-			:root .dragging &:hover {
+			:root .dragging &.hover {
 				border-top: 3px solid $blue;
 				margin-top: -3px;
 				background: transparent;