From 5242e2aa0d81da3d26b414466d170372355fcae8 Mon Sep 17 00:00:00 2001 From: Vegard Sandvold Date: Sat, 4 Feb 2017 19:30:06 +0100 Subject: [PATCH] =?UTF-8?q?cleans=20up=20the=20filter=20and=20sorting=20to?= =?UTF-8?q?olbar=20+=20fab=20for=20new=20feature=20toggle=E2=80=A6=20(#61)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * cleans up the filter and sorting toolbar + fab for new feature toggle + makes name default sorting --- frontend/src/component/common/common.scss | 18 ++- frontend/src/component/common/index.js | 16 ++- .../feature/feature-list-item-component.jsx | 23 ++-- frontend/src/component/feature/feature.scss | 62 +++------ .../src/component/feature/list-component.jsx | 121 ++++++++---------- .../src/component/feature/list-container.jsx | 7 - 6 files changed, 117 insertions(+), 130 deletions(-) diff --git a/frontend/src/component/common/common.scss b/frontend/src/component/common/common.scss index 862b5355a0..905cfa1936 100644 --- a/frontend/src/component/common/common.scss +++ b/frontend/src/component/common/common.scss @@ -27,6 +27,17 @@ margin: 0; } +.listLink { + color: #212121; + text-decoration: none; + font-weight: normal; + display: block; +} + +.listLink:hover { + color: #000; +} + @media (max-width: 920px) { .hideLt920 { display: none; @@ -74,4 +85,9 @@ flex-direction: column; justify-content: center; min-height: 200px; -} \ No newline at end of file +} + +.dropdownButton { + text-transform: none; + font-weight: normal; +} diff --git a/frontend/src/component/common/index.js b/frontend/src/component/common/index.js index 9bf78b5b31..2db289eda5 100644 --- a/frontend/src/component/common/index.js +++ b/frontend/src/component/common/index.js @@ -5,7 +5,7 @@ import styles from './common.scss'; const { List, ListItem, ListItemContent, Button, Icon, - Switch, + Switch, MenuItem, } = require('react-mdl'); const { Link } = require('react-router'); @@ -112,6 +112,20 @@ export const ExternalIconLink = ({ url, children }) => ( ); +export const DropdownButton = ({ label, id }) => ( + +); + +export const MenuItemWithIcon = ({ icon, label, disabled, ...menuItemProps }) => ( + + + {label} + +); + const badNumbers = [NaN, Infinity, -Infinity]; export function calc (value, total, decimal) { if (typeof value !== 'number' || diff --git a/frontend/src/component/feature/feature-list-item-component.jsx b/frontend/src/component/feature/feature-list-item-component.jsx index f8d351ef30..75f7d7f5cd 100644 --- a/frontend/src/component/feature/feature-list-item-component.jsx +++ b/frontend/src/component/feature/feature-list-item-component.jsx @@ -1,6 +1,6 @@ import React, { PropTypes } from 'react'; import { Link } from 'react-router'; -import { Switch, Icon, Chip } from 'react-mdl'; +import { Switch, Icon, Chip, ListItem } from 'react-mdl'; import Progress from './progress'; import { calc, styles as commonStyles } from '../common'; @@ -27,13 +27,13 @@ const Feature = ({ const remainingStrategies = strategies.length - strategiesToShow; const strategyChips = strategies && strategies.slice(0, strategiesToShow).map((s, i) => - {s.name}); + {s.name}); const summaryChip = remainingStrategies > 0 && - +{remainingStrategies}; + +{remainingStrategies}; return ( -
  • - + +
    { isStale ? @@ -46,26 +46,29 @@ const Feature = ({ }
    - + toggleFeature(name)} checked={enabled} /> - - + + {name} {description} - + {strategyChips} {summaryChip} -
    • + ); }; Feature.propTypes = { feature: PropTypes.object, toggleFeature: PropTypes.func, + settings: PropTypes.object, + metricsLastHour: PropTypes.object, + metricsLastMinute: PropTypes.object, }; export default Feature; diff --git a/frontend/src/component/feature/feature.scss b/frontend/src/component/feature/feature.scss index fe9c4b8554..5df0a8ef4d 100644 --- a/frontend/src/component/feature/feature.scss +++ b/frontend/src/component/feature/feature.scss @@ -1,56 +1,34 @@ -.action { - color: #aaa !important; - cursor: pointer; +.toolbar { + position: relative; + padding: 0 104px 16px 24px; } -.yes { - color: green; +.toolbarButton { + position: absolute; + top: 56px; + right: 24px; + z-index: 2; } -.no { - color: red; -} - -.link { - color: #212121; - text-decoration: none; - font-weight: normal; - display: block; -} - -.link:hover { - color: #000; -} - -.iconListItemProgress { +.listItemMetric { float: left; margin-right: 16px; } -.iconListItemToggle { - float: left; +.listItemToggle { margin-right: 16px; width: 40px; + flex-shrink: 0; } -.iconListItemChip { +.listItemLink { + min-width: 0; +} + +.listItemStrategies { + flex-shrink: 0; +} + +.strategyChip { margin-left: 8px !important; } - -.topList { - display: flex; - margin: 8px; -} - -.topListItem0 { - flex: 1; - flex-grow: 0; -} - -.topListItem { - flex: 1; -} - -.topListItem2 { - flex: 2; -} diff --git a/frontend/src/component/feature/list-component.jsx b/frontend/src/component/feature/list-component.jsx index d9f62d66ee..6d22646955 100644 --- a/frontend/src/component/feature/list-component.jsx +++ b/frontend/src/component/feature/list-component.jsx @@ -1,9 +1,9 @@ import React, { PropTypes } from 'react'; import Feature from './feature-list-item-component'; import { Link } from 'react-router'; -import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem, Grid, Cell } from 'react-mdl'; +import { Icon, FABButton, Textfield, Menu, MenuItem, Card, CardActions, List } from 'react-mdl'; -import { styles as commonStyles } from '../common'; +import { MenuItemWithIcon, DropdownButton, styles as commonStyles } from '../common'; import styles from './feature.scss'; export default class FeatureListComponent extends React.PureComponent { @@ -15,6 +15,8 @@ export default class FeatureListComponent extends React.PureComponent { featureMetrics: PropTypes.object.isRequired, fetchFeatureToggles: PropTypes.func.isRequired, fetchFeatureMetrics: PropTypes.func.isRequired, + updateSetting: PropTypes.func.isRequired, + settings: React.PropTypes.object, }; } @@ -49,73 +51,54 @@ export default class FeatureListComponent extends React.PureComponent { render () { const { features, toggleFeature, featureMetrics, settings } = this.props; - return ( - - -
    - this.toggleMetrics()} className={styles.topListItem0}> - { settings.showLastHour && - - - } - { '1 hour' } - -   - this.toggleMetrics()} className={styles.topListItem0}> - { !settings.showLastHour && - - - } - { '1 minute' } - - -
    - { this.setFilter(e.target.value); }} - label="Filter toggles" - style={{ width: '100%' }} - /> -
    - -
    - - this.setSort(e.target.getAttribute('data-target'))}> - Filter by: - Default - Name - Enabled - Application name - Created - Strategies - Metrics - -
    - - - -
    - -
      - {features.map((feature, i) => - - )} -
    -
    - - - - - -     -     + return (
    +
    + { this.setFilter(e.target.value); }} + label="Search" + style={{ width: '100%' }} + /> + + + + + +
    + + + + this.toggleMetrics()} + style={{ width: '168px' }}> + + + + + this.setSort(e.target.getAttribute('data-target'))} + style={{ width: '168px' }}> + Name + Enabled + Created + Strategies + Metrics + + +
    + + {features.map((feature, i) => + + )} + +     +
    ); } } diff --git a/frontend/src/component/feature/list-container.jsx b/frontend/src/component/feature/list-container.jsx index 625dec856a..6ed902ca72 100644 --- a/frontend/src/component/feature/list-container.jsx +++ b/frontend/src/component/feature/list-container.jsx @@ -27,13 +27,6 @@ const mapStateToProps = (state) => { // eslint-disable-next-line a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1 )); - } else if (settings.sort === 'appName') { - // AppName - // features = features.sort((a, b) => { - // if (a.appName < b.appName) { return -1; } - // if (a.appName > b.appName) { return 1; } - // return 0; - // }); } else if (settings.sort === 'created') { features = features.sort((a, b) => ( new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1