Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-11 00:08:30 +01:00
Code Issues Projects Releases Wiki Activity

minor improvements to application list and view layouts

Browse Source
This commit is contained in:
vsandvold 2017-02-14 12:11:18 +01:00
parent d87ce81a70
commit 9d76e6ab42
3 changed files with 32 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/component/application/application-edit-component.js
View File

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

11
frontend/src/component/application/application-list-component.js
View File

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

20
frontend/src/component/common/index.js
View File

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