From b67fb7c50e269d1e5f24886e1e66d18ee1d0add7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Mon, 9 Jan 2017 22:14:10 +0000 Subject: [PATCH] GroupView ui component for ListItem --- ui/src/components/list/group-view.js | 26 ++++++++++++++++++ ui/src/components/list/index.js | 1 + ui/src/components/list/item.js | 19 ++++++++----- ui/src/components/list/subtitle.js | 20 +++++++++++--- ui/src/components/list/title.js | 7 +++-- ui/src/components/list/view.js | 18 ++++++++----- ui/stories/index.js | 40 +++++++++++++++++++++++++++- 7 files changed, 112 insertions(+), 19 deletions(-) create mode 100644 ui/src/components/list/group-view.js diff --git a/ui/src/components/list/group-view.js b/ui/src/components/list/group-view.js new file mode 100644 index 00000000..d3d6124c --- /dev/null +++ b/ui/src/components/list/group-view.js @@ -0,0 +1,26 @@ +const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); +const React = require('react'); +const View = require('./view').raw; +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + remcalc +} = fns; + +const { + default: styled +} = Styled; + +module.exports = styled(View)` + display: block; + padding-top: ${remcalc(62)}; + padding-left: ${remcalc(23)}; + padding-right: ${remcalc(23)}; + padding-bottom: ${remcalc(15)}; + background-color: ${colors.brandInactive}; +`; diff --git a/ui/src/components/list/index.js b/ui/src/components/list/index.js index cfb4ab13..758a7fbb 100644 --- a/ui/src/components/list/index.js +++ b/ui/src/components/list/index.js @@ -1,6 +1,7 @@ module.exports = { ListItemDescription: require('./description'), ListItemHeader: require('./header'), + ListItemGroupView: require('./group-view'), ListItem: require('./item'), ListItemMeta: require('./meta'), ListItemOptions: require('./options'), diff --git a/ui/src/components/list/item.js b/ui/src/components/list/item.js index a962efa7..bc779193 100644 --- a/ui/src/components/list/item.js +++ b/ui/src/components/list/item.js @@ -23,24 +23,31 @@ const paper = ` 0 8px 0 -5px #fafafa, 0 8px 1px -4px ${colors.borderSecondary}, 0 16px 0 -10px #fafafa, - 0 16px 1px -9px ${colors.borderSecondary}, - 0 18px 1px -11px ${colors.borderSecondary}; + 0 16px 1px -9px ${colors.borderSecondary}; `; const height = (props) => props.collapsed ? remcalc(48) + : 'auto'; + +const minHeight = (props) => props.collapsed + ? 'auto' : remcalc(126); +// remcalc(126) const shadow = (props) => props.stacked ? paper - : props.collapsed && props.headed - ? boxes.bottomShaddowDarker - : boxes.bottomShaddow; + : props.flat + ? 'none' + : props.collapsed && props.headed + ? boxes.bottomShaddowDarker + : boxes.bottomShaddow; const Item = styled(Row)` position: relative; - height: ${height} + height: ${height}; + min-height: ${minHeight}; box-shadow: ${shadow}; border: 1px solid ${colors.borderSecondary}; background-color: ${colors.brandSecondary}; diff --git a/ui/src/components/list/subtitle.js b/ui/src/components/list/subtitle.js index 1a285407..0a49c8be 100644 --- a/ui/src/components/list/subtitle.js +++ b/ui/src/components/list/subtitle.js @@ -1,4 +1,5 @@ const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); const Title = require('./title'); const React = require('react'); const Styled = require('styled-components'); @@ -7,10 +8,18 @@ const { colors } = constants; +const { + remcalc +} = fns; + const { default: styled } = Styled; +const padding = (props) => !props.collapsed + ? `0 ${remcalc(18)}` + : `0`; + const color = (props) => props.fromHeader ? colors.brandPrimaryColor : '#646464'; @@ -18,23 +27,28 @@ const color = (props) => props.fromHeader const Span = styled.span` display: flex; flex-direction: column; - justify-content: flex-start; font-weight: normal; font-style: normal; font-stretch: normal; font-size: 14px; color: ${color}; + + justify-content: flex-end; +`; + +const StyledTitle = styled(Title)` + padding: ${padding}; `; const Subtitle = (props) => ( - + <StyledTitle name='list-item-subtitle' {...props}> <Span fromHeader={props.fromHeader} > {props.children} </Span> - + ); Subtitle.propTypes = { diff --git a/ui/src/components/list/title.js b/ui/src/components/list/title.js index 252115e0..4ab8cf71 100644 --- a/ui/src/components/list/title.js +++ b/ui/src/components/list/title.js @@ -20,6 +20,10 @@ const color = (props) => !props.fromHeader ? colors.brandSecondaryColor : colors.brandPrimaryColor; +const padding = (props) => !props.collapsed + ? `${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}` + : `0 ${remcalc(18)}`; + const justify = (props) => props.collapsed ? 'center' : 'flex-start'; const width = (props) => props.collapsed ? 'auto' : '100%'; const direction = (props) => props.collapsed ? 'column' : 'row'; @@ -39,8 +43,7 @@ const Container = styled.div` flex-grow: ${grow}; width: ${width}; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding: ${padding}; `; const Span = styled.span` diff --git a/ui/src/components/list/view.js b/ui/src/components/list/view.js index 3cbfbdd1..aeff53e6 100644 --- a/ui/src/components/list/view.js +++ b/ui/src/components/list/view.js @@ -1,8 +1,8 @@ const fns = require('../../shared/functions'); -const transferProps = require('./transfer-props'); const React = require('react'); const Row = require('../row'); const Styled = require('styled-components'); +const transferProps = require('./transfer-props'); const { remcalc @@ -20,7 +20,7 @@ const display = (props) => props.headed && !props.fromHeader && props.collapsed ? 'none' : 'flex'; -const View = styled(Row)` +const StyledView = styled(Row)` flex: 1; margin: 0; height: 100%; @@ -28,12 +28,16 @@ const View = styled(Row)` display: ${display}; `; +const View = (props) => ( + + {props.children} + +); + module.exports = transferProps([ 'collapsed', 'headed', 'fromHeader' -], (props) => ( - - {props.children} - -)); +], View); + +module.exports.raw = View; diff --git a/ui/stories/index.js b/ui/stories/index.js index a45462d9..cf413682 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -24,7 +24,8 @@ const { ListItemOutlet, ListItemSubTitle, ListItemTitle, - ListItemView + ListItemView, + ListItemGroupView }, MiniMetric, Modal, @@ -637,4 +638,41 @@ storiesOf('ListItem', module) + )) + .add('view-group', () => ( + + + + + Percona + 5 instances + Flags + + … + + + + + + percona_database + + + Metrics + + + + + + + percona_database + 5 instances + + + Metrics + + + + + + ));