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

Merge pull request #46 from Unleash/summarize-strategies-in-feature-list

Browse Source 
summarize strategies for toggles with more than 3
This commit is contained in:
Vegard Sandvold 2017-01-10 10:23:22 +01:00 committed by GitHub
commit b227739e38
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 { Link } from 'react-router';
import { Switch, Icon } from 'react-mdl';
import { Switch, Icon, Chip } from 'react-mdl';
import Progress from './progress';
import { shorten, calc, styles as commonStyles } from '../common';
import { calc, styles as commonStyles } from '../common';
import styles from './feature.scss';
@ -23,6 +23,14 @@ const Feature = ({
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 (
<li key={name} className="mdl-list__item mdl-list__item--two-line">
<span className={styles.iconListItemProgress}>
@ -38,19 +46,18 @@ const Feature = ({
}
</div>
</span>
<span className={styles.iconListItemToggle}>
<span className={styles.iconListItemToggle} style={{ flexShrink: 0 }}>
<Switch title={`Toggle ${name}`} key="left-actions" onChange={() => toggleFeature(name)} checked={enabled} />
</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(' ')}>
{shorten(name, 75)}
<span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{shorten(description, 75) || ''}</span>
{name}
<span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{description}</span>
</Link>
</span>
<span className={commonStyles.hideLt960}>
{strategies && strategies.map((s, i) => <span className={[styles.iconListItemChip, styles.hideLt960].join(' ')} key={i}>
{s.name}
</span>)}
<span className={commonStyles.hideLt960} style={{ flexShrink: 0 }}>
{strategyChips}
{summaryChip}
</span>
</li>
);

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

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