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

Softer UI

Browse Source
This commit is contained in:
James Barnsley
2017-06-18 05:47:36 +12:00
parent 0fa7f4bca8
commit 6cd9e4deed
36 changed files with 210 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,7 +47,7 @@ export default class Header extends React.Component{
<header className={(this.props.className ? this.props.className : null)}>
<Icon name={ this.props.icon } />
<SidebarToggleButton />
<h1>{ this.props.title }</h1>
<h2>{ this.props.title }</h2>
{this.renderOptions()}
</header>
);

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

@ -21,9 +21,6 @@ class Sidebar extends React.Component{
render(){
return (
<aside>
{ this.props.current_track && this.props.current_track.album && this.props.current_track.album.images ? <Thumbnail size="large" images={this.props.current_track.album.images} /> : null }
<div className="liner">
<SearchForm context="sidebar" />
@ -32,7 +29,7 @@ class Sidebar extends React.Component{
<section>
<Link activeClassName="active" to={global.baseURL+"queue"}>
<Icon className="white" name="play" />
<Icon name="play" />
Now playing
</Link>
</section>
@ -40,19 +37,19 @@ class Sidebar extends React.Component{
<section>
<title>Discover</title>
<Link activeClassName="active" to={global.baseURL+"discover/recommendations"}>
<Icon className="white" name="compass" />
<Icon name="compass" />
Discover
</Link>
<Link activeClassName="active" to={global.baseURL+"discover/categories"}>
<Icon className="white" name="grid" />
<Icon name="grid" />
Genre / Mood
</Link>
<Link activeClassName="active" to={global.baseURL+"discover/featured"}>
<Icon className="white" name="star" />
<Icon name="star" />
Featured playlists
</Link>
<Link activeClassName="active" to={global.baseURL+"discover/new-releases"}>
<Icon className="white" name="leaf" />
<Icon name="leaf" />
New releases
</Link>
</section>
@ -60,30 +57,30 @@ class Sidebar extends React.Component{
<section>
<title>My Music</title>
<Link activeClassName="active" to={global.baseURL+"library/playlists"}>
<Icon className="white" name="playlist" />
<Icon name="playlist" />
Playlists
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/artists" : null}>
<Icon className="white" name="mic" />
<Icon name="mic" />
Artists
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/albums" : null}>
<Icon className="white" name="cd" />
<Icon name="cd" />
Albums
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/tracks" : null}>
<Icon className="white" name="music" />
<Icon name="music" />
Tracks
</Link>
<Link activeClassName="active" to={global.baseURL+"library/local"}>
<Icon className="white" name="folder" />
<Icon name="folder" />
Local
</Link>
</section>
<section>
<Link activeClassName="active" to={global.baseURL+"settings"}>
<Icon className="white" name="cog" />
<Icon name="cog" />
Settings
{ !this.props.mopidy_connected || !this.props.spotify_connected || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null }
</Link>
@ -94,7 +91,6 @@ class Sidebar extends React.Component{
</div>
<Dropzones />
</aside>
);
}
@ -113,7 +109,6 @@ const mapStateToProps = (state, ownProps) => {
pusher_connected: state.pusher.connected,
spotify_connected: state.spotify.connected,
spotify_authorized: state.spotify.authorized,
current_track: (typeof(state.ui.current_track) !== 'undefined' && typeof(state.ui.tracks) !== 'undefined' && typeof(state.ui.tracks[state.ui.current_track.uri]) !== 'undefined' ? state.ui.tracks[state.ui.current_track.uri] : null),
dragger: state.ui.dragger
}
}

27
src/js/components/VolumeControl.js
View File

@ -31,8 +31,29 @@ class VolumeControl extends React.Component{
this.props.mopidyActions.setVolume( percent )
}
renderMuteButton(){
if (this.props.mute){
return (
<a className="control has-tooltip" onClick={() => this.props.mopidyActions.setMute(false)}>
<FontAwesome className="red-text" name="volume-down" />
<span className="tooltip">Unmute</span>
</a>
)
} else {
return (
<a className="control has-tooltip" onClick={() => this.props.mopidyActions.setMute(true)}>
<FontAwesome className="muted" name="volume-off" />
<span className="tooltip">Mute</span>
</a>
)
}
}
render(){
var className = "volume-control"
if (this.props.mute){
className += " muted"
}
return (
<span className={className}>
@ -41,11 +62,9 @@ class VolumeControl extends React.Component{
</a>
<span className="default">
<a className="control" onClick={() => this.props.mopidyActions.setMute(!this.props.mute)}>
{this.props.mute ? <FontAwesome className="muted" name="volume-off" /> : <FontAwesome name="volume-down" />}
</a>
{this.renderMuteButton()}
<div className="slider-wrapper">
<div className={this.props.mute ? "slider horizontal disabled" : "slider horizontal"} onClick={ (e) => this.handleClick(e) } >
<div className="slider horizontal" onClick={e => this.handleClick(e)}>
<div className="track">
<div className="progress" style={{ width: this.props.volume+'%' }}></div>
</div>

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

@ -119,7 +119,8 @@ class Album extends React.Component{
}
return (
<div className="view album-view">
<div className="view album-view content-wrapper">
<SidebarToggleButton />
<Thumbnail size="large" canZoom images={ this.props.album.images } />

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

@ -164,7 +164,7 @@ class Artist extends React.Component{
return (
<div className="body overview">
<div className={related_artists.length > 0 ? "col w70" : "col w100"}>
<h4 className="left-padding">Top tracks</h4>
<h4>Top tracks</h4>
<div className="list-wrapper">
{ this.props.artist.tracks ? <TrackList className="artist-track-list" uri={this.props.params.uri} tracks={this.props.artist.tracks} /> : null }
</div>
@ -176,7 +176,7 @@ class Artist extends React.Component{
<div className="cf"></div>
<h4 className="left-padding">Albums</h4>
<h4>Albums</h4>
<section className="grid-wrapper no-top-padding">
<AlbumGrid albums={albums} />
<LazyLoadListener enabled={this.props.artist.albums_more} loadMore={ () => this.loadMore() }/>
@ -220,7 +220,9 @@ class Artist extends React.Component{
{ this.renderSubViewMenu() }
</div>
</div>
{this.renderBody()}
<div className="content-wrapper">
{this.renderBody()}
</div>
</div>
);
@ -242,7 +244,9 @@ class Artist extends React.Component{
{ this.renderSubViewMenu() }
</div>
</div>
{this.renderBody()}
<div className="content-wrapper">
{this.renderBody()}
</div>
</div>
);
}

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

@ -54,7 +54,7 @@ class Debug extends React.Component{
<div className="view debugger-view">
<Header icon="cog" title="Debugger" options={options} uiActions={this.props.uiActions} />
<section>
<div className="content-wrapper">
<h4 className="underline">User interface</h4>
<form>
@ -190,7 +190,7 @@ class Debug extends React.Component{
{ this.props.debug_response ? JSON.stringify(this.props.debug_response, null, 2) : null }
</pre>
</section>
</div>
</div>
);
}

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

@ -159,7 +159,7 @@ class Playlist extends React.Component{
if (this.props.playlist.can_edit) context = 'editable-playlist'
return (
<div className="view playlist-view">
<div className="view playlist-view content-wrapper">
<SidebarToggleButton />

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

@ -112,27 +112,29 @@ class Queue extends React.Component{
<div className="view queue-view">
<Header icon="play" title="Now playing" options={options} uiActions={this.props.uiActions} />
{ this.renderArtwork() }
<div className="current-track">
<div className="title">
{this.props.current_track ? this.props.current_track.name : <span>-</span>}
</div>
{this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence />}
</div>
<section className="list-wrapper">
<TrackList
show_source_icon={true}
context="queue"
className="queue-track-list"
tracks={this.props.current_tracklist}
removeTracks={ tracks => this.removeTracks( tracks ) }
playTracks={ tracks => this.playTracks( tracks ) }
playTrack={ track => this.playTrack( track ) }
reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } />
</section>
<div className="content-wrapper">
<div className="current-track">
{ this.renderArtwork() }
<div className="title">
{this.props.current_track ? this.props.current_track.name : <span>-</span>}
</div>
{this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence />}
</div>
<section className="list-wrapper">
<TrackList
show_source_icon={true}
context="queue"
className="queue-track-list"
tracks={this.props.current_tracklist}
removeTracks={ tracks => this.removeTracks( tracks ) }
playTracks={ tracks => this.playTracks( tracks ) }
playTrack={ track => this.playTrack( track ) }
reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } />
</section>
</div>
</div>
);
}

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

@ -50,7 +50,7 @@ class QueueHistory extends React.Component{
<div className="view queue-history-view">
<Header icon="play" title="Playback history" options={options} uiActions={this.props.uiActions} />
<section className="list-wrapper">
<section className="content-wrapper list-wrapper">
<TrackList
className="queue-history-track-list"
show_source_icon={true}

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

@ -235,7 +235,9 @@ class Search extends React.Component{
return (
<div className="view search-view">
<Header icon="search" title="Search results" options={options} uiActions={this.props.uiActions} />
{ this.renderResults() }
<div className="content-wrapper">
{ this.renderResults() }
</div>
</div>
);
}

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

@ -180,7 +180,7 @@ class Settings extends React.Component{
<div className="view settings-view">
<Header icon="cog" title="Settings" options={options} uiActions={this.props.uiActions} />
<section>
<section className="content-wrapper">
<div className="status">

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

@ -58,29 +58,31 @@ class User extends React.Component{
<div className="view user-view">
<Header icon="play" title="User" />
<div className="content-wrapper">
<div className="intro">
<Thumbnail circle={true} size="medium" images={ this.props.user.images } />
<div className="intro">
<Thumbnail circle={true} size="medium" images={ this.props.user.images } />
<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
<ul className="details">
{this.isMe() ? <li>You</li> : null}
<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
<li>{this.props.user.followers.total.toLocaleString()} followers</li>
</ul>
<ul className="details">
{this.isMe() ? <li>You</li> : null}
<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
<li>{this.props.user.followers.total.toLocaleString()} followers</li>
</ul>
<div className="actions">
<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
<div className="actions">
<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
</div>
</div>
</div>
<div className="main">
<div className="main">
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />
<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
</section>
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />
<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
</section>
</div>
</div>
</div>
)

2
src/js/views/discover/DiscoverCategories.js
View File

@ -43,7 +43,7 @@ class DiscoverCategories extends React.Component{
return (
<div className="view discover-categories-view">
<Header icon="grid" title="Genre / Mood" />
<section className="grid-wrapper">
<section className="content-wrapper grid-wrapper">
<CategoryGrid categories={categories} />
</section>
</div>

10
src/js/views/discover/DiscoverCategory.js
View File

@ -62,10 +62,12 @@ class DiscoverCategory extends React.Component{
return (
<div className="view discover-categories-view">
<Header icon="grid" title={this.props.category.name} />
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />
</section>
<LazyLoadListener enabled={this.props.category.playlists_more} loadMore={ () => this.loadMore() }/>
<div className="content-wrapper">
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />
</section>
<LazyLoadListener enabled={this.props.category.playlists_more} loadMore={ () => this.loadMore() }/>
</div>
</div>
);
}

2
src/js/views/discover/DiscoverFeatured.js
View File

@ -101,7 +101,7 @@ class DiscoverFeatured extends React.Component{
<div className="view discover-featured-view">
<Header className="overlay" icon="star" title="Featured playlists" />
{this.renderIntro(first_playlist)}
<section className="grid-wrapper">
<section className="content-wrapper grid-wrapper">
{playlists ? <PlaylistGrid playlists={playlists} /> : null }
</section>
</div>

2
src/js/views/discover/DiscoverNewReleases.js
View File

@ -109,7 +109,7 @@ class DiscoverNewReleases extends React.Component{
<div className="view discover-new-releases-view">
<Header className="overlay" icon="leaf" title="New Releases" />
{this.renderIntro(first_album)}
<section className="grid-wrapper">
<section className="content-wrapper grid-wrapper">
<AlbumGrid albums={albums} />
</section>
<LazyLoadListener enabled={this.props.new_releases_more} loadMore={ () => this.loadMore() }/>

6
src/js/views/library/LibraryAlbums.js
View File

@ -82,7 +82,7 @@ class LibraryAlbums extends React.Component{
}
]
return (
<section className="list-wrapper">
<section className="content-wrapper">
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={albums}
@ -93,7 +93,7 @@ class LibraryAlbums extends React.Component{
)
}else if( this.props.view == 'thumbnails' ){
return (
<section className="grid-wrapper">
<section className="content-wrapper">
<AlbumGrid
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
albums={albums} />
@ -101,7 +101,7 @@ class LibraryAlbums extends React.Component{
)
}else{
return (
<section className="grid-wrapper albums-detail-subview">
<section className="content-wrapper albums-detail-subview">
{
albums.map( album => {
return (

4
src/js/views/library/LibraryArtists.js
View File

@ -69,7 +69,7 @@ class LibraryArtists extends React.Component{
}
]
return (
<section className="list-wrapper">
<section className="content-wrapper">
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={artists}
@ -80,7 +80,7 @@ class LibraryArtists extends React.Component{
)
}else{
return (
<section className="grid-wrapper">
<section className="content-wrapper">
<ArtistGrid
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
artists={artists} />

2
src/js/views/library/LibraryLocal.js
View File

@ -36,7 +36,7 @@ export default class LibraryLocal extends React.Component{
return (
<div className="view library-local-view">
<Header icon="folder" title="Local" />
<section className="grid-wrapper">
<section className="content-wrapper">
<div className="grid category-grid">
{
grid_items.map(

4
src/js/views/library/LibraryLocalAlbums.js
View File

@ -91,7 +91,7 @@ class LibraryLocalAlbums extends React.Component{
]
return (
<section className="list-wrapper">
<section className="content-wrapper">
<List
columns={columns}
rows={albums}
@ -101,7 +101,7 @@ class LibraryLocalAlbums extends React.Component{
)
}else{
return (
<section className="grid-wrapper">
<section className="content-wrapper">
<AlbumGrid albums={albums} />
</section>
)

2
src/js/views/library/LibraryLocalArtists.js
View File

@ -69,7 +69,7 @@ class LibraryLocalArtists extends React.Component{
return (
<div className="view library-local-view">
<Header icon="music" title="Local artists" />
<section className="list-wrapper">
<section className="content-wrapper">
<List
columns={[{ name: 'name', width: '100'}]}
rows={artists}

2
src/js/views/library/LibraryLocalDirectory.js
View File

@ -94,7 +94,7 @@ class LibraryLocalDirectory extends React.Component{
return (
<div className="view library-local-view">
<Header icon="music" title="Local files" options={options} uiActions={this.props.uiActions} />
<section className="list-wrapper">
<section className="content-wrapper">
<List
columns={[{ name: 'name', width: '100'}]}
rows={items.folders}

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

@ -91,7 +91,7 @@ class LibraryPlaylists extends React.Component{
}
]
return (
<section className="list-wrapper">
<section className="content-wrapper">
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={playlists}
@ -102,7 +102,7 @@ class LibraryPlaylists extends React.Component{
)
}else{
return (
<section className="grid-wrapper">
<section className="content-wrapper">
<PlaylistGrid
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
playlists={playlists} />

2
src/js/views/library/LibraryTracks.js
View File

@ -42,7 +42,7 @@ class LibraryTracks extends React.Component{
return (
<div className="view library-tracks-view">
<Header icon="music" title="My tracks" />
<section className="list-wrapper">
<section className="content-wrapper">
{ this.props.tracks ? <TrackList tracks={this.props.tracks} /> : null }
<LazyLoadListener enabled={this.props.tracks_more} loadMore={ () => this.loadMore() }/>
</section>