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

feat(ui-toolkit): key-value responsive

This commit is contained in:
Fábio Moreira 2018-05-30 13:44:22 +01:00 committed by Sérgio Ramos
parent 1e8e89b3c8
commit 6698a8eacb
1 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
packages/resource-widgets/src/key-value/index.js
View File

@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import { Margin, Padding } from 'styled-components-spacing'; import { Margin, Padding } from 'styled-components-spacing';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { Row, Col } from 'joyent-react-styled-flexboxgrid'; import { Row, Col as BaseCol } from 'joyent-react-styled-flexboxgrid';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import titleCase from 'title-case'; import titleCase from 'title-case';
@ -70,6 +70,13 @@ const Bold = styled.span`
font-weight: ${props => props.theme.font.weight.semibold}; font-weight: ${props => props.theme.font.weight.semibold};
`; `;
const Col = styled(BaseCol)`
${is('mobile')`
display: flex;
flex-direction: column-reverse;
`};
`;
const TextareaKeyValue = ({ const TextareaKeyValue = ({
id = null, id = null,
type, type,
@ -138,10 +145,11 @@ const InputKeyValue = ({
submitting, submitting,
typeLabel, typeLabel,
onlyName, onlyName,
onlyValue onlyValue,
fluid = false
}) => ( }) => (
<Flex wrap justifyStart contentStretch> <Flex wrap justifyStart contentStretch column={fluid}>
{onlyValue ? null : ( {!onlyValue ? (
<FlexItem basis="auto"> <FlexItem basis="auto">
<FormGroup <FormGroup
id={id ? 'kv-input-name-' + id : null} id={id ? 'kv-input-name-' + id : null}
@ -152,8 +160,8 @@ const InputKeyValue = ({
<FormLabel> <FormLabel>
{titleCase(type)} {typeLabel} {titleCase(type)} {typeLabel}
</FormLabel> </FormLabel>
<Margin right="3" top="0.5"> <Margin right={fluid ? '0' : '3'} top="0.5">
<Input onBlur={null} type="text" disabled={submitting} /> <Input onBlur={null} type="text" disabled={submitting} fluid />
<Row> <Row>
<Col sm="7"> <Col sm="7">
<FormMeta /> <FormMeta />
@ -162,26 +170,28 @@ const InputKeyValue = ({
</Margin> </Margin>
</FormGroup> </FormGroup>
</FlexItem> </FlexItem>
)} ) : null}
{onlyName ? null : ( {onlyName ? null : (
<Fragment> <Fragment>
<FlexItem basis="auto"> <FlexItem basis="auto">
<FormGroup <Margin top={fluid ? '2' : '0'}>
id={id ? 'kv-input-value-' + id : null} <FormGroup
name="value" id={id ? 'kv-input-value-' + id : null}
field={Field} name="value"
fluid field={Field}
> fluid
<FormLabel>{titleCase(type)} value</FormLabel> >
<Margin top="0.5"> <FormLabel>{titleCase(type)} value</FormLabel>
<Input onBlur={null} type="text" disabled={submitting} /> <Margin top="0.5">
<Row> <Input onBlur={null} type="text" disabled={submitting} fluid />
<Col sm="7"> <Row>
<FormMeta /> <Col sm="7">
</Col> <FormMeta />
</Row> </Col>
</Margin> </Row>
</FormGroup> </Margin>
</FormGroup>
</Margin>
</FlexItem> </FlexItem>
</Fragment> </Fragment>
)} )}
@ -216,6 +226,7 @@ export const KeyValue = ({
noActions = false noActions = false
}) => { }) => {
const handleHeaderClick = method === 'edit' && onToggleExpanded; const handleHeaderClick = method === 'edit' && onToggleExpanded;
const mobile = theme.screen === 'mobile';
return ( return (
<Card <Card
@ -294,6 +305,7 @@ export const KeyValue = ({
submitting={disabled || submitting} submitting={disabled || submitting}
onlyName={onlyName} onlyName={onlyName}
onlyValue={onlyValue} onlyValue={onlyValue}
fluid={mobile}
/> />
) : null} ) : null}
{input === 'textarea' ? ( {input === 'textarea' ? (
@ -309,16 +321,38 @@ export const KeyValue = ({
{input !== 'textarea' && input !== 'input' {input !== 'textarea' && input !== 'input'
? input(submitting) ? input(submitting)
: null} : null}
{noActions ? null : ( <Margin top={mobile ? '3' : '2'}>
<Margin top="2"> <Row between="xs" middle="xs">
<Row between="xs" middle="xs"> <Col xs={method === 'add' ? '12' : '7'} mobile={mobile}>
<Col xs={method === 'add' ? '12' : '7'}> <Margin top={mobile ? '1' : '0'} inline>
<MarginalButton <MarginalButton
id={id ? 'kv-cancel-button-' + id : null} id={id ? 'kv-cancel-button-' + id : null}
type="button" type="button"
onClick={onCancel} onClick={onCancel}
disabled={disabled || submitting} disabled={disabled || submitting}
secondary secondary
fluid={mobile}
>
<span>Cancel</span>
</MarginalButton>
</Margin>
<Button
id={id ? 'kv-submit-button-' + id : null}
type="submit"
disabled={pristine || invalid}
loading={submitting && !removing}
fluid={mobile}
>
<span>{method === 'add' ? 'Create' : 'Save'}</span>
</Button>
</Col>
{!noRemove && (
<Col xs={method === 'add' ? false : '5'}>
<Button
type="button"
onClick={onCancel}
disabled={disabled || submitting}
secondary
> >
<span>Cancel</span> <span>Cancel</span>
</MarginalButton> </MarginalButton>