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:
parent
eb8cc3bb48
commit
b67fb7c50e
26
ui/src/components/list/group-view.js
Normal file
26
ui/src/components/list/group-view.js
Normal 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,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'),
|
||||||
|
@ -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};
|
||||||
|
@ -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 = {
|
||||||
|
@ -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`
|
||||||
|
@ -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>
|
|
||||||
));
|
|
||||||
|
@ -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>
|
||||||
));
|
));
|
||||||
|
Loading…
Reference in New Issue
Block a user