diff --git a/src/js/components/MiniPlayer.js b/src/js/components/MiniPlayer.js index 6b08fee2..15d59487 100755 --- a/src/js/components/MiniPlayer.js +++ b/src/js/components/MiniPlayer.js @@ -28,7 +28,7 @@ class MiniPlayer extends React.Component{ render(){ return ( -
+
{ this.props.current_track ? this.props.current_track.name : - }
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js index e3058f8f..baa766e4 100755 --- a/src/js/components/Sidebar.js +++ b/src/js/components/Sidebar.js @@ -4,7 +4,6 @@ import { connect } from 'react-redux' import { bindActionCreators } from 'redux' import { Link } from 'react-router' -import MiniPlayer from './MiniPlayer' import Icon from './Icon' import Thumbnail from './Thumbnail' import SearchForm from './SearchForm' @@ -95,7 +94,6 @@ class Sidebar extends React.Component{
- ); diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js index 18ae18cb..f398346d 100755 --- a/src/js/components/TrackList.js +++ b/src/js/components/TrackList.js @@ -60,13 +60,31 @@ class TrackList extends React.Component{ handleTouchEnd(e, index){ var pageX = Math.round(e.changedTouches[0].pageX) var pageY = Math.round(e.changedTouches[0].pageY) + + // make sure our touch was within the threshold of the touch start + // this helps us differentiate between taps and drags but doesn't consider + // multi-finger touches if( this._touch_x < ( pageX + this._touch_threshold ) && this._touch_x > ( pageX - this._touch_threshold ) && this._touch_y < ( pageY + this._touch_threshold ) && this._touch_y > ( pageY - this._touch_threshold ) ){ + + // toggle selection var tracks = this.state.tracks tracks[index].selected = !tracks[index].selected this.setState({ tracks: tracks, lastSelectedTrack: index }) + + // update our context menu to hide/show + var selected_tracks = this.selectedTracks() + if( selected_tracks.length > 0 ){ + var data = { + selected_tracks: selected_tracks, + selected_tracks_indexes: this.tracksIndexes( selected_tracks ) + } + this.props.uiActions.showContextMenu( e, this.props.context, data ) + }else{ + this.props.uiActions.hideContextMenu() + } } e.preventDefault() diff --git a/src/js/views/App.js b/src/js/views/App.js index c624ee67..5035af4e 100755 --- a/src/js/views/App.js +++ b/src/js/views/App.js @@ -6,6 +6,7 @@ import { browserHistory, Link } from 'react-router' import { connect } from 'react-redux' import Sidebar from '../components/Sidebar' +import MiniPlayer from '../components/MiniPlayer' import SidebarToggleButton from '../components/SidebarToggleButton' import ContextMenu from '../components/ContextMenu' import Dragger from '../components/Dragger' @@ -119,7 +120,8 @@ class App extends React.Component{ return (
- + +
{this.props.children}
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index 588c0c5c..e0b513b5 100755 --- a/src/scss/components/_context-menu.scss +++ b/src/scss/components/_context-menu.scss @@ -50,4 +50,24 @@ } } } + + @include responsive( $bp_medium ){ + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + top: auto !important; + background: $blue; + + .menu-item { + display: inline-block; + width: auto; + height: auto; + border: 0 !important; + + .fa, + .submenu { + display: none !important; + } + } + } } \ No newline at end of file diff --git a/src/scss/components/_player.scss b/src/scss/components/_player.scss index a42c288f..c4358535 100755 --- a/src/scss/components/_player.scss +++ b/src/scss/components/_player.scss @@ -52,12 +52,13 @@ } } - aside & { + &.mini-player { position: absolute; bottom: 0; left: 0; - right: 0; - z-index: 2; + width: 200px; + box-sizing: border-box; + z-index: 97; padding: 14px; color: #FFFFFF; @@ -67,9 +68,12 @@ } } - @include responsive( null, $bp_medium, $bp_shallow ){ + @include responsive( $bp_medium, null, $bp_shallow ){ position: fixed; + right: 0; + width: auto; background: $dark_grey; + z-index: 99; .controls { position: absolute; diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index 3142dfa9..ffdcc56a 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -104,4 +104,7 @@ aside{ } } + + @include responsive( $bp_medium ){ + } } \ No newline at end of file