fix(my-joy-beta): small fixes in responsive

2018-02-01 14:53:05 +00:00 · 2018-02-01 14:53:05 +00:00 · 9ea30a5622
parent cc987e69ba
commit 9ea30a5622
7 changed files with 57 additions and 93 deletions
--- a/packages/my-joy-beta/src/components/cns.js
+++ b/packages/my-joy-beta/src/components/cns.js
@ -4,6 +4,8 @@ import remcalc from 'remcalc';
 import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Field } from 'redux-form';
+import copy from 'clipboard-copy';
+import { CopiableField } from '@components/instances/summary';

 import {
  P,
@ -76,7 +78,7 @@ export const HostnamesHeader = () => (

 export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine }) => (
  <form onSubmit={handleSubmit}>
-    <Flex alignEnd>
+    <Flex alignEnd wrap>
      <FlexItem>
        <FormGroup name="name" field={Field}>
          <FormLabel>Attach to new CNS service name</FormLabel>
@ -103,7 +105,7 @@ export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine })
  </form>
 );

-export const Hostname = ({ values = [], network, service, ...hostname }) => (
+export const Hostname = ({ copy, values = [], network, service, ...hostname }) => (
  <Fragment>
    {values.length ? (
      <Margin bottom={4}>
@ -125,7 +127,11 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
          <Margin
            top={0.5}
            bottom={values.length !== 1 && values.length !== i + 1 ? '1' : undefined}>
-            <Input onBlur={null} disabled monospace fluid value={value} />
+            {copy ? (
+              <CopiableField disabled md={12} text={value} />
+            ) : (
+              <Input onBlur={null} disabled monospace fluid value={value} />
+            )}
          </Margin>
        ))}
      </Margin>
@ -133,12 +139,12 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
  </Fragment>
 );

