From 6c6954e3e42ab8b5432ee67148c8a92244c90119 Mon Sep 17 00:00:00 2001
From: vsandvold <vsandvold@gmail.com>
Date: Mon, 9 Jan 2017 23:10:25 +0100
Subject: [PATCH] summarize strategies for toggles with more than 3

---
 .../feature/feature-list-item-component.jsx   | 27 ++++++++++++-------
 frontend/src/component/feature/feature.scss   |  7 +----
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/feature/feature-list-item-component.jsx b/frontend/src/component/feature/feature-list-item-component.jsx
index eb11829b3b..03cd1d946b 100644
--- a/frontend/src/component/feature/feature-list-item-component.jsx
+++ b/frontend/src/component/feature/feature-list-item-component.jsx
@@ -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>
     );
diff --git a/frontend/src/component/feature/feature.scss b/frontend/src/component/feature/feature.scss
index 99be17f5fb..c27ea33db6 100644
--- a/frontend/src/component/feature/feature.scss
+++ b/frontend/src/component/feature/feature.scss
@@ -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 {