Use slim_mode AND isTouchDevice to provide mini_zones on tracks; fixes #151

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

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'} 

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>

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 {