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

Button BEM (.light needs patching); Removing first from featured/new

Browse Source
This commit is contained in:
James Barnsley
2018-12-05 21:39:06 +13:00
parent 55ad003e36
commit 5ad32435a3
36 changed files with 11217 additions and 14962 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/components/Fields/ConfirmationButton.js
View File

@ -49,15 +49,15 @@ export default class ConfirmationButton extends React.Component{
var content = this.props.content;
if (this.state.confirming){
className += ' confirming';
className += ' button--confirming';
content = this.props.confirmingContent;
if (this.state.timing_out){
className += ' timing-out';
className += ' button--timing-out';
}
}
if (this.props.working){
className += ' working';
className += ' button--working';
if (this.props.workingContent){
content = this.props.workingContent;

6
src/js/components/Fields/FollowButton.js
View File

@ -28,15 +28,15 @@ class FollowButton extends React.Component{
return false;
}
var className = '';
var className = 'button';
if (this.props.className){
className += ' '+this.props.className;
}
if (!this.props.spotify_authorized){
return <button className={className+' disabled'} onClick={e => this.props.uiActions.createNotification({content: 'You must authorize Spotify first', type: 'warning'})}>{this.props.addText}</button>
return <button className={className+' button--disabled'} onClick={e => this.props.uiActions.createNotification({content: 'You must authorize Spotify first', type: 'warning'})}>{this.props.addText}</button>
} else if (this.props.is_following === true){
return <button className={className+' destructive'} onClick={e => this.remove()}>{this.props.removeText}</button>
return <button className={className+' button--destructive'} onClick={e => this.remove()}>{this.props.removeText}</button>
} else {
return <button className={className} onClick={e => this.add()}>{this.props.addText}</button>
}

6
src/js/components/Fields/GeniusAuthenticationFrame.js
View File

@ -94,17 +94,17 @@ class GeniusAuthenticationFrame extends React.Component{
render(){
if (this.state.authorizing){
return (
<button className="working">
<button className="button button--working">
Authorizing...
</button>
)
} else if (this.props.authorized){
return (
<button className="destructive" onClick={() => this.props.geniusActions.revokeAuthorization()}>Log out</button>
<button className="button button--destructive" onClick={() => this.props.geniusActions.revokeAuthorization()}>Log out</button>
)
} else {
return (
<button className="primary" onClick={() => this.startAuthorization()}>Log in</button>
<button className="button button--primary" onClick={() => this.startAuthorization()}>Log in</button>
)
}
}

6
src/js/components/Fields/LastfmAuthenticationFrame.js
View File

@ -94,17 +94,17 @@ class LastfmAuthenticationFrame extends React.Component{
render(){
if (this.state.authorizing){
return (
<button className="working">
<button className="button button--working">
Authorizing...
</button>
)
} else if (this.props.authorization){
return (
<button className="destructive" onClick={() => this.props.lastfmActions.revokeAuthorization()}>Log out</button>
<button className="button button--destructive" onClick={() => this.props.lastfmActions.revokeAuthorization()}>Log out</button>
)
} else {
return (
<button className="primary" onClick={() => this.startAuthorization()}>Log in</button>
<button className="button button--primary" onClick={() => this.startAuthorization()}>Log in</button>
)
}
}

6
src/js/components/Fields/SpotifyAuthenticationFrame.js
View File

@ -109,17 +109,17 @@ class SpotifyAuthenticationFrame extends React.Component{
render(){
if (this.state.authorizing){
return (
<button className="working">
<button className="button button--working">
Authorizing...
</button>
)
} else if (this.props.authorized){
return (
<button className="destructive" onClick={() => this.props.spotifyActions.revokeAuthorization()}>Log out</button>
<button className="button button--destructive" onClick={() => this.props.spotifyActions.revokeAuthorization()}>Log out</button>
)
} else {
return (
<button className="primary" onClick={() => this.startAuthorization()}>Log in</button>
<button className="button button--primary" onClick={() => this.startAuthorization()}>Log in</button>
)
}
}

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

@ -147,7 +147,7 @@ class Services extends React.Component{
<div className="name">Authorization</div>
<div className="input">
<SpotifyAuthenticationFrame />
{this.props.spotify.refreshing_token ? <button className="working">Refreshing...</button> : <button onClick={e => this.props.spotifyActions.refreshingToken()}>Force token refresh</button>}
{this.props.spotify.refreshing_token ? <button className="button button--working">Refreshing...</button> : <button onClick={e => this.props.spotifyActions.refreshingToken()}>Force token refresh</button>}
</div>
</div>
</div>

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

@ -218,7 +218,7 @@ class Snapcast extends React.Component{
</div>
<div className="input">
<button
className="small"
className="button button--small"
onClick={e => this.props.snapcastActions.getServer()}>
Refresh
</button>

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

@ -151,7 +151,7 @@ class Album extends React.Component{
</div>
<div className="actions">
<button className="primary" onClick={e => this.play()}>Play</button>
<button className="button button--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 }
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>

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

@ -312,7 +312,7 @@ class Artist extends React.Component{
<div className="liner">
<h1>{this.props.artist ? this.props.artist.name : null}</h1>
<div className="actions">
<button className="primary" onClick={e => this.props.mopidyActions.playURIs(uris_to_play, this.props.artist.uri)}>Play</button>
<button className="button button--primary" onClick={e => this.props.mopidyActions.playURIs(uris_to_play, this.props.artist.uri)}>Play</button>
{is_spotify ? <FollowButton uri={this.props.params.uri} removeText="Remove from library" addText="Add to library" is_following={this.inLibrary()} /> : null}
<ContextMenuTrigger className="white" onTrigger={e => this.handleContextMenu(e)} />
</div>

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

@ -71,7 +71,7 @@ class Debug extends React.Component{
<div className="field checkbox">
<div className="name">Test mode</div>
<div className="input">
{this.state.toggling_test_mode ? <span className="button working">Applying...</span> : (this.props.test_mode ? <span className="button destructive" onClick={e => this.toggleTestMode(e)}>Disable</span> : <span className="button primary" onClick={e => this.toggleTestMode(e)}>Enable</span>)}
{this.state.toggling_test_mode ? <span className="button button--working">Applying...</span> : (this.props.test_mode ? <span className="button button--destructive" onClick={e => this.toggleTestMode(e)}>Disable</span> : <span className="button button--primary" onClick={e => this.toggleTestMode(e)}>Enable</span>)}
</div>
</div>
<div className="field checkbox">

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

@ -136,8 +136,8 @@ class Playlist extends React.Component{
case 'm3u':
return (
<div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button>
<Link className="button secondary" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
<button className="button button--primary" onClick={ e => this.play() }>Play</button>
<Link className="button button--secondary" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
)
@ -146,16 +146,16 @@ class Playlist extends React.Component{
if (this.props.playlist.can_edit){
return (
<div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button>
<Link className="button secondary" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
<button className="button button--primary" onClick={ e => this.play() }>Play</button>
<Link className="button button--secondary" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
)
}
return (
<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()} />
<button className="button button--primary" onClick={ e => this.play() }>Play</button>
<FollowButton className="button--secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} />
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
)
@ -163,7 +163,7 @@ class Playlist extends React.Component{
default:
return (
<div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button>
<button className="button button--primary" onClick={ e => this.play() }>Play</button>
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
)
@ -214,13 +214,13 @@ class Playlist extends React.Component{
<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 }
{playlist.user_uri ? <li><URILink type="user" uri={playlist.user_uri}>{playlist.user ? playlist.user.name : helpers.getFromUri('userid',playlist.user_uri)}</URILink></li> : null }
{!this.props.slim_mode && playlist.followers !== undefined ? <li>{playlist.followers.toLocaleString()} followers</li> : null }
{!this.props.slim_mode && playlist.last_modified_date ? <li>Edited <Dater type="ago" data={playlist.last_modified_date} /></li> : null }
<li>
{playlist.tracks_total ? playlist.tracks_total : (playlist.tracks ? playlist.tracks.length : '0')} tracks,&nbsp;
<Dater type="total-time" data={playlist.tracks} />
</li>
{!this.props.slim_mode && playlist.followers !== undefined ? <li>{playlist.followers.toLocaleString()} followers</li> : null }
{!this.props.slim_mode && playlist.last_modified_date ? <li>Edited <Dater type="ago" data={playlist.last_modified_date} /></li> : null }
{playlist.user_uri ? <li><URILink type="user" uri={playlist.user_uri}>{playlist.user ? playlist.user.name : helpers.getFromUri('userid',playlist.user_uri)}</URILink></li> : null }
</ul>
</div>

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

@ -109,7 +109,7 @@ class Settings extends React.Component {
<div className="field">
<div className="name"></div>
<div className="input">
<button type="submit" className="secondary">Apply and reload</button>
<button type="submit" className="button button--secondary">Apply and reload</button>
</div>
</div>
)
@ -416,14 +416,14 @@ class Settings extends React.Component {
</div>
<div className="field">
<button onClick={e => this.props.pusherActions.localScan()}>Run local scan</button>
<button className="button" onClick={e => this.props.pusherActions.localScan()}>Run local scan</button>
<Link className="button" to={global.baseURL+"share-configuration"}>Share configuration</Link>
</div>
<div className="field">
{this.props.pusher.version.upgrade_available ? <button className="alternative" onClick={e => this.props.pusherActions.upgrade()}>Upgrade to { this.props.pusher.version.latest }</button> : null }
<button className={"destructive"+(this.props.mopidy.restarting ? ' working' : '')} onClick={e => this.props.pusherActions.restart()}>Restart server</button>
<ConfirmationButton className="destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
{this.props.pusher.version.upgrade_available ? <button className="button button--alternative" onClick={e => this.props.pusherActions.upgrade()}>Upgrade to { this.props.pusher.version.latest }</button> : null }
<button className={"button button--destructive"+(this.props.mopidy.restarting ? ' button--working' : '')} onClick={e => this.props.pusherActions.restart()}>Restart server</button>
<ConfirmationButton className="button--destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
</div>
<h4 className="underline">About<a name="about"></a></h4>

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

@ -4,16 +4,18 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Link from '../../components/Link';
import PlaylistGrid from '../../components/PlaylistGrid'
import Header from '../../components/Header'
import Icon from '../../components/Icon'
import Parallax from '../../components/Parallax'
import Thumbnail from '../../components/Thumbnail'
import PlaylistGrid from '../../components/PlaylistGrid';
import Header from '../../components/Header';
import Icon from '../../components/Icon';
import Parallax from '../../components/Parallax';
import Thumbnail from '../../components/Thumbnail';
import URILink from '../../components/URILink';
import Dater from '../../components/Dater';
import * as helpers from '../../helpers'
import * as uiActions from '../../services/ui/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
import * as helpers from '../../helpers';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import * as spotifyActions from '../../services/spotify/actions';
class DiscoverFeatured extends React.Component{
@ -48,20 +50,6 @@ class DiscoverFeatured extends React.Component{
return (
<div className="intro preserve-3d">
<Parallax image={playlist.images ? playlist.images.large : null} blur />
<div className="content cf">
<Link
to={global.baseURL+'playlist/'+playlist.uri}
onContextMenu={e => this.handleContextMenu(e,playlist)}>
<Thumbnail images={playlist.images} />
</Link>
<Link to={global.baseURL+'playlist/'+playlist.uri}>
<h2>{playlist.name}</h2>
</Link>
{playlist.description ? <h3 dangerouslySetInnerHTML={{__html: playlist.description}}></h3> : null}
<div className="actions">
<button className="primary" onClick={e => this.playPlaylist(e,playlist)}>Play</button>
</div>
</div>
</div>
)
} else {
@ -98,11 +86,8 @@ class DiscoverFeatured extends React.Component{
}
}
// Pull the first playlist out and we'll use this as a banner
var first_playlist = playlists.splice(0,1)
if (first_playlist){
first_playlist = first_playlist[0]
}
// Pull the first playlist out and we'll use this for the parallax artwork
var first_playlist = playlists[0];
var options = (
<a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.props.spotifyActions.getFeaturedPlaylists()}}>

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

@ -61,24 +61,6 @@ class DiscoverNewReleases extends React.Component{
return (
<div className="intro preserve-3d">
<Parallax image={album.images ? album.images.large : null} blur />
<div className="content cf">
<Link
to={global.baseURL+'album/'+album.uri}
onContextMenu={e => this.handleContextMenu(e,album)}>
<Thumbnail images={album.images} />
</Link>
<h2>
<Link to={global.baseURL+'album/'+album.uri}>
{album.name}
</Link>
</h2>
<h3>
<ArtistSentence artists={album.artists} />
</h3>
<div className="actions">
<button className="primary" onClick={e => this.playAlbum(e,album)}>Play</button>
</div>
</div>
</div>
)
} else {
@ -115,9 +97,9 @@ class DiscoverNewReleases extends React.Component{
}
// Pull the first playlist out and we'll use this as a banner
var first_album = albums.splice(0,1)
var first_album = albums[0];
if (first_album){
first_album = helpers.collate(first_album[0], {artists: this.props.artists});
first_album = helpers.collate(first_album, {artists: this.props.artists});
}
var options = (

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

@ -462,7 +462,7 @@ class Discover extends React.Component{
Tracks
<div className="pull-right">
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
<button className="primary" onClick={e => this.playTracks(e)}>Play all</button>
<button className="button button--primary" onClick={e => this.playTracks(e)}>Play all</button>
</div>
</h4>
<TrackList className="discover-track-list" uri={uri} tracks={tracks} />
@ -516,23 +516,23 @@ class Discover extends React.Component{
<Parallax image="assets/backgrounds/discover.jpg" />
<div className="liner">
<div className="intro__liner">
<h1>Explore new music</h1>
<h2 className="mid_grey-text">
Add seeds and musical properties below to build your sound
</h2>
<div className="parameters">
<div className="intro__parameters">
{this.renderSeeds()}
{this.renderTunabilities()}
{this.state.seeds.length > 5 ? <p className="message error">Too many seeds! You can use up to a total of 5 seed tracks, artists and genres.</p> : null}
</div>
<div className="actions">
<div className="intro__actions">
<AddSeedField onSelect={(e,uri) => this.handleSelect(e,uri)} />
<DropdownField className="add-properties" name="Properties" options={addable_tunabilities} no_status_icon button="default" handleChange={val => {this.toggleTunability(val)}} />
<span className={"submit button primary large"+(is_loading ? " working" : "")} onClick={e => this.getRecommendations()}>
<span className={"submit button button--primary button--large"+(is_loading ? " button--working" : "")} onClick={e => this.getRecommendations()}>
<Icon name="explore" />&nbsp;
Find recommendations
</span>

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

@ -76,7 +76,7 @@ class AddToQueue extends React.Component{
</div>
<div className="actions centered-text">
<button type="submit" className="primary large">Add</button>
<button type="submit" className="button button--primary button--large">Add</button>
</div>
</form>
</Modal>

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

@ -153,7 +153,7 @@ class CreatePlaylist extends React.Component{
{this.renderFields()}
<div className="actions centered-text">
<button type="submit" className="primary large">Create playlist</button>
<button type="submit" className="button button--primary button--large">Create playlist</button>
</div>
</form>

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

@ -158,8 +158,8 @@ class EditCommand extends React.Component{
</div>
<div className="actions centered-text">
{this.props.command ? <button type="button" className="destructive large" onClick={e => this.handleDelete(e)}>Delete</button> : null}
<button type="submit" className="primary large">Save</button>
{this.props.command ? <button type="button" className="button button--destructive button--large" onClick={e => this.handleDelete(e)}>Delete</button> : null}
<button type="submit" className="button button--primary button--large">Save</button>
</div>
</form>

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

@ -195,7 +195,7 @@ class EditPlaylist extends React.Component{
{this.renderFields()}
<div className="actions centered-text">
<button type="submit" className="primary large">Save</button>
<button type="submit" className="button button--primary button--large">Save</button>
</div>
</form>
</Modal>

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

@ -234,9 +234,9 @@ class EditRadio extends React.Component{
</div>
<div className="actions centered-text">
{this.state.enabled ? <span className="button destructive large" onClick={e => this.handleStop(e)}>Stop</span> : null}
{this.state.enabled ? <span className="button button--destructive button--large" onClick={e => this.handleStop(e)}>Stop</span> : null}
{this.state.enabled ? <button className="primary large" onClick={e => this.handleUpdate(e)}>Save</button> : <button className="primary large" onClick={e => this.handleStart(e)}>Start</button>}
{this.state.enabled ? <button className="button button--primary button--large" onClick={e => this.handleUpdate(e)}>Save</button> : <button className="button button--primary button--large" onClick={e => this.handleStart(e)}>Start</button>}
</div>
</form>
</Modal>

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

@ -125,7 +125,7 @@ class InitialSetup extends React.Component{
</div>}
<div className="actions centered-text">
<button className={"primary large"+(this.state.saving ? " working" : "")} onClick={e => this.handleSubmit(e)}>
<button className={"button button--primary button--large"+(this.state.saving ? " button--working" : "")} onClick={e => this.handleSubmit(e)}>
{this.state.saving ? "Saving" : "Save"}
</button>
</div>

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

@ -181,7 +181,7 @@ class ShareConfiguration extends React.Component {
</div>
<div className="actions centered-text">
{this.state.recipients.length > 0 ? <button className="primary large" onClick={e => this.handleSubmit(e)}>Send</button> : <button className="primary large" disabled="disabled" onClick={e => this.handleSubmit(e)}>Send</button>}
{this.state.recipients.length > 0 ? <button className="button button--primary button--large" onClick={e => this.handleSubmit(e)}>Send</button> : <button className="button button--primary button--large" disabled="disabled" onClick={e => this.handleSubmit(e)}>Send</button>}
</div>
</form>
</Modal>