Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-24 01:18:01 +02:00
Code Issues Projects Releases Wiki Activity

add tabs to client application view

Browse Source
This commit is contained in:
sveisvei 2016-12-13 20:54:53 +01:00
parent 986550887b
commit f8e5a179f0
2 changed files with 90 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/component/application/application-edit-component.js
View File

@ -2,7 +2,12 @@
import React, { Component, PureComponent } from 'react'; import React, { Component, PureComponent } from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { Grid, Cell, List, ListItem, ListItemContent, Textfield, Icon, ProgressBar } from 'react-mdl'; import {
Grid, Cell,
List, ListItem, ListItemContent,
Textfield, Icon, ProgressBar,
Tabs, Tab,
} from 'react-mdl';
import { HeaderTitle, ExternalIconLink } from '../common'; import { HeaderTitle, ExternalIconLink } from '../common';
class StatefulTextfield extends Component { class StatefulTextfield extends Component {
@ -27,7 +32,12 @@ class StatefulTextfield extends Component {
} }
} }
class ClientStrategies extends PureComponent { class ClientApplications extends PureComponent {
constructor (props) {
super(props);
this.state = { activeTab: 0 };
}
componentDidMount () { componentDidMount () {
this.props.fetchApplication(this.props.appName); this.props.fetchApplication(this.props.appName);
} }
@ -51,11 +61,7 @@ class ClientStrategies extends PureComponent {
color, color,
} = application; } = application;
return ( const content = this.state.activeTab === 0 ? (
<div>
<HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
/>
<Grid> <Grid>
<Cell col={3}> <Cell col={3}>
<h6> Toggles</h6> <h6> Toggles</h6>
@ -103,7 +109,8 @@ class ClientStrategies extends PureComponent {
))} ))}
</List> </List>
</Cell> </Cell>
</Grid>) : (
<Grid>
<Cell col={12}> <Cell col={12}>
<h5>Edit app meta data</h5> <h5>Edit app meta data</h5>
</Cell> </Cell>
@ -120,11 +127,26 @@ class ClientStrategies extends PureComponent {
<StatefulTextfield <StatefulTextfield
value={color} label="Select color" onBlur={(e) => storeApplicationMetaData(appName, 'color', e.target.value)} /> value={color} label="Select color" onBlur={(e) => storeApplicationMetaData(appName, 'color', e.target.value)} />
</Cell> </Cell>
</Grid> </Grid>);
return (
<div>
<HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
/>
<Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
<Tab>Metrics</Tab>
<Tab>Edit</Tab>
</Tabs>
{content}
</div> </div>
); );
} }
} }
export default ClientStrategies; export default ClientApplications;

2
frontend/src/component/common/index.js
View File

@ -24,7 +24,7 @@ export const AppsLinkList = ({ apps }) => (
export const HeaderTitle = ({ title, actions, subtitle }) => ( export const HeaderTitle = ({ title, actions, subtitle }) => (
<div style={{ display: 'flex', borderBottom: '1px solid #f1f1f1', marginBottom: '10px', padding: '16px 20px ' }}> <div style={{ display: 'flex', borderBottom: '1px solid #f1f1f1', marginBottom: '10px', padding: '16px 20px ' }}>
<div style={{ flex: '1' }}> <div style={{ flex: '2' }}>
<h6 style={{ margin: 0 }}>{title}</h6> <h6 style={{ margin: 0 }}>{title}</h6>
{subtitle && <small>{subtitle}</small>} {subtitle && <small>{subtitle}</small>}
</div> </div>