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 ){