Merge pull request #15 from PatrickShaw/responsive-list

The specification list is now more responsive

src/backend/specifications.tsx

@@ -1,5 +1,5 @@
 import { Specification } from 'model/Specification';
-import { BuildStatus } from 'model/SDK';
+import { BuildStatus } from 'model/Sdk';
 
 // TODO: Replace this list
 let count = 0;

src/model/SDK.tsx → src/model/Sdk.tsx

@@ -1,4 +1,4 @@
-export interface SDK {
+export interface Sdk {
  id: number;
  name: string;
  latestVersion: string;

src/model/Specification.tsx

@@ -1,9 +1,9 @@
-import { SDK } from './SDK';
+import { Sdk } from 'model/Sdk';
 
 export interface Specification {
  readonly id: number; // Just an example field. Not necessarily part of Specification
  readonly title: string; // Just an example field. Not necessarily part of Specification
  readonly description?: string;
  readonly path: string;
- readonly sdks: SDK[];
+ readonly sdks: Sdk[];
 }

src/state/SpecificationState.tsx

@@ -2,7 +2,7 @@ import { observable, computed } from 'mobx';
 import fetch from 'node-fetch';
 import { config } from 'config';
 import { Specification } from 'model/Specification';
-import { BuildStatus } from 'model/SDK';
+import { BuildStatus } from 'model/Sdk';
 
 export interface SpecificationState {
  specifications: Map<number, Specification>;

src/view/Page.tsx

@@ -21,7 +21,8 @@ const Styled = createStyled(theme => ({
  content: {
  flexBasis: '600px',
  flexGrow: 1,
- flexShrink: 1
+ flexShrink: 1,
+ minWidth: 0
  }
 }));
 

src/view/basic/BuildStatusChip.tsx

@@ -1,5 +1,5 @@
 import React, { SFC } from 'react';
-import { BuildStatus } from 'model/SDK';
+import { BuildStatus } from 'model/Sdk';
 import red from 'material-ui/colors/red';
 import green from 'material-ui/colors/green';
 import amber from 'material-ui/colors/amber';

src/view/basic/SdkItem.tsx

@@ -0,0 +1,55 @@
+import React, { SFC } from 'react';
+import { Sdk, BuildStatus } from 'model/Sdk';
+import Typography from 'material-ui/Typography';
+import { createStyled } from 'view/createStyled';
+import { BuildStatusChip } from 'basic/BuildStatusChip';
+import Grid from 'material-ui/Grid';
+import { ListItem, ListItemText } from 'material-ui/List';
+import Button from 'material-ui/Button';
+
+const Styled: any = createStyled(theme => ({
+ sdkItemContainer: {
+ display: 'flex',
+ flexGrow: 1,
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ '& > *:not(:first-child)': {
+ marginLeft: theme.spacing.unit
+ }
+ },
+ // TODO: Regularly used classes like this should be defined somewhere else
+ center: {
+ marginLeft: 'auto',
+ marginRight: 'auto'
+ }
+}));
+
+export interface SdkItemProps extends React.DOMAttributes<HTMLDivElement> {
+ sdk: Sdk;
+}
+
+/**
+ * Very basic information about a SDK.
+ * For use in lists, grids, etc.
+ */
+
+export const SdkItem: SFC<SdkItemProps> = ({ sdk }) => (
+ <Styled>
+ {({ classes }) => (
+ <div className={classes.sdkItemContainer}>
+ <Typography>{sdk.name}</Typography>
+ <Typography variant="body1" color="textSecondary">
+ {sdk.latestVersion}
+ </Typography>
+ <div>
+ <BuildStatusChip buildStatus={sdk.buildStatus} />
+ </div>
+ <div>
+ <Button disabled={sdk.buildStatus === BuildStatus.RUNNING}>
+ {sdk.buildStatus === BuildStatus.RUNNING ? 'Running...' : 'Run'}
+ </Button>
+ </div>
+ </div>
+ )}
+ </Styled>
+);

src/view/basic/SpecificationItem.tsx

@@ -13,28 +13,49 @@ import List, { ListItem, ListItemText, ListItemSecondaryAction } from 'material-
 import Button from 'material-ui/Button';
 import IconButton from 'material-ui/IconButton';
 import Edit from '@material-ui/icons/Edit';
-import { SDKItem } from './SDKItem';
+import { SdkItem } from 'basic/SdkItem';
 
 const Styled: any = createStyled(theme => ({
- secondary: {
- color: theme.palette.text.secondary
- },
- block: {
- display: 'block'
- },
  bordered: {
  border: `1px solid ${theme.palette.divider}`,
  borderRadius: '2px'
  },
- extraGutter: {
- marginBottom: theme.spacing.unit * 2
- },
- rightButton: {
- float: 'right',
- margin: theme.spacing.unit
- },
  indent: {
  marginLeft: theme.spacing.unit
+ },
+ specSummary: {
+ display: 'flex'
+ },
+ summarySection: {
+ minWidth: 0
+ },
+ summaryTitle: {
+ minWidth: 0,
+ flexBasis: '220px'
+ },
+ summaryDescription: {
+ minWidth: 0,
+ flexBasis: '100px',
+ flexShrink: 1,
+ flexGrow: 1
+ },
+ detailSection: {
+ flexGrow: 1
+ },
+ sdkHeader: {
+ display: 'flex',
+ flexGrow: 1,
+ flexShrink: 0,
+ minWidth: 0,
+ alignItems: 'center'
+ },
+ sdkTitleSection: {
+ flexGrow: 1,
+ flexShrink: 0
+ },
+ sdkHeaderActions: {
+ marginTop: theme.spacing.unit,
+ marginBottom: theme.spacing.unit
  }
 }));
 
@@ -57,55 +78,59 @@ export const SpecificationItem: SFC<SpecificationItemProps> = ({
  <Styled>
  {({ classes }) => (
  <ExpansionPanel expanded={expanded} onChange={onPanelChange}>
- <ExpansionPanelSummary expandIcon={expanded ? <Close /> : <Info />}>
- <Grid container>
- <Grid item xs={4}>
- <Typography variant={expanded ? 'title' : 'body1'}>
- {specification.title}
- </Typography>
- </Grid>
- <Grid item xs={4} zeroMinWidth>
- <Typography noWrap variant="body1" className={classes.secondary}>
- {!expanded && specification.description ? specification.description : ''}
- </Typography>
- </Grid>
- </Grid>
+ <ExpansionPanelSummary
+ classes={{ content: classes.summarySection }}
+ expandIcon={expanded ? <Close /> : <Info />}
+ >
+ <div className={classes.summaryTitle}>
+ <Typography noWrap variant={expanded ? 'title' : 'body1'}>
+ {specification.title}
+ </Typography>
+ </div>
+ <div className={classes.summaryDescription}>
+ <Typography noWrap color="textSecondary" variant="body1">
+ {!expanded && specification.description ? specification.description : ''}
+ </Typography>
+ </div>
  </ExpansionPanelSummary>
- <ExpansionPanelDetails className={classes.block}>
- <Typography
- variant="body1"
- className={`${classes.extraGutter} ${classes.indent}`}
- >
- {specification.description || ''}
- </Typography>
- <Typography variant="subheading" gutterBottom className={classes.indent}>
- Specification File
- </Typography>
- <List className={`${classes.bordered} ${classes.extraGutter}`} dense>
- <ListItem>
- <ListItemText primary={specification.path} />
- <ListItemSecondaryAction>
- <IconButton aria-label="Edit">
- <Edit />
- </IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- </List>
- <Grid container alignItems="center">
- <Grid xs={10}>
- <Typography variant="subheading" className={classes.indent}>
- SDKs
- </Typography>
- </Grid>
- <Grid xs={2}>
- <Button variant="flat" color="primary" className={classes.rightButton}>
- Run all
- </Button>
- </Grid>
- </Grid>
- <List className={classes.bordered}>
- {specification.sdks.map(sdk => <SDKItem sdk={sdk} key={sdk.id} />)}
- </List>
+ <ExpansionPanelDetails>
+ <div className={classes.detailSection}>
+ <Typography className={classes.indent}>
+ {specification.description}
+ </Typography>
+ <Typography variant="subheading" gutterBottom className={classes.indent}>
+ Specification File
+ </Typography>
+ <List className={classes.bordered} dense>
+ <ListItem>
+ <ListItemText primary={specification.path} />
+ <ListItemSecondaryAction>
+ <IconButton aria-label="Edit">
+ <Edit />
+ </IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ </List>
+ <div className={classes.sdkHeader}>
+ <div className={classes.sdkTitleSection}>
+ <Typography variant="subheading" className={classes.indent}>
+ SDKs
+ </Typography>
+ </div>
+ <div className={classes.sdkHeaderActions}>
+ <Button variant="flat" color="primary">
+ Run all
+ </Button>
+ </div>
+ </div>
+ <List className={classes.bordered}>
+ {specification.sdks.map(sdk => (
+ <ListItem key={sdk.id}>
+ <SdkItem sdk={sdk} />
+ </ListItem>
+ ))}
+ </List>
+ </div>
  </ExpansionPanelDetails>
  </ExpansionPanel>
  )}