Drag events on tracks with new style

src/js/components/List.js

@@ -95,6 +95,14 @@ class List extends React.Component{
 							class_name += " list__item--has-middle-column";
 						}
 
+						if (this.props.thumbnail){
+							class_name += " list__item--has-thumbnail";
+						}
+
+						if (this.props.details){
+							class_name += " list__item--has-details";
+						}
+
 						return (
 							<div
 								className={class_name} 

src/js/components/Track.js

@@ -183,14 +183,8 @@ export default class Track extends React.Component{
 
 		var track = this.props.track;
 		var className = 'list__item list__item--track mouse-draggable mouse-selectable mouse-contextable';
-		if (this.props.selected) className += ' list__item--selected';
-		if (this.props.can_sort) className += ' list__item--can-sort';
-		if (track.type !== undefined) className += ' list__item--'+track.type;
-		if (track.playing) className += ' list__item--playing';
-		if (this.state.hover) className += ' list__item--hover';
-
-		let track_details = [];
-		let track_actions = [];
+		var track_details = [];
+		var track_actions = [];
 
 		if (track.artists){
 			track_details.push(
@@ -246,7 +240,7 @@ export default class Track extends React.Component{
 				var track_middle_column = (
 					<div className="list__item__column__item list__item__column__item--added">
 						<span className="by">{track.added_by} </span>
-						<span className="from">(from {link})</span>
+						<span className="from">from {link}</span>
 					</div>
 				);
 
@@ -262,7 +256,7 @@ export default class Track extends React.Component{
 		// If we're touchable, and can sort this tracklist
 		var drag_zone = null;
 		if (helpers.isTouchDevice() && this.props.can_sort){
-			className += " has-touch-drag-zone"
+			className += " list__item--has-drag-zone"
 
 			drag_zone = (
 				<span 
@@ -273,9 +267,13 @@ export default class Track extends React.Component{
 			);
 		}
 
-		if (track_middle_column){
-			className += " list__item--has-middle-column";
-		}
+		if (this.props.selected)		className += ' list__item--selected';
+		if (this.props.can_sort)		className += ' list__item--can-sort';
+		if (track.type !== undefined)	className += ' list__item--'+track.type;
+		if (track.playing)				className += ' list__item--playing';
+		if (this.state.hover)			className += ' list__item--hover';
+		if (track_middle_column)		className += " list__item--has-middle-column";
+		if (track_details.length > 0)	className += " list__item--has-details";
 
 		return (
 			<ErrorBoundary>
@@ -306,9 +304,9 @@ export default class Track extends React.Component{
 								{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
 								{track.playing ? <Icon className={"js--"+this.props.play_state} name="playing" type="css"></Icon> : null}
 							</div>
-							<ul className="list__item__column__item--details">
+							{track_details ? <ul className="list__item__column__item--details">
 								{track_details}
-							</ul>
+							</ul> : null}
 						</div>
 						{track_middle_column ? <div className="list__item__column list__item__column--middle">{track_middle_column}</div> : null}
 				</div>

src/js/components/TrackList.js

@@ -134,7 +134,7 @@ class TrackList extends React.Component{
 			let touch = e.touches[0];
 			let over = $(document.elementFromPoint(touch.clientX, touch.clientY));
 			if (!over.is('.track')){
-				over = over.closest('.track');
+				over = over.closest('.list__item--track');
 			}
 			$(document).find('.touch-drag-hover').removeClass('touch-drag-hover');
 			if (over.length > 0){
@@ -153,12 +153,12 @@ class TrackList extends React.Component{
 		if (this.touch_dragging_tracks_keys){
 			let touch = e.changedTouches[0];
 			let over = $(document.elementFromPoint(touch.clientX, touch.clientY));
-			if (!over.is('.track')){
-				over = over.closest('.track');
+			if (!over.is('.list__item--track')){
+				over = over.closest('.list__item--track');
 			}
 			if (over.length > 0){
-				let siblings = over.parent().children('.track');
-				let dropped_at = siblings.index(over) - 1;
+				let siblings = over.parent().children('.list__item--track');
+				let dropped_at = siblings.index(over);
 
 				if (this.props.reorderTracks !== undefined){
 					this.props.reorderTracks(helpers.arrayOf('index',this.digestTracksKeys()),dropped_at);
@@ -389,7 +389,7 @@ class TrackList extends React.Component{
 			return null;
 		}
 
-		var className = 'list track-list '+this.props.context
+		var className = 'list list--tracks '+this.props.context
 		if (this.props.className){
 			className += ' '+this.props.className
 		}

src/scss/components/_lists.scss

@@ -113,6 +113,26 @@
 			}
 		}
 
+		&--has-drag-zone {
+			padding-left: 45px;
+
+			.list__item {
+				&__column {
+					&__item {
+						&--drag-zone {
+							position: absolute;
+							top: 0;
+							left: 0;
+							bottom: 0;
+							width: 35px;
+							padding-top: 22px;
+							text-align: center;
+						}
+					}
+				}
+			}
+		}
+
 		&--has-middle-column {
 			.list__item {
 				&__column {
@@ -122,21 +142,38 @@
 					}
 
 					&--middle {
-						width: 30%;
+						width: 25%;
 						float: left;
 					}
 				}
 			}
 		}
 
+		&--has-thumbnail {
+			.list__item {
+				&__column {
+					&--name {
+						padding-left: 46px;
+					}
+				}
+			}
+		}
+
+		&--has-details {
+			.list__item {
+				&__column {
+					&--name {
+						padding-top: 14px;
+						padding-bottom: 10px;
+					}
+				}
+			}
+		}
+
 		&__column {
 			padding: 24px 0 16px;
 
-			&--name {
-				padding: 14px 0 10px;
-			}
-
-			&--right {					
+			&--right {
 				float: right;
 
 				.list__item__column__item {
@@ -151,8 +188,13 @@
 					&,
 					&.thumbnail {
 						width: 40px;
-						float: left;
-						margin: -2px 14px 0 -10px;
+						position: absolute;
+						top: 12px;
+						left: 12px;
+
+						@include responsive($bp_medium){
+							left: 16px;
+						}
 					}
 				}
 
@@ -176,6 +218,17 @@
 					}
 				}
 
+				&--added {
+					.from {
+						&:before {
+							content: '(';
+						}
+						&:after {
+							content: ')';
+						}
+					}
+				}
+
 				&--context-menu-trigger {
 					font-size: 14px;
 					margin: -14px -14px -14px 0;
@@ -198,6 +251,7 @@
 			cursor: pointer;
 
 			:root .dragging &:hover,
+			:root .dragging &--hover,
 			&.touch-drag-hover {
 				&:before {
 					opacity: 1;
@@ -231,41 +285,57 @@
 	}
 
 	@include responsive($bp_medium){
-
 		&__item {
 
-			&__content {
-				padding: 10px 0;
+			:root .notouch:not(.dragging) &:not(.no-click) {
+				&:active,
+				&:focus {
+					@include noanimate();
+					-moz-transform: scale(0.98);
+					-webkit-transform: scale(0.98);
+					transform: scale(0.98);
+				}
 			}
 
-			&__name {
-				font-size: 14px;
+			&--has-middle-column {
+				.list__item__column {
+					&--name {
+						width: auto;
+						float: none;
+					}
+				}
 			}
 
-			&__actions {
-				padding-top: 10px;
-			}
+			&__column {
 
-			&__extra-detail {
-				padding-top: 14px;
-
-				&--source {
+				&--middle {
 					display: none;
 				}
 
-				&--added {
+				&__item {
 
-					.by,
-					.by-label {
-						display: none;
+					&--name {
+						font-size: 14px;
 					}
 
-					.from {
-						text-transform: capitalize;
+					&--source {
+						display: none !important;
 					}
 
-					.from-label {
-						display: none;
+					&--added {
+
+						.by {
+							display: none;
+						}
+
+						.from {
+							text-transform: capitalize;
+
+							&:before,
+							&:after {
+								display: none;
+							}
+						}
 					}
 				}
 			}