diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index 7704af2c..576828db 100755 --- a/src/js/components/ContextMenu.js +++ b/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() } } diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js index 48ddbcf0..eae2096a 100755 --- a/src/js/components/TrackList.js +++ b/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 ? this.handleContextMenu(e)} /> : null} ); } diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index 2991f6b9..1a18886e 100755 --- a/src/scss/components/_context-menu.scss +++ b/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; + } + } +} \ No newline at end of file