secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Version manager; Touch event override; Mobile sidebar simplified

Browse Source
This commit is contained in:
James Barnsley
2016-12-20 07:56:42 +13:00
parent f1c6479f99
commit 41e4b076ee
14 changed files with 145 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/js/components/ContextMenu.js
View File

@ -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 = (
<span className="menu-item-wrapper cancel">
<a className="menu-item" onClick={ (e) => this.closeAndDeselectTracks(e) }>
<FontAwesome className="icon" fixedWidth name='close' />
<span className="label">Cancel</span>
</a>
</span>
)
return (
<div>
{
@ -187,8 +200,9 @@ class ContextMenu extends React.Component{
}
})
}
{ trigger == 'touch' ? closeItem : null }
</div>
);
)
}
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 (
<div className={ this.props.context_menu.trigger+" context-menu"} style={style}>
{ this.renderItems() }
<div className={className} style={style}>
{ this.renderItems(trigger) }
</div>
);
}
@ -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,

4
src/js/components/PusherConnectionList.js
View File

@ -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 <div className="pusher-connection-list grey-text">Not connected</div>
if( typeof(this.props.connections) == 'undefined' || this.props.connections.length <= 0 ) return <div className="pusher-connection-list grey-text">No connections</div>;
return (
<div className="pusher-connection-list">

4
src/js/components/VersionManager.js
View File

@ -26,7 +26,7 @@ class VersionManager extends React.Component{
}
if( !this.props.pusher.version.is_root ){
return <button className="secondary" disabled>Cannot upgrade</button>
return <button className="secondary" disabled>Not running as root</button>
}
if( this.props.pusher.version.upgrade_available ){
@ -39,8 +39,8 @@ class VersionManager extends React.Component{
render(){
return (
<div className="version-manager">
<span>{ this.props.pusher.version.current } installed</span>
{ this.renderUpgradeButton() }
<div className="description">{ this.props.pusher.version.current } currently installed</div>
</div>
);
}

1
src/js/services/mopidy/middleware.js
View File

@ -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(){

3
src/js/services/pusher/middleware.js
View File

@ -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(){

6
src/js/services/ui/middleware.js
View File

@ -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)

54
src/js/views/Debug.js
View File

@ -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{
<div className="view debugger-view">
<Header icon="cog" title="Debugger" />
<section>
<h4 className="underline">User interface</h4>
<form>
<div className="field radio">
<div className="name">Touch/click behavior</div>
<div className="input">
<label>
<input
type="radio"
name="touch_mode"
value="default"
checked={ !this.props.trigger_override }
onChange={ e => this.props.uiActions.set({ trigger_override: null })} />
<span className="label">Default</span>
</label>
<label>
<input
type="radio"
name="touch_mode"
value="click"
checked={ this.props.trigger_override == 'click' }
onChange={ e => this.props.uiActions.set({ trigger_override: e.target.value })} />
<span className="label">Click</span>
</label>
<label>
<input
type="radio"
name="touch_mode"
value="touch"
checked={ this.props.trigger_override == 'touch' }
onChange={ e => this.props.uiActions.set({ trigger_override: e.target.value })} />
<span className="label">Touch</span>
</label>
</div>
</div>
</form>
</section>
<section>
<h4 className="underline">Mopidy</h4>
@ -132,7 +170,7 @@ class Debug extends React.Component{
<section>
<h4 className="underline">Response</h4>
<pre>
{ 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 }
</pre>
</section>
</div>
@ -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) => {

4
src/js/views/Settings.js
View File

@ -256,9 +256,7 @@ class Settings extends React.Component{
<div className="field">
<div className="name">Version</div>
<div className="input">
<span className="text">
<VersionManager />
</span>
<VersionManager />
</div>
</div>

35
src/scss/components/_context-menu.scss
View File

@ -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;

1
src/scss/components/_player.scss
View File

@ -72,7 +72,6 @@
right: 0;
width: auto;
background: $dark_grey;
z-index: 99;
.controls {
position: absolute;

8
src/scss/components/_sidebar-toggle-button.scss
View File

@ -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;
}

18
src/scss/components/_sidebar.scss
View File

@ -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 ){

7
src/scss/global/_core.scss
View File

@ -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%;
}
}
}

5
src/scss/global/_forms.scss
View File

@ -121,6 +121,11 @@ input[type="submit"] {
display: inline-block;
}
.description {
display: inline-block;
padding: 10px 14px;
}
.input {
width: 85%;
float: left;