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

Leaner modal; Placeholders in results

Browse Source
This commit is contained in:
James Barnsley
2017-03-25 10:21:10 +13:00
parent d64ab01cfe
commit d4ff061e01
3 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/js/components/Modal/SearchSettingsModal.js
View File

@ -49,36 +49,38 @@ export default class SearchSettingsModal extends React.Component{
render(){
return (
<div>
<h4 className="no-bottom-padding">Advanced search settings</h4>
<h3 className="grey-text bottom-padding">Customise the providers used when searching. Only Spotify and local backends support searching by artist, album or playlist.</h3>
<h4 className="no-bottom-padding">Search sourced</h4>
<h3 className="grey-text bottom-padding">Customise the providers used when searching. Reduce the number of providers to speed up your searches. Please note that not all backends support searching by artist, album or playlist.</h3>
<form onSubmit={e => this.handleSubmit(e)}>
<div className="field checkbox white">
<label>
<input
type="checkbox"
name="enabled"
checked={ this.state.spotify }
onChange={ e => this.setState({ spotify: !this.state.spotify })} />
<span className="label">spotify <span className="grey-text">(http)</span></span>
</label>
</div>
{
this.props.uri_schemes.map(scheme => {
return (
<div className="field checkbox white" key={scheme}>
<label>
<input
type="checkbox"
name={scheme}
checked={this.state.uri_schemes.indexOf(scheme) > -1}
onChange={ e => this.handleToggle(scheme)} />
<span className="label">{scheme.replace(':','')} <span className="grey-text">(mopidy)</span></span>
</label>
</div>
)
})
}
<div className="list small">
<div className="list-item field checkbox white">
<label>
<input
type="checkbox"
name="enabled"
checked={ this.state.spotify }
onChange={ e => this.setState({ spotify: !this.state.spotify })} />
<span className="label">spotify <span className="grey-text">(http)</span></span>
</label>
</div>
{
this.props.uri_schemes.map(scheme => {
return (
<div className="list-item field checkbox white" key={scheme}>
<label>
<input
type="checkbox"
name={scheme}
checked={this.state.uri_schemes.indexOf(scheme) > -1}
onChange={ e => this.handleToggle(scheme)} />
<span className="label">{scheme.replace(':','')} <span className="grey-text">(mopidy)</span></span>
</label>
</div>
)
})
}
</div>
<div className="actions centered-text">
<button type="submit" className="primary wide">Save</button>

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

@ -140,26 +140,26 @@ class Search extends React.Component{
<section>
<div className="inner">
<h4><Link to={global.baseURL+'search/artists/'+this.props.params.query}>Artists</Link></h4>
<ArtistGrid className="mini" artists={artists.slice(0,6)} />
{artists.length > 0 ? <ArtistGrid className="mini" artists={artists.slice(0,6)} /> : <span className="grey-text">No results</span>}
</div>
</section>
<section>
<div className="inner">
<h4><Link to={global.baseURL+'search/albums/'+this.props.params.query}>Albums</Link></h4>
<AlbumGrid className="mini" albums={albums.slice(0,6)} />
{albums.length > 0 ? <AlbumGrid className="mini" albums={albums.slice(0,6)} /> : <span className="grey-text">No results</span>}
</div>
</section>
<section>
<div className="inner">
<h4><Link to={global.baseURL+'search/playlists/'+this.props.params.query}>Playlists</Link></h4>
<PlaylistGrid className="mini" playlists={playlists.slice(0,6)} />
{playlists.length > 0 ? <PlaylistGrid className="mini" playlists={playlists.slice(0,6)} /> : <span className="grey-text">No results</span>}
</div>
</section>
</div>
<section className="list-wrapper">
<h4 className="left-padding"><Link to={global.baseURL+'search/'+this.props.params.query+'/tracks'}>Tracks</Link></h4>
<TrackList show_source_icon={true} tracks={ tracks } />
<TrackList show_source_icon={true} tracks={tracks} />
<LazyLoadListener enabled={this.props['tracks_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('tracks') }/>
</section>
@ -202,7 +202,7 @@ class Search extends React.Component{
<DropdownField icon="eye" name="Type" value={this.props.params.type} options={type_options} handleChange={val => this.handleTypeChange(val)} />
<button onClick={e => this.props.uiActions.openModal('search_settings', {type: this.props.params.type, query: this.props.params.query})}>
<FontAwesome name="wrench" />&nbsp;
Advanced
Sources
</button>
</span>
)

11
src/scss/components/_lists.scss
View File

@ -42,6 +42,17 @@
top: 14px;
right: 12px;
}
&.field {
padding: 0 !important;
& > label {
display: block;
position: relative;
padding: 12px 10px 12px 20px;
cursor: pointer;
}
}
}
&.track-list .list-item {