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

More user-friendly editing of commands; COommands style as component

Browse Source
This commit is contained in:
James Barnsley
2018-10-13 15:57:01 +13:00
parent 11f21e252b
commit a4a02bcd6d
33 changed files with 1435 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -147,7 +147,7 @@ class Artist extends React.Component{
return (
<div className="body about">
<div className="col w40 tiles artist-stats">
<div className="col col--w40 tiles artist-stats">
{artist.images ? <div className="tile thumbnail-wrapper"><Thumbnail size="huge" canZoom images={artist.images} /></div> : null}
{artist.images_additional ? <div className="tile thumbnail-wrapper"><Thumbnail size="huge" canZoom images={artist.images_additional} /></div> : null}
{artist.followers ? <div className="tile"><span className="content"><Icon type="fontawesome" name="users" />{artist.followers.toLocaleString()} followers</span></div> : null}
@ -155,11 +155,11 @@ class Artist extends React.Component{
{artist.listeners ? <div className="tile"><span className="content"><Icon type="fontawesome" name="headphones" />{ artist.listeners.toLocaleString() } listeners</span></div> : null }
</div>
<div className="col w60 biography">
<div className="col col--w60 biography">
<section>
{ artist.biography ? <div className="biography-text"><p>{artist.biography}</p><br />
<div className="grey-text">Published: { artist.biography_publish_date }</div>
<div className="grey-text">Origin: <a href={ artist.biography_link } target="_blank">{ artist.biography_link }</a></div></div> : null }
<div className="mid_grey-text">Published: { artist.biography_publish_date }</div>
<div className="mid_grey-text">Origin: <a href={ artist.biography_link } target="_blank">{ artist.biography_link }</a></div></div> : null }
</section>
</div>
</div>
@ -213,7 +213,7 @@ class Artist extends React.Component{
return (
<div className="body overview">
<div className={"top-tracks col w"+(artist.related_artists && artist.related_artists.length > 0 ? "70" : "100")}>
<div className={"top-tracks col col--w"+(artist.related_artists && artist.related_artists.length > 0 ? "70" : "100")}>
<h4>Top tracks</h4>
<div className="list-wrapper">
<TrackList className="artist-track-list" uri={artist.uri} tracks={artist.tracks} />
@ -221,9 +221,9 @@ class Artist extends React.Component{
</div>
</div>
<div className="col w5"></div>
<div className="col col--w5"></div>
{artist.related_artists ? <div className="col w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={artist.related_artists.slice(0,6)} /></div><Link to={global.baseURL+'artist/'+artist.uri+'/related-artists'} className="button grey">All related artists</Link></div> : null}
{artist.related_artists ? <div className="col col--w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={artist.related_artists.slice(0,6)} /></div><Link to={global.baseURL+'artist/'+artist.uri+'/related-artists'} className="button grey">All related artists</Link></div> : null}
<div className="cf"></div>

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

@ -205,7 +205,7 @@ class Playlist extends React.Component{
<div className="title">
<h1>{playlist.name}</h1>
{playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: playlist.description}}></h2> : null }
{playlist.description ? <h2 className="description mid_grey-text" dangerouslySetInnerHTML={{__html: playlist.description}}></h2> : null }
<ul className="details">
{!this.props.slim_mode ? <li className="tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(playlist.uri)} /><span className="tooltip__content">{helpers.uriSource(playlist.uri)} playlist</span></li> : null }

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

@ -60,7 +60,7 @@ class Queue extends React.Component{
var total_time = 0
return (
<div className="queue-stats grey-text">
<div className="queue-stats mid_grey-text">
<span>{this.props.current_tracklist.length} tracks</span>
&nbsp;&nbsp;|&nbsp;&nbsp;
{this.props.current_tracklist.length > 0 ? <Dater type="total-time" data={this.props.current_tracklist} /> : <span>0 mins</span>}

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

@ -161,21 +161,21 @@ class Settings extends React.Component {
}
return (
<div className="list commands">
<div className="list commands-setup">
{
commands.map(command => {
return (
<div className="list__item commands__item commands-setup__item" key={command.id}>
<div className="list__item commands-setup__item" key={command.id}>
<span className="col col--w90">
<Icon name={command.icon} />
<div className="commands__item commands__item--interactive" onClick={e => this.props.pusherActions.sendCommand(command.id, true)}>
<Icon className="commands__item__icon" name={command.icon} />
<span className={command.colour+'-background commands__item__background'}></span>
</div>
&nbsp;&nbsp;
{command.command && command.command.url ? command.command.url : "-"}
</span>
<div className="commands__item__actions">
<a className="commands__item__trigger-button action" onClick={e => this.props.pusherActions.sendCommand(command.id, true)}>
<Icon name="send" />
</a>
<Link className="commands__item__edit-button action" to={global.baseURL+'edit-command/'+command.id}>
<div className="commands-setup__item__actions">
<Link className="commands-setup__item__edit-button action" to={global.baseURL+'edit-command/'+command.id}>
<Icon name="edit" />
</Link>
</div>

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

@ -175,7 +175,7 @@ class Track extends React.Component{
return (
<div className="lyrics">
<div className="content" dangerouslySetInnerHTML={{__html: this.props.track.lyrics}}></div>
<div className="origin grey-text">
<div className="origin mid_grey-text">
Origin: <a href={"https://genius.com"+this.props.track.lyrics_path} target="_blank">{"https://genius.com"+this.props.track.lyrics_path}</a>
</div>
</div>
@ -216,7 +216,7 @@ class Track extends React.Component{
<div className="title">
<h1>{track.name}</h1>
<h2 className="grey-text">
<h2 className="mid_grey-text">
{track.album && track.album.uri ? <Link to={global.baseURL+'album/'+track.album.uri}>{track.album.name}</Link> : null}
{track.album && !track.album.uri ? track.album.name : null}
{!track.album ? "Unknown album" : null}

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

@ -446,7 +446,7 @@ class Discover extends React.Component{
return (
<div className="content-wrapper recommendations-results cf">
<section className="col w70 tracks">
<section className="col col--w70 tracks">
<h4>
Tracks
<div className="pull-right">
@ -457,9 +457,9 @@ class Discover extends React.Component{
<TrackList className="discover-track-list" uri={uri} tracks={tracks} />
</section>
<div className="col w5"></div>
<div className="col col--w5"></div>
<div className="col w25 others">
<div className="col col--w25 others">
<section>
<h4>Artists</h4>
<RelatedArtists artists={artists} />
@ -507,7 +507,7 @@ class Discover extends React.Component{
<div className="liner">
<h1>Explore new music</h1>
<h2 className="grey-text">
<h2 className="mid_grey-text">
Add seeds and musical properties below to build your sound
</h2>
<div className="parameters">

4
src/js/views/modals/AddToPlaylist.js
View File

@ -54,7 +54,7 @@ class AddToPlaylist extends React.Component{
return (
<Modal className="modal--add-to-playlist">
<h1>Add to playlist</h1>
<h2 className="grey-text">Select playlist to add {this.props.uris.length} track{this.props.uris.length>1?'s':null} to</h2>
<h2 className="mid_grey-text">Select playlist to add {this.props.uris.length} track{this.props.uris.length>1?'s':null} to</h2>
{playlists.length <= 0 ? <div className="no-results">No playlists available</div> : null}
<div className="list small playlists">
{
@ -65,7 +65,7 @@ class AddToPlaylist extends React.Component{
<h3 className="name">{ playlist.name }</h3>
<ul className="details">
<li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
<li>{ playlist.tracks_total ? <span className="grey-text">&nbsp;{ playlist.tracks_total } tracks</span> : null }</li>
<li>{ playlist.tracks_total ? <span className="mid_grey-text">&nbsp;{ playlist.tracks_total } tracks</span> : null }</li>
</ul>
</div>
)

2
src/js/views/modals/AddToQueue.js
View File

@ -38,7 +38,7 @@ class AddToQueue extends React.Component{
return (
<Modal className="modal--add-to-queue">
<h1>Add to queue</h1>
<h2 className="grey-text">Add a comma-separated list of URIs to the play queue. You must have the appropriate Mopidy backend enabled for each URI schema (eg spotify:, yt:).</h2>
<h2 className="mid_grey-text">Add a comma-separated list of URIs to the play queue. You must have the appropriate Mopidy backend enabled for each URI schema (eg spotify:, yt:).</h2>
<form onSubmit={e => this.handleSubmit(e)}>
<div className="field text">

1002
src/js/views/modals/EditCommand.js
View File

File diff suppressed because it is too large Load Diff

6
src/js/views/modals/EditRadio.js
View File

@ -189,8 +189,8 @@ class EditRadio extends React.Component{
seeds.map((seed,index) => {
return (
<div className="list__item" key={seed.uri}>
{seed.unresolved ? <span className="grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
{!seed.unresolved ? <span className="grey-text">&nbsp;({seed.type})</span> : null}
{seed.unresolved ? <span className="mid_grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
{!seed.unresolved ? <span className="mid_grey-text">&nbsp;({seed.type})</span> : null}
<span className="button discrete remove-uri no-hover" onClick={e => this.removeSeed(seed.uri)}>
<Icon name="delete" />Remove
</span>
@ -212,7 +212,7 @@ class EditRadio extends React.Component{
return (
<Modal className="modal--edit-radio">
<h1>Radio</h1>
<h2 className="grey-text">Add and remove seeds to shape the sound of your radio. Radio uses Spotify's recommendations engine to suggest tracks similar to your seeds.</h2>
<h2 className="mid_grey-text">Add and remove seeds to shape the sound of your radio. Radio uses Spotify's recommendations engine to suggest tracks similar to your seeds.</h2>
<form onSubmit={e => {(this.state.enabled ? this.handleUpdate(e) : this.handleStart(e))}}>

10
src/js/views/modals/ShareConfiguration.js
View File

@ -102,7 +102,7 @@ class ShareConfiguration extends React.Component {
<span className="label">
{ connection.username }
&nbsp;
<span className="grey-text">
<span className="mid_grey-text">
({ connection.ip })
</span>
</span>
@ -115,7 +115,7 @@ class ShareConfiguration extends React.Component {
} else {
var recipients = (
<div className="input text">
<span className="grey-text">
<span className="mid_grey-text">
No peer connections
</span>
</div>
@ -152,7 +152,7 @@ class ShareConfiguration extends React.Component {
checked={this.state.spotify}
onChange={ e => this.setState({ spotify: !this.state.spotify })} />
<span className="label">
Spotify authorization <span className="grey-text">&nbsp;Logged in as {this.props.spotify_me.name}</span>
Spotify authorization <span className="mid_grey-text">&nbsp;Logged in as {this.props.spotify_me.name}</span>
</span>
</label> : null}
@ -163,7 +163,7 @@ class ShareConfiguration extends React.Component {
checked={this.state.lastfm}
onChange={ e => this.setState({ lastfm: !this.state.lastfm })} />
<span className="label">
LastFM authorization <span className="grey-text">&nbsp;Logged in as {this.props.lastfm_me.name}</span>
LastFM authorization <span className="mid_grey-text">&nbsp;Logged in as {this.props.lastfm_me.name}</span>
</span>
</label> : null}
@ -174,7 +174,7 @@ class ShareConfiguration extends React.Component {
checked={this.state.genius}
onChange={ e => this.setState({ genius: !this.state.genius })} />
<span className="label">
Genius authorization <span className="grey-text">&nbsp;Logged in as {this.props.genius_me.name}</span>
Genius authorization <span className="mid_grey-text">&nbsp;Logged in as {this.props.genius_me.name}</span>
</span>
</label> : null}
</div>