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

Slim mode now defined at global js, no need for store usage

Browse Source
This commit is contained in:
James Barnsley
2017-08-22 21:08:41 +12:00
parent dc42024bfe
commit 48dc9c6d07
8 changed files with 24 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/App.js
View File

@ -104,7 +104,7 @@ class App extends React.Component{
global.slim_mode = true global.slim_mode = true
} }
} else { } else {
if (this.props.slim_mode){ if (global.slim_mode){
global.slim_mode = false global.slim_mode = false
} }
} }
@ -213,7 +213,7 @@ class App extends React.Component{
if (this.props.sidebar_open) className += ' sidebar-open' if (this.props.sidebar_open) className += ' sidebar-open'
if (this.props.modal) className += ' modal-open' if (this.props.modal) className += ' modal-open'
if (this.props.touch_dragging) className += ' touch-dragging' if (this.props.touch_dragging) className += ' touch-dragging'
if (this.props.slim_mode) className += ' slim-mode' if (global.slim_mode) className += ' slim-mode'
if (helpers.isTouchDevice()){ if (helpers.isTouchDevice()){
className += ' touch' className += ' touch'
} else { } else {
@ -254,7 +254,6 @@ class App extends React.Component{
const mapStateToProps = (state, ownProps) => { const mapStateToProps = (state, ownProps) => {
return { return {
touch_dragging: state.ui.touch_dragging, touch_dragging: state.ui.touch_dragging,
slim_mode: state.ui.slim_mode,
broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []), broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []),
volume: (state.mopidy.volume ? state.mopidy.volume : false), volume: (state.mopidy.volume ? state.mopidy.volume : false),
notifications: (state.ui.notifications ? state.ui.notifications : []), notifications: (state.ui.notifications ? state.ui.notifications : []),

2
src/js/components/Track.js
View File

@ -214,7 +214,7 @@ export default class Track extends React.Component{
) )
} }
if (this.props.slim_mode){ if (global.slim_mode){
// Select zone handles selection events only // Select zone handles selection events only
// We use onClick to capture touch as well as mouse events in one tidy parcel // We use onClick to capture touch as well as mouse events in one tidy parcel

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

@ -191,7 +191,7 @@ class TrackList extends React.Component{
handleSelection(e,track_key){ handleSelection(e,track_key){
let selected_tracks = this.props.selected_tracks let selected_tracks = this.props.selected_tracks
if (e.ctrlKey || this.props.slim_mode){ if (e.ctrlKey || global.slim_mode){
// Already selected, so unselect it // Already selected, so unselect it
if (selected_tracks.includes(track_key)){ if (selected_tracks.includes(track_key)){
@ -398,7 +398,6 @@ class TrackList extends React.Component{
track={track} track={track}
context={this.props.context} context={this.props.context}
can_sort={this.props.context == 'queue' || this.props.context == 'editable-playlist'} can_sort={this.props.context == 'queue' || this.props.context == 'editable-playlist'}
slim_mode={this.props.slim_mode}
selected={this.props.selected_tracks.includes(track_key)} selected={this.props.selected_tracks.includes(track_key)}
dragger={this.props.dragger} dragger={this.props.dragger}
handleSelection={e => this.handleSelection(e, track_key)} handleSelection={e => this.handleSelection(e, track_key)}
@ -428,7 +427,6 @@ class TrackList extends React.Component{
const mapStateToProps = (state, ownProps) => { const mapStateToProps = (state, ownProps) => {
return { return {
selected_tracks: state.ui.selected_tracks, selected_tracks: state.ui.selected_tracks,
slim_mode: state.ui.slim_mode,
dragger: state.ui.dragger, dragger: state.ui.dragger,
current_track: state.core.current_track, current_track: state.core.current_track,
context_menu: state.ui.context_menu context_menu: state.ui.context_menu

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

@ -122,7 +122,7 @@ class Album extends React.Component{
return ( return (
<div className="view album-view content-wrapper"> <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} {global.slim_mode ? <Header icon="cd" title="Album" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
<div className="thumbnail-wrapper"> <div className="thumbnail-wrapper">
<Thumbnail size="large" canZoom images={ this.props.album.images } /> <Thumbnail size="large" canZoom images={ this.props.album.images } />
@ -133,8 +133,8 @@ class Album extends React.Component{
<h1>{ this.props.album.name }</h1> <h1>{ this.props.album.name }</h1>
<ul className="details"> <ul className="details">
{ !this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'}</span></li> : null } { !global.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'}</span></li> : null }
{ !this.props.slim_mode && artists.length > 0 ? <li><ArtistSentence artists={artists} /></li> : null } { !global.slim_mode && artists.length > 0 ? <li><ArtistSentence artists={artists} /></li> : null }
{ this.props.album.release_date ? <li><Dater type="date" data={ this.props.album.release_date } /></li> : null } { this.props.album.release_date ? <li><Dater type="date" data={ this.props.album.release_date } /></li> : null }
<li> <li>
{ this.props.album.tracks_total ? this.props.album.tracks_total : '0' } tracks,&nbsp; { this.props.album.tracks_total ? this.props.album.tracks_total : '0' } tracks,&nbsp;
@ -146,7 +146,7 @@ class Album extends React.Component{
<div className="actions"> <div className="actions">
<button className="primary" onClick={e => this.play()}>Play</button> <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 } { 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)} />} {global.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
</div> </div>
<section className="list-wrapper"> <section className="list-wrapper">
@ -168,7 +168,6 @@ class Album extends React.Component{
const mapStateToProps = (state, ownProps) => { const mapStateToProps = (state, ownProps) => {
return { return {
slim_mode: state.ui.slim_mode,
load_queue: state.ui.load_queue, load_queue: state.ui.load_queue,
artists: state.core.artists, artists: state.core.artists,
album: (state.core.albums && typeof(state.core.albums[ownProps.params.uri]) !== 'undefined' ? state.core.albums[ownProps.params.uri] : false ), album: (state.core.albums && typeof(state.core.albums[ownProps.params.uri]) !== 'undefined' ? state.core.albums[ownProps.params.uri] : false ),

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

@ -203,7 +203,7 @@ class Artist extends React.Component{
return ( return (
<div className="view artist-view"> <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} {global.slim_mode ? <Header className="overlay" icon="mic" title="Artist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
<div className="intro"> <div className="intro">
@ -214,7 +214,7 @@ class Artist extends React.Component{
<div className="actions"> <div className="actions">
{ can_play_radio ? <button className="primary" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button> : <button className="primary" onClick={e => this.props.mopidyActions.playURIs(this.props.artist.albums_uris, this.props.artist.uri)}>Play all</button>} { can_play_radio ? <button className="primary" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button> : <button className="primary" onClick={e => this.props.mopidyActions.playURIs(this.props.artist.albums_uris, this.props.artist.uri)}>Play all</button>}
{ can_follow ? <FollowButton className="white" uri={this.props.params.uri} removeText="Remove from library" addText="Add to library" is_following={this.inLibrary()} /> : null} { can_follow ? <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)} />} {global.slim_mode ? null : <ContextMenuTrigger className="white" onTrigger={e => this.handleContextMenu(e)} />}
</div> </div>
{ this.renderSubViewMenu() } { this.renderSubViewMenu() }
</div> </div>
@ -260,7 +260,6 @@ class Artist extends React.Component{
const mapStateToProps = (state, ownProps) => { const mapStateToProps = (state, ownProps) => {
return { return {
slim_mode: state.ui.slim_mode,
load_queue: state.ui.load_queue, load_queue: state.ui.load_queue,
artist: (state.core.artists && typeof(state.core.artists[ownProps.params.uri]) !== 'undefined' ? state.core.artists[ownProps.params.uri] : false ), artist: (state.core.artists && typeof(state.core.artists[ownProps.params.uri]) !== 'undefined' ? state.core.artists[ownProps.params.uri] : false ),
artists: (state.core.artists ? state.core.artists : []), artists: (state.core.artists ? state.core.artists : []),

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

@ -117,7 +117,7 @@ class Playlist extends React.Component{
<div className="actions"> <div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button> <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> <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)} />} {global.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
</div> </div>
) )
@ -127,7 +127,7 @@ class Playlist extends React.Component{
<div className="actions"> <div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button> <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> <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)} />} {global.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
</div> </div>
) )
} }
@ -135,7 +135,7 @@ class Playlist extends React.Component{
<div className="actions"> <div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button> <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()} /> <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)} />} {global.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
</div> </div>
) )
@ -143,7 +143,7 @@ class Playlist extends React.Component{
return ( return (
<div className="actions"> <div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button> <button className="primary" onClick={ e => this.play() }>Play</button>
{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />} {global.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
</div> </div>
) )
} }
@ -169,7 +169,7 @@ class Playlist extends React.Component{
return ( return (
<div className="view playlist-view content-wrapper"> <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} {global.slim_mode ? <Header icon="playlist" title="Playlist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
<div className="thumbnail-wrapper"> <div className="thumbnail-wrapper">
<Thumbnail size="large" canZoom images={ this.props.playlist.images } /> <Thumbnail size="large" canZoom images={ this.props.playlist.images } />
@ -180,8 +180,8 @@ class Playlist extends React.Component{
{ this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null } { this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null }
<ul className="details"> <ul className="details">
{ !this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} playlist</span></li> : null } { !global.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} playlist</span></li> : null }
{ this.props.playlist.owner && !this.props.slim_mode ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null } { this.props.playlist.owner && !global.slim_mode ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null }
{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null } { this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
{ this.props.playlist.last_modified ? <li><Dater type="ago" data={this.props.playlist.last_modified} /></li> : null } { this.props.playlist.last_modified ? <li><Dater type="ago" data={this.props.playlist.last_modified} /></li> : null }
<li> <li>
@ -213,7 +213,6 @@ const mapStateToProps = (state, ownProps) => {
var uri = ownProps.params.uri var uri = ownProps.params.uri
uri = uri.replace(' ','%20') uri = uri.replace(' ','%20')
return { return {
slim_mode: state.ui.slim_mode,
load_queue: state.ui.load_queue, load_queue: state.ui.load_queue,
playlist: (state.core.playlists && state.core.playlists[uri] !== undefined ? state.core.playlists[uri] : false ), playlist: (state.core.playlists && state.core.playlists[uri] !== undefined ? state.core.playlists[uri] : false ),
spotify_library_playlists: state.spotify.library_playlists, spotify_library_playlists: state.spotify.library_playlists,

3
src/js/views/library/LibraryPlaylists.js
View File

@ -117,7 +117,7 @@ class LibraryPlaylists extends React.Component{
} }
if (this.props.view == 'list'){ if (this.props.view == 'list'){
if (this.props.slim_mode){ if (global.slim_mode){
var columns = [ var columns = [
{ {
label: 'Name', label: 'Name',
@ -262,7 +262,6 @@ const mapStateToProps = (state, ownProps) => {
mopidy_library_playlists_status: state.mopidy.library_playlists_status, mopidy_library_playlists_status: state.mopidy.library_playlists_status,
spotify_library_playlists: state.spotify.library_playlists, spotify_library_playlists: state.spotify.library_playlists,
spotify_library_playlists_status: state.spotify.library_playlists_status, spotify_library_playlists_status: state.spotify.library_playlists_status,
slim_mode: state.ui.slim_mode,
load_queue: state.ui.load_queue, load_queue: state.ui.load_queue,
me_id: (state.spotify.me ? state.spotify.me.id : (state.ui.config && state.ui.config.spotify_username ? state.ui.config.spotify_username : false)), me_id: (state.spotify.me ? state.spotify.me.id : (state.ui.config && state.ui.config.spotify_username ? state.ui.config.spotify_username : false)),
view: state.ui.library_playlists_view, view: state.ui.library_playlists_view,

7
src/scss/views/_user.scss
View File

@ -32,15 +32,20 @@
@include responsive( $bp_medium ){ @include responsive( $bp_medium ){
.intro { .intro {
text-align: center;
.thumbnail { .thumbnail {
float: none; float: none;
margin: 0 auto 20px; margin: 0 auto 20px;
} }
.liner {
padding: 15vh 10px 0;
}
h1 { h1 {
padding-top: 0; padding-top: 0;
font-size: 3rem;
line-height: 3rem;
} }
} }
} }