mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-26 13:48:33 +02:00
improved page layout + horizontal scrolling tables on mobile
This commit is contained in:
vsandvold
parent
553989f636
commit
3415fcb82e
@ -145,8 +145,8 @@ export default class App extends Component {
|
||||
</Navigation>
|
||||
</Drawer>
|
||||
<ScrollContainer scrollKey="container" shouldUpdateScroll={shouldUpdateScroll}>
|
||||
<Content>
|
||||
<Grid shadow={1} style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<Content className="mdl-color--grey-50">
|
||||
<Grid noSpacing className={styles.content}>
|
||||
<Cell col={12}>
|
||||
{this.props.children}
|
||||
<ErrorContainer />
|
||||
|
||||
@ -152,18 +152,20 @@ class ClientApplications extends PureComponent {
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
|
||||
actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
|
||||
/>
|
||||
<Grid className="mdl-color--white">
|
||||
<Cell col={12}>
|
||||
<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>Details</Tab>
|
||||
<Tab>Edit</Tab>
|
||||
</Tabs>
|
||||
<Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
|
||||
<Tab>Details</Tab>
|
||||
<Tab>Edit</Tab>
|
||||
</Tabs>
|
||||
|
||||
{content}
|
||||
</div>
|
||||
{content}
|
||||
</Cell>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import { ProgressBar } from 'react-mdl';
|
||||
import { ProgressBar, Grid, Cell } from 'react-mdl';
|
||||
import { AppsLinkList, HeaderTitle } from '../common';
|
||||
|
||||
class ClientStrategies extends Component {
|
||||
@ -17,10 +17,12 @@ class ClientStrategies extends Component {
|
||||
return <ProgressBar indeterminate />;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<HeaderTitle title="Applications" />
|
||||
<AppsLinkList apps={applications} />
|
||||
</div>
|
||||
<Grid className="mdl-color--white">
|
||||
<Cell col={12}>
|
||||
<HeaderTitle title="Applications" />
|
||||
<AppsLinkList apps={applications} />
|
||||
</Cell>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { DataTable, TableHeader, IconButton, Icon } from 'react-mdl';
|
||||
import { DataTable, TableHeader, IconButton, Icon, Grid, Cell } from 'react-mdl';
|
||||
import { HeaderTitle } from '../common';
|
||||
|
||||
class ArchiveList extends Component {
|
||||
@ -14,26 +14,31 @@ class ArchiveList extends Component {
|
||||
e.reviveName = e.name;
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<HeaderTitle title="Toggle Archive" />
|
||||
{
|
||||
archive.length > 0 ?
|
||||
<DataTable
|
||||
rows={archive}
|
||||
style={{ width: '100%' }}>
|
||||
<TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
|
||||
<IconButton colored name="undo" onClick={() => revive(reviveName)} />
|
||||
)}>Revive</TableHeader>
|
||||
<TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>Enabled</TableHeader>
|
||||
<TableHeader name="name">Toggle name</TableHeader>
|
||||
<TableHeader numeric name="createdAt">Created</TableHeader>
|
||||
</DataTable> :
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Icon name="report" style={{ color: '#aaa', fontSize: '40px' }}/><br />
|
||||
No archived feature toggles, go see <Link to="/features">active toggles here</Link>
|
||||
<Grid className="mdl-color--white">
|
||||
<Cell col={12}>
|
||||
<HeaderTitle title="Toggle Archive" />
|
||||
<div style={{ overflowX: 'scroll' }}>
|
||||
{
|
||||
archive.length > 0 ?
|
||||
<DataTable
|
||||
rows={archive}
|
||||
style={{ width: '100%' }}>
|
||||
<TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
|
||||
<IconButton colored name="undo" onClick={() => revive(reviveName)} />
|
||||
)}>Revive</TableHeader>
|
||||
<TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>
|
||||
Enabled</TableHeader>
|
||||
<TableHeader name="name">Toggle name</TableHeader>
|
||||
<TableHeader numeric name="createdAt">Created</TableHeader>
|
||||
</DataTable> :
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Icon name="report" style={{ color: '#aaa', fontSize: '40px' }}/><br />
|
||||
No archived feature toggles, go see <Link to="/features">active toggles here</Link>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</Cell>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,13 +4,21 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0;
|
||||
border-color: rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.hideLt960 {
|
||||
.list {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.hideLt920 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ const Feature = ({
|
||||
<span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{description}</span>
|
||||
</Link>
|
||||
</span>
|
||||
<span className={commonStyles.hideLt960} style={{ flexShrink: 0 }}>
|
||||
<span className={commonStyles.hideLt920} style={{ flexShrink: 0 }}>
|
||||
{strategyChips}
|
||||
{summaryChip}
|
||||
</span>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
|
||||
.topList {
|
||||
display: flex;
|
||||
margin: 10px 10px 10px 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.topListItem0 {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Textfield, Switch } from 'react-mdl';
|
||||
import { Textfield, Switch, Grid, Cell } from 'react-mdl';
|
||||
import StrategiesSection from './strategies-section-container';
|
||||
|
||||
import { FormButtons, HeaderTitle } from '../../common';
|
||||
@ -45,53 +45,57 @@ class AddFeatureToggleComponent extends Component {
|
||||
const configuredStrategies = input.strategies || [];
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit(input)}>
|
||||
{title && <HeaderTitle title={title} />}
|
||||
<section>
|
||||
<Textfield
|
||||
floatingLabel
|
||||
label="Name"
|
||||
name="name"
|
||||
disabled={editmode}
|
||||
required
|
||||
value={name}
|
||||
error={nameError}
|
||||
onBlur={(v) => validateName(v.target.value)}
|
||||
onChange={(v) => setValue('name', trim(v.target.value))} />
|
||||
<br />
|
||||
<Textfield
|
||||
floatingLabel
|
||||
style={{ width: '100%' }}
|
||||
rows={1}
|
||||
label="Description"
|
||||
required
|
||||
value={description}
|
||||
onChange={(v) => setValue('description', v.target.value)} />
|
||||
<Grid className="mdl-color--white">
|
||||
<Cell col={12}>
|
||||
<form onSubmit={onSubmit(input)}>
|
||||
{title && <HeaderTitle title={title} />}
|
||||
<section>
|
||||
<Textfield
|
||||
floatingLabel
|
||||
label="Name"
|
||||
name="name"
|
||||
disabled={editmode}
|
||||
required
|
||||
value={name}
|
||||
error={nameError}
|
||||
onBlur={(v) => validateName(v.target.value)}
|
||||
onChange={(v) => setValue('name', trim(v.target.value))} />
|
||||
<br />
|
||||
<Textfield
|
||||
floatingLabel
|
||||
style={{ width: '100%' }}
|
||||
rows={1}
|
||||
label="Description"
|
||||
required
|
||||
value={description}
|
||||
onChange={(v) => setValue('description', v.target.value)} />
|
||||
|
||||
{!editmode && <div>
|
||||
<br />
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={() => {
|
||||
setValue('enabled', !enabled);
|
||||
}}>Enabled</Switch>
|
||||
<hr />
|
||||
</div>}
|
||||
</section>
|
||||
|
||||
<StrategiesSection
|
||||
configuredStrategies={configuredStrategies}
|
||||
addStrategy={addStrategy}
|
||||
updateStrategy={updateStrategy}
|
||||
moveStrategy={moveStrategy}
|
||||
removeStrategy={removeStrategy} />
|
||||
|
||||
{!editmode && <div>
|
||||
<br />
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={() => {
|
||||
setValue('enabled', !enabled);
|
||||
}}>Enabled</Switch>
|
||||
<hr />
|
||||
</div>}
|
||||
</section>
|
||||
|
||||
<StrategiesSection
|
||||
configuredStrategies={configuredStrategies}
|
||||
addStrategy={addStrategy}
|
||||
updateStrategy={updateStrategy}
|
||||
moveStrategy={moveStrategy}
|
||||
removeStrategy={removeStrategy} />
|
||||
|
||||
<br />
|
||||
<FormButtons
|
||||
submitText={editmode ? 'Update' : 'Create'}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
</form>
|
||||
<FormButtons
|
||||
submitText={editmode ? 'Update' : 'Create'}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
</form>
|
||||
</Cell>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import Feature from './feature-list-item-component';
|
||||
import { Link } from 'react-router';
|
||||
import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem } from 'react-mdl';
|
||||
import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem, Grid, Cell } from 'react-mdl';
|
||||
|
||||
import { styles as commonStyles } from '../common';
|
||||
import styles from './feature.scss';
|
||||
|
||||
export default class FeatureListComponent extends React.PureComponent {
|
||||
@ -49,70 +50,72 @@ export default class FeatureListComponent extends React.PureComponent {
|
||||
const { features, toggleFeature, featureMetrics, settings } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.topList}>
|
||||
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
|
||||
{ settings.showLastHour &&
|
||||
<ChipContact className="mdl-color--teal mdl-color-text--white">
|
||||
<Icon name="hourglass_full" style={{ fontSize: '16px' }} />
|
||||
</ChipContact> }
|
||||
{ '1 hour' }
|
||||
</Chip>
|
||||
|
||||
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
|
||||
{ !settings.showLastHour &&
|
||||
<ChipContact className="mdl-color--teal mdl-color-text--white">
|
||||
<Icon name="hourglass_empty" style={{ fontSize: '16px' }} />
|
||||
</ChipContact> }
|
||||
{ '1 minute' }
|
||||
</Chip>
|
||||
<Grid className="mdl-color--white">
|
||||
<Cell col={12}>
|
||||
<div className={styles.topList}>
|
||||
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
|
||||
{ settings.showLastHour &&
|
||||
<ChipContact className="mdl-color--teal mdl-color-text--white">
|
||||
<Icon name="hourglass_full" style={{ fontSize: '16px' }} />
|
||||
</ChipContact> }
|
||||
{ '1 hour' }
|
||||
</Chip>
|
||||
|
||||
<Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
|
||||
{ !settings.showLastHour &&
|
||||
<ChipContact className="mdl-color--teal mdl-color-text--white">
|
||||
<Icon name="hourglass_empty" style={{ fontSize: '16px' }} />
|
||||
</ChipContact> }
|
||||
{ '1 minute' }
|
||||
</Chip>
|
||||
|
||||
<div className={styles.topListItem2} style={{ margin: '-10px 10px 0 10px' }}>
|
||||
<Textfield
|
||||
floatingLabel
|
||||
value={settings.filter}
|
||||
onChange={(e) => { this.setFilter(e.target.value); }}
|
||||
label="Filter toggles"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
<div className={styles.topListItem2} style={{ margin: '-10px 10px 0 10px' }}>
|
||||
<Textfield
|
||||
floatingLabel
|
||||
value={settings.filter}
|
||||
onChange={(e) => { this.setFilter(e.target.value); }}
|
||||
label="Filter toggles"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ position: 'relative' }} className={styles.topListItem0}>
|
||||
<IconButton name="sort" id="demo-menu-top-right" colored title="Sort" />
|
||||
<Menu target="demo-menu-top-right" valign="bottom" align="right" ripple onClick={
|
||||
(e) => this.setSort(e.target.getAttribute('data-target'))}>
|
||||
<MenuItem disabled>Filter by:</MenuItem>
|
||||
<MenuItem disabled={!settings.sort || settings.sort === 'nosort'} data-target="nosort">Default</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'name'} data-target="name">Name</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'enabled'} data-target="enabled">Enabled</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'appName'} data-target="appName">Application name</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'created'} data-target="created">Created</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'strategies'} data-target="strategies">Strategies</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">Metrics</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
<Link to="/features/create" className={styles.topListItem0}>
|
||||
<IconButton ripple raised name="add" component="span" style={{ color: 'black' }}/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div style={{ position: 'relative' }} className={styles.topListItem0}>
|
||||
<IconButton name="sort" id="demo-menu-top-right" colored title="Sort" />
|
||||
<Menu target="demo-menu-top-right" valign="bottom" align="right" ripple onClick={
|
||||
(e) => this.setSort(e.target.getAttribute('data-target'))}>
|
||||
<MenuItem disabled>Filter by:</MenuItem>
|
||||
<MenuItem disabled={!settings.sort || settings.sort === 'nosort'} data-target="nosort">Default</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'name'} data-target="name">Name</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'enabled'} data-target="enabled">Enabled</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'appName'} data-target="appName">Application name</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'created'} data-target="created">Created</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'strategies'} data-target="strategies">Strategies</MenuItem>
|
||||
<MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">Metrics</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
<ul className={['mdl-list', commonStyles.list].join(' ')}>
|
||||
{features.map((feature, i) =>
|
||||
<Feature key={i}
|
||||
settings={settings}
|
||||
metricsLastHour={featureMetrics.lastHour[feature.name]}
|
||||
metricsLastMinute={featureMetrics.lastMinute[feature.name]}
|
||||
feature={feature}
|
||||
toggleFeature={toggleFeature}/>
|
||||
)}
|
||||
</ul>
|
||||
<hr />
|
||||
<Link to="/features/create" className={styles.topListItem0}>
|
||||
<IconButton ripple raised name="add" component="span" style={{ color: 'black' }}/>
|
||||
<FABButton ripple component="span" mini>
|
||||
<Icon name="add" />
|
||||
</FABButton>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<ul className="mdl-list">
|
||||
{features.map((feature, i) =>
|
||||
<Feature key={i}
|
||||
settings={settings}
|
||||
metricsLastHour={featureMetrics.lastHour[feature.name]}
|
||||
metricsLastMinute={featureMetrics.lastMinute[feature.name]}
|
||||
feature={feature}
|
||||
toggleFeature={toggleFeature}/>
|
||||
)}
|
||||
</ul>
|
||||
<hr />
|
||||
<Link to="/features/create" className={styles.topListItem0}>
|
||||
<FABButton ripple component="span" mini>
|
||||
<Icon name="add" />
|
||||
</FABButton>
|
||||
</Link>
|
||||
</div>
|
||||
</Cell>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { Tabs, Tab, ProgressBar, IconButton } from 'react-mdl';
|
||||
import { Tabs, Tab, ProgressBar, IconButton, Grid, Cell } from 'react-mdl';
|
||||
import { hashHistory, Link } from 'react-router';
|
||||
|
||||
import HistoryComponent from '../history/history-list-toggle-container';
|
||||
@ -90,25 +90,27 @@ export default class ViewFeatureToggleComponent extends React.Component {
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4>
|
||||
<SwitchWithLabel checked={featureToggle.enabled} onChange={() => toggleFeature(featureToggle.name)} />
|
||||
{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small>
|
||||
<Grid className="mdl-color--white">
|
||||
<Cell col={12}>
|
||||
<h4 style={{ marginTop: '16px' }}>
|
||||
<SwitchWithLabel checked={featureToggle.enabled} onChange={() => toggleFeature(featureToggle.name)} />
|
||||
{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small>
|
||||
|
||||
<IconButton style={{ float: 'right' }} name="delete" onClick={removeToggle} className="mdl-color-text--grey-600" />
|
||||
<small style={{ float: 'right', lineHeight: '38px' }}>
|
||||
Created {formatFullDateTime(featureToggle.createdAt)}
|
||||
</small>
|
||||
</h4>
|
||||
<div className="mdl-color-text--grey"><small>{featureToggle.description}</small></div>
|
||||
<Tabs activeTab={activeTabId} ripple style={{ marginBottom: '10px' }}>
|
||||
<Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
|
||||
<Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>
|
||||
<Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
|
||||
</Tabs>
|
||||
<IconButton style={{ float: 'right' }} name="delete" onClick={removeToggle} className="mdl-color-text--grey-600" />
|
||||
<small style={{ float: 'right', lineHeight: '38px' }}>
|
||||
Created {formatFullDateTime(featureToggle.createdAt)}
|
||||
</small>
|
||||
</h4>
|
||||
<div className="mdl-color-text--grey"><small>{featureToggle.description}</small></div>
|
||||
<Tabs activeTab={activeTabId} ripple style={{ marginBottom: '10px' }} tabBarProps={{ style: { width: '100%' } }}>
|
||||
<Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
|
||||
<Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>
|
||||
<Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
|
||||
</Tabs>
|
||||
|
||||
{tabContent}
|
||||
</div>
|
||||
{tabContent}
|
||||
</Cell>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Grid, Cell } from 'react-mdl';
|
||||
import HistoryList from './history-list-container';
|
||||
|
||||
class History extends PureComponent {
|
||||
|
||||
componentDidMount () {
|
||||
@ -18,7 +18,11 @@ class History extends PureComponent {
|
||||
}
|
||||
|
||||
return (
|
||||
<HistoryList history={history} title="Last 100 changes" />
|
||||
<Grid className="mdl-color--white">
|
||||
<Cell col={12}>
|
||||
<HistoryList history={history} title="Last 100 changes" />
|
||||
</Cell>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,7 +77,7 @@ class HistoryItem extends PureComponent {
|
||||
changes = <div className={KLASSES.N}>{JSON.stringify(entry.data, null, 2)}</div>;
|
||||
}
|
||||
|
||||
return (<pre style={{ maxWidth: '500px', overflowX: 'auto', overflowY: 'hidden', width: 'auto' }}>
|
||||
return (<pre style={{ maxWidth: '354px', overflowX: 'auto', overflowY: 'hidden', width: 'auto' }}>
|
||||
<code className="smalltext man">{changes.length === 0 ? '(no changes)' : changes}</code>
|
||||
</pre>);
|
||||
}
|
||||
|
||||
@ -2,10 +2,10 @@ import React, { Component } from 'react';
|
||||
import HistoryItemDiff from './history-item-diff';
|
||||
import HistoryItemJson from './history-item-json';
|
||||
import { Table, TableHeader } from 'react-mdl';
|
||||
import { HeaderTitle, SwitchWithLabel } from '../common';
|
||||
import { HeaderTitle, SwitchWithLabel, styles as commonStyles } from '../common';
|
||||
import { formatFullDateTime } from '../common/util';
|
||||
|
||||
import style from './history.scss';
|
||||
import styles from './history.scss';
|
||||
|
||||
class HistoryList extends Component {
|
||||
|
||||
@ -32,7 +32,8 @@ class HistoryList extends Component {
|
||||
diff: (<HistoryItemDiff entry={entry} />),
|
||||
}, entry))
|
||||
}
|
||||
style={{ width: '100%' }}
|
||||
className={commonStyles.fullwidth}
|
||||
style={{ border: 0 }}
|
||||
>
|
||||
<TableHeader name="type">Type</TableHeader>
|
||||
<TableHeader name="createdBy">User</TableHeader>
|
||||
@ -42,11 +43,13 @@ class HistoryList extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={style.history}>
|
||||
<div className={styles.history}>
|
||||
<HeaderTitle title={this.props.title} actions={
|
||||
<SwitchWithLabel checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</SwitchWithLabel>
|
||||
}/>
|
||||
{entries}
|
||||
<div style={{ overflowX: 'scroll' }}>
|
||||
{entries}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { PropTypes, Component } from 'react';
|
||||
|
||||
import { Textfield, IconButton, Menu, MenuItem, Checkbox } from 'react-mdl';
|
||||
import { Textfield, IconButton, Menu, MenuItem, Checkbox, Grid, Cell } from 'react-mdl';
|
||||
import { FormButtons } from '../common';
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@ const Parameter = ({ set, input = {}, index }) => (
|
||||
|
||||
const EditHeader = () => (
|
||||
<div>
|
||||
<h4>Edit strategy</h4>
|
||||
<h4 style={{ marginTop: '16px' }}>Edit strategy</h4>
|
||||
<p style={{ background: '#ffb7b7', padding: '16px 20px' }}>
|
||||
Be carefull! Changing a strategy definition might also require changes to the
|
||||
implementation in the clients.
|
||||
@ -74,7 +74,7 @@ const EditHeader = () => (
|
||||
|
||||
const CreateHeader = () => (
|
||||
<div>
|
||||
<h4>Create a new Strategy definition</h4>
|
||||
<h4 style={{ marginTop: '16px' }}>Create a new Strategy definition</h4>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -130,44 +130,48 @@ class AddStrategy extends Component {
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit(input)}>
|
||||
{editmode ? <EditHeader /> : <CreateHeader />}
|
||||
<Textfield label="Strategy name"
|
||||
floatingLabel
|
||||
name="name"
|
||||
required
|
||||
disabled={editmode}
|
||||
pattern="^[0-9a-zA-Z\.\-]+$"
|
||||
onChange={({ target }) => setValue('name', trim(target.value))}
|
||||
value={input.name}
|
||||
/>
|
||||
<br />
|
||||
<Textfield
|
||||
floatingLabel
|
||||
style={{ width: '100%' }}
|
||||
rows={1}
|
||||
label="Description"
|
||||
name="description"
|
||||
onChange={({ target }) => setValue('description', target.value)}
|
||||
value={input.description}
|
||||
/>
|
||||
<Grid className="mdl-color--white">
|
||||
<Cell col={12}>
|
||||
<form onSubmit={onSubmit(input)}>
|
||||
{editmode ? <EditHeader /> : <CreateHeader />}
|
||||
<Textfield label="Strategy name"
|
||||
floatingLabel
|
||||
name="name"
|
||||
required
|
||||
disabled={editmode}
|
||||
pattern="^[0-9a-zA-Z\.\-]+$"
|
||||
onChange={({ target }) => setValue('name', trim(target.value))}
|
||||
value={input.name}
|
||||
/>
|
||||
<br />
|
||||
<Textfield
|
||||
floatingLabel
|
||||
style={{ width: '100%' }}
|
||||
rows={1}
|
||||
label="Description"
|
||||
name="description"
|
||||
onChange={({ target }) => setValue('description', target.value)}
|
||||
value={input.description}
|
||||
/>
|
||||
|
||||
|
||||
<Parameters input={input.parameters} count={input._params} updateInList={updateInList} />
|
||||
<IconButton raised name="add" title="Add parameter" onClick={(e) => {
|
||||
e.preventDefault();
|
||||
incValue('_params');
|
||||
}}/> Add parameter
|
||||
<Parameters input={input.parameters} count={input._params} updateInList={updateInList} />
|
||||
<IconButton raised name="add" title="Add parameter" onClick={(e) => {
|
||||
e.preventDefault();
|
||||
incValue('_params');
|
||||
}}/> Add parameter
|
||||
|
||||
|
||||
<br />
|
||||
<hr />
|
||||
<br />
|
||||
<hr />
|
||||
|
||||
<FormButtons
|
||||
submitText={editmode ? 'Update' : 'Create'}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
</form>
|
||||
<FormButtons
|
||||
submitText={editmode ? 'Update' : 'Create'}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
</form>
|
||||
</Cell>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
import { List, ListItem, ListItemContent, IconButton } from 'react-mdl';
|
||||
import { HeaderTitle } from '../common';
|
||||
import { List, ListItem, ListItemContent, IconButton, Grid, Cell } from 'react-mdl';
|
||||
import { HeaderTitle, styles as commonStyles } from '../common';
|
||||
|
||||
class StrategiesListComponent extends Component {
|
||||
|
||||
@ -18,26 +18,28 @@ class StrategiesListComponent extends Component {
|
||||
const { strategies, removeStrategy } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HeaderTitle title="Strategies"
|
||||
actions={
|
||||
<IconButton raised
|
||||
name="add"
|
||||
onClick={() => this.context.router.push('/strategies/create')}
|
||||
title="Add new strategy" />} />
|
||||
<List>
|
||||
{strategies.length > 0 ? strategies.map((strategy, i) => (
|
||||
<ListItem key={i} twoLine>
|
||||
<ListItemContent icon="extension" subtitle={strategy.description}>
|
||||
<Link to={`/strategies/view/${strategy.name}`}>
|
||||
<strong>{strategy.name}</strong>
|
||||
</Link>
|
||||
</ListItemContent>
|
||||
<IconButton name="delete" onClick={() => removeStrategy(strategy)} />
|
||||
</ListItem>
|
||||
)) : <ListItem>No entries</ListItem>}
|
||||
</List>
|
||||
</div>
|
||||
<Grid className="mdl-color--white">
|
||||
<Cell col={12}>
|
||||
<HeaderTitle title="Strategies"
|
||||
actions={
|
||||
<IconButton raised
|
||||
name="add"
|
||||
onClick={() => this.context.router.push('/strategies/create')}
|
||||
title="Add new strategy" />} />
|
||||
<List className={commonStyles.list}>
|
||||
{strategies.length > 0 ? strategies.map((strategy, i) => (
|
||||
<ListItem key={i} twoLine>
|
||||
<ListItemContent icon="extension" subtitle={strategy.description}>
|
||||
<Link to={`/strategies/view/${strategy.name}`}>
|
||||
<strong>{strategy.name}</strong>
|
||||
</Link>
|
||||
</ListItemContent>
|
||||
<IconButton name="delete" onClick={() => removeStrategy(strategy)} />
|
||||
</ListItem>
|
||||
)) : <ListItem>No entries</ListItem>}
|
||||
</List>
|
||||
</Cell>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { PropTypes, Component } from 'react';
|
||||
import { hashHistory } from 'react-router';
|
||||
import { Tabs, Tab, ProgressBar } from 'react-mdl';
|
||||
import { Tabs, Tab, ProgressBar, Grid, Cell } from 'react-mdl';
|
||||
import ShowStrategy from './show-strategy-component';
|
||||
import EditStrategy from './edit-container';
|
||||
import { HeaderTitle } from '../common';
|
||||
@ -61,18 +61,20 @@ export default class StrategyDetails extends Component {
|
||||
const tabContent = this.getTabContent(activeTabId);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HeaderTitle title={strategy.name} subtitle={strategy.description} />
|
||||
<Tabs activeTab={activeTabId} ripple>
|
||||
<Tab onClick={() => this.goToTab('view')}>Details</Tab>
|
||||
<Tab onClick={() => this.goToTab('edit')}>Edit</Tab>
|
||||
</Tabs>
|
||||
<section>
|
||||
<div className="content">
|
||||
{tabContent}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<Grid className="mdl-color--white">
|
||||
<Cell col={12}>
|
||||
<HeaderTitle title={strategy.name} subtitle={strategy.description} />
|
||||
<Tabs activeTab={activeTabId} ripple>
|
||||
<Tab onClick={() => this.goToTab('view')}>Details</Tab>
|
||||
<Tab onClick={() => this.goToTab('edit')}>Edit</Tab>
|
||||
</Tabs>
|
||||
<section>
|
||||
<div className="content">
|
||||
{tabContent}
|
||||
</div>
|
||||
</section>
|
||||
</Cell>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,34 @@
|
||||
.content {
|
||||
width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@media (max-width: 1800px) {
|
||||
.content {
|
||||
width: 66.66%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1260px) {
|
||||
.content {
|
||||
width: 840px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 920px) {
|
||||
.content {
|
||||
width: auto;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.content {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.headerTitleLink {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user