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

Responsive adjustments; Removing library dropzone; Sidebar hide on navigation

Browse Source
This commit is contained in:
James Barnsley
2016-11-30 09:32:46 +13:00
parent 83a899f24e
commit 5f07e855bd
11 changed files with 66 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/components/Dropzones.js
View File

@ -20,12 +20,6 @@ class Dropzones extends React.Component{
icon: 'play',
action: 'enqueue'
},
{
title: 'Add to library',
icon: 'music',
action: 'add_to_library',
accepts: ['track','album','playlist','artist']
},
{
title: 'Add to playlist',
icon: 'playlist',

5
src/js/services/localstorage/middleware.js
View File

@ -12,7 +12,7 @@ const localstorageMiddleware = (function(){
// append our state to a global variable. This gives us access to debug the store at any point
window._store = store
console.log(action)
//console.log(action)
switch( action.type ){
@ -98,7 +98,8 @@ const localstorageMiddleware = (function(){
Object.assign(
spotify,{
access_token: action.data.access_token,
token_expiry: action.data.token_expiry
token_expiry: action.data.token_expiry,
provider: action.provider
}
);
localStorage.setItem('spotify', JSON.stringify(spotify));

2
src/js/services/spotify/actions.js
View File

@ -85,6 +85,7 @@ function refreshToken( dispatch, getState ){
response.source = 'spotify';
dispatch({
type: 'SPOTIFY_TOKEN_REFRESHED',
provider: 'spotify-http-api',
data: response
});
resolve(response);
@ -109,6 +110,7 @@ function refreshToken( dispatch, getState ){
response.source = 'mopidy';
dispatch({
type: 'SPOTIFY_TOKEN_REFRESHED',
provider: 'mopidy-spotify',
data: response
});
resolve(response);

3
src/js/services/spotify/reducer.js
View File

@ -48,7 +48,8 @@ export default function reducer(spotify = {}, action){
refreshing_token: false,
authorization: action.data,
access_token: action.data.access_token,
token_expiry: action.data.token_expiry
token_expiry: action.data.token_expiry,
provider: action.provider
});
case 'SPOTIFY_DISCONNECTED':

8
src/js/services/ui/actions.js
View File

@ -40,10 +40,10 @@ export function lazyLoading( start ){
}
}
export function toggleSidebar(){
return {
type: 'TOGGLE_SIDEBAR'
}
export function toggleSidebar( new_state = 'toggle' ){
var action = { type: 'TOGGLE_SIDEBAR' }
if( new_state != 'toggle' ) action.new_state = new_state
return action
}
export function dragStart( e, context, victims, victims_indexes = false ){

4
src/js/services/ui/reducer.js
View File

@ -16,7 +16,9 @@ export default function reducer(ui = {}, action){
return Object.assign({}, ui, action.view)
case 'TOGGLE_SIDEBAR':
return Object.assign({}, ui, { sidebar_open : !ui.sidebar_open })
var new_state = !ui.sidebar_open
if( typeof(action.new_state) !== 'undefined' ) new_state = action.new_state
return Object.assign({}, ui, { sidebar_open : new_state })
/**

2
src/js/views/Album.js
View File

@ -82,7 +82,7 @@ class Album extends React.Component{
<ul className="details">
<li>
{ this.props.album.tracks_total } tracks,
{ this.props.album.tracks_total } tracks,&nbsp;
{ this.props.album.tracks ? <Dater type="total-time" data={this.props.album.tracks} /> : null }
</li>
{ this.props.album.release_date ? <li>Released <Dater type="date" data={ this.props.album.release_date } /></li> : null }

9
src/js/views/App.js
View File

@ -2,7 +2,7 @@
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { createStore, bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { browserHistory, Link } from 'react-router'
import { connect } from 'react-redux'
import Sidebar from '../components/Sidebar'
@ -38,6 +38,13 @@ class App extends React.Component{
this.props.mopidyActions.connect();
this.props.spotifyActions.connect();
if( this.props.spotify_authorized ) this.props.spotifyActions.getAllLibraryPlaylists();
// when we navigate to a new route
browserHistory.listen( location => {
// hide our sidebar
this.props.uiActions.toggleSidebar( false )
});
}
componentWillReceiveProps(nextProps){

2
src/js/views/Playlist.js
View File

@ -145,7 +145,7 @@ class Playlist extends React.Component{
<ul className="details">
<li>
{ this.props.playlist.tracks_total } tracks,
{ this.props.playlist.tracks_total } tracks,&nbsp;
{ this.props.playlist.tracks ? <Dater type="total-time" data={this.props.playlist.tracks} /> : null }
</li>
{ this.props.playlist.last_modified ? <li>Updated <Dater type="ago" data={this.props.playlist.last_modified} /> ago</li> : null }

17
src/scss/views/_album.scss
View File

@ -1,7 +1,7 @@
.album-view {
.main {
padding-left: 35%;
padding-left: 300px;
.title {
padding: 30px 40px;
@ -20,7 +20,7 @@
top: 0;
left: 0;
bottom: 0;
width: 35%;
width: 300px;
background: $faint_grey;
.thumbnail {
@ -78,6 +78,10 @@
.main {
padding-left: 0;
.title {
padding: 20px;
}
}
.intro {
@ -87,6 +91,15 @@
.artist-grid {
display: none;
}
.details {
padding: 20px;
li {
display: inline-block;
padding-right: 15px;
}
}
}
}
}

29
src/scss/views/_playlist.scss
View File

@ -1,7 +1,7 @@
.playlist-view {
.main {
padding-left: 35%;
padding-left: 300px;
.title {
padding: 30px 40px;
@ -20,7 +20,7 @@
top: 0;
left: 0;
bottom: 0;
width: 35%;
width: 300px;
background: $faint_grey;
> .thumbnail {
@ -75,4 +75,29 @@
padding: 30px;
}
}
@include responsive( $bp_medium ){
.main {
padding-left: 0px;
.title {
padding: 20px;
}
}
.intro {
width: auto;
position: static;
.details {
padding: 20px;
li {
display: inline-block;
padding-right: 15px;
}
}
}
}
}