-const DefaultHostnames = ({ hostnames }) => (
+const DefaultHostnames = ({ hostnames, copy }) => (
  <Fragment>
    <Header />
    <Flex column>
      {hostnames.map(({ value, ...hostname }) => (
-        <Hostname key={value} value={value} {...hostname} />
+        <Hostname copy={copy} key={value} value={value} {...hostname} />
      ))}
    </Flex>
  </Fragment>
@ -148,7 +154,8 @@ const CnsHostnames = ({
  hostnames = [],
  services = [],
  onRemoveService = () => null,
-  children = null
+  children = null,
+  copy = false
 }) => (
  <Fragment>
    <HostnamesHeader />
@ -173,20 +180,21 @@ const CnsHostnames = ({
    <Margin top={4}>
      <Flex column>
        {hostnames.map(({ value, ...hostname }) => (
-          <Hostname key={value} value={value} {...hostname} />
+          <Hostname copy={copy} key={value} value={value} {...hostname} />
        ))}
      </Flex>
    </Margin>
  </Fragment>
 );

-export default ({ hostnames = [], services = [], onRemoveService, children = null }) => (
+export default ({ copy, hostnames = [], services = [], onRemoveService, children = null }) => (
  <Card>
    <Padding all={4} bottom={0}>
-      <DefaultHostnames hostnames={hostnames.filter(({ service }) => !service)} />
+      <DefaultHostnames copy={copy} hostnames={hostnames.filter(({ service }) => !service)} />
      <Divider height={remcalc(1)} />
      <Margin top={4}>
        <CnsHostnames
+          copy={copy}
          services={services}
          hostnames={hostnames.filter(({ service }) => service)}
          onRemoveService={onRemoveService}>
--- a/packages/my-joy-beta/src/components/create-instance/name.js
+++ b/packages/my-joy-beta/src/components/create-instance/name.js
@ -16,7 +16,7 @@ import {

 export default ({ placeholderName, randomizing, onRandomize }) => (
  <form>
-    <Flex>
+    <Flex wrap>
      <FlexItem flex>
        <FormGroup name="name" fluid field={Field}>
          <FormLabel>Instance Name</FormLabel>
--- a/packages/my-joy-beta/src/components/instances/snapshots.js
+++ b/packages/my-joy-beta/src/components/instances/snapshots.js
@ -38,19 +38,19 @@ export const Item = ({ name, state, created, onStart, onRemove, updated, mutatin
          <FormGroup paddingTop={remcalc(4)} name={name} field={Field}>
            <Checkbox noMargin />
          </FormGroup>
-        </TableTd>,
+        </TableTd>
        <TableTd middle left>
          {name}
-        </TableTd>,
+        </TableTd>
        <TableTd middle left>
          <DotIcon size={remcalc(12)} color={stateColor[state]} /> {titleCase(state)}
-        </TableTd>,
+        </TableTd>
        <TableTd xs="0" sm="160" middle left>
          {distanceInWordsToNow(created)}
-        </TableTd>,
+        </TableTd>
        <TableTd xs="0" sm="160" middle left>
          {distanceInWordsToNow(updated)}
-        </TableTd>,
+        </TableTd>
        <PopoverContainer clickable>
          <TableTd padding="0" hasBorder="left">
            <PopoverTarget box>
--- a/packages/my-joy-beta/src/components/instances/summary.js
+++ b/packages/my-joy-beta/src/components/instances/summary.js
@ -131,26 +131,19 @@ export class CopyToClipboardTooltip extends Component {
  );
 }

-export const CopiableField = ({ label, text, ...rest }) => (
+export const CopiableField = ({ md, label, text, ...rest }) => (
  <Row>
-    <Col xs={12} md={7}>
-      <FormLabel>{label}</FormLabel>
+    <Col xs={12} md={md || 7}>
+      {label ? <FormLabel>{label}</FormLabel> : null }
      <InputIconWrapper {...rest}>
-        <Input monospace onBlur={null} fluid value={text} />
+        <Input {...rest} monospace onBlur={null} fluid value={text} />
        <CopyToClipboardTooltip>{text}</CopyToClipboardTooltip>
      </InputIconWrapper>
    </Col>
  </Row>
 );

-export const Meta = ({
-  created,
-  updated,
-  state,
-  brand,
-  image,
-  ...instance
-}) => [
+export const Meta = ({ created, updated, state, brand, image, ...instance }) => [
  <Row middle="xs">
    <Col xs={12}>
      <H2>{(instance.package || {}).name}</H2>
@ -158,22 +151,12 @@ export const Meta = ({
  </Row>,
  <Margin top={2} bottom={3}>
    <Flex>
-      <Label>
-        {image && image.name ? titleCase(image.name) : 'Custom Image'}
-      </Label>
+      <Label>{image && image.name ? titleCase(image.name) : 'Custom Image'}</Label>
      <VerticalDivider />
-      <Label>
-        {brand === 'LX'
-          ? 'Infrastructure Container'
-          : 'Hardware Virtual Machine'}
-      </Label>
+      <Label>{brand === 'LX' ? 'Infrastructure Container' : 'Hardware Virtual Machine'}</Label>
      <VerticalDivider />
      <Flex>
-        <DotIcon
-          marginRight={remcalc(6)}
-          size={remcalc(15)}
-          color={stateColor[state]}
-        />
+        <DotIcon marginRight={remcalc(6)} size={remcalc(15)} color={stateColor[state]} />
        {titleCase(state)}
      </Flex>
    </Flex>
@ -219,8 +202,7 @@ export default withTheme(
                      onClick={() => onAction('start')}
                      secondary
                      small
-                      icon
-                    >
+                      icon>
                      <StartIcon disabled={instance.state !== 'STOPPED'} />
                    </Button>
                  </SmallOnly>
@ -232,8 +214,7 @@ export default withTheme(
                      onClick={() => onAction('start')}
                      secondary
                      bold
-                      icon
-                    >
+                      icon>
                      <StartIcon disabled={instance.state !== 'STOPPED'} />
                      <span>Start</span>
                    </Button>
@ -246,8 +227,7 @@ export default withTheme(
                      onClick={() => onAction('stop')}
                      secondary
                      small
-                      icon
-                    >
+                      icon>
                      <StopIcon disabled={instance.state !== 'RUNNING'} />
                    </Button>
                  </SmallOnly>
@ -259,8 +239,7 @@ export default withTheme(
                      onClick={() => onAction('stop')}
                      secondary
                      bold
-                      icon
-                    >
+                      icon>
                      <StopIcon disabled={instance.state !== 'RUNNING'} />
                      <span>Stop</span>
                    </Button>
@ -273,8 +252,7 @@ export default withTheme(
                      onClick={() => onAction('reboot')}
                      secondary
                      small
-                      icon
-                    >
+                      icon>
                      <ResetIcon disabled={instance.state !== 'RUNNING'} />
                    </Button>
                  </SmallOnly>
@ -286,8 +264,7 @@ export default withTheme(
                      onClick={() => onAction('reboot')}
                      secondary
                      bold
-                      icon
-                    >
+                      icon>
                      <ResetIcon disabled={instance.state !== 'RUNNING'} />
                      <span>Reboot</span>
                    </Button>
@ -298,21 +275,16 @@ export default withTheme(
                    <Button
                      type="button"
                      loading={removing}
-                      disabled={
-                        ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                      }
+                      disabled={['RUNNING', 'STOPPED'].indexOf(instance.state) < 0}
                      onClick={() => onAction('remove')}
                      secondary
                      small
                      right
                      icon
-                      error
-                    >
+                      error>
                      <DeleteIcon
                        fill={theme.red}
-                        disabled={
-                          ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                        }
+                        disabled={['RUNNING', 'STOPPED'].indexOf(instance.state) < 0}
                      />
                    </Button>
                  </SmallOnly>
@ -320,25 +292,20 @@ export default withTheme(
                    <Button
                      type="button"
                      loading={removing}
-                      disabled={
-                        ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                      }
+                      disabled={['RUNNING', 'STOPPED'].indexOf(instance.state) < 0}
                      onClick={() => onAction('remove')}
                      secondary
                      bold
                      right
                      icon
-                      error
-                    >
+                      error>
                      <DeleteIcon
                        fill={
                          ['RUNNING', 'STOPPED'].indexOf(instance.state) >= 0
                            ? theme.red
                            : undefined
                        }
-                        disabled={
-                          ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                        }
+                        disabled={['RUNNING', 'STOPPED'].indexOf(instance.state) < 0}
                      />
                      <span>Remove</span>
                    </Button>
@ -348,20 +315,12 @@ export default withTheme(
              <Margin bottom={5} top={4}>
                <Divider height={remcalc(1)} />
              </Margin>
-              <CopiableField
-                text={(instance.id || '').split('-')[0]}
-                label="Short ID"
-              />
+              <CopiableField text={(instance.id || '').split('-')[0]} label="Short ID" />
              <CopiableField text={instance.id} label="ID" />
              <CopiableField text={instance.compute_node} label="CN UUID" />
              {instance.image &&
-                instance.image.id && (
-                  <CopiableField text={instance.image.id} label="Image UUID" />
-                )}
-              <CopiableField
-                text={`ssh root@${instance.primary_ip}`}
-                label="Login"
-              />
+                instance.image.id && <CopiableField text={instance.image.id} label="Image UUID" />}
+              <CopiableField text={`ssh root@${instance.primary_ip}`} label="Login" />
              {(instance.ips || []).map((ip, i) => (
                <CopiableField
                  key={i}
--- a/packages/my-joy-beta/src/components/key-value.js
+++ b/packages/my-joy-beta/src/components/key-value.js
@ -98,7 +98,7 @@ const TextareaKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
 );

 const InputKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
-  <Flex justifyStart contentStretch>
+  <Flex wrap justifyStart contentStretch>
    {!onlyValue ? (
      <FlexItem basis="auto">
        <FormGroup name="name" field={Field} fluid>
--- a/packages/my-joy-beta/src/containers/instances/cns.js
+++ b/packages/my-joy-beta/src/containers/instances/cns.js
@ -74,6 +74,7 @@ const CnsContainer = ({
    {!loading && !disabled ? (
      <Margin bottom={4}>
        <Cns
+          copy
          services={services}
          hostnames={hostnames}
          onRemoveService={!mutating && (name => handleRemoveService(name, services))}>
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@ -5,19 +5,15 @@ import remcalc from 'remcalc';
 import is, { isNot } from 'styled-is';
 import PropTypes from 'prop-types';

-const colorWithDisabled = props =>
-  props.disabled ? props.theme.disabled : props.theme.text;
+const colorWithDisabled = props => (props.disabled ? props.theme.disabled : props.theme.text);

 const colorWithDefaultValue = props =>
-  props.value === props.defaultValue
-    ? props.theme.disabled
-    : colorWithDisabled(props);
+  props.value === props.defaultValue ? props.theme.disabled : colorWithDisabled(props);

 const color = props =>
  props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);

-const height = props =>
-  props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);
+const height = props => (props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48));

 const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));

@ -92,10 +88,6 @@ const style = css`
    width: ${remcalc(120)};
  `};

-  ${is('big')`
-    width: ${remcalc(355)};
-  `};
-
  ${is('monospace')`
    font-family: ${props => props.theme.monoFont.families};

@ -188,6 +180,11 @@ const style = css`
    border-color: ${props => props.theme.primary};
    outline: 0;
  }
+
+  ${is('big')`
+    width: ${remcalc(355)};
+    max-width: 100%;
+  `};
 `;

 const BaseInput = Component => ({ resize, onBlur, type, ...props }) => {
@ -231,8 +228,7 @@ BaseInput.propTypes = {
 export default BaseInput;

 export const Stylable = Component => {
-  const stylable =
-    typeof Component === 'string' ? styled[Component] : styled(Component);
+  const stylable = typeof Component === 'string' ? styled[Component] : styled(Component);

  return stylable`
    ${style}