Merge pull request #197 from smiclea/layout-widening

Widen details and wizard pages layout

src/components/App.jsx

@@ -47,6 +47,7 @@ injectGlobal`
     font-weight: ${StyleProps.fontWeights.regular};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    min-width: 1240px;
   }
 `
 const Wrapper = styled.div``

src/components/molecules/DatetimePicker/index.jsx

@@ -136,7 +136,7 @@ class DatetimePicker extends React.Component<Props, State> {
     return (
       <Wrapper>
         <DropdownButtonStyled
-          width={176}
+          width={207}
           value={(timezoneDate && moment(timezoneDate).format('DD/MM/YYYY hh:mm A')) || '-'}
           centered
           useBold={this.props.useBold}

src/components/molecules/ScheduleItem/index.jsx

@@ -202,7 +202,7 @@ class ScheduleItem extends React.Component<Props> {
     return (
       <DropdownStyled
         centered
-        width={136}
+        width={160}
         items={items}
         useBold={this.shouldUseBold('month')}
         selectedItem={this.getFieldValue(items, 'month')}
@@ -226,7 +226,7 @@ class ScheduleItem extends React.Component<Props> {
     return (
       <DropdownStyled
         centered
-        width={72}
+        width={86}
         items={items}
         useBold={this.shouldUseBold('dom')}
         selectedItem={this.getFieldValue(items, 'dom')}
@@ -250,7 +250,7 @@ class ScheduleItem extends React.Component<Props> {
     return (
       <DropdownStyled
         centered
-        width={136}
+        width={160}
         items={items}
         useBold={this.shouldUseBold('dow')}
         selectedItem={this.getFieldValue(items, 'dow', true)}
@@ -272,7 +272,7 @@ class ScheduleItem extends React.Component<Props> {
     return (
       <DropdownStyled
         centered
-        width={72}
+        width={86}
         items={items}
         useBold={this.shouldUseBold('hour')}
         selectedItem={this.getFieldValue(items, 'hour', true, 1)}
@@ -295,7 +295,7 @@ class ScheduleItem extends React.Component<Props> {
     return (
       <DropdownStyled
         centered
-        width={72}
+        width={86}
         items={items}
         useBold={this.shouldUseBold('minute')}
         selectedItem={this.getFieldValue(items, 'minute', true, 1)}

src/components/molecules/Table/index.jsx

@@ -47,8 +47,16 @@ const Header = styled.div`
   `}
   ${props => props.customStyle}
 `
+const TableData = props => css`
+  width: 100%;
+  max-width: ${props.width};
+  padding-right: 32px;
+  &:last-child {
+    padding-right: 0;
+  }
+`
 const HeaderData = styled.div`
-  ${props => props.useExactWidth ? StyleProps.exactWidth(props.width) : `width: ${props.width};`}
+  ${props => TableData(props)}
   color: ${props => props.secondary ? Palette.grayscale[5] : Palette.grayscale[3]};
   font-size: 10px;
   font-weight: ${StyleProps.fontWeights.medium};
@@ -76,7 +84,7 @@ const Row = styled.div`
   ` : ''}
 `
 const RowData = styled.div`
-  width: ${props => props.width};
+  ${props => TableData(props)}
   color: ${Palette.grayscale[4]};
   ${props => props.customStyle}
 `
@@ -114,7 +122,6 @@ class Table extends React.Component<Props> {
             <HeaderData
               width={this.props.columnsWidths && this.props.columnsWidths.length > 0 ? this.props.columnsWidths[i] : dataWidth}
               key={i}
-              useExactWidth={i < this.props.header.length - 1}
               secondary={this.props.useSecondaryStyle}
             >{headerItem}</HeaderData>
           )

src/components/molecules/Table/story.jsx

@@ -22,6 +22,8 @@ import Table from '.'
 let items = [
   ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
   ['item-6', 'item-7', 'item-8', 'item-9', 'item-10'],
+  ['item-6', 'item-7', 'item-8', 'item-9', 'item-10'],
+  ['item-6', 'item-7', 'item-8', 'item-9', 'item-10'],
 ]
 let header = ['Header 1', 'Header 2', 'Header 3', 'Header 4', 'Header 5']
 

src/components/molecules/Timeline/index.jsx

@@ -26,6 +26,8 @@ import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
 import DateUtils from '../../../utils/DateUtils'
 
+const ITEM_GAP = 96
+
 const ArrowStyled = styled(Arrow) `
   opacity: ${props => props.forceShow ? 1 : 0};
   position: absolute;
@@ -69,7 +71,7 @@ const Item = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-right: 90px;
+  margin-right: ${ITEM_GAP}px;
   cursor: pointer;
   min-width: 75px;
   max-width: 75px;
@@ -128,7 +130,7 @@ class Timeline extends React.Component<Props> {
     // $FlowIssue
     let itemIndex = this.props.items.findIndex(i => i.id === this.props.selectedItem.id)
     let halfWidth = this.wrapperRef.offsetWidth / 2
-    let itemGap = this.itemRef.offsetWidth + 90
+    let itemGap = this.itemRef.offsetWidth + ITEM_GAP
     let itemHalfWidth = this.itemRef.offsetWidth / 2
     let offset = (halfWidth - (itemGap * itemIndex)) - itemHalfWidth
 

src/components/molecules/WizardOptionsField/index.jsx

@@ -78,7 +78,7 @@ class WizardOptionsField extends React.Component<Props> {
   renderTextInput() {
     return (
       <TextInput
-        width="320px"
+        width={`${StyleProps.inputSizes.wizard.width}px`}
         required={this.props.required}
         value={this.props.value}
         onChange={e => { this.props.onChange(e.target.value) }}
@@ -118,7 +118,7 @@ class WizardOptionsField extends React.Component<Props> {
 
     return (
       <Dropdown
-        width={320}
+        width={StyleProps.inputSizes.wizard.width}
         data-test-id={`dropdown-${this.props.name}`}
         noSelectionMessage="Choose a value"
         selectedItem={selectedItem}

src/components/molecules/WizardType/index.jsx

@@ -45,11 +45,11 @@ const Row = styled.div`
   margin-top: 52px;
 `
 const Column = styled.div`
-  width: ${props => props.middle ? 192 : 304}px;
-  text-align: ${props => props.left ? 'right' : 'left'};
+  width: ${props => props.width};
+  text-align: ${props => props.alignRight ? 'right' : 'left'};
   display: flex;
   flex-direction: column;
-  ${props => props.middle ? 'align-items: center;' : ''}
+  ${props => props.alignCenter ? 'align-items: center;' : ''}
 `
 const Title = styled.div`
   font-size: 23px;
@@ -73,14 +73,14 @@ class WizardType extends React.Component<Props> {
       <Wrapper>
         <Image type={this.props.selected} dangerouslySetInnerHTML={{ __html: migrationImage }} />
         <Row>
-          <Column left>
+          <Column alignRight width="50%">
             <Title>Coriolis Migration</Title>
             <Message selected={this.props.selected === 'migration'}>A Coriolis Migration is a full instance migration between two cloud endpoints.</Message>
           </Column>
-          <Column middle>
+          <Column alignCenter width="192px">
             <Switch big onChange={this.props.onChange} checked={this.props.selected === 'replica'} />
           </Column>
-          <Column>
+          <Column width="50%">
             <Title>Coriolis Replica</Title>
             <Message selected={this.props.selected === 'replica'}>The Coriolis Replica is obtained by copying (replicating) incrementally the virtual machines data from the source environment to the target, without interfering with any running workload. A migration replica can then be finalized by automatically applying the required changes to adapt it to the target environment (migration phase).</Message>
           </Column>

src/components/organisms/AssessmentDetailsContent/index.jsx

@@ -53,8 +53,7 @@ const Buttons = styled.div`
   }
 `
 const DetailsBody = styled.div`
-  min-width: 800px;
-  max-width: 800px;
+  ${StyleProps.exactWidth(StyleProps.contentWidth)}
   margin-bottom: 32px;
 `
 const Columns = styled.div`
@@ -317,13 +316,13 @@ class AssessmentDetailsContent extends React.Component<Props> {
       return null
     }
 
-    let columnsWidths = ['244px', '164px', '220px', '156px']
+    const COLUMN_WIDTHS = ['278px', '186px', '260px', '180px']
     let items = this.props.filteredAssessedVms.map(vm => {
       let filteredVm = this.props.filteredAssessedVms.find(v => v.id === vm.id)
       return (
         <AssessedVmListItem
           item={vm}
-          columnsWidths={columnsWidths}
+          columnsWidths={COLUMN_WIDTHS}
           selected={this.props.selectedVms.filter(m => m.id === vm.id).length > 0}
           onSelectedChange={(vm, selected) => { this.props.onVmSelectedChange(vm, selected) }}
           disabled={!this.doesVmMatchSource(vm)}
@@ -356,7 +355,7 @@ class AssessmentDetailsContent extends React.Component<Props> {
         items={items}
         bodyStyle={TableBodyStyle}
         headerStyle={TableHeaderStyle}
-        columnsWidths={columnsWidths}
+        columnsWidths={COLUMN_WIDTHS}
         header={[vmHeaderItem, 'OS', 'Target Disk Type', 'Azure VM Size']}
         useSecondaryStyle
         noItemsLabel="No VMs found!"
@@ -386,7 +385,7 @@ class AssessmentDetailsContent extends React.Component<Props> {
       return null
     }
 
-    let columnsWidths = ['357px', '275px', '152px']
+    const COLUMNS_WIDTHS = ['407px', '315px', '174px']
     let items = nics.map(nic => {
       let selectedNetworkName = this.props.selectedNetworks && this.props.selectedNetworks.find(n => n.sourceNic.network_name === nic.network_name)
       if (selectedNetworkName) {
@@ -396,10 +395,10 @@ class AssessmentDetailsContent extends React.Component<Props> {
       return (
         // $FlowIgnore
         <NetworkItem key={nic.network_name}>
-          <NetworkName width={columnsWidths[0]}>{nic.network_name}</NetworkName>
-          <Arrow width={columnsWidths[1]} />
+          <NetworkName width={COLUMNS_WIDTHS[0]}>{nic.network_name}</NetworkName>
+          <Arrow width={COLUMNS_WIDTHS[1]} />
           <DropdownLink
-            width={columnsWidths[2]}
+            width={COLUMNS_WIDTHS[2]}
             noItemsLabel="No Networks found"
             selectItemLabel="Select Network"
             selectedItem={selectedNetworkName}
@@ -412,7 +411,7 @@ class AssessmentDetailsContent extends React.Component<Props> {
     return (
       <TableStyled
         items={items}
-        columnsWidths={columnsWidths}
+        columnsWidths={COLUMNS_WIDTHS}
         header={['Source Network', '', 'Target Network']}
         useSecondaryStyle
       />

src/components/organisms/DetailsContentHeader/index.jsx

@@ -34,7 +34,7 @@ const Wrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-right: ${props => props.noSidemenuSpace ? 54 : 64}px;
+  margin-left: -72px;
 `
 const BackButton = styled.div`
   ${StyleProps.exactSize('33px')}
@@ -49,7 +49,9 @@ const TypeImage = styled.div`
   margin-right: 64px;
 `
 const Title = styled.div`
-  ${StyleProps.exactWidth('622px')}
+  display: flex;
+  align-items: center;
+  ${StyleProps.exactWidth(StyleProps.contentWidth)}
 `
 const Text = styled.div`
   font-size: 30px;
@@ -58,6 +60,9 @@ const Text = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
 `
+const Status = styled.div`
+  flex-grow: 1;
+`
 const StatusPills = styled.div`
   display: flex;
   margin-top: 5px;
@@ -86,7 +91,6 @@ type Props = {
   alertButton?: boolean,
   hollowButton?: boolean,
   actionButtonDisabled?: boolean,
-  noSidemenuSpace?: boolean,
 }
 @observer
 class DetailsContentHeader extends React.Component<Props> {
@@ -176,15 +180,17 @@ class DetailsContentHeader extends React.Component<Props> {
     let title = this.props.item ? (this.props.item.instances && this.props.item.instances[0]) || this.props.item.name : ''
 
     return (
-      <Wrapper noSidemenuSpace={this.props.noSidemenuSpace}>
+      <Wrapper>
         <BackButton onClick={this.props.onBackButonClick} />
         <TypeImage image={this.props.typeImage} />
         <Title>
-          <Text>{title}</Text>
-          {this.renderStatusPill()}
-          {this.renderDescription()}
+          <Status>
+            <Text>{title}</Text>
+            {this.renderStatusPill()}
+            {this.renderDescription()}
+          </Status>
+          {this.renderButton()}
         </Title>
-        {this.renderButton()}
       </Wrapper>
     )
   }

src/components/organisms/EndpointDetailsContent/index.jsx

@@ -31,9 +31,9 @@ import DateUtils from '../../../utils/DateUtils'
 import LabelDictionary from '../../../utils/LabelDictionary'
 
 const Wrapper = styled.div`
-  min-width: 656px;
-  max-width: 656px;
+  ${StyleProps.exactWidth(StyleProps.contentWidth)}
   margin: 0 auto;
+  padding-left: 126px;
 `
 const Info = styled.div`
   margin-top: 32px;

src/components/organisms/Executions/index.jsx

@@ -237,7 +237,7 @@ class Executions extends React.Component<Props, State> {
         </ExecutionInfoDate>
         <ExecutionInfoId>
           ID:&nbsp;<CopyValue
-            width="107px"
+            width="186px"
             value={this.state.selectedExecution ? this.state.selectedExecution.id : ''}
           />
         </ExecutionInfoId>

src/components/organisms/MainDetails/index.jsx

@@ -308,7 +308,7 @@ class MainDetails extends React.Component<Props> {
 
     return (
       <ColumnsLayout>
-        <Column width="40%">
+        <Column width="34.5%">
           <Row>
             <Field>
               <Label>Source</Label>
@@ -349,10 +349,10 @@ class MainDetails extends React.Component<Props> {
             </Field>
           </Row>
         </Column>
-        <Column width="20%">
+        <Column width="17.5%">
           <Arrow />
         </Column>
-        <Column width="40%">
+        <Column width="auto" style={{ flexGrow: 1 }}>
           <Row>
             <Field>
               <Label>Target</Label>

src/components/organisms/MigrationDetailsContent/index.jsx

@@ -22,6 +22,7 @@ import Button from '../../atoms/Button'
 import DetailsNavigation from '../../molecules/DetailsNavigation'
 import MainDetails from '../../organisms/MainDetails'
 import Tasks from '../../organisms/Tasks'
+import StyleProps from '../../styleUtils/StyleProps'
 
 import type { MainItem } from '../../../types/MainItem'
 import type { Endpoint } from '../../../types/Endpoint'
@@ -37,8 +38,7 @@ const Buttons = styled.div`
   }
 `
 const DetailsBody = styled.div`
-  min-width: 800px;
-  max-width: 800px;
+  ${StyleProps.exactWidth(StyleProps.contentWidth)}
 `
 
 const NavigationItems = [

src/components/organisms/ReplicaDetailsContent/index.jsx

@@ -28,6 +28,7 @@ import type { MainItem } from '../../../types/MainItem'
 import type { Endpoint } from '../../../types/Endpoint'
 import type { Execution } from '../../../types/Execution'
 import type { Schedule as ScheduleType } from '../../../types/Schedule'
+import StyleProps from '../../styleUtils/StyleProps'
 
 const Wrapper = styled.div`
   display: flex;
@@ -42,7 +43,7 @@ const LeftButtons = styled.div``
 const RightButtons = styled.div`
   display: flex;
   button {
-    margin-right: 16px;
+    margin-right: 32px;
 
     &:last-child {
       margin-right: 0;
@@ -50,8 +51,7 @@ const RightButtons = styled.div`
   }
 `
 const DetailsBody = styled.div`
-  min-width: 800px;
-  max-width: 800px;
+  ${StyleProps.exactWidth(StyleProps.contentWidth)}
 `
 
 const NavigationItems = [

src/components/organisms/Schedule/index.jsx

@@ -36,7 +36,7 @@ import { executionOptions } from '../../../config'
 import scheduleImage from './images/schedule.svg'
 
 const Wrapper = styled.div`
-  width: 800px;
+  ${StyleProps.exactWidth(StyleProps.contentWidth)}
 `
 const LoadingWrapper = styled.div`
   margin-top: 32px;

src/components/organisms/WizardOptions/index.jsx

@@ -19,6 +19,7 @@ import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
 import Tooltip from '../../atoms/Tooltip'
+import StyleProps from '../../styleUtils/StyleProps'
 import ToggleButtonBar from '../../atoms/ToggleButtonBar'
 import WizardOptionsField from '../../molecules/WizardOptionsField'
 import StatusImage from '../../atoms/StatusImage'
@@ -38,7 +39,7 @@ const Column = styled.div`
   ${props => props.left ? 'margin-right: 160px;' : ''}
 `
 const WizardOptionsFieldStyled = styled(WizardOptionsField) `
-  width: 320px;
+  width: ${StyleProps.inputSizes.wizard.width}px;
   justify-content: space-between;
   margin-bottom: 39px;
 `

src/components/organisms/WizardPageContent/index.jsx

@@ -44,9 +44,8 @@ import ProviderStore from '../../../stores/ProviderStore'
 import migrationArrowImage from './images/migration.js'
 import NetworkStore from '../../../stores/NetworkStore'
 
-const bodyWidth = 800
 const Wrapper = styled.div`
-  ${StyleProps.exactWidth(`${bodyWidth + 64}px`)}
+  ${StyleProps.exactWidth(`${parseInt(StyleProps.contentWidth, 10) + 64}px`)}
   margin: 64px auto 32px auto;
   position: absolute;
   top: 0;
@@ -78,7 +77,7 @@ const Navigation = styled.div`
 `
 const IconRepresentation = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   flex-grow: 1;
   margin: 0 76px;
 `
@@ -89,6 +88,7 @@ const WizardTypeIcon = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 0 32px;
 `
 type Props = {
   page: { id: string, title: string },

src/components/pages/EndpointDetailsPage/index.jsx

@@ -191,7 +191,6 @@ class EndpointDetailsPage extends React.Component<Props, State> {
             onCancelClick={() => { }}
             typeImage={endpointImage}
             description={endpoint ? endpoint.description : ''}
-            noSidemenuSpace
           />}
           contentComponent={<EndpointDetailsContent
             item={endpoint}

src/components/styleUtils/StyleProps.js

@@ -25,11 +25,13 @@ const StyleProps = {
   },
 
   inputSizes: {
-    regular: { width: 176, height: 32 },
+    regular: { width: 208, height: 32 },
     large: { width: 224, height: 32 },
+    wizard: { width: 384 },
   },
 
   borderRadius: '4px',
+  contentWidth: '928px',
 
   animations: {
     swift: '.45s cubic-bezier(0.3, 1, 0.4, 1) 0s',