From 41e4b076eef837dd7ab36641b265a74b0d4d7c80 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Tue, 20 Dec 2016 07:56:42 +1300 Subject: [PATCH] Version manager; Touch event override; Mobile sidebar simplified --- src/js/components/ContextMenu.js | 46 ++++++++++++---- src/js/components/PusherConnectionList.js | 4 +- src/js/components/VersionManager.js | 4 +- src/js/services/mopidy/middleware.js | 1 + src/js/services/pusher/middleware.js | 3 +- src/js/services/ui/middleware.js | 6 +++ src/js/views/Debug.js | 54 ++++++++++++++++--- src/js/views/Settings.js | 4 +- src/scss/components/_context-menu.scss | 35 ++++++------ src/scss/components/_player.scss | 1 - .../components/_sidebar-toggle-button.scss | 8 +++ src/scss/components/_sidebar.scss | 18 +++++-- src/scss/global/_core.scss | 7 +-- src/scss/global/_forms.scss | 5 ++ 14 files changed, 145 insertions(+), 51 deletions(-) diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index 4cbf87b7..57a5c8db 100755 --- a/src/js/components/ContextMenu.js +++ b/src/js/components/ContextMenu.js @@ -101,6 +101,10 @@ class ContextMenu extends React.Component{ this.props.uiActions.hideContextMenu() } + closeAndDeselectTracks(){ + this.props.uiActions.hideContextMenu(); + } + renderPlaylistSubmenu(){ var playlists = [] for( var i = 0; i < this.props.playlists.length; i++ ){ @@ -124,8 +128,8 @@ class ContextMenu extends React.Component{ ) } - renderItems(){ - var items = []; + renderItems(trigger){ + var items = [] switch( this.props.context_menu.context ){ @@ -135,8 +139,8 @@ class ContextMenu extends React.Component{ { handleClick: 'addToPlaylist', label: 'Add to playlist', icon: 'plus', playlists: true }, { handleClick: 'copyURIs', label: 'Copy URIs', icon: 'copy' }, { handleClick: 'removeFromQueue', label: 'Remove', icon: 'trash' } - ]; - break; + ] + break case 'editable-playlist': items = [ @@ -146,8 +150,8 @@ class ContextMenu extends React.Component{ { handleClick: 'addToPlaylist', label: 'Add to playlist', icon: 'plus', playlists: true }, { handleClick: 'copyURIs', label: 'Copy URIs', icon: 'copy' }, { handleClick: 'removeFromPlaylist', label: 'Remove', icon: 'trash' } - ]; - break; + ] + break default: items = [ @@ -156,10 +160,19 @@ class ContextMenu extends React.Component{ { handleClick: 'addToQueue', label: 'Add to queue', icon: 'plus' }, { handleClick: 'addToPlaylist', label: 'Add to playlist', icon: 'plus', playlists: true }, { handleClick: 'copyURIs', label: 'Copy URIs', icon: 'copy' } - ]; - break; + ] + break } + var closeItem = ( + + this.closeAndDeselectTracks(e) }> + + Cancel + + + ) + return (
{ @@ -187,8 +200,9 @@ class ContextMenu extends React.Component{ } }) } + { trigger == 'touch' ? closeItem : null }
- ); + ) } render(){ @@ -199,9 +213,18 @@ class ContextMenu extends React.Component{ top: this.props.context_menu.position_y, } + var className = 'context-menu' + var trigger = 'click' + if (this.props.trigger_override) { + className += ' '+this.props.trigger_override + trigger = this.props.trigger_override + } else { + className += ' '+this.props.context_menu.trigger + } + return ( -
- { this.renderItems() } +
+ { this.renderItems(trigger) }
); } @@ -209,6 +232,7 @@ class ContextMenu extends React.Component{ const mapStateToProps = (state, ownProps) => { return { + trigger_override: state.ui.trigger_override, context_menu: state.ui.context_menu, current_track: state.ui.current_track, current_tracklist: state.ui.current_tracklist, diff --git a/src/js/components/PusherConnectionList.js b/src/js/components/PusherConnectionList.js index 30191be4..b777c234 100755 --- a/src/js/components/PusherConnectionList.js +++ b/src/js/components/PusherConnectionList.js @@ -27,8 +27,8 @@ class PusherConnectionList extends React.Component{ } render(){ - if( !this.props.connected ) return null; - if( typeof(this.props.connections) == 'undefined' || this.props.connections.length <= 0 ) return null; + if( !this.props.connected ) return
Not connected
+ if( typeof(this.props.connections) == 'undefined' || this.props.connections.length <= 0 ) return
No connections
; return (
diff --git a/src/js/components/VersionManager.js b/src/js/components/VersionManager.js index f124ca29..e4f9531a 100755 --- a/src/js/components/VersionManager.js +++ b/src/js/components/VersionManager.js @@ -26,7 +26,7 @@ class VersionManager extends React.Component{ } if( !this.props.pusher.version.is_root ){ - return + return } if( this.props.pusher.version.upgrade_available ){ @@ -39,8 +39,8 @@ class VersionManager extends React.Component{ render(){ return (
- { this.props.pusher.version.current } installed { this.renderUpgradeButton() } +
{ this.props.pusher.version.current } currently installed
); } diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index cc349223..8fd46e70 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -4,6 +4,7 @@ import * as helpers from '../../helpers' var mopidyActions = require('./actions.js') var lastfmActions = require('../lastfm/actions.js') +var pusherActions = require('../pusher/actions.js') const MopidyMiddleware = (function(){ diff --git a/src/js/services/pusher/middleware.js b/src/js/services/pusher/middleware.js index 6d8c2980..1bb7fc08 100755 --- a/src/js/services/pusher/middleware.js +++ b/src/js/services/pusher/middleware.js @@ -1,5 +1,6 @@ -var actions = require('./actions.js') +var pusherActions = require('./actions.js') +var uiActions = require('../ui/actions.js') var helpers = require('../../helpers.js') const PusherMiddleware = (function(){ diff --git a/src/js/services/ui/middleware.js b/src/js/services/ui/middleware.js index f1c12d9c..adb9c655 100755 --- a/src/js/services/ui/middleware.js +++ b/src/js/services/ui/middleware.js @@ -44,6 +44,12 @@ const UIMiddleware = (function(){ next(action) break + case 'PUSHER_VERSION': + if( action.data.version.upgrade_available ) + store.dispatch( uiActions.createNotification( 'Version '+action.data.version.latest+' is available. See settings to upgrade.' ) ) + next( action ) + break + // This action is irrelevant to us, pass it on to the next middleware default: return next(action) diff --git a/src/js/views/Debug.js b/src/js/views/Debug.js index 8415de60..7252da95 100755 --- a/src/js/views/Debug.js +++ b/src/js/views/Debug.js @@ -31,10 +31,10 @@ class Debug extends React.Component{ } componentDidMount(){ - if( this.props.pusher.connectionid ){ + if( this.props.connectionid ){ var data = { action: "notification", - recipients: [this.props.pusher.connectionid], + recipients: [this.props.connectionid], data: { title: "Title", body: "Test notification", @@ -49,7 +49,6 @@ class Debug extends React.Component{ e.preventDefault() console.info('Mopidy Debugger', this.state.mopidy_call, JSON.parse(this.state.mopidy_data) ) this.props.mopidyActions.debug( this.state.mopidy_call, JSON.parse(this.state.mopidy_data) ) - this.props.uiActions.createNotification( 'Mopidy instruction sent' ) } callPusher(e){ @@ -57,7 +56,6 @@ class Debug extends React.Component{ console.info('Pusher Debugger', this.state.pusher_call, JSON.parse(this.state.pusher_data) ) this.props.pusherActions.debug( this.state.pusher_call, JSON.parse(this.state.pusher_data) ) this.props.uiActions.debugResponse({ status: 1, message: 'Sent', call: this.state.pusher_call, data: this.state.pusher_data }) - this.props.uiActions.createNotification( 'Pusher instruction sent' ) } render(){ @@ -65,6 +63,46 @@ class Debug extends React.Component{
+
+ +

User interface

+
+
+
Touch/click behavior
+
+ + + +
+
+
+ +
+

Mopidy

@@ -132,7 +170,7 @@ class Debug extends React.Component{

Response

-						{ this.props.ui.debug_response ? JSON.stringify(this.props.ui.debug_response, null, 2) : null }
+						{ this.props.debug_response ? JSON.stringify(this.props.debug_response, null, 2) : null }
@@ -148,7 +186,11 @@ class Debug extends React.Component{ **/ const mapStateToProps = (state, ownProps) => { - return state; + return { + connectionid: state.pusher.connectionid, + trigger_override: state.ui.trigger_override, + debug_response: state.ui.debug_response + } } const mapDispatchToProps = (dispatch) => { diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js index 63016c86..2a65547e 100755 --- a/src/js/views/Settings.js +++ b/src/js/views/Settings.js @@ -256,9 +256,7 @@ class Settings extends React.Component{
Version
- - - +
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index 55ab07ef..f05308c8 100755 --- a/src/scss/components/_context-menu.scss +++ b/src/scss/components/_context-menu.scss @@ -11,15 +11,6 @@ display: block; position: relative; - &:hover { - .menu-item { - background: lighten($dark_grey, 5%); - } - .submenu { - display: block; - } - } - .menu-item { cursor: pointer; display: block; @@ -28,10 +19,6 @@ box-sizing: border-box; } - &:not(:first-child) .menu-item { - border-top: 1px solid lighten($dark_grey, 8%); - } - .icon { display: none; } @@ -58,6 +45,24 @@ } } } + + &.cancel { + float: right; + opacity: 0.5; + } + + &:not(:first-child) .menu-item { + border-top: 1px solid lighten($dark_grey, 8%); + } + + &:hover { + .menu-item { + background: lighten($dark_grey, 5%); + } + .submenu { + display: block; + } + } } &.touch{ @@ -74,8 +79,8 @@ .menu-item { display: inline-block; text-align: center; - width: 60px; - height: 60px; + width: 56px; + height: 56px; border: 0 !important; vertical-align: top; diff --git a/src/scss/components/_player.scss b/src/scss/components/_player.scss index f3f918b6..7b835645 100755 --- a/src/scss/components/_player.scss +++ b/src/scss/components/_player.scss @@ -72,7 +72,6 @@ right: 0; width: auto; background: $dark_grey; - z-index: 99; .controls { position: absolute; diff --git a/src/scss/components/_sidebar-toggle-button.scss b/src/scss/components/_sidebar-toggle-button.scss index 39589efb..2a349494 100755 --- a/src/scss/components/_sidebar-toggle-button.scss +++ b/src/scss/components/_sidebar-toggle-button.scss @@ -20,6 +20,14 @@ } &.open { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 220px; + background: rgba(0,0,0,0.2); + color: #FFFFFF; + .open { display: none; } diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index ffdcc56a..ee5c4e4e 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -4,9 +4,9 @@ aside{ top: 0; left: 0; bottom: 0; - z-index: 95; + z-index: 96; background: #111111; - width: 200px; + width: 220px; overflow: hidden; box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5); @@ -22,12 +22,22 @@ aside{ } @include responsive( $bp_medium ){ - width: 50vw; - left: -50vw; + width: 220px; + left: -220px; + position: fixed; + z-index: 98; .sidebar-open & { left: 0px; } + + .liner { + bottom: 0 !important; + } + + .thumbnail { + display: none; + } } @include responsive( null, null, $bp_shallow ){ diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 11fe4fe7..04edf57e 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -15,7 +15,7 @@ body { main, footer { - margin-left: 200px; + margin-left: 220px; @include responsive( null, null, $bp_shallow ){ padding-bottom: 60px; @@ -23,11 +23,6 @@ footer { @include responsive( $bp_medium ){ margin-left: 0; - - .sidebar-open & { - margin-left: 50%; - margin-right: -50%; - } } } diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index e13b8854..944747c1 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -121,6 +121,11 @@ input[type="submit"] { display: inline-block; } + .description { + display: inline-block; + padding: 10px 14px; + } + .input { width: 85%; float: left;