mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-20 00:08:02 +01:00
fix switch
This commit is contained in:
parent
21012adc08
commit
6e366c1db6
@ -3,6 +3,7 @@ const {
|
||||
List, ListItem, ListItemContent,
|
||||
Grid, Cell,
|
||||
Button, Icon,
|
||||
Switch,
|
||||
} = require('react-mdl');
|
||||
const { Link } = require('react-router');
|
||||
|
||||
@ -21,13 +22,16 @@ export const AppsLinkList = ({ apps }) => (
|
||||
);
|
||||
|
||||
export const HeaderTitle = ({ title, actions, subtitle }) => (
|
||||
<Grid style={{ borderBottom: '1px solid #f1f1f1', marginBottom: '10px' }}>
|
||||
<Cell col={6}>
|
||||
<h4 className="mdl-typography--subhead">{title}</h4>
|
||||
<div style={{ display: 'flex', borderBottom: '1px solid #f1f1f1', marginBottom: '10px', padding: '16px 20px ' }}>
|
||||
<div style={{ flex: '1' }}>
|
||||
<h6 style={{ margin: 0 }}>{title}</h6>
|
||||
{subtitle && <small>{subtitle}</small>}
|
||||
</Cell>
|
||||
<Cell col={6} style={{ textAlign: 'right' }}>{actions}</Cell>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: '1', textAlign: 'right' }}>
|
||||
{actions}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const FormButtons = ({ submitText = 'Create', onCancel }) => (
|
||||
@ -43,3 +47,13 @@ export const FormButtons = ({ submitText = 'Create', onCancel }) => (
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const SwitchWithLabel = ({ onChange, children, checked }) => (
|
||||
<span>
|
||||
<span style={{ cursor: 'pointer', display: 'inline-block', width: '45px' }}>
|
||||
<Switch onChange={onChange} checked={checked} />
|
||||
</span>
|
||||
<span>{children}</span>
|
||||
</span>
|
||||
);
|
||||
|
||||
|
@ -41,7 +41,7 @@ const Feature = ({
|
||||
<Switch title="test" key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} />
|
||||
</span>
|
||||
<Link to={`/features/edit/${name}`} className={style.link}>
|
||||
{name} <small>{(description && description.substring(0, 100)) || ''}</small>
|
||||
{name} <small>{(description && description.substring(0, 30)) || ''}</small>
|
||||
</Link>
|
||||
</span>
|
||||
|
||||
|
@ -12,7 +12,7 @@ import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-
|
||||
import { fetchHistoryForToggle } from '../../store/history-actions';
|
||||
import { getIcon } from '../history/history-item-diff';
|
||||
|
||||
import { AppsLinkList } from '../common';
|
||||
import { AppsLinkList, SwitchWithLabel } from '../common';
|
||||
|
||||
class EditFeatureToggleWrapper extends React.Component {
|
||||
|
||||
@ -71,11 +71,9 @@ class EditFeatureToggleWrapper extends React.Component {
|
||||
<div>
|
||||
<h4>{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small></h4>
|
||||
<hr />
|
||||
<div style={{ maxWidth: '350px' }} >
|
||||
<Switch style={{ cursor: 'pointer' }} onChange={() => toggleFeature(featureToggle)} checked={featureToggle.enabled}>
|
||||
Toggle {featureToggle.name}
|
||||
</Switch>
|
||||
</div>
|
||||
<SwitchWithLabel
|
||||
checked={featureToggle.enabled}
|
||||
onChange={() => toggleFeature(featureToggle)}>Toggle {featureToggle.name}</SwitchWithLabel>
|
||||
<hr />
|
||||
<Grid style={{ textAlign: 'center' }}>
|
||||
<Cell col={3}>
|
||||
|
@ -2,7 +2,7 @@ import React, { Component } from 'react';
|
||||
import HistoryItemDiff from './history-item-diff';
|
||||
import HistoryItemJson from './history-item-json';
|
||||
import { Switch, Table, TableHeader, Grid, Cell } from 'react-mdl';
|
||||
import { HeaderTitle } from '../common';
|
||||
import { HeaderTitle, SwitchWithLabel } from '../common';
|
||||
|
||||
import style from './history.scss';
|
||||
|
||||
@ -42,7 +42,9 @@ class HistoryList extends Component {
|
||||
|
||||
return (
|
||||
<div className={style.history}>
|
||||
<HeaderTitle title={this.props.title} actions={<Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>}/>
|
||||
<HeaderTitle title={this.props.title} actions={
|
||||
<SwitchWithLabel checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</SwitchWithLabel>
|
||||
}/>
|
||||
{entries}
|
||||
</div>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user