Remove unselect button; Unselect on trigger of context

src/js/components/TrackList.js

@@ -144,7 +144,7 @@ class TrackList extends React.Component{
 		}
 	}
 
-	handleContextMenu(e){
+	handleContextMenu(e, deselect = false){
 		var selected_tracks = this.selectedTracks()
 		var data = {
 			e: e,
@@ -155,6 +155,10 @@ class TrackList extends React.Component{
 			indexes: this.tracksIndexes(selected_tracks)
 		}
 		this.props.uiActions.showContextMenu(data)
+
+		if (deselect){
+			this.deselectAllTracks()
+		}
 	}
 
 	toggleTrackSelections(e,index){
@@ -200,6 +204,14 @@ class TrackList extends React.Component{
 		this.setState({ tracks: tracks, lastSelectedTrack: lastSelectedTrack })
 	}
 
+	deselectAllTracks(){		
+		var tracks = this.props.tracks
+		for (var i = 0; i < tracks.length; i++){
+			tracks[i].selected = false
+		}
+		this.setState({tracks: tracks})
+	}
+
 	isRightClick(e){
 		if( 'which' in e ) 
 			return e.which == 3
@@ -268,14 +280,6 @@ class TrackList extends React.Component{
 		// by default, do nothing
 	}
 
-	unselectAll(e){
-		var tracks = this.props.tracks
-		for (var i = 0; i < tracks.length; i++){
-			tracks[i].selected = false
-		}
-		this.setState({tracks: tracks})
-	}
-
 	renderHeader(){
 		if( this.props.noheader ) return null
 		
@@ -315,21 +319,6 @@ class TrackList extends React.Component{
 		}
 	}
 
-	renderContextButtons(){
-		if (this.selectedTracks().length <= 0){
-			return null
-		} else {
-			return (
-				<div className="context-buttons">
-					<button className="context-menu-trigger unselect-all" onClick={e => this.unselectAll(e)}>
-						<FontAwesome name="close" />
-					</button>
-					<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
-				</div>
-			)
-		}
-	}
-
 	render(){
 		if( !this.state.tracks || Object.prototype.toString.call(this.state.tracks) !== '[object Array]' ) return null
 
@@ -359,7 +348,7 @@ class TrackList extends React.Component{
 						}
 					)
 				}
-				{this.renderContextButtons()}
+				{this.selectedTracks().length > 0 ? <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, true)} /> : null}
 			</div>
 		);
 	}

src/scss/components/_context-menu.scss

@@ -262,38 +262,23 @@
 }
 
 .track-list {
-
-	.context-buttons {
+	.context-menu-trigger {	
 		display: none;
 		position: fixed;
-		bottom: 55px;
-		right: 10px;
+		bottom: 50px;
+		right: 5px;
 		z-index: 97;
-
-		.context-menu-trigger {	
-			border-radius: 50%;
-			background: $blue;
-			color: #FFFFFF;
-			width: 40px;
-			height: 40px;
-			overflow: hidden;
-			margin: 0 0 0 5px;
-			display: inline-block;
-			
-			&:focus,
-			&:active {
-				background: darken($blue, 10%);
-			}
-		}
-
-		.unselect-all {
-			background: $red;
-
-
-			&:focus,
-			&:active {
-				background: darken($red, 10%);
-			}
+		border-radius: 50%;
+		background: $blue;
+		color: #FFFFFF;
+		width: 50px;
+		height: 50px;
+		overflow: hidden;
+		display: inline-block;
+		
+		&:focus,
+		&:active {
+			background: darken($blue, 10%);
 		}
 
 		@include responsive( $bp_medium ){