Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-11 00:08:30 +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 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 { FormButtons } from './../../common';
import { styles as commonStyles } from '../../common';
const trim = value => {
if (value && value.trim) {
@ -44,52 +45,57 @@ class AddFeatureComponent extends Component {
const configuredStrategies = input.strategies || [];
return (
<form onSubmit={onSubmit(input)}>
<section style={{ padding: '16px' }}>
<Textfield
floatingLabel
label="Name"
name="name"
required
value={name}
error={nameError}
onBlur={v => validateName(v.target.value)}
onChange={v => setValue('name', trim(v.target.value))}
/>
<Textfield
floatingLabel
style={{ width: '100%' }}
rows={1}
label="Description"
required
value={description}
onChange={v => setValue('description', v.target.value)}
/>
<div>
<Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
<CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>Create feature toggle</CardTitle>
<form onSubmit={onSubmit(input)}>
<section style={{ padding: '16px' }}>
<Textfield
floatingLabel
label="Name"
name="name"
required
value={name}
error={nameError}
onBlur={v => validateName(v.target.value)}
onChange={v => setValue('name', trim(v.target.value))}
/>
<Textfield
floatingLabel
style={{ width: '100%' }}
rows={1}
label="Description"
required
value={description}
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 />
<Switch
checked={enabled}
onChange={() => {
setValue('enabled', !enabled);
}}
>
Enabled
</Switch>
<hr />
</div>
<StrategiesSection
configuredStrategies={configuredStrategies}
addStrategy={addStrategy}
updateStrategy={updateStrategy}
moveStrategy={moveStrategy}
removeStrategy={removeStrategy}
/>
<br />
<FormButtons submitText={'Create'} onCancel={onCancel} />
</section>
</form>
</section>
<CardActions>
<FormButtons submitText={'Create'} onCancel={onCancel} />
</CardActions>
</form>
</Card>
);
}
}