diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js
index 50fc1079..b629c153 100755
--- a/src/js/components/TrackList.js
+++ b/src/js/components/TrackList.js
@@ -2,6 +2,7 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
import Track from './Track'
import ContextMenuTrigger from './ContextMenuTrigger'
@@ -267,6 +268,14 @@ 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
@@ -306,6 +315,21 @@ 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
@@ -335,7 +359,7 @@ class TrackList extends React.Component{
}
)
}
- {this.selectedTracks().length > 0 ? this.handleContextMenu(e)} /> : null}
+ {this.renderContextButtons()}
);
}
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index 21609a7e..88ba7e0e 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -262,26 +262,38 @@
}
.track-list {
- .context-menu-trigger {
+
+ .context-buttons {
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 {
+ .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%);
+ }
}
- &:active {
- background: darken($blue, 10%);
+ .unselect-all {
+ background: $red;
+
+
+ &:focus,
+ &:active {
+ background: darken($red, 10%);
+ }
}
@include responsive( $bp_medium ){