List columns and actions separated

src/js/components/ContextMenu.js

@@ -22,20 +22,17 @@ class ContextMenu extends React.Component{
 			submenu_expanded: false
 		}
 		this.handleScroll = this.handleScroll.bind(this);
-		this.handleMouseUp = this.handleMouseUp.bind(this);
+		this.handleMouseDown = this.handleMouseDown.bind(this);
-		this.handleTouchEnd = this.handleTouchEnd.bind(this);
 	}
 
 	componentDidMount(){
 		window.addEventListener("scroll", this.handleScroll, false);
-		window.addEventListener("mouseup", this.handleMouseUp, false);
+		window.addEventListener("mousedown", this.handleMouseDown, false);
-		window.addEventListener("touchend", this.handleTouchEnd, false);
 	}
 
 	componentWillUnmount(){		
 		window.removeEventListener("scroll", this.handleScroll, false);
-		window.removeEventListener("mouseup", this.handleMouseUp, false);
+		window.removeEventListener("mousedown", this.handleMouseDown, false);
-		window.removeEventListener("touchend", this.handleTouchEnd, false);
 	}
 
 	componentWillReceiveProps(nextProps){
@@ -77,17 +74,7 @@ class ContextMenu extends React.Component{
 		}
 	}
 
-	handleTouchEnd(e){
+	handleMouseDown(e){
-		console.log('ContextMenu > handleTouchEnd');
-		this.handleClick(e);
-	}
-
-	handleMouseUp(e){
-		console.log('ContextMenu > handleMouseUp');
-		this.handleClick(e);
-	}
-
-	handleClick(e){
 		// if we click (touch or mouse) outside of the context menu or context menu trigger, kill it
 		if ($(e.target).closest('.context-menu').length <= 0 && $(e.target).closest('.context-menu-trigger').length <= 0){
 			this.props.uiActions.hideContextMenu()

src/js/components/ContextMenuTrigger.js

@@ -8,11 +8,15 @@ export default class ContextMenuTrigger extends React.Component{
 		super(props);
 	}
 
-	handleMouseUp(e){
+	handleMouseDown(e){
+		e.preventDefault();
+		e.stopPropagation();
 		this.props.onTrigger(e);
 	}
 
-	handleTouchEnd(e){
+	handleClick(e){
+		e.preventDefault();
+		e.stopPropagation();
 		this.props.onTrigger(e);
 	}
 
@@ -23,8 +27,7 @@ export default class ContextMenuTrigger extends React.Component{
 		}
 		return (
 			<span className={className}
-				onMouseUp={e => this.handleMouseUp(e)}
+				onClick={e => this.handleClick(e)}>
-				onTouchEnd={e => this.handleTouchEnd(e)}>
 					<span className="dot"></span>
 					<span className="dot"></span>
 					<span className="dot"></span>

src/js/components/List.js

@@ -89,11 +89,11 @@ class List extends React.Component{
 						if (row.type ) class_name += ' '+row.type
 
 						return (
+							<div className={class_name} key={row_index}>
 								<div 
+									class="liner"
 									onClick={e => this.handleClick(e, row.uri)}
-								onContextMenu={e => this.handleContextMenu(e,row)}
+									onContextMenu={e => this.handleContextMenu(e,row)}>
-								className={class_name}
-								key={row_index}>
 										{
 											this.props.columns.map((col, col_index) => {
 												var className = 'col '+col.name.replace('.','_')
@@ -104,6 +104,7 @@ class List extends React.Component{
 												)
 											})
 										}
+								</div>
 								{this.props.nocontext ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, row)} />}
 							</div>
 						)

src/js/components/Track.js

@@ -100,7 +100,6 @@ export default class Track extends React.Component{
 	}
 
 	handleContextMenu(e){
-		console.log('handle');
 		e.preventDefault();
 		e.stopPropagation();
 		e.cancelBubble = true;
@@ -108,27 +107,29 @@ export default class Track extends React.Component{
 	}
 
 	render(){
-		if (!this.props.track ) return null
+		if (!this.props.track){
+			return null;
+		}
 
-		var track = this.props.track
+		var track = this.props.track;
-		var className = 'list-item track'
+		var className = 'list-item track';
-		if (this.props.selected) className += ' selected'
+		if (this.props.selected) className += ' selected';
-		if (this.props.selected) className += ' selected'
+		if (this.props.can_sort) className += ' can-sort';
-		if (this.props.can_sort) className += ' can-sort'
+		if (track.type !== undefined) className += ' '+track.type;
-		if (track.type !== undefined) className += ' '+track.type
+		if (track.playing) className += ' playing';
-		if (track.playing) className += ' playing'
+		if (this.state.hover) className += ' hover';
-		if (this.state.hover) className += ' hover'
 		
-		var album = '-'
+		var album = '-';
 		if (track.album){
 			if (track.album.uri){
-				album = <URILink type="album" uri={track.album.uri}>{track.album.name}</URILink>
+				album = <URILink type="album" uri={track.album.uri}>{track.album.name}</URILink>;
 			} else {
-				album = <span>{track.album.name}</span>
+				album = <span>{track.album.name}</span>;
 			}
 		}
 
-		let track_columns = []
+		let track_columns = [];
+		let track_actions = [];
 
 		if (track.type == 'history'){
 
@@ -228,7 +229,7 @@ export default class Track extends React.Component{
 			)
 		}
 
-		track_columns.push(
+		track_actions.push(
 			<ContextMenuTrigger key="context" onTrigger={e => this.handleContextMenu(e)} />
 		)
 
@@ -236,7 +237,7 @@ export default class Track extends React.Component{
 
 			// Select zone handles selection events only
 			// We use onClick to capture touch as well as mouse events in one tidy parcel
-			track_columns.push(
+			track_actions.push(
 				<span 
 					className="select-zone"
 					key="select-zone"
@@ -246,7 +247,7 @@ export default class Track extends React.Component{
 			)
 
 			if (this.props.can_sort){
-				track_columns.push(
+				track_actions.push(
 					<span 
 						className="drag-zone"
 						key="drag-zone"
@@ -260,13 +261,15 @@ export default class Track extends React.Component{
 			// the appropriate select/drag zone sub-elements
 			return (
 				<div className={className}>
+					{track_actions}
 					{track_columns}
 				</div>
 			)
 		} else {
 			return (
-				<div
+				<div className={className}>
-					className={className}
+					{track_actions}
+					<div className="liner"
 						onMouseEnter={e => this.setState({hover: true})}
 						onMouseLeave={e => this.setState({hover: false})}
 						//onTouchEnd={e => this.handleTouchEnd(e)}			// When touch dragging is dropped on me
@@ -277,6 +280,7 @@ export default class Track extends React.Component{
 						onContextMenu={e => {this.handleContextMenu(e)}}>
 							{track_columns}
 					</div>
+				</div>
 			)
 		}
 	}

src/js/services/ui/actions.js

@@ -12,8 +12,9 @@ export function setSelectedTracks(keys = []){
 }
 
 export function showContextMenu(data){
-    data.position_x = data.e.clientX
+    data.position_x = data.e.clientX;
-    data.position_y = data.e.clientY
+    data.position_y = data.e.clientY;
+    console.log(data);
     return {
         type: 'SHOW_CONTEXT_MENU',
         data: data

src/scss/components/_context-menu.scss

@@ -21,7 +21,7 @@
 		font-family: "Overpass";
 
 		.title {
-			display: block;
+			display: none;
 			padding: 10px 14px;
 			font-weight: bold;
 			box-sizing: border-box;
@@ -221,14 +221,6 @@
 		}
 	}
 
-	@include responsive(null, $bp_medium){
-		.liner {
-			.title {
-				display: none;
-			}
-		}
-	}
-
 	@include responsive($bp_medium){
 		top: 0 !important;
 		right: 0 !important;
@@ -256,6 +248,7 @@
 			border-radius: 3px;
 
 			.title {
+				display: block;			
 				padding: 14px 18px;
 				box-sizing: border-box;
 				border-radius: 3px 3px 0 0;