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

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)