diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index 4eed86af..c299d30f 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -16,7 +16,7 @@ import * as mopidyActions from '../services/mopidy/actions'
class Sidebar extends React.Component{
constructor(props) {
- super(props);
+ super(props)
}
render(){
diff --git a/src/js/components/SidebarToggleButton.js b/src/js/components/SidebarToggleButton.js
new file mode 100755
index 00000000..6bdbb96b
--- /dev/null
+++ b/src/js/components/SidebarToggleButton.js
@@ -0,0 +1,45 @@
+
+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'
+
+ return (
+ this.handleClick() }>
+
+
+
+ );
+ }
+}
+
+const mapStateToProps = (state, ownProps) => {
+ return {
+ open: state.ui.sidebar_open
+ }
+}
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ uiActions: bindActionCreators(uiActions, dispatch)
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SidebarToggleButton)
\ No newline at end of file
diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js
index d33166c4..f32321ca 100755
--- a/src/js/components/TrackList.js
+++ b/src/js/components/TrackList.js
@@ -165,7 +165,7 @@ class TrackList extends React.Component{
// if we've got a specific action, run it
if( typeof(this.props.playTracks) !== 'undefined' ){
- return this.props.playURIs( tracks );
+ return this.props.playTracks( tracks );
}
// default to playing a bunch of uris
@@ -173,7 +173,7 @@ class TrackList extends React.Component{
for( var i = 0; i < tracks.length; i++ ){
uris.push( tracks[i].uri )
}
- return this.props.mopidyActions.playURIs( uris )
+ return this.props.mopidyActions.playTracks( uris )
}
removeTracks(){
diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js
index b4605f7f..f36e8f08 100755
--- a/src/js/services/mopidy/middleware.js
+++ b/src/js/services/mopidy/middleware.js
@@ -217,6 +217,9 @@ const MopidyMiddleware = (function(){
if( response[i].uri.startsWith('m3u:')) response[i] = Object.assign({}, response[i], { can_edit: true })
}
store.dispatch({ type: 'MOPIDY_PLAYLISTS_LOADED', data: response });
+
+ // TODO: dispatch an action to fetch extra data for each playlist
+ // this will then trigger an PLAYLIST_REFRESHED action to update a specific store item
})
break;
diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js
index 0da0ea5f..b42c63f1 100755
--- a/src/js/services/ui/actions.js
+++ b/src/js/services/ui/actions.js
@@ -40,6 +40,12 @@ export function lazyLoading( start ){
}
}
+export function toggleSidebar(){
+ return {
+ type: 'TOGGLE_SIDEBAR'
+ }
+}
+
export function dragStart( e, context, victims, victims_indexes = false ){
return {
type: 'DRAG_START',
diff --git a/src/js/services/ui/reducer.js b/src/js/services/ui/reducer.js
index df23d39d..d7b97e0b 100755
--- a/src/js/services/ui/reducer.js
+++ b/src/js/services/ui/reducer.js
@@ -9,11 +9,15 @@ export default function reducer(ui = {}, action){
/**
- * View views
+ * UI views and view modes
**/
+
case 'SET_VIEW':
return Object.assign({}, ui, action.view)
+ case 'TOGGLE_SIDEBAR':
+ return Object.assign({}, ui, { sidebar_open : !ui.sidebar_open })
+
/**
* Context menu
diff --git a/src/js/views/App.js b/src/js/views/App.js
index 33356ffa..fc5836ed 100755
--- a/src/js/views/App.js
+++ b/src/js/views/App.js
@@ -6,6 +6,7 @@ import { Link } from 'react-router'
import { connect } from 'react-redux'
import Sidebar from '../components/Sidebar'
+import SidebarToggleButton from '../components/SidebarToggleButton'
import ContextMenu from '../components/ContextMenu'
import Dragger from '../components/Dragger'
import Modal from '../components/Modal/Modal'
@@ -107,11 +108,13 @@ class App extends React.Component{
render(){
var className = '';
if( this.props.dragger && this.props.dragger.active ) className += ' dragging'
+ if( this.props.sidebar_open ) className += ' sidebar-open'
return (
+
{this.props.children}
@@ -133,6 +136,7 @@ const mapStateToProps = (state, ownProps) => {
mopidy_connected: state.mopidy.connected,
spotify_authorized: state.spotify.authorized,
play_state: state.mopidy.play_state,
+ sidebar_open: state.ui.sidebar_open,
dragger: state.ui.dragger,
modal: state.ui.modal,
context_menu: state.ui.context_menu
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 2976536a..c6cb2167 100755
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -15,6 +15,7 @@
@import 'components/slider';
@import 'components/player';
@import 'components/sidebar';
+@import 'components/sidebar-toggle-button';
@import 'components/lists';
@import 'components/grid';
@import 'components/header';
diff --git a/src/scss/components/_sidebar-toggle-button.scss b/src/scss/components/_sidebar-toggle-button.scss
new file mode 100755
index 00000000..81378566
--- /dev/null
+++ b/src/scss/components/_sidebar-toggle-button.scss
@@ -0,0 +1,24 @@
+
+
+.sidebar-toggle {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 20px;
+ z-index: 98;
+ color: #FFFFFF;
+ font-size: 18px;
+ cursor: pointer;
+
+ &.open {
+ .open {
+ display: none;
+ }
+ }
+
+ &:not(.open) {
+ .close {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index e07ad644..880ca0fa 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -9,6 +9,15 @@ aside{
width: 200px;
overflow: hidden;
box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5);
+
+ @include responsive( 800px ){
+ width: 50%;
+ left: -50%;
+
+ .sidebar-open & {
+ left: 0px;
+ }
+ }
.thumbnail {
position: absolute;
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 90d191f4..36f17086 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -16,6 +16,15 @@ body {
main,
footer {
margin-left: 200px;
+
+ @include responsive( 800px ){
+ margin-left: 0;
+
+ .sidebar-open & {
+ margin-left: 50%;
+ margin-right: -50%;
+ }
+ }
}
main {