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

use tabs for metrics and editview

Browse Source
This commit is contained in:
sveisvei 2016-12-13 20:32:16 +01:00
parent 821bf0e19b
commit 171aaef287
2 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/feature/form/index.jsx
View File

@ -45,7 +45,7 @@ class AddFeatureToggleComponent extends Component {
return (
<form onSubmit={onSubmit(input)}>
<HeaderTitle title={title} />
{title && <HeaderTitle title={title} />}
<section>
<Textfield
floatingLabel

35
frontend/src/component/feature/view-edit-container.jsx
View File

@ -1,5 +1,5 @@
import React, { PropTypes } from 'react';
import { Grid, Cell, Icon, ProgressBar, List, ListItem, ListItemContent } from 'react-mdl';
import { Tabs, Tab, Grid, Cell, Icon, ProgressBar, List, ListItem, ListItemContent } from 'react-mdl';
import { Link } from 'react-router';
import percentLib from 'percent';
@ -15,6 +15,12 @@ import { AppsLinkList, SwitchWithLabel, getIcon } from '../common';
class EditFeatureToggleWrapper extends React.Component {
constructor (props) {
super(props);
this.state = { activeTab: 0 };
}
static propTypes () {
return {
featureToggleName: PropTypes.string.isRequired,
@ -66,14 +72,11 @@ class EditFeatureToggleWrapper extends React.Component {
return <span>Could not find the toggle "{this.props.featureToggleName}"</span>;
}
return (
const content = this.state.activeTab === 0 ? (
<div>
<h4>{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small></h4>
<p>{featureToggle.description}</p>
<hr />
<SwitchWithLabel
checked={featureToggle.enabled}
onChange={() => toggleFeature(featureToggle)}>Toggle {featureToggle.name}</SwitchWithLabel>
checked={featureToggle.enabled}
onChange={() => toggleFeature(featureToggle)}>Toggle {featureToggle.name}</SwitchWithLabel>
<hr />
<Grid style={{ textAlign: 'center' }}>
<Cell col={3}>
@ -121,10 +124,24 @@ class EditFeatureToggleWrapper extends React.Component {
</Link>
</Cell>
</Grid>
</div>
) : (
<EditFeatureToggle featureToggle={featureToggle} />
);
<hr />
return (
<div>
<h4>{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small></h4>
<div>{featureToggle.description}</div>
<Tabs activeTab={this.state.activeTab}
onChange={(tabId) => this.setState({ activeTab: tabId })}
ripple
style={{ marginBottom: '10px' }}>
<Tab>Metrics</Tab>
<Tab>Edit</Tab>
</Tabs>
<EditFeatureToggle title="Edit" featureToggle={featureToggle} />
{content}
</div>
);
}