Floating android-style context trigger on tracklists

src/js/components/ContextMenu.js

@@ -52,8 +52,8 @@ class ContextMenu extends React.Component{
 	}
 
 	handleClick(e){
-		// if we click outside of the context menu, kill it
-		if ($(e.target).closest('.context-menu').length <= 0){
+		// if we click 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/TrackList.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
 import Track from './Track'
+import ContextMenuTrigger from './ContextMenuTrigger'
 
 import * as helpers from '../helpers'
 import * as mopidyActions from '../services/mopidy/actions'
@@ -19,7 +20,7 @@ class TrackList extends React.Component{
 		this._touch_y = null
 
 		this.state = {
-			tracks: this.keyifyTracks(this.props.tracks),
+			tracks: [],
 			lastSelectedTrack: false
 		}
 
@@ -34,6 +35,10 @@ class TrackList extends React.Component{
 		window.removeEventListener("keyup", this.handleKeyUp, false);
 	}
 
+	componentDidMount(){
+		this.setState({ tracks: this.keyifyTracks(this.props.tracks) })
+	}
+
 	componentWillReceiveProps(nextProps){
 		this.setState({ tracks: this.keyifyTracks(nextProps.tracks) });
 	}
@@ -206,7 +211,12 @@ class TrackList extends React.Component{
 
 	keyifyTracks( tracks ){
 		for( var i = 0; i < tracks.length; i++ ){
-			tracks[i] = Object.assign({}, tracks[i], { key: i+'_'+tracks[i].uri })
+			tracks[i] = Object.assign(
+				{}, 
+				tracks[i], 
+				{
+					key: i+'_'+tracks[i].uri
+				})
 		}
 		return tracks
 	}
@@ -317,6 +327,7 @@ class TrackList extends React.Component{
 						}
 					)
 				}
+				{this.selectedTracks().length > 0 ? <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} /> : null}
 			</div>
 		);
 	}

src/scss/components/_context-menu.scss

@@ -100,7 +100,7 @@
 				right: 0;
 				bottom: 0;
 				left: 0;
-				min-height: 200px;
+				min-height: 180px;
 				overflow-y: scroll;			
 				background: lighten($dark_grey, 10%);
 				z-index: 3;
@@ -173,3 +173,32 @@
 		}
 	}
 }
+
+.track-list {
+	.context-menu-trigger {	
+		display: none;
+		position: fixed;
+		bottom: 55px;
+		right: 10px;
+		z-index: 97;
+		border-radius: 50%;
+		background: $blue;
+		color: #FFFFFF;
+		width: 50px;
+		height: 50px;
+		overflow: hidden;
+		margin: 0;
+
+		&:hover {
+			background: $blue;
+		}
+
+		&:active {
+			background: darken($blue, 10%);
+		}
+
+		@include responsive( $bp_medium ){
+			display: block;
+		}
+	}
+}