diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js index b629c153..b809fa7e 100755 --- a/src/js/components/TrackList.js +++ b/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 ( -
- - this.handleContextMenu(e)} /> -
- ) - } - } - 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 ? this.handleContextMenu(e, true)} /> : null} ); } diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index 88ba7e0e..8a5e0a89 100755 --- a/src/scss/components/_context-menu.scss +++ b/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 ){