diff --git a/src/js/App.js b/src/js/App.js index bf25aedc..59da5660 100755 --- a/src/js/App.js +++ b/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' diff --git a/src/js/components/Header.js b/src/js/components/Header.js index e35a8ebc..578354e7 100755 --- a/src/js/components/Header.js +++ b/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 (
@@ -52,7 +53,6 @@ export default class Header extends React.Component{ return (
{this.props.icon ? : null} - {this.props.title ?

{ this.props.title }

: null} {this.renderOptions()}
diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js index 7815e204..a33ac430 100755 --- a/src/js/components/PlaybackControls.js +++ b/src/js/components/PlaybackControls.js @@ -97,9 +97,9 @@ class PlaybackControls extends React.Component{
- { this.renderConsumeButton() } - { this.renderRandomButton() } - { this.renderRepeatButton() } + {this.renderConsumeButton()} + {this.renderRandomButton()} + {this.renderRepeatButton()}
@@ -113,9 +113,12 @@ class PlaybackControls extends React.Component{
- this.setState({expanded: !this.state.expanded})}> + this.setState({expanded: !this.state.expanded})}> {this.state.expanded ? : } + this.props.uiActions.toggleSidebar()}> + +
@@ -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 } } diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js index 56cfc147..a03df7d2 100755 --- a/src/js/components/Sidebar.js +++ b/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{ +
this.props.uiActions.toggleSidebar(false)}> + +
+ ); } @@ -126,6 +131,7 @@ const mapStateToProps = (state, ownProps) => { const mapDispatchToProps = (dispatch) => { return { + uiActions: bindActionCreators(uiActions, dispatch), mopidyActions: bindActionCreators(mopidyActions, dispatch) } } diff --git a/src/js/components/SidebarToggleButton.js b/src/js/components/SidebarToggleButton.js deleted file mode 100755 index 8a668e40..00000000 --- a/src/js/components/SidebarToggleButton.js +++ /dev/null @@ -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 ( -
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/services/ui/actions.js b/src/js/services/ui/actions.js index bd885b7a..7c963240 100755 --- a/src/js/services/ui/actions.js +++ b/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 } diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index c794b7c4..9194ebb7 100755 --- a/src/js/views/Artist.js +++ b/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 (
-
diff --git a/src/js/views/Queue.js b/src/js/views/Queue.js index 3b000ef7..61ded5de 100755 --- a/src/js/views/Queue.js +++ b/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 (
- -
diff --git a/src/js/views/QueueHistory.js b/src/js/views/QueueHistory.js index 6433e002..756cc85d 100755 --- a/src/js/views/QueueHistory.js +++ b/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 (
-
- - -
diff --git a/src/js/views/discover/DiscoverRecommendations.js b/src/js/views/discover/DiscoverRecommendations.js index 7b351d0d..05ee2ddd 100755 --- a/src/js/views/discover/DiscoverRecommendations.js +++ b/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 (
- - -
diff --git a/src/scss/app.scss b/src/scss/app.scss index b9706a71..cef1e4ab 100755 --- a/src/scss/app.scss +++ b/src/scss/app.scss @@ -15,7 +15,6 @@ @import 'components/slider'; @import 'components/playback-controls'; @import 'components/sidebar'; -@import 'components/sidebar-toggle-button'; @import 'components/lists'; @import 'components/grid'; @import 'components/grid-slider'; diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index f2371379..3505da3e 100755 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -57,15 +57,18 @@ main { top: 0; left: 0; width: 100%; - z-index: 99; + z-index: 98; } @include responsive($bp_medium){ padding: 10px 10px 10px 0; - margin-bottom: -20px; + margin-bottom: -10px; .icon { - visibility: hidden; + height: 1.2rem; + margin-bottom: 5px; + padding-right: 10px; + margin-left: 10px; } h1 { diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss index 3f662560..3efa3bd9 100755 --- a/src/scss/components/_playback-controls.scss +++ b/src/scss/components/_playback-controls.scss @@ -86,7 +86,7 @@ font-size: 12px; color: $white; cursor: pointer; - padding: 8px 6px; + padding: 10px 8px; display: inline-block; vertical-align: bottom; opacity: 0.8; @@ -117,11 +117,11 @@ section { position: absolute; - bottom: 11px; + bottom: 8px; &.playback { - left: 20px; - width: 120px; + left: 10px; + width: 125px; text-align: center; } @@ -257,6 +257,22 @@ &.triggers { display: block; right: 10px; + + .sidebar-toggle.open { + opacity: 1 !important; + + &:after { + background: rgba(0,0,0,0.8); + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 99; + } + } } } diff --git a/src/scss/components/_sidebar-toggle-button.scss b/src/scss/components/_sidebar-toggle-button.scss deleted file mode 100755 index f43f91d1..00000000 --- a/src/scss/components/_sidebar-toggle-button.scss +++ /dev/null @@ -1,43 +0,0 @@ - - -.sidebar-toggle { - @include animate(0.15s); - position: absolute; - top: 0; - left: 0; - padding: 18px; - z-index: 98; - color: $white; - font-size: 18px; - cursor: pointer; - display: none; - - @include responsive($bp_medium){ - display: block; - } - - &.open { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: $overlay_dark; - color: $white; - z-index: 99; - - -ms-transform: translate(220px, 0); - -webkit-transform: translate(220px, 0); - transform: translate(220px, 0); - - .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 5dacdd0c..1b2d1b99 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -99,18 +99,30 @@ aside{ } } + .close { + display: none; + position: absolute; + bottom: 10px; + right: 10px; + padding: 10px 8px; + display: inline-block; + opacity: 0.5; + z-index: 99; + } + @include responsive($bp_medium){ @include animate(0.15s); width: 220px; - left: -220px; + left: auto; + right: -220px; padding-bottom: 0; position: fixed; z-index: 100; .sidebar-open & { - -ms-transform: translate(220px, 0); - -webkit-transform: translate(220px, 0); - transform: translate(220px, 0); + -ms-transform: translate(-220px, 0); + -webkit-transform: translate(-220px, 0); + transform: translate(-220px, 0); } .liner { @@ -120,5 +132,9 @@ aside{ .thumbnail { display: none; } + + .close { + display: block; + } } } \ No newline at end of file