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,21 +89,22 @@ class List extends React.Component{
 						if (row.type ) class_name += ' '+row.type
 
 						return (
-							<div
+							<div className={class_name} key={row_index}>
-								onClick={e => this.handleClick(e, row.uri)}
+								<div 
-								onContextMenu={e => this.handleContextMenu(e,row)}
+									class="liner"
-								className={class_name}
+									onClick={e => this.handleClick(e, row.uri)}
-								key={row_index}>
+									onContextMenu={e => this.handleContextMenu(e,row)}>
-								{
+										{
-									this.props.columns.map((col, col_index) => {
+											this.props.columns.map((col, col_index) => {
-										var className = 'col '+col.name.replace('.','_')
+												var className = 'col '+col.name.replace('.','_')
-										return (
+												return (
-											<div className={className} key={col_index}>
+													<div className={className} key={col_index}>
-												{ this.renderValue(row, col.name) }
+														{ this.renderValue(row, col.name) }
-											</div>
+													</div>
-										)
+												)
-									})
+											})
-								}
+										}
+								</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,22 +261,25 @@ export default class Track extends React.Component{
 			// the appropriate select/drag zone sub-elements
 			return (
 				<div className={className}>
-					{ track_columns }
+					{track_actions}
+					{track_columns}
 				</div>
 			)
 		} else {
 			return (
-				<div
+				<div className={className}>
-					className={className}
+					{track_actions}
-					onMouseEnter={e => this.setState({hover: true})}
+					<div className="liner"
-					onMouseLeave={e => this.setState({hover: false})}
+						onMouseEnter={e => this.setState({hover: true})}
-					//onTouchEnd={e => this.handleTouchEnd(e)}			// When touch dragging is dropped on me
+						onMouseLeave={e => this.setState({hover: false})}
-					onMouseDown={e => this.handleMouseDown(e)}			// Click (or potentially a mouse drag start)
+						//onTouchEnd={e => this.handleTouchEnd(e)}			// When touch dragging is dropped on me
-					onMouseMove={e => this.handleMouseMove(e)}			// Any movement over me
+						onMouseDown={e => this.handleMouseDown(e)}			// Click (or potentially a mouse drag start)
-					onMouseUp={e => this.handleMouseUp(e)}				// End of click, or potentially a dragging drop event
+						onMouseMove={e => this.handleMouseMove(e)}			// Any movement over me
-					onDoubleClick={e => this.props.handleDoubleClick(e)}
+						onMouseUp={e => this.handleMouseUp(e)}				// End of click, or potentially a dragging drop event
-					onContextMenu={e => {this.handleContextMenu(e)}}>
+						onDoubleClick={e => this.props.handleDoubleClick(e)}
-						{track_columns}
+						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;
@@ -255,7 +247,8 @@
 			z-index: 2;
 			border-radius: 3px;
 
-			.title {				
+			.title {
+				display: block;			
 				padding: 14px 18px;
 				box-sizing: border-box;
 				border-radius: 3px 3px 0 0;