Tap and drag on drag-zone; Revising select-zone

src/js/App.js

@@ -218,6 +218,7 @@ class App extends React.Component{
 		if (this.props.dragger && this.props.dragger.active) className += ' dragging'
 		if (this.props.sidebar_open) className += ' sidebar-open'
 		if (this.props.modal) className += ' modal-open'
+		if (this.props.touch_dragging) className += ' touch-dragging'
 		if (this.props.slim_mode) className += ' slim-mode'
 		if (helpers.isTouchDevice()){
 			className += ' touch'
@@ -258,6 +259,7 @@ class App extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		touch_dragging: state.ui.touch_dragging,
 		slim_mode: state.ui.slim_mode,
 		broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []),
 		volume: (state.mopidy.volume ? state.mopidy.volume : false),

src/js/components/Track.js

@@ -59,6 +59,9 @@ export default class Track extends React.Component{
 
 			var track_columns = (
 				<span>
+					<span className="select-zone">
+						{this.props.track.selected ? <FontAwesome name="check" className="selected" fixedWidth /> : null}
+					</span>
 					<span className="col name">
 						{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
 					</span>
@@ -89,8 +92,16 @@ export default class Track extends React.Component{
 					var added = '-'
 				}
 
+				className+= ' has-drag-zone'
+
 				var track_columns = (
 					<span>
+						<span className="select-zone">
+							{this.props.track.selected ? <FontAwesome name="check" className="selected" fixedWidth /> : null}
+						</span>
+						<span className="drag-zone">
+							<FontAwesome name="bars" />
+						</span>
 						<span className="col name">
 							{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
 							{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
@@ -116,6 +127,9 @@ export default class Track extends React.Component{
 
 			var track_columns = (
 				<span>
+					<span className="select-zone">
+						{this.props.track.selected ? <FontAwesome name="check" className="selected" fixedWidth /> : null}
+					</span>
 					<span className="col name">
 						{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
 						{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
@@ -146,9 +160,6 @@ export default class Track extends React.Component{
 				onMouseUp={ e => this.props.handleMouseUp(e) }
 				onDoubleClick={ e => this.props.handleDoubleClick(e) }
 				onContextMenu={ e => this.handleContextMenu(e) }>
-					<span className="state-icon">
-						{this.props.track.selected ? <FontAwesome name="check" className="selected" fixedWidth /> : null}
-					</span>
 					{ track_columns }
 			</div>
 		);

src/js/components/TrackList.js

@@ -21,16 +21,19 @@ class TrackList extends React.Component{
 			last_selected_track: false
 		}
 
-		this._touching = false
+		this.touch_dragging = false
 		this.handleKeyUp = this.handleKeyUp.bind(this)
+		this.handleTouchMove = this.handleTouchMove.bind(this)
 	}
 
 	componentWillMount(){
-		window.addEventListener("keyup", this.handleKeyUp, false);
+		window.addEventListener("keyup", this.handleKeyUp, false)
+		window.addEventListener("touchmove", this.handleTouchMove, false)
 	}
 
 	componentWillUnmount(){
-		window.removeEventListener("keyup", this.handleKeyUp, false);
+		window.removeEventListener("keyup", this.handleKeyUp, false)
+		window.removeEventListener("touchmove", this.handleTouchMove, false)
 	}
 
 	componentDidMount(){
@@ -51,9 +54,9 @@ class TrackList extends React.Component{
 		var target = $(e.target)
 
 		// Wide screen, so no worries
-		if ($(window).width() > 800){
+		if (!this.props.slim_mode){
 			return 'default'
-		} else if (target.is('.state-icon') || target.closest('.state-icon').length > 0){
+		} else if (target.is('.select-zone') || target.closest('.select-zone').length > 0){
 			return 'mobile'
 		}
 
@@ -76,12 +79,28 @@ class TrackList extends React.Component{
 	}
 
 	handleTouchStart(e,index){
-		this._touching = true
+		var target = $(e.target)
+		if (target.hasClass('drag-zone')){
+			$('body').addClass('touch-dragging')
+			this.touch_dragging = true
+			e.preventDefault()
+		}
+	}
+
+	handleTouchMove(e){
+		if (this.touch_dragging){
+			e.preventDefault()
+			console.log('dragging')
+		}
 	}
 
 	handleTouchEnd(e,index){
-		this._touching = false
-		this.handleMouseDown(e,index)
+		if (this.touch_dragging){
+			$('body').removeClass('touch-dragging')
+			this.touch_dragging = false
+		} else {
+			this.handleMouseDown(e,index)
+		}
 
 		// Prevent any event bubbling. This prevents clicks and mouse events
 		// from also being fired
@@ -348,7 +367,8 @@ class TrackList extends React.Component{
 				{
 					this.state.tracks.map(
 						(track, index) => {
-							return <Track
+							return (
+								<Track
 									show_source_icon={this.props.show_source_icon}
 									key={track.key} 
 									track={track} 
@@ -358,7 +378,9 @@ class TrackList extends React.Component{
 									handleMouseDown={e => self.handleMouseDown(e, index)}
 									handleTouchStart={e => self.handleTouchStart(e, index)}
 									handleTouchEnd={e => self.handleTouchEnd(e, index)}
-									handleContextMenu={e => self.handleContextMenu(e)} />
+									handleContextMenu={e => self.handleContextMenu(e)}
+								/>
+							)
 						}
 					)
 				}
@@ -377,8 +399,8 @@ class TrackList extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		slim_mode: state.ui.slim_mode,
 		dragger: state.ui.dragger,
-		emulate_touch: state.ui.emulate_touch,
 		current_track: state.ui.current_track,
 		context_menu: state.ui.context_menu
 	}

src/scss/components/_lists.scss

@@ -22,13 +22,21 @@
 		&.selected {
 			background: $yellow !important;
 			border-color: darken($yellow,10%);
+
+			.select-zone {
+				&::after {
+					background: $dark_grey;
+					border-color: $dark_grey;
+				}
+			}
 		}
 
 		&.playing {
 			font-weight: bold;
 		}
 
-		.state-icon {
+		.select-zone,
+		.drag-zone {
 			display: none;
 		}
 
@@ -211,30 +219,51 @@
 				float: none;
 			}
 
-			.state-icon {
+			.select-zone {
 				position: absolute;
 				top: 0;
 				left: 0;
 				height: 100%;
-				width: 48px;
-				font-size: 10px;
+				width: 38px;
+				font-size: 8px;
 				display: block;
 				
 				.fa {
 					position: absolute;
-					top: 19px;
-					left: 17px;
+					top: 20px;
+					left: 13px;
+					pointer-events: none;
+					color: $white;
+					z-index: 1;
 				}
 
 				&:after {
 					display: block;
 					content: '';
 					border: 1px solid $darkest_grey;
-					width: 15px;
-					height: 15px;
+					border-radius: 50%;
+					width: 14px;
+					height: 14px;
 					position: absolute;
-					top: 15px;
-					left: 15px;
+					top: 16px;
+					left: 10px;
+				}
+			}
+
+			.drag-zone {
+				position: absolute;
+				top: 0;
+				left: 38px;
+				height: 100%;
+				width: 38px;
+				font-size: 14px;
+				display: block;
+				
+				.fa {
+					position: absolute;
+					top: 17px;
+					left: 8px;
+					pointer-events: none;
 				}
 			}
 
@@ -307,8 +336,11 @@
 		}
 
 		&.track-list {
-			.list-item {
-				padding: 7px 30px 7px 48px !important;
+			.list-item.has-drag-zone {
+				padding: 8px 30px 8px 78px !important;
+			}
+			.list-item:not(.has-drag-zone){
+				padding: 8px 30px 8px 38px !important;
 			}
 		}
 	}

src/scss/global/_core.scss

@@ -14,6 +14,7 @@ body {
 	overflow-y: scroll;
 	overflow-x: hidden;
 
+	&.touch-dragging,
 	&.modal-open {
 		overflow-y: hidden;
 	}