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

Merge branch 'develop'

Browse Source
This commit is contained in:
James Barnsley
2017-10-21 22:05:02 +13:00
parent f68ec5f2d0 44eaaa332c
commit badb518d13
18 changed files with 88 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/App.js
View File

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

18
src/js/components/Header.js
View File

@ -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{
@ -33,12 +32,24 @@ export default class Header extends React.Component{
}
}
renderContextMenuTrigger(){
// No custom trigger, nor any options
if (!this.props.handleContextMenuTrigger && !this.props.options){
return null;
}
return <ContextMenuTrigger onTrigger={e => this.handleContextMenuTrigger(e,this.props.options)} />
}
renderOptions(){
if (!this.props.options && !this.props.handleContextMenuTrigger) return null
if (!this.props.options && !this.props.handleContextMenuTrigger){
return null;
}
return (
<div className='options'>
<ContextMenuTrigger onTrigger={e => this.handleContextMenuTrigger(e,this.props.options)} />
{this.renderContextMenuTrigger()}
<span className="items">
<span className="liner">
{this.props.options ? this.props.options : null}
@ -52,7 +63,6 @@ export default class Header extends React.Component{
return (
<header className={(this.props.className ? this.props.className : null)}>
{this.props.icon ? <Icon name={this.props.icon} /> : null}
<SidebarToggleButton />
{this.props.title ? <h1>{ this.props.title }</h1> : null}
{this.renderOptions()}
</header>

14
src/js/components/PlaybackControls.js
View File

@ -97,9 +97,9 @@ class PlaybackControls extends React.Component{
</section>
<section className="settings">
{ this.renderConsumeButton() }
{ this.renderRandomButton() }
{ this.renderRepeatButton() }
{this.renderConsumeButton()}
{this.renderRandomButton()}
{this.renderRepeatButton()}
</section>
<section className="progress">
@ -113,9 +113,12 @@ class PlaybackControls extends React.Component{
</section>
<section className="triggers">
<a className="control next" onClick={() => this.setState({expanded: !this.state.expanded})}>
<a className="control expanded-controls" onClick={() => this.setState({expanded: !this.state.expanded})}>
{this.state.expanded ? <FontAwesome name="chevron-down" /> : <FontAwesome name="chevron-up" />}
</a>
<a className={"control sidebar-toggle"+(this.props.sidebar_open ? ' open' : '')} onClick={() => this.props.uiActions.toggleSidebar()}>
<FontAwesome className="open" name="bars" />
</a>
</section>
</div>
@ -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
}
}

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

@ -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{
<Dropzones />
<div className="close" onClick={e => this.props.uiActions.toggleSidebar(false)}>
<FontAwesome name="chevron-right" />
</div>
</aside>
);
}
@ -126,6 +131,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch)
}
}

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

@ -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 (
<div className={classname} onClick={ () => this.handleClick() }>
<FontAwesome className="open" name="bars" />
<FontAwesome className="close" name="chevron-left" />
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
return {
open: state.ui.sidebar_open
}
}
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SidebarToggleButton)

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

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

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

@ -121,9 +121,6 @@ class Album extends React.Component{
return (
<div className="view album-view content-wrapper">
{this.props.slim_mode ? <Header icon="cd" title="Album" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
<div className="thumbnail-wrapper">
<Thumbnail size="large" canZoom images={ this.props.album.images } />
</div>
@ -146,7 +143,7 @@ class Album extends React.Component{
<div className="actions">
<button className="primary" onClick={e => this.play()}>Play</button>
{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton className="secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} /> : null }
{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
<section className="list-wrapper">

7
src/js/views/Artist.js
View File

@ -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'
@ -206,9 +205,6 @@ class Artist extends React.Component{
return (
<div className="view artist-view">
{this.props.slim_mode ? <Header className="overlay" icon="mic" title="Artist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
<div className="intro">
<Parallax image={image} />
@ -218,7 +214,7 @@ class Artist extends React.Component{
<div className="actions">
<button className="primary" onClick={e => this.props.mopidyActions.playURIs(uris_to_play, this.props.artist.uri)}>Play</button>
{is_spotify ? <FollowButton className="white" uri={this.props.params.uri} removeText="Remove from library" addText="Add to library" is_following={this.inLibrary()} /> : null}
{this.props.slim_mode ? null : <ContextMenuTrigger className="white" onTrigger={e => this.handleContextMenu(e)} />}
<ContextMenuTrigger className="white" onTrigger={e => this.handleContextMenu(e)} />
</div>
{ this.renderSubViewMenu() }
</div>
@ -232,7 +228,6 @@ class Artist extends React.Component{
} else {
return (
<div className="view artist-view">
<SidebarToggleButton />
<div className="intro">
<Parallax />
<div className="liner">

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

@ -117,7 +117,7 @@ class Playlist extends React.Component{
<div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button>
<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.params.uri, name: this.props.playlist.name }) }>Edit</button>
{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
)
@ -127,7 +127,7 @@ class Playlist extends React.Component{
<div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button>
<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.params.uri, name: this.props.playlist.name, public: this.props.playlist.public, collaborative: this.props.playlist.collaborative, description: this.props.playlist.description }) }>Edit</button>
{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
)
}
@ -135,7 +135,7 @@ class Playlist extends React.Component{
<div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button>
<FollowButton className="secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} />
{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
)
@ -143,7 +143,7 @@ class Playlist extends React.Component{
return (
<div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button>
{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
)
}
@ -168,9 +168,6 @@ class Playlist extends React.Component{
return (
<div className="view playlist-view content-wrapper">
{this.props.slim_mode ? <Header icon="playlist" title="Playlist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
<div className="thumbnail-wrapper">
<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
</div>

3
src/js/views/Queue.js
View File

@ -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 (
<div className="view queue-view">
<Header icon="play" className="overlay" title="Now playing" options={options} uiActions={this.props.uiActions} />
<Parallax blur image={image} />
<div className="content-wrapper">
<div className="current-track">

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

@ -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 (
<div className="view queue-history-view">
<Header icon="play" title="Playback history" options={options} uiActions={this.props.uiActions} />
<section className="content-wrapper">
<TrackList
className="queue-history-track-list"

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

@ -8,7 +8,6 @@ import Thumbnail from '../components/Thumbnail'
import PlaylistGrid from '../components/PlaylistGrid'
import FollowButton from '../components/FollowButton'
import LazyLoadListener from '../components/LazyLoadListener'
import SidebarToggleButton from '../components/SidebarToggleButton'
import Parallax from '../components/Parallax'
import ContextMenuTrigger from '../components/ContextMenuTrigger'
@ -82,9 +81,6 @@ class User extends React.Component{
return (
<div className="view user-view">
<SidebarToggleButton />
<div className="intro">
<Parallax image={image} />
<div className="liner">

4
src/js/views/discover/DiscoverRecommendations.js
View File

@ -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 (
<div className="view discover-view">
<SidebarToggleButton />
<div className="intro">
<Parallax image="/iris/assets/backgrounds/discover.jpg" />

1
src/scss/app.scss
View File

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

9
src/scss/components/_header.scss
View File

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

24
src/scss/components/_playback-controls.scss
View File

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

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

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

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

@ -99,26 +99,43 @@ 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 {
bottom: 0 !important;
padding-bottom: 30px;
}
.thumbnail {
display: none;
}
.close {
display: block;
}
}
}