1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00

GroupView ui component for ListItem

This commit is contained in:
Sérgio Ramos 2017-01-09 22:14:10 +00:00
parent eb8cc3bb48
commit b67fb7c50e
7 changed files with 112 additions and 19 deletions

View File

@ -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};
`;

View File

@ -1,6 +1,7 @@
module.exports = { module.exports = {
ListItemDescription: require('./description'), ListItemDescription: require('./description'),
ListItemHeader: require('./header'), ListItemHeader: require('./header'),
ListItemGroupView: require('./group-view'),
ListItem: require('./item'), ListItem: require('./item'),
ListItemMeta: require('./meta'), ListItemMeta: require('./meta'),
ListItemOptions: require('./options'), ListItemOptions: require('./options'),

View File

@ -23,24 +23,31 @@ const paper = `
0 8px 0 -5px #fafafa, 0 8px 0 -5px #fafafa,
0 8px 1px -4px ${colors.borderSecondary}, 0 8px 1px -4px ${colors.borderSecondary},
0 16px 0 -10px #fafafa, 0 16px 0 -10px #fafafa,
0 16px 1px -9px ${colors.borderSecondary}, 0 16px 1px -9px ${colors.borderSecondary};
0 18px 1px -11px ${colors.borderSecondary};
`; `;
const height = (props) => props.collapsed const height = (props) => props.collapsed
? remcalc(48) ? remcalc(48)
: 'auto';
const minHeight = (props) => props.collapsed
? 'auto'
: remcalc(126); : remcalc(126);
// remcalc(126)
const shadow = (props) => props.stacked const shadow = (props) => props.stacked
? paper ? paper
: props.collapsed && props.headed : props.flat
? boxes.bottomShaddowDarker ? 'none'
: boxes.bottomShaddow; : props.collapsed && props.headed
? boxes.bottomShaddowDarker
: boxes.bottomShaddow;
const Item = styled(Row)` const Item = styled(Row)`
position: relative; position: relative;
height: ${height} height: ${height};
min-height: ${minHeight};
box-shadow: ${shadow}; box-shadow: ${shadow};
border: 1px solid ${colors.borderSecondary}; border: 1px solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary}; background-color: ${colors.brandSecondary};

View File

@ -1,4 +1,5 @@
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const Title = require('./title'); const Title = require('./title');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
@ -7,10 +8,18 @@ const {
colors colors
} = constants; } = constants;
const {
remcalc
} = fns;
const { const {
default: styled default: styled
} = Styled; } = Styled;
const padding = (props) => !props.collapsed
? `0 ${remcalc(18)}`
: `0`;
const color = (props) => props.fromHeader const color = (props) => props.fromHeader
? colors.brandPrimaryColor ? colors.brandPrimaryColor
: '#646464'; : '#646464';
@ -18,23 +27,28 @@ const color = (props) => props.fromHeader
const Span = styled.span` const Span = styled.span`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-size: 14px; font-size: 14px;
color: ${color}; color: ${color};
justify-content: flex-end;
`;
const StyledTitle = styled(Title)`
padding: ${padding};
`; `;
const Subtitle = (props) => ( const Subtitle = (props) => (
<Title name='list-item-subtitle' {...props}> <StyledTitle name='list-item-subtitle' {...props}>
<Span <Span
fromHeader={props.fromHeader} fromHeader={props.fromHeader}
> >
{props.children} {props.children}
</Span> </Span>
</Title> </StyledTitle>
); );
Subtitle.propTypes = { Subtitle.propTypes = {

View File

@ -20,6 +20,10 @@ const color = (props) => !props.fromHeader
? colors.brandSecondaryColor ? colors.brandSecondaryColor
: colors.brandPrimaryColor; : 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 justify = (props) => props.collapsed ? 'center' : 'flex-start';
const width = (props) => props.collapsed ? 'auto' : '100%'; const width = (props) => props.collapsed ? 'auto' : '100%';
const direction = (props) => props.collapsed ? 'column' : 'row'; const direction = (props) => props.collapsed ? 'column' : 'row';
@ -39,8 +43,7 @@ const Container = styled.div`
flex-grow: ${grow}; flex-grow: ${grow};
width: ${width}; width: ${width};
padding-left: 0.5rem; padding: ${padding};
padding-right: 0.5rem;
`; `;
const Span = styled.span` const Span = styled.span`

View File

@ -1,8 +1,8 @@
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const transferProps = require('./transfer-props');
const React = require('react'); const React = require('react');
const Row = require('../row'); const Row = require('../row');
const Styled = require('styled-components'); const Styled = require('styled-components');
const transferProps = require('./transfer-props');
const { const {
remcalc remcalc
@ -20,7 +20,7 @@ const display = (props) => props.headed && !props.fromHeader && props.collapsed
? 'none' ? 'none'
: 'flex'; : 'flex';
const View = styled(Row)` const StyledView = styled(Row)`
flex: 1; flex: 1;
margin: 0; margin: 0;
height: 100%; height: 100%;
@ -28,12 +28,16 @@ const View = styled(Row)`
display: ${display}; display: ${display};
`; `;
const View = (props) => (
<StyledView name='list-item-view' {...props}>
{props.children}
</StyledView>
);
module.exports = transferProps([ module.exports = transferProps([
'collapsed', 'collapsed',
'headed', 'headed',
'fromHeader' 'fromHeader'
], (props) => ( ], View);
<View name='list-item-view' {...props}>
{props.children} module.exports.raw = View;
</View>
));

View File

@ -24,7 +24,8 @@ const {
ListItemOutlet, ListItemOutlet,
ListItemSubTitle, ListItemSubTitle,
ListItemTitle, ListItemTitle,
ListItemView ListItemView,
ListItemGroupView
}, },
MiniMetric, MiniMetric,
Modal, Modal,
@ -637,4 +638,41 @@ storiesOf('ListItem', module)
</ListItemOptions> </ListItemOptions>
</ListItem> </ListItem>
</Base> </Base>
))
.add('view-group', () => (
<Base>
<ListItem headed>
<ListItemHeader>
<ListItemMeta>
<ListItemTitle>Percona</ListItemTitle>
<ListItemSubTitle>5 instances</ListItemSubTitle>
<ListItemDescription>Flags</ListItemDescription>
</ListItemMeta>
<ListItemOptions></ListItemOptions>
</ListItemHeader>
<ListItemGroupView>
<ListItem flat>
<ListItemView>
<ListItemMeta>
<ListItemTitle>percona_database</ListItemTitle>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
</ListItem>
<ListItem stacked flat>
<ListItemView>
<ListItemMeta>
<ListItemTitle>percona_database</ListItemTitle>
<ListItemSubTitle>5 instances</ListItemSubTitle>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
</ListItem>
</ListItemGroupView>
</ListItem>
</Base>
)); ));