Polishing fields; Sortable sources
This commit is contained in:
James Barnsley
@ -1,31 +1,56 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import Sortable from 'react-sortablejs';
|
||||
import Icon from '../Icon'
|
||||
import * as helpers from '../../helpers'
|
||||
|
||||
export default class SourcesPriority extends React.Component{
|
||||
|
||||
constructor(props){
|
||||
super(props)
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleSort(order){
|
||||
this.props.uiActions.set({uri_schemes_priority: order});
|
||||
}
|
||||
|
||||
render(){
|
||||
var className = "sources-priority-field";
|
||||
var ordered_schemes = [];
|
||||
var unordered_schemes = [];
|
||||
|
||||
for (var i = 0; i < this.props.uri_schemes.length; i++){
|
||||
var index = this.props.uri_schemes_priority.indexOf(this.props.uri_schemes[i]);
|
||||
|
||||
if (index > -1){
|
||||
ordered_schemes[index] = this.props.uri_schemes[i];
|
||||
} else {
|
||||
unordered_schemes.push(this.props.uri_schemes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < unordered_schemes.length; i++){
|
||||
ordered_schemes.push(unordered_schemes[i]);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{
|
||||
this.props.uri_schemes.map(scheme => {
|
||||
var name = helpers.titleCase(scheme.replace(':','').replace('+',' '));
|
||||
<Sortable
|
||||
className={className}
|
||||
onChange={(order, sortable, e) => {
|
||||
this.handleSort(order)
|
||||
}}>
|
||||
{
|
||||
ordered_schemes.map(scheme => {
|
||||
var name = helpers.titleCase(scheme.replace(':','').replace('+',' '));
|
||||
|
||||
return (
|
||||
<span className="source flag grey" key={scheme}>
|
||||
{name}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
return (
|
||||
<span className="source flag grey" key={scheme} data-id={scheme}>
|
||||
{name}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Sortable>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -36,23 +36,27 @@ export default class AddToQueueModal extends React.Component{
|
||||
</div>
|
||||
|
||||
<div className="field radio white">
|
||||
<span className="label">Position</span>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="next"
|
||||
checked={!this.state.next}
|
||||
onChange={e => this.setState({next: false})} />
|
||||
<span className="label">End</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="next"
|
||||
checked={this.state.next}
|
||||
onChange={e => this.setState({next: true})} />
|
||||
<span className="label">After current track</span>
|
||||
</label>
|
||||
<div className="label">
|
||||
Position
|
||||
</div>
|
||||
<div className="input">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="next"
|
||||
checked={!this.state.next}
|
||||
onChange={e => this.setState({next: false})} />
|
||||
<span className="label">End</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="next"
|
||||
checked={this.state.next}
|
||||
onChange={e => this.setState({next: true})} />
|
||||
<span className="label">After current track</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="actions centered-text">
|
||||
|
||||
@ -51,23 +51,27 @@ export default class EditPlaylistModal extends React.Component{
|
||||
value={ this.state.description } />
|
||||
</div>
|
||||
<div className="field checkbox white">
|
||||
<span className="label">Options</span>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="playlist_private"
|
||||
checked={ this.state.public }
|
||||
onChange={ e => this.setState({ public: !this.state.public })} />
|
||||
<span className="label">Public</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="collaborative"
|
||||
checked={ this.state.collaborative }
|
||||
onChange={ e => this.setState({ collaborative: !this.state.collaborative })} />
|
||||
<span className="label">Collaborative</span>
|
||||
</label>
|
||||
<div className="label">
|
||||
Options
|
||||
</div>
|
||||
<div className="input">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="playlist_private"
|
||||
checked={ this.state.public }
|
||||
onChange={ e => this.setState({ public: !this.state.public })} />
|
||||
<span className="label">Public</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="collaborative"
|
||||
checked={ this.state.collaborative }
|
||||
onChange={ e => this.setState({ collaborative: !this.state.collaborative })} />
|
||||
<span className="label">Collaborative</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -167,7 +167,7 @@ export default class EditRadioModal extends React.Component{
|
||||
{seed.unresolved ? <span className="grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
|
||||
{!seed.unresolved ? <span className="grey-text"> ({seed.type})</span> : null}
|
||||
<button className="discrete remove-uri no-hover" onClick={e => this.removeSeed(seed.uri)}>
|
||||
<Icon type="fontawesome" name="trash" />
|
||||
<Icon name="delete" />Remove
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
@ -205,7 +205,7 @@ export default class EditRadioModal extends React.Component{
|
||||
onChange={e => this.setState({uri: e.target.value, error_message: null})}
|
||||
value={this.state.uri} />
|
||||
<span className="button discrete add-uri no-hover" onClick={e => this.addSeed()}>
|
||||
<Icon type="fontawesome" name="plus" /> Add
|
||||
<Icon name="add" />Add
|
||||
</span>
|
||||
{this.state.error_message ? <span className="description error">{this.state.error_message}</span> : null}
|
||||
</div>
|
||||
|
||||
@ -1,103 +0,0 @@
|
||||
|
||||
import React, { PropTypes } from 'react';;
|
||||
import Sortable from 'react-sortablejs';
|
||||
|
||||
import Icon from '../Icon';
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
export default class SearchURISchemesModal extends React.Component{
|
||||
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state = {
|
||||
schemes: [],
|
||||
available_schemes: this.props.available_uri_schemes
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.setState({schemes: Object.assign([],this.props.search_uri_schemes)})
|
||||
}
|
||||
|
||||
handleSubmit(e){
|
||||
this.props.uiActions.set({search_uri_schemes: this.state.schemes})
|
||||
this.props.uiActions.closeModal()
|
||||
}
|
||||
|
||||
handleToggle(scheme){
|
||||
var uri_schemes = this.state.schemes
|
||||
var index = uri_schemes.indexOf(scheme)
|
||||
|
||||
if (index > -1){
|
||||
uri_schemes.splice(index,1)
|
||||
} else {
|
||||
uri_schemes.push(scheme)
|
||||
}
|
||||
|
||||
this.setState(uri_schemes)
|
||||
}
|
||||
|
||||
render(){
|
||||
var unselected_schemes = [];
|
||||
for (var i = 0; i < this.props.available_uri_schemes.length; i++){
|
||||
var scheme = this.props.available_uri_schemes[i];
|
||||
if (!this.state.schemes.includes(scheme)){
|
||||
unselected_schemes.push(scheme);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="no-bottom-padding">Search sources</h1>
|
||||
<h2 className="grey-text bottom-padding">Customise the providers used when searching. Reduce the number of providers to speed up your searches.</h2>
|
||||
|
||||
<form onSubmit={e => this.handleSubmit(e)}>
|
||||
<Sortable
|
||||
className="list"
|
||||
options={{
|
||||
handle: '.drag-handle'
|
||||
}}
|
||||
onChange={(order, sortable, e) => {
|
||||
this.setState({schemes: order})
|
||||
}}>
|
||||
{
|
||||
this.state.schemes.map(scheme => {
|
||||
return (
|
||||
<div className="list-item draggable" key={scheme} data-id={scheme}>
|
||||
<Icon type="fontawesome" className="grey-text drag-handle" name="bars" />
|
||||
{scheme.replace(':','')}
|
||||
<button className="discrete remove-uri no-hover" onClick={e => this.handleToggle(scheme)}>
|
||||
<Icon type="fontawesome" name="trash" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Sortable>
|
||||
|
||||
<div className="available-schemes">
|
||||
<h4>Add more schemes</h4>
|
||||
{
|
||||
unselected_schemes.map(scheme => {
|
||||
return (
|
||||
<div
|
||||
className="scheme flag large blue"
|
||||
key={scheme}
|
||||
onClick={e => this.handleToggle(scheme)}>
|
||||
{scheme.replace(':','')}
|
||||
|
||||
<Icon type="fontawesome" name="plus" />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="actions centered-text">
|
||||
<button type="submit" className="primary large">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user