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

Consistent design elements for modal

Browse Source
This commit is contained in:
James Barnsley
2017-02-05 19:57:29 +13:00
parent c0633ad409
commit 6448b29ec8
6 changed files with 61 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -74,7 +74,9 @@ export default class CreatePlaylistModal extends React.Component{
<span className="label">Public</span>
</label>
</div>
<button type="submit" className="primary centered" disabled={!this.state.submit_enabled}>Save</button>
<div className="actions centered-text">
<button type="submit" className="primary wide" disabled={!this.state.submit_enabled}>Save</button>
</div>
</form>
</div>
)

4
src/js/components/Modal/EditPlaylistModal.js
View File

@ -53,7 +53,9 @@ export default class EditPlaylistModal extends React.Component{
<span className="label">Public</span>
</label>
</div>
<button type="submit" className="primary centered" disabled={!this.state.submit_enabled}>Save</button>
<div className="actions centered-text">
<button type="submit" className="primary wide" disabled={!this.state.submit_enabled}>Save</button>
</div>
</form>
</div>
)

94
src/js/components/Modal/EditRadioModal.js
View File

@ -24,13 +24,12 @@ export default class EditRadioModal extends React.Component{
this.props.spotifyActions.resolveRadioSeeds(this.props.radio)
}
save(){
this.props.pusherActions.startRadio(this.state.seeds)
this.props.uiActions.closeModal()
}
stop(){
this.props.pusherActions.stopRadio()
handleSubmit(e){
if (this.state.enabled){
this.props.pusherActions.startRadio(this.state.seeds)
}else{
this.props.pusherActions.stopRadio()
}
this.props.uiActions.closeModal()
}
@ -68,7 +67,7 @@ export default class EditRadioModal extends React.Component{
renderSeeds(){
var seeds = []
if (this.state.enabled && this.state.seeds){
if (this.state.seeds){
for (var i = 0; i < this.state.seeds.length; i++){
var uri = this.state.seeds[i]
if (uri){
@ -98,37 +97,35 @@ export default class EditRadioModal extends React.Component{
}
return (
<div className="list">
{
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> }
<span className="grey-text">&nbsp;({seed.type})</span>
<FontAwesome name="close" className="pull-right destructive" onClick={() => this.removeSeed(seed.uri)} />
</div>
)
})
}
<div>
<div className="list">
{
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> }
<span className="grey-text">&nbsp;({seed.type})</span>
<FontAwesome name="close" className="pull-right destructive" onClick={() => this.removeSeed(seed.uri)} />
</div>
)
})
}
</div>
</div>
)
}
renderActions(){
if (this.state.enabled){
return (
<span>
<button className="primary wide" onClick={e => this.save()}>Save</button>
<button className="destructive wide" onClick={e => this.stop()}>Stop</button>
</span>
)
}else{
return (
<span>
<button className="primary wide" onClick={e => this.save()}>Start</button>
</span>
)
}
renderAddSeeds(){
return (
<div className="field no-top-margin">
<input
type="text"
placeholder="Add comma-separated URIs"
onChange={e => this.setState({uri: e.target.value})}
value={this.state.uri} />
<button type="button" className="discrete" onClick={e => this.addSeed()}><FontAwesome name="plus" /></button>
</div>
)
}
render(){
@ -136,22 +133,23 @@ export default class EditRadioModal extends React.Component{
<div>
<h4>Edit radio</h4>
<h3>Current seeds</h3>
{this.renderSeeds()}
<form>
<h3>Add seeds</h3>
<div className="field">
<input
type="text"
placeholder="Comma-separated URIs"
onChange={e => this.setState({uri: e.target.value})}
value={this.state.uri} />
<button className="discrete" onClick={e => this.addSeed()}><FontAwesome name="check" /></button>
<form onSubmit={e => this.handleSubmit(e)}>
<div className="field checkbox white">
<label>
<input
type="checkbox"
name="enabled"
checked={ this.state.enabled }
onChange={ e => this.setState({ enabled: !this.state.enabled })} />
<span className="label">Radio mode enabled</span>
</label>
</div>
{this.state.enabled ? this.renderSeeds() : null}
{this.state.enabled ? this.renderAddSeeds() : null}
<div className="actions centered-text">
{this.renderActions()}
<button type="submit" className="primary wide">Save</button>
</div>
</form>
</div>

3
src/scss/components/_header.scss
View File

@ -32,7 +32,8 @@ main {
background: transparent;
font-size: 14px;
font-weight: 600;
padding: 14px 10px;
padding: 13px 10px;
line-height: 24px;
text-transform: uppercase;
}
}

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

@ -133,7 +133,6 @@
&.edit_radio {
form {
padding-top: 60px;
.field {
position: relative;
margin-top: 10px;
@ -141,7 +140,11 @@
position: absolute;
top: 5px;
right: 0;
padding: 10px 12px;
padding: 14px;
}
input[type="text"]{
font-size: 14px;
padding: 16px 18px;
}
}
}

2
src/scss/global/_core.scss
View File

@ -115,6 +115,8 @@ h4 {
.no-bottom-padding { padding-bottom: 0 !important; }
.no-right-padding { padding-right: 0 !important; }
.no-left-padding { padding-left: 0 !important; }
.no-top-margin { margin-top: 0 !important; }
.no-bottom-margin { margin-bottom: 0 !important; }
.top-padding { padding-top: 20px; }
.bottom-padding { padding-bottom: 20px; }