Removing SidebarToggleButton, moving trigger to thumb-friendly buttom-right

src/js/App.js

@@ -7,7 +7,6 @@ import { connect } from 'react-redux'
 
 import Sidebar from './components/Sidebar'
 import PlaybackControls from './components/PlaybackControls'
-import SidebarToggleButton from './components/SidebarToggleButton'
 import ContextMenu from './components/ContextMenu'
 import Dragger from './components/Dragger'
 import Modal from './components/Modal/Modal'

src/js/components/Header.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import FontAwesome from 'react-fontawesome'
 
 import Icon from './Icon'
-import SidebarToggleButton from './SidebarToggleButton'
 import ContextMenuTrigger from './ContextMenuTrigger'
 
 export default class Header extends React.Component{
@@ -34,7 +33,9 @@ export default class Header extends React.Component{
 	}
 
 	renderOptions(){
-		if (!this.props.options && !this.props.handleContextMenuTrigger) return null
+		if (!this.props.options && !this.props.handleContextMenuTrigger){
+			return null;
+		}
 
 		return (
 			<div className='options'>
@@ -52,7 +53,6 @@ export default class Header extends React.Component{
 		return (
 			<header className={(this.props.className ? this.props.className : null)}>
 				{this.props.icon ? <Icon name={this.props.icon} /> : null}
-				<SidebarToggleButton />
 				{this.props.title ? <h1>{ this.props.title }</h1> : null}
 				{this.renderOptions()}
 			</header>

src/js/components/PlaybackControls.js

@@ -97,9 +97,9 @@ class PlaybackControls extends React.Component{
 				</section>
 
 				<section className="settings">
-					{ this.renderConsumeButton() }
-					{ this.renderRandomButton() }
-					{ this.renderRepeatButton() }
+					{this.renderConsumeButton()}
+					{this.renderRandomButton()}
+					{this.renderRepeatButton()}
 				</section>
 
 				<section className="progress">
@@ -113,9 +113,12 @@ class PlaybackControls extends React.Component{
 				</section>
 
 				<section className="triggers">
-					<a className="control next" onClick={() => this.setState({expanded: !this.state.expanded})}>
+					<a className="control expanded-controls" onClick={() => this.setState({expanded: !this.state.expanded})}>
 						{this.state.expanded ? <FontAwesome name="chevron-down" /> : <FontAwesome name="chevron-up" />}
 					</a>
+					<a className={"control sidebar-toggle"+(this.props.sidebar_open ? ' open' : '')} onClick={() => this.props.uiActions.toggleSidebar()}>
+						<FontAwesome className="open" name="bars" />
+					</a>
 				</section>
 				
 			</div>
@@ -138,7 +141,8 @@ const mapStateToProps = (state, ownProps) => {
 		time_position: state.mopidy.time_position,
 		consume: state.mopidy.consume,
 		repeat: state.mopidy.repeat,
-		random: state.mopidy.random
+		random: state.mopidy.random,
+		sidebar_open: state.ui.sidebar_open
 	}
 }
 

src/js/components/Sidebar.js

@@ -9,6 +9,7 @@ import Dropzones from './Dropzones'
 import Thumbnail from './Thumbnail'
 
 import FontAwesome from 'react-fontawesome'
+import * as uiActions from '../services/ui/actions'
 import * as mopidyActions from '../services/mopidy/actions'
 
 class Sidebar extends React.Component{
@@ -100,6 +101,10 @@ class Sidebar extends React.Component{
 
 		       	<Dropzones />
 
+		       	<div className="close" onClick={e => this.props.uiActions.toggleSidebar(false)}>
+		       		<FontAwesome name="chevron-right" />
+		       	</div>
+
 			</aside>
 		);
 	}
@@ -126,6 +131,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = (dispatch) => {
 	return {
+		uiActions: bindActionCreators(uiActions, dispatch),
 		mopidyActions: bindActionCreators(mopidyActions, dispatch)
 	}
 }

src/js/components/SidebarToggleButton.js

@@ -1,46 +0,0 @@
-
-import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
-
-import * as uiActions from '../services/ui/actions'
-
-class SidebarToggleButton extends React.Component{
-
-	constructor(props){
-		super(props);
-	}
-
-	handleClick(e){
-		this.props.uiActions.toggleSidebar()
-	} 
-
-	render(){
-
-		var classname = 'sidebar-toggle'
-		if (this.props.open ) classname += ' open'
-		if (this.props.className ) classname += ' '+this.props.className
-
-		return (
-			<div className={classname} onClick={ () => this.handleClick() }>
-				<FontAwesome className="open" name="bars" /> 
-				<FontAwesome className="close" name="chevron-left" />
-			</div>
-		);
-	}
-}
-
-const mapStateToProps = (state, ownProps) => {
-	return {
-		open: state.ui.sidebar_open
-	}
-}
-
-const mapDispatchToProps = (dispatch) => {
-	return {
-		uiActions: bindActionCreators(uiActions, dispatch)
-	}
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SidebarToggleButton)

src/js/services/ui/actions.js

@@ -54,8 +54,12 @@ export function lazyLoading(start){
 }
 
 export function toggleSidebar(new_state = 'toggle'){
-    var action = { type: 'TOGGLE_SIDEBAR' }
-    if (new_state != 'toggle' ) action.new_state = new_state
+    var action = {
+        type: 'TOGGLE_SIDEBAR'
+    }
+    if (new_state != 'toggle'){
+        action.new_state = new_state
+    }
     return action
 }
 

src/js/views/Artist.js

@@ -14,7 +14,6 @@ import Parallax from '../components/Parallax'
 import ArtistGrid from '../components/ArtistGrid'
 import RelatedArtists from '../components/RelatedArtists'
 import FollowButton from '../components/FollowButton'
-import SidebarToggleButton from '../components/SidebarToggleButton'
 import ContextMenuTrigger from '../components/ContextMenuTrigger'
 
 import * as helpers from '../helpers'
@@ -232,7 +231,6 @@ class Artist extends React.Component{
 		} else {
 			return (
 				<div className="view artist-view">
-					<SidebarToggleButton />
 					<div className="intro">
 						<Parallax />
 						<div className="liner">

src/js/views/Queue.js

@@ -9,7 +9,6 @@ import Parallax from '../components/Parallax'
 import TrackList from '../components/TrackList'
 import Track from '../components/Track'
 import Dater from '../components/Dater'
-import SidebarToggleButton from '../components/SidebarToggleButton'
 import FullPlayer from '../components/FullPlayer'
 import ArtistSentence from '../components/ArtistSentence'
 import Thumbnail from '../components/Thumbnail'
@@ -111,9 +110,7 @@ class Queue extends React.Component{
 		return (
 			<div className="view queue-view">			
 				<Header icon="play" className="overlay" title="Now playing" options={options} uiActions={this.props.uiActions} />
-
 				<Parallax blur image={image} />
-
 				<div className="content-wrapper">
 				
 					<div className="current-track">

src/js/views/QueueHistory.js

@@ -6,7 +6,6 @@ import { bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
 
 import TrackList from '../components/TrackList'
-import SidebarToggleButton from '../components/SidebarToggleButton'
 import Header from '../components/Header'
 
 import * as uiActions from '../services/ui/actions'
@@ -49,7 +48,6 @@ class QueueHistory extends React.Component{
 		return (
 			<div className="view queue-history-view">
 				<Header icon="play" title="Playback history" options={options} uiActions={this.props.uiActions} />
-
 				<section className="content-wrapper">
 					<TrackList
 						className="queue-history-track-list"

src/js/views/User.js

@@ -8,7 +8,6 @@ import Thumbnail from '../components/Thumbnail'
 import PlaylistGrid from '../components/PlaylistGrid'
 import FollowButton from '../components/FollowButton'
 import LazyLoadListener from '../components/LazyLoadListener'
-import SidebarToggleButton from '../components/SidebarToggleButton'
 import Parallax from '../components/Parallax'
 import ContextMenuTrigger from '../components/ContextMenuTrigger'
 
@@ -82,9 +81,6 @@ class User extends React.Component{
 
 		return (
 			<div className="view user-view">
-
-				<SidebarToggleButton />
-
 				<div className="intro">
 					<Parallax image={image} />
 					<div className="liner">

src/js/views/discover/DiscoverRecommendations.js

@@ -11,7 +11,6 @@ import AlbumGrid from '../../components/AlbumGrid'
 import TrackList from '../../components/TrackList'
 import Parallax from '../../components/Parallax'
 import AddSeedField from '../../components/AddSeedField'
-import SidebarToggleButton from '../../components/SidebarToggleButton'
 import * as helpers from '../../helpers'
 import * as spotifyActions from '../../services/spotify/actions'
 
@@ -226,9 +225,6 @@ class Discover extends React.Component{
 	render(){
 		return (
 			<div className="view discover-view">
-			
-				<SidebarToggleButton />
-
 				<div className="intro">
 
 					<Parallax image="/iris/assets/backgrounds/discover.jpg" />