Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix(feature): Create feature form inside a Card to align UI

Browse Source
This commit is contained in:
ivaosthu 2018-04-25 10:31:47 +02:00
parent a1092d9474
commit ca9ca32e4d
2 changed files with 693 additions and 453 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1048
frontend/src/component/feature/form/__tests__/__snapshots__/form-add-feature-component-test.jsx.snap
View File

File diff suppressed because it is too large Load Diff

98
frontend/src/component/feature/form/form-add-feature-component.jsx
View File

@ -1,9 +1,10 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Textfield, Switch } from 'react-mdl'; import { Textfield, Switch, Card, CardTitle, CardActions } from 'react-mdl';
import StrategiesSection from './strategies-section-container'; import StrategiesSection from './strategies-section-container';
import { FormButtons } from './../../common'; import { FormButtons } from './../../common';
import { styles as commonStyles } from '../../common';
const trim = value => { const trim = value => {
if (value && value.trim) { if (value && value.trim) {
@ -44,52 +45,57 @@ class AddFeatureComponent extends Component {
const configuredStrategies = input.strategies || []; const configuredStrategies = input.strategies || [];
return ( return (
<form onSubmit={onSubmit(input)}> <Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
<section style={{ padding: '16px' }}> <CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>Create feature toggle</CardTitle>
<Textfield <form onSubmit={onSubmit(input)}>
floatingLabel <section style={{ padding: '16px' }}>
label="Name" <Textfield
name="name" floatingLabel
required label="Name"
value={name} name="name"
error={nameError} required
onBlur={v => validateName(v.target.value)} value={name}
onChange={v => setValue('name', trim(v.target.value))} error={nameError}
/> onBlur={v => validateName(v.target.value)}
<Textfield onChange={v => setValue('name', trim(v.target.value))}
floatingLabel />
style={{ width: '100%' }} <Textfield
rows={1} floatingLabel
label="Description" style={{ width: '100%' }}
required rows={1}
value={description} label="Description"
onChange={v => setValue('description', v.target.value)} required
/> value={description}
<div> onChange={v => setValue('description', v.target.value)}
/>
<div>
<br />
<Switch
checked={enabled}
onChange={() => {
setValue('enabled', !enabled);
}}
>
Enabled
</Switch>
<hr />
</div>
<StrategiesSection
configuredStrategies={configuredStrategies}
addStrategy={addStrategy}
updateStrategy={updateStrategy}
moveStrategy={moveStrategy}
removeStrategy={removeStrategy}
/>
<br /> <br />
<Switch </section>
checked={enabled} <CardActions>
onChange={() => { <FormButtons submitText={'Create'} onCancel={onCancel} />
setValue('enabled', !enabled); </CardActions>
}} </form>
> </Card>
Enabled
</Switch>
<hr />
</div>
<StrategiesSection
configuredStrategies={configuredStrategies}
addStrategy={addStrategy}
updateStrategy={updateStrategy}
moveStrategy={moveStrategy}
removeStrategy={removeStrategy}
/>
<br />
<FormButtons submitText={'Create'} onCancel={onCancel} />
</section>
</form>
); );
} }
} }