mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
better handling of collapsed states for ListItem
This commit is contained in:
parent
0b7473d9de
commit
3433c24bee
@ -1,19 +1,41 @@
|
||||
const fns = require('../../shared/functions');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
const Title = require('./title');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled,
|
||||
css
|
||||
} = Styled;
|
||||
|
||||
const margin = (props) => props.collapsed ? `
|
||||
margin-left: auto;
|
||||
` : '';
|
||||
|
||||
const justify = (props) => props.collapsed ? 'flex-end' : 'flex-start';
|
||||
const xs = (props) => props.collapsed ? 6 : 12;
|
||||
const justify = (props) => props.collapsed
|
||||
? 'flex-end'
|
||||
: 'flex-start';
|
||||
|
||||
const xs = (props) => props.collapsed
|
||||
? 6
|
||||
: 12;
|
||||
|
||||
const collapsed = (...args) => (props) => !props.collapsed
|
||||
? css(...args)
|
||||
: css``;
|
||||
|
||||
const StyledTitle = styled(Title)`
|
||||
${collapsed`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-bottom: ${remcalc(12)};
|
||||
padding-top: 0;
|
||||
`}
|
||||
|
||||
font-weight: normal !important;
|
||||
flex-grow: 2;
|
||||
`;
|
||||
|
@ -20,6 +20,6 @@ module.exports = styled(View)`
|
||||
padding-top: ${remcalc(62)};
|
||||
padding-left: ${remcalc(23)};
|
||||
padding-right: ${remcalc(23)};
|
||||
padding-bottom: ${remcalc(15)};
|
||||
padding-bottom: ${remcalc(5)};
|
||||
background-color: ${colors.brandInactive};
|
||||
`;
|
||||
|
@ -42,6 +42,10 @@ const shadow = (props) => props.stacked
|
||||
? boxes.bottomShaddowDarker
|
||||
: boxes.bottomShaddow;
|
||||
|
||||
const marginBottom = (props) => props.stacked
|
||||
? remcalc(16)
|
||||
: remcalc(10);
|
||||
|
||||
const Item = styled(Row)`
|
||||
position: relative;
|
||||
|
||||
@ -50,7 +54,7 @@ const Item = styled(Row)`
|
||||
box-shadow: ${shadow};
|
||||
border: 1px solid ${colors.borderSecondary};
|
||||
background-color: ${colors.brandSecondary};
|
||||
margin-bottom: ${remcalc(10)};
|
||||
margin-bottom: ${marginBottom};
|
||||
`;
|
||||
|
||||
module.exports = transferProps([
|
||||
|
@ -9,9 +9,16 @@ const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const xs = (props) => props.collapsed ? 12 : 6;
|
||||
const xs = (props) => props.collapsed
|
||||
? 12
|
||||
: 6;
|
||||
|
||||
const display = (props) => !props.collapsed
|
||||
? 'block'
|
||||
: 'flex';
|
||||
|
||||
const InnerRow = styled(Row)`
|
||||
display: ${display};
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
@ -26,7 +33,7 @@ module.exports = transferProps([
|
||||
xs={xs(props)}
|
||||
{...props}
|
||||
>
|
||||
<InnerRow>
|
||||
<InnerRow collapsed={props.collapsed}>
|
||||
{props.children}
|
||||
</InnerRow>
|
||||
</Column>
|
||||
|
@ -24,8 +24,12 @@ const color = (props) => props.fromHeader
|
||||
? colors.brandPrimaryColor
|
||||
: '#646464';
|
||||
|
||||
const display = (props) => !props.collapsed
|
||||
? 'inline-block'
|
||||
: 'flex';
|
||||
|
||||
const Span = styled.span`
|
||||
display: flex;
|
||||
display: ${display};
|
||||
flex-direction: column;
|
||||
|
||||
font-weight: normal;
|
||||
@ -38,6 +42,7 @@ const Span = styled.span`
|
||||
`;
|
||||
|
||||
const StyledTitle = styled(Title)`
|
||||
display: ${display};
|
||||
padding: ${padding};
|
||||
`;
|
||||
|
||||
|
@ -24,11 +24,25 @@ 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';
|
||||
const grow = (props) => props.collapsed ? 0 : 2;
|
||||
const xs = (props) => props.collapsed ? 6 : 12;
|
||||
const justify = (props) => props.collapsed
|
||||
? 'center'
|
||||
: 'flex-start';
|
||||
|
||||
const width = (props) => props.collapsed
|
||||
? 'auto'
|
||||
: '100%';
|
||||
|
||||
const direction = (props) => props.collapsed
|
||||
? 'column'
|
||||
: 'row';
|
||||
|
||||
const grow = (props) => props.collapsed
|
||||
? 0
|
||||
: 2;
|
||||
|
||||
const xs = (props) => props.collapsed
|
||||
? 6
|
||||
: 12;
|
||||
|
||||
const Container = styled.div`
|
||||
font-size: ${remcalc(16)};
|
||||
@ -46,8 +60,12 @@ const Container = styled.div`
|
||||
padding: ${padding};
|
||||
`;
|
||||
|
||||
const display = (props) => !props.collapsed
|
||||
? 'inline-block'
|
||||
: 'flex';
|
||||
|
||||
const Span = styled.span`
|
||||
display: flex;
|
||||
display: ${display};
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
@ -12,6 +12,10 @@ const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const height = (props) => props.collapsed
|
||||
? remcalc(48)
|
||||
: 'auto';
|
||||
|
||||
const paddingTop = (props) => props.headed && !props.fromHeader
|
||||
? remcalc(47)
|
||||
: remcalc(0);
|
||||
@ -19,7 +23,7 @@ const paddingTop = (props) => props.headed && !props.fromHeader
|
||||
const StyledView = styled(Row)`
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
height: ${height};
|
||||
padding-top: ${paddingTop};
|
||||
`;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user