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

summarize strategies for toggles with more than 3

Browse Source
This commit is contained in:
vsandvold 2017-01-09 23:10:25 +01:00
parent 0dec34be17
commit 6c6954e3e4
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { Switch, Icon } from 'react-mdl'; import { Switch, Icon, Chip } from 'react-mdl';
import Progress from './progress'; import Progress from './progress';
import { shorten, calc, styles as commonStyles } from '../common'; import { calc, styles as commonStyles } from '../common';
import styles from './feature.scss'; import styles from './feature.scss';
@ -23,6 +23,14 @@ const Feature = ({
calc(metricsLastMinute.yes, metricsLastMinute.yes + metricsLastMinute.no, 0) calc(metricsLastMinute.yes, metricsLastMinute.yes + metricsLastMinute.no, 0)
); );
const strategiesToShow = Math.min(strategies.length, 3);
const remainingStrategies = strategies.length - strategiesToShow;
const strategyChips = strategies && strategies.slice(0, strategiesToShow).map((s, i) =>
<Chip className={styles.iconListItemChip} key={i}>{s.name}</Chip>);
const summaryChip = remainingStrategies > 0 &&
<Chip className={styles.iconListItemChip}>+{remainingStrategies}</Chip>;
return ( return (
<li key={name} className="mdl-list__item mdl-list__item--two-line"> <li key={name} className="mdl-list__item mdl-list__item--two-line">
<span className={styles.iconListItemProgress}> <span className={styles.iconListItemProgress}>
@ -38,19 +46,18 @@ const Feature = ({
} }
</div> </div>
</span> </span>
<span className={styles.iconListItemToggle}> <span className={styles.iconListItemToggle} style={{ flexShrink: 0 }}>
<Switch title={`Toggle ${name}`} key="left-actions" onChange={() => toggleFeature(name)} checked={enabled} /> <Switch title={`Toggle ${name}`} key="left-actions" onChange={() => toggleFeature(name)} checked={enabled} />
</span> </span>
<span className={['mdl-list__item-primary-content', commonStyles.truncate].join(' ')}> <span className="mdl-list__item-primary-content" style={{ minWidth: 0 }}>
<Link to={`/features/view/${name}`} className={[styles.link, commonStyles.truncate].join(' ')}> <Link to={`/features/view/${name}`} className={[styles.link, commonStyles.truncate].join(' ')}>
{shorten(name, 75)} {name}
<span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{shorten(description, 75) || ''}</span> <span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{description}</span>
</Link> </Link>
</span> </span>
<span className={commonStyles.hideLt960}> <span className={commonStyles.hideLt960} style={{ flexShrink: 0 }}>
{strategies && strategies.map((s, i) => <span className={[styles.iconListItemChip, styles.hideLt960].join(' ')} key={i}> {strategyChips}
{s.name} {summaryChip}
</span>)}
</span> </span>
</li> </li>
); );

7
frontend/src/component/feature/feature.scss
View File

@ -34,12 +34,7 @@
} }
.iconListItemChip { .iconListItemChip {
font-size: 12px; margin-left: 8px !important;
line-height: 12px;
background-color: #e0e0e0;
border-radius: 10px;
padding: 5px 8px 4px 8px;
margin-left: 5px !important;
} }
.topList { .topList {