Context menu for all lists

VERSION.md

@@ -1 +1 @@
-3.7.0
+3.8.0

src/js/components/ContextMenuTrigger.js

@@ -14,10 +14,12 @@ export default class ContextMenuTrigger extends React.Component{
 			className += ' '+this.props.className
 		}
 		return (
-			<span className={className} onClick={e => this.props.onTrigger(e)}>
-				<span className="dot"></span>
-				<span className="dot"></span>
-				<span className="dot"></span>
+			<span className={className}
+				onMouseDown={e => this.props.onTrigger(e)}
+				onTouchEnd={e => this.props.onTrigger(e)}>
+					<span className="dot"></span>
+					<span className="dot"></span>
+					<span className="dot"></span>
 			</span>
 		);
 	}

src/js/components/List.js

@@ -8,6 +8,7 @@ import FontAwesome from 'react-fontawesome'
 import ArtistSentence from './ArtistSentence'
 import Dater from './Dater'
 import URILink from './URILink'
+import ContextMenuTrigger from './ContextMenuTrigger'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -103,6 +104,7 @@ class List extends React.Component{
 										)
 									})
 								}
+								<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, row)} />
 							</div>
 						)
 					})

src/js/components/Track.js

@@ -6,6 +6,7 @@ import FontAwesome from 'react-fontawesome'
 import ArtistSentence from './ArtistSentence'
 import Dater from './Dater'
 import URILink from './URILink'
+import ContextMenuTrigger from './ContextMenuTrigger'
 
 import * as helpers from '../helpers'
 
@@ -227,12 +228,7 @@ export default class Track extends React.Component{
 		}
 
 		track_columns.push(
-			<span 
-				className="context-zone"
-				key="context-zone"
-				onClick={e => this.handleContextMenu(e)}>
-					<FontAwesome name="ellipsis-h" fixedWidth />
-			</span>
+			<ContextMenuTrigger key="context" onTrigger={e => this.handleContextMenu(e)} />
 		)
 
 		if (this.props.mini_zones){

src/scss/components/_lists.scss

@@ -12,7 +12,7 @@
 
 		display: block;
 		position: relative;
-		padding: 14px 10px 13px;
+		padding: 14px 30px 13px 10px;
 		margin: 0 -10px -1px -10px;
 		cursor: pointer;
 		border-radius: 3px;
@@ -39,6 +39,29 @@
 			display: none;
 		}
 
+		.context-menu-trigger {
+			position: absolute;
+			top: 6px;
+			right: 0;
+
+			.dot {
+				width: 4px;
+				height: 4px;
+				margin-left: 0;
+			}
+
+			&:before {
+				display: none !important;
+			}
+		}
+
+		.source {
+			color: $mid_grey;
+			position: absolute;
+			top: 16px;
+			right: 32px;
+		}
+
 		:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {
 			background: rgba(255,255,255,0.03);
 			cursor: pointer;
@@ -85,24 +108,6 @@
 				margin-top: -3px;
 				background: transparent;
 			}
-
-			.source {
-				color: $mid_grey;
-				position: absolute;
-				top: 16px;
-				right: 32px;
-			}
-
-			.context-zone {
-				position: absolute;
-				top: 12px;
-				right: 4px;
-				padding: 4px;
-
-				.fa {
-					font-size: 16px;
-				}
-			}
 		}
 	}