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

fix switch

Browse Source
This commit is contained in:
sveisvei 2016-12-10 12:21:27 +01:00
parent 21012adc08
commit 6e366c1db6
4 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ const {
List, ListItem, ListItemContent, List, ListItem, ListItemContent,
Grid, Cell, Grid, Cell,
Button, Icon, Button, Icon,
Switch,
} = require('react-mdl'); } = require('react-mdl');
const { Link } = require('react-router'); const { Link } = require('react-router');
@ -21,13 +22,16 @@ export const AppsLinkList = ({ apps }) => (
); );
export const HeaderTitle = ({ title, actions, subtitle }) => ( export const HeaderTitle = ({ title, actions, subtitle }) => (
<Grid style={{ borderBottom: '1px solid #f1f1f1', marginBottom: '10px' }}> <div style={{ display: 'flex', borderBottom: '1px solid #f1f1f1', marginBottom: '10px', padding: '16px 20px ' }}>
<Cell col={6}> <div style={{ flex: '1' }}>
<h4 className="mdl-typography--subhead">{title}</h4> <h6 style={{ margin: 0 }}>{title}</h6>
{subtitle && <small>{subtitle}</small>} {subtitle && <small>{subtitle}</small>}
</Cell> </div>
<Cell col={6} style={{ textAlign: 'right' }}>{actions}</Cell>
</Grid> <div style={{ flex: '1', textAlign: 'right' }}>
{actions}
</div>
</div>
); );
export const FormButtons = ({ submitText = 'Create', onCancel }) => ( export const FormButtons = ({ submitText = 'Create', onCancel }) => (
@ -43,3 +47,13 @@ export const FormButtons = ({ submitText = 'Create', onCancel }) => (
</Button> </Button>
</div> </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>
);

4
frontend/src/component/feature/feature-list-item-component.jsx
View File

@ -37,11 +37,11 @@ const Feature = ({
</div> </div>
&nbsp; &nbsp;
<span style={{ display: 'inline-block', width: '45px' }} title={`Toggle ${name}`}> <span style={{ display: 'inline-block', width: '45px' }} title={`Toggle ${name}`}>
<Switch title="test" key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} /> <Switch title="test" key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} />
</span> </span>
<Link to={`/features/edit/${name}`} className={style.link}> <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> </Link>
</span> </span>

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

@ -12,7 +12,7 @@ import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-
import { fetchHistoryForToggle } from '../../store/history-actions'; import { fetchHistoryForToggle } from '../../store/history-actions';
import { getIcon } from '../history/history-item-diff'; import { getIcon } from '../history/history-item-diff';
import { AppsLinkList } from '../common'; import { AppsLinkList, SwitchWithLabel } from '../common';
class EditFeatureToggleWrapper extends React.Component { class EditFeatureToggleWrapper extends React.Component {
@ -71,11 +71,9 @@ class EditFeatureToggleWrapper extends React.Component {
<div> <div>
<h4>{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small></h4> <h4>{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small></h4>
<hr /> <hr />
<div style={{ maxWidth: '350px' }} > <SwitchWithLabel
<Switch style={{ cursor: 'pointer' }} onChange={() => toggleFeature(featureToggle)} checked={featureToggle.enabled}> checked={featureToggle.enabled}
Toggle {featureToggle.name} onChange={() => toggleFeature(featureToggle)}>Toggle {featureToggle.name}</SwitchWithLabel>
</Switch>
</div>
<hr /> <hr />
<Grid style={{ textAlign: 'center' }}> <Grid style={{ textAlign: 'center' }}>
<Cell col={3}> <Cell col={3}>

6
frontend/src/component/history/history-list-component.jsx
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import HistoryItemDiff from './history-item-diff'; import HistoryItemDiff from './history-item-diff';
import HistoryItemJson from './history-item-json'; import HistoryItemJson from './history-item-json';
import { Switch, Table, TableHeader, Grid, Cell } from 'react-mdl'; import { Switch, Table, TableHeader, Grid, Cell } from 'react-mdl';
import { HeaderTitle } from '../common'; import { HeaderTitle, SwitchWithLabel } from '../common';
import style from './history.scss'; import style from './history.scss';
@ -42,7 +42,9 @@ class HistoryList extends Component {
return ( return (
<div className={style.history}> <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} {entries}
</div> </div>
); );