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

Unifying modal form fields to standard style; Initial setup reporting field

Browse Source
This commit is contained in:
James Barnsley
2018-06-06 16:54:09 +12:00
parent c27588f2f0
commit 12054ffcb4
13 changed files with 1836 additions and 1847 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,15 +28,17 @@ export default class AddToQueueModal extends React.Component{
<form onSubmit={e => this.handleSubmit(e)}>
<div className="field text">
<span className="label">URI(s)</span>
<input
type="text"
onChange={e => this.setState({uris: e.target.value})}
value={this.state.uris} />
<div className="name">URI(s)</div>
<div className="input">
<input
type="text"
onChange={e => this.setState({uris: e.target.value})}
value={this.state.uris} />
</div>
</div>
<div className="field radio white">
<div className="label">
<div className="name">
Position
</div>
<div className="input">

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

@ -38,24 +38,28 @@ export default class CreatePlaylistModal extends React.Component{
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 className="name">Name</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
</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 className="name">Description</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description } />
</div>
</div>
<div className="field checkbox white">
<div className="label">
<div className="name">
Options
</div>
<div className="input">
@ -84,11 +88,13 @@ export default class CreatePlaylistModal extends React.Component{
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 className="name">Name</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
</div>
</div>
)
@ -102,7 +108,7 @@ export default class CreatePlaylistModal extends React.Component{
<form onSubmit={(e) => this.createPlaylist(e)}>
<div className="field radio white">
<div className="label">
<div className="name">
Provider
</div>
<div className="input">

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

@ -37,21 +37,25 @@ export default class EditPlaylistModal extends React.Component{
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 className="name">Name</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
</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 className="name">Description</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description } />
</div>
</div>
<div className="field checkbox white">
<div className="label">
<div className="name">
Options
</div>
<div className="input">
@ -81,11 +85,13 @@ export default class EditPlaylistModal extends React.Component{
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 className="name">Name</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
</div>
</div>
)

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

@ -199,15 +199,17 @@ export default class EditRadioModal extends React.Component{
{this.renderSeeds()}
<div className="field text">
<span className="label">URI(s)</span>
<input
type="text"
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 name="add" />Add
</span>
{this.state.error_message ? <span className="description error">{this.state.error_message}</span> : null}
<div className="name">URI(s)</div>
<div className="input">
<input
type="text"
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 name="add" />Add
</span>
{this.state.error_message ? <span className="description error">{this.state.error_message}</span> : null}
</div>
</div>
</form>

31
src/js/components/Modal/InitialSetupModal.js
View File

@ -52,13 +52,17 @@ export default class InitialSetupModal extends React.Component{
<form onSubmit={(e) => this.handleSubmit(e)}>
<div className="field text">
<span className="label">Username</span>
<input
type="text"
onChange={e => this.setState({username: e.target.value.replace(/\W/g, '')})}
value={this.state.username } />
<div className="description">
A non-unique string used to identify this client (no special characters)
<div className="name">
Username
</div>
<div className="input">
<input
type="text"
onChange={e => this.setState({username: e.target.value.replace(/\W/g, '')})}
value={this.state.username } />
<div className="description">
A non-unique string used to identify this client (no special characters)
</div>
</div>
</div>
@ -97,26 +101,25 @@ export default class InitialSetupModal extends React.Component{
</div>
</div>
<div className="field checkbox">
<div className="field checkbox no-label">
<div className="name">Reporting</div>
<div className="input">
<label>
<input
type="checkbox"
name="allow_reporting"
checked={ this.props.ui.allow_reporting }
onChange={ e => this.props.uiActions.set({ allow_reporting: !this.props.ui.allow_reporting })} />
checked={ this.state.allow_reporting }
onChange={ e => this.setState({ allow_reporting: !this.state.allow_reporting })} />
<span className="label">
Allow reporting of anonymous usage statistics
</span>
<div className="description">
Google Analytics and Sentry are used to collect usage data and errors to help trace issues and provide valuable insight into how we can continue to make improvements. All personal information is anonymized prior to collection.
</div>
</label>
</div>
</div>
<div className="field">
<div>Google Analytics is used to collect usage data and errors to help trace issues and provide valuable insight into how we can continue to make improvements. Personal information is anonymized prior to collection.</div>
</div>
<div className="actions centered-text">
<button className={"primary large"+(this.state.saving ? " working" : "")} onClick={e => this.handleSubmit(e)}>
{this.state.saving ? "Saving" : "Save"}

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

@ -52,8 +52,13 @@
padding-bottom: 30px;
position: relative;
.label {
.name {
font-size: 16px;
width: 18%;
padding-right: 2%;
float: left;
opacity: 0.5;
padding-top: 10px;
}
.description {
@ -61,41 +66,6 @@
padding-right: 0;
}
&.text,
&.radio,
&.checkbox {
& > .label {
opacity: 0.5;
width: 100px;
position: absolute;
top: 12px;
left: 0;
pointer-events: none;
padding: 0;
}
& > .input {
padding-top: 0;
}
}
&.text {
input {
background: transparent;
font-size: 18px;
padding-left: 100px;
padding-right: 0;
width: 100%;
color: $white;
border-bottom: 2px solid $white;
border-radius: 0;
&:focus,
&:active {
border-color: $turquoise;
}
}
}
&.radio,
&.checkbox {
padding-top: 8px;