From cffc47579901c6f7a6a00a6965056211a048b187 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sat, 18 Nov 2017 08:15:06 +1300
Subject: [PATCH] Context menu for all lists

---
 VERSION.md                              |  2 +-
 src/js/components/ContextMenuTrigger.js | 10 +++---
 src/js/components/List.js               |  2 ++
 src/js/components/Track.js              |  8 ++---
 src/scss/components/_lists.scss         | 43 ++++++++++++++-----------
 5 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/VERSION.md b/VERSION.md
index 240bba90..0be1fc7d 100755
--- a/VERSION.md
+++ b/VERSION.md
@@ -1 +1 @@
-3.7.0
\ No newline at end of file
+3.8.0
\ No newline at end of file
diff --git a/src/js/components/ContextMenuTrigger.js b/src/js/components/ContextMenuTrigger.js
index 8d60d862..3994d5aa 100755
--- a/src/js/components/ContextMenuTrigger.js
+++ b/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>
 		);
 	}
diff --git a/src/js/components/List.js b/src/js/components/List.js
index 29d3b847..de55e3f2 100755
--- a/src/js/components/List.js
+++ b/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>
 						)
 					})
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 60b87e81..987c0958 100755
--- a/src/js/components/Track.js
+++ b/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){
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index f62854e2..5aa41371 100755
--- a/src/scss/components/_lists.scss
+++ b/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;
-				}
-			}
 		}
 	}