Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

GroupView ui component for ListItem

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ui/src/components/list/group-view.js Normal file
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};
`;

1
ui/src/components/list/index.js
View File

@ -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'),

19
ui/src/components/list/item.js
View File

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

20
ui/src/components/list/subtitle.js
View File

@ -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) => (
<Title name='list-item-subtitle' {...props}>
<StyledTitle name='list-item-subtitle' {...props}>
<Span
fromHeader={props.fromHeader}
>
{props.children}
</Span>
</Title>
</StyledTitle>
);
Subtitle.propTypes = {

7
ui/src/components/list/title.js
View File

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

18
ui/src/components/list/view.js
View File

@ -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) => (
<StyledView name='list-item-view' {...props}>
{props.children}
</StyledView>
);
module.exports = transferProps([
'collapsed',
'headed',
'fromHeader'
], (props) => (
<View name='list-item-view' {...props}>
{props.children}
</View>
));
], View);
module.exports.raw = View;

40
ui/stories/index.js
View File

@ -24,7 +24,8 @@ const {
ListItemOutlet,
ListItemSubTitle,
ListItemTitle,
ListItemView
ListItemView,
ListItemGroupView
},
MiniMetric,
Modal,
@ -637,4 +638,41 @@ storiesOf('ListItem', module)
</ListItemOptions>
</ListItem>
</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>
));