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) => ( -