From 5ac5c854b36ba79429e8fc8a8da702aae0e3b94a Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 23 Aug 2017 08:31:42 +1200
Subject: [PATCH] Use slim_mode AND isTouchDevice to provide mini_zones on
 tracks; fixes #151

---
 src/js/components/Track.js      |  2 +-
 src/js/components/TrackList.js  |  7 +++-
 src/js/views/Debug.js           |  2 +-
 src/scss/components/_lists.scss | 62 +++++++++++++++++++++++++++++++++
 4 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 9011116d..f6e1cf29 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -214,7 +214,7 @@ export default class Track extends React.Component{
 			)
 		}
 
-		if (this.props.slim_mode){
+		if (this.props.mini_zones){
 
 			// Select zone handles selection events only
 			// We use onClick to capture touch as well as mouse events in one tidy parcel
diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js
index 30afafa8..ff5630fd 100755
--- a/src/js/components/TrackList.js
+++ b/src/js/components/TrackList.js
@@ -400,6 +400,11 @@ class TrackList extends React.Component{
 		if (this.props.className){
 			className += ' '+this.props.className
 		}
+		var mini_zones = false
+		if (this.props.slim_mode || helpers.isTouchDevice()){
+			mini_zones = true
+			className += ' mini-zones'
+		}
 
 		return (
 			<div className={className}>
@@ -412,7 +417,7 @@ class TrackList extends React.Component{
 								<Track
 									show_source_icon={this.props.show_source_icon}
 									key={track_key} 
-									slim_mode={this.props.slim_mode}
+									mini_zones={mini_zones}
 									track={track} 
 									context={this.props.context} 
 									can_sort={this.props.context == 'queue' || this.props.context == 'editable-playlist'} 
diff --git a/src/js/views/Debug.js b/src/js/views/Debug.js
index 4c05b43d..2bf84b55 100755
--- a/src/js/views/Debug.js
+++ b/src/js/views/Debug.js
@@ -106,7 +106,7 @@ class Debug extends React.Component{
 							<div className="input">
 								<a className="button secondary" onClick={e => this.props.uiActions.createNotification('Test notification')}>Create notification</a>
 								<a className="button secondary" onClick={e => this.props.uiActions.startProcess('test_process', 'Test process')}>Start process</a>
-								<a className="button secondary" onClick={e => this.props.uiActions.stopProcess('test_process')}>Stop process</a>
+								<a className="button secondary" onClick={e => this.props.uiActions.processFinished('test_process')}>Stop process</a>
 							</div>
 						</div>
 					</form>
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index 9338c342..e3b50fe6 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -209,6 +209,68 @@
 		}
 	}
 
+	&.track-list.mini-zones {
+		.list-item {	
+
+			&.can-sort {
+				padding-left: 78px !important;
+			}
+			
+			&:not(.can-sort){
+				padding-left: 46px !important;
+			}
+
+			.select-zone {
+				position: absolute;
+				top: 0;
+				left: 0;
+				height: 100%;
+				width: 38px;
+				font-size: 8px;
+				display: block;
+				
+				.fa {
+					position: absolute;
+					top: 20px;
+					left: 19px;
+					pointer-events: none;
+					color: $white;
+					z-index: 1;
+				}
+
+				&:after {
+					display: block;
+					content: '';
+					border: 1px solid $mid_grey;
+					border-radius: 50%;
+					width: 14px;
+					height: 14px;
+					position: absolute;
+					top: 16px;
+					left: 16px;
+				}
+			}
+
+			.drag-zone {
+				position: absolute;
+				top: 0;
+				left: 38px;
+				height: 100%;
+				width: 38px;
+				font-size: 14px;
+				display: block;
+				color: $mid_grey;
+				
+				.fa {
+					position: absolute;
+					top: 17px;
+					left: 8px;
+					pointer-events: none;
+				}
+			}
+		}
+	}
+
 	@include responsive( $bp_medium ){
 
 		.list-item {