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

Playlist editing; Description field polish, fixes #138

Browse Source
This commit is contained in:
James Barnsley
2017-07-14 08:57:53 +12:00
parent bbc2cf8961
commit 0028599bba
4 changed files with 74 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -7,3 +7,5 @@ public_html
*.orig
Thumbs.db
*.pyc
package-lock.json

10
src/js/components/Modal/AddToQueueModal.js
View File

@ -25,25 +25,27 @@ export default class AddToQueueModal extends React.Component{
render(){
return (
<div>
<h1>Add URI(s) to queue</h1>
<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>
<form onSubmit={e => this.handleSubmit(e)}>
<div className="field text">
<span className="label">URI(s)</span>
<input
type="text"
placeholder="Comma-separated URIs"
onChange={e => this.setState({uris: e.target.value})}
value={this.state.uris} />
</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">Add to end</span>
<span className="label">End</span>
</label>
<label>
<input
@ -51,7 +53,7 @@ export default class AddToQueueModal extends React.Component{
name="next"
checked={this.state.next}
onChange={e => this.setState({next: true})} />
<span className="label">Add after current track</span>
<span className="label">After current track</span>
</label>
</div>

99
src/js/components/Modal/CreatePlaylistModal.js
View File

@ -31,28 +31,72 @@ export default class CreatePlaylistModal extends React.Component{
return false
}
renderFields(){
switch (this.state.scheme){
case 'spotify':
return (
<div>
<div className="field text">
<span className="label">Name</span>
<input
type="text"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
<div className="field text">
<span className="label">Description</span>
<input
type="text"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description } />
</div>
<div className="field checkbox white">
<span className="label">Options</span>
<label>
<input
type="checkbox"
name="is_public"
checked={ this.state.is_public }
onChange={ e => this.setState({ is_public: !this.state.is_public })} />
<span className="label">Public</span>
</label>
<label>
<input
type="checkbox"
name="is_collaborative"
checked={ this.state.is_collaborative }
onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
<span className="label">Collaborative</span>
</label>
</div>
</div>
)
default:
return (
<div>
<div className="field text">
<span className="label">Name</span>
<input
type="text"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
</div>
)
}
}
render(){
return (
<div>
<h1>Create playlist</h1>
<form onSubmit={(e) => this.createPlaylist(e)}>
<div className="field text">
<span className="label">Name</span>
<input
type="text"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
<div className="field text">
<span className="label">Description</span>
<input
type="text"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description } />
</div>
<div className="field radio white">
<span className="label">Provider</span>
<label>
@ -74,28 +118,13 @@ export default class CreatePlaylistModal extends React.Component{
<span className="label">Mopidy</span>
</label>
</div>
<div className="field checkbox white">
<span className="label">Options</span>
<label>
<input
type="checkbox"
name="is_public"
checked={ this.state.is_public }
onChange={ e => this.setState({ is_public: !this.state.is_public })} />
<span className="label">Public</span>
</label>
<label>
<input
type="checkbox"
name="is_collaborative"
checked={ this.state.is_collaborative }
onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
<span className="label">Collaborative</span>
</label>
</div>
{this.renderFields()}
<div className="actions centered-text">
<button type="submit" className="primary wide">Create</button>
</div>
</form>
</div>
)

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

@ -35,7 +35,7 @@
}
.content {
padding: 100px 25%;
padding: 10vh 25%;
margin: 0 auto;
width: 50%;
color: $white;
@ -44,7 +44,7 @@
padding-top: 50px;
.field {
padding-bottom: 40px;
padding-bottom: 30px;
position: relative;
.label {
@ -145,13 +145,6 @@
}
}
&.add_to_queue,
&.create_playlist {
h1 {
padding-bottom: 50px;
}
}
&.image_zoom {
.content {
text-align: center;