Merge pull request #67 from Unleash/improve-application-list-view-layout

minor improvements to application list and edit layouts

frontend/src/component/application/application-edit-component.js

@@ -3,13 +3,13 @@ import React, { Component, PureComponent } from 'react';
 
 import { Link } from 'react-router';
 import {
-    Grid, Cell,
+    Grid, Cell, Card, CardTitle, CardText, CardMenu,
     List, ListItem, ListItemContent,
     Textfield, Icon, ProgressBar,
     Tabs, Tab,
     Switch,
 } from 'react-mdl';
-import { HeaderTitle, ExternalIconLink, shorten } from '../common';
+import { IconLink, shorten, styles as commonStyles } from '../common';
 import { formatFullDateTime } from '../common/util';
 
 class StatefulTextfield extends Component {
@@ -152,20 +152,25 @@ class ClientApplications extends PureComponent {
 
 
         return (
-            <Grid className="mdl-color--white">
-                <Cell col={12}>
-                    <HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
-                        actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
-                    />
+            <Card shadow={0} className={commonStyles.fullwidth}>
+                <CardTitle style={{ paddingTop: '24px', paddingRight: '64px', wordBreak: 'break-all' }}>
+                    <Icon name={icon} /> {appName}
+                </CardTitle>
+                {description &&
+                    <CardText>{description}</CardText>
+                }
+                {url &&
+                    <CardMenu><IconLink url={url} icon="link"/></CardMenu>
+                }
+                <hr className={commonStyles.divider}/>
+                <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple
+                    tabBarProps={{ style: { width: '100%' } }} className="mdl-color--grey-100">
+                    <Tab>Details</Tab>
+                    <Tab>Edit</Tab>
+                </Tabs>
 
-                    <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
-                        <Tab>Details</Tab>
-                        <Tab>Edit</Tab>
-                    </Tabs>
-
-                    {content}
-                </Cell>
-            </Grid>
+                {content}
+            </Card>
         );
     }
 }

frontend/src/component/application/application-list-component.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { ProgressBar, Grid, Cell } from 'react-mdl';
-import { AppsLinkList, HeaderTitle } from '../common';
+import { ProgressBar, Card } from 'react-mdl';
+import { AppsLinkList, styles as commonStyles } from '../common';
 
 class ClientStrategies extends Component {
 
@@ -17,12 +17,9 @@ class ClientStrategies extends Component {
             return <ProgressBar indeterminate />;
         }
         return (
-            <Grid className="mdl-color--white">
-                <Cell col={12}>
-                    <HeaderTitle title="Applications" />
-                    <AppsLinkList apps={applications} />
-                </Cell>
-            </Grid>
+            <Card className={commonStyles.fullwidth}>
+                <AppsLinkList apps={applications} />
+            </Card>
         );
     }
 }

frontend/src/component/common/index.js

@@ -14,14 +14,16 @@ export { styles };
 export const shorten = (str, len = 50) => (str && str.length > len ? `${str.substring(0, len)}...` : str);
 
 export const AppsLinkList = ({ apps }) => (
-    <List style={{ textAlign: 'left' }}>
+    <List>
     {apps.length > 0 && apps.map(({ appName, description = '-', icon = 'apps' }) => (
         <ListItem twoLine key={appName}>
-            <ListItemContent avatar={icon} subtitle={shorten(description)}>
-                <Link key={appName} to={`/applications/${appName}`}>
+            <span className="mdl-list__item-primary-content">
+                <Icon name={icon} className="mdl-list__item-avatar"/>
+                <Link to={`/applications/${appName}`} className={[styles.listLink, styles.truncate].join(' ')}>
                     {appName}
+                    <span className={['mdl-list__item-sub-title', styles.truncate].join(' ')}>{description}</span>
                 </Link>
-            </ListItemContent>
+            </span>
         </ListItem>
     ))}
     </List>
@@ -99,19 +101,12 @@ export function getIcon (type) {
 };
 
 
-export const IconLink = ({ icon, children, ...props }) => (
-    <a {...props} style={{ textDecoration: 'none' }}>
-         <Icon name={icon} style={{ marginRight: '5px', verticalAlign: 'middle' }}/>
-         <span style={{ textDecoration: 'none', verticalAlign: 'middle' }}>{children}</span>
+export const IconLink = ({ url, icon }) => (
+    <a href={url} target="_blank" rel="noopener" className="mdl-color-text--grey-600">
+         <Icon name={icon}/>
     </a>
 );
 
-export const ExternalIconLink = ({ url, children }) => (
-    <IconLink icon="queue" href={url} target="_blank" rel="noopener">
-        {children}
-    </IconLink>
-);
-
 export const DropdownButton = ({ label, id }) => (
     <Button id={id} className={styles.dropdownButton}>
         {label}