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

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>