Skip to content

Commit

Permalink
Merge pull request #4948 from marmelab/example-demo-ui
Browse files Browse the repository at this point in the history 
De-googleify e-commerce demo
  • Loading branch information
@djhi
djhi authored Jun 17, 2020
2 parents aff1d9c + 1c05f0a commit a945a14
Show file tree
Hide file tree
Showing 18 changed files with 341 additions and 319 deletions.
37 changes: 0 additions & 37 deletions examples/demo/src/dashboard/CardIcon.tsx
View file

This file was deleted.

70 changes: 70 additions & 0 deletions examples/demo/src/dashboard/CardWithIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import * as React from 'react';
import { FC, createElement } from 'react';
import { Card, makeStyles, Box, Typography, Divider } from '@material-ui/core';
import { Link } from 'react-router-dom';

import cartouche from './cartouche.png';
import cartoucheDark from './cartoucheDark.png';

interface Props {
icon: FC<any>;
to: string;
title?: string;
subtitle?: string | number;
}

const useStyles = makeStyles(theme => ({
card: {
minHeight: 52,
flex: '1',
'& a': {
textDecoration: 'none',
color: 'inherit',
},
},
main: (props: Props) => ({
overflow: 'inherit',
padding: 16,
background: `url(${
theme.palette.type === 'dark' ? cartoucheDark : cartouche
}) no-repeat`,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
'& .icon': {
color: theme.palette.type === 'dark' ? 'inherit' : '#dc2440',
},
}),
title: {},
}));

const CardWithIcon: FC<Props> = props => {
const { icon, title, subtitle, to, children } = props;
const classes = useStyles(props);
return (
<Card className={classes.card}>
<Link to={to}>
<div className={classes.main}>
<Box width="3em" className="icon">
{createElement(icon, { fontSize: 'large' })}
</Box>
<Box textAlign="right">
<Typography
className={classes.title}
color="textSecondary"
>
{title}
</Typography>
<Typography variant="h5" component="h2">
{subtitle || ' '}
</Typography>
</Box>
</div>
</Link>
{children && <Divider />}
{children}
</Card>
);
};

export default CardWithIcon;
95 changes: 47 additions & 48 deletions examples/demo/src/dashboard/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,14 @@ interface State {
const styles = {
flex: { display: 'flex' },
flexColumn: { display: 'flex', flexDirection: 'column' },
leftCol: { flex: 1, marginRight: '1em' },
rightCol: { flex: 1, marginLeft: '1em' },
singleCol: { marginTop: '2em', marginBottom: '2em' },
leftCol: { flex: 1, marginRight: '0.5em' },
rightCol: { flex: 1, marginLeft: '0.5em' },
singleCol: { marginTop: '1em', marginBottom: '1em' },
};

const Spacer = () => <span style={{ width: '1em' }} />;
const VerticalSpacer = () => <span style={{ height: '1em' }} />;

const Dashboard: FC = () => {
const [state, setState] = useState<State>({});
const version = useVersion();
Expand All @@ -55,7 +58,7 @@ const Dashboard: FC = () => {
theme.breakpoints.down('xs')
);
const isSmall = useMediaQuery((theme: Theme) =>
theme.breakpoints.down('sm')
theme.breakpoints.down('md')
);

const fetchOrders = useCallback(async () => {
Expand Down Expand Up @@ -156,22 +159,15 @@ const Dashboard: FC = () => {
return isXSmall ? (
<div>
<div style={styles.flexColumn as CSSProperties}>
<div style={{ marginBottom: '2em' }}>
<Welcome />
</div>
<div style={styles.flex}>
<MonthlyRevenue value={revenue} />
<NbNewOrders value={nbNewOrders} />
</div>
<div style={styles.singleCol}>
<OrderChart orders={recentOrders} />
</div>
<div style={styles.flex}>
<PendingOrders
orders={pendingOrders}
customers={pendingOrdersCustomers}
/>
</div>
<Welcome />
<MonthlyRevenue value={revenue} />
<VerticalSpacer />
<NbNewOrders value={nbNewOrders} />
<VerticalSpacer />
<PendingOrders
orders={pendingOrders}
customers={pendingOrdersCustomers}
/>
</div>
</div>
) : isSmall ? (
Expand All @@ -181,49 +177,52 @@ const Dashboard: FC = () => {
</div>
<div style={styles.flex}>
<MonthlyRevenue value={revenue} />
<Spacer />
<NbNewOrders value={nbNewOrders} />
</div>
<div style={styles.singleCol}>
<OrderChart orders={recentOrders} />
</div>
<div style={styles.flex}>
<div style={styles.singleCol}>
<PendingOrders
orders={pendingOrders}
customers={pendingOrdersCustomers}
/>
</div>
</div>
) : (
<div style={styles.flex}>
<div style={styles.leftCol}>
<div style={styles.flex}>
<MonthlyRevenue value={revenue} />
<NbNewOrders value={nbNewOrders} />
</div>
<div style={styles.singleCol}>
<Welcome />
</div>
<div style={styles.singleCol}>
<OrderChart orders={recentOrders} />
<>
<Welcome />
<div style={styles.flex}>
<div style={styles.leftCol}>
<div style={styles.flex}>
<MonthlyRevenue value={revenue} />
<Spacer />
<NbNewOrders value={nbNewOrders} />
</div>
<div style={styles.singleCol}>
<OrderChart orders={recentOrders} />
</div>
<div style={styles.singleCol}>
<PendingOrders
orders={pendingOrders}
customers={pendingOrdersCustomers}
/>
</div>
</div>
<div style={styles.singleCol}>
<PendingOrders
orders={pendingOrders}
customers={pendingOrdersCustomers}
/>
<div style={styles.rightCol}>
<div style={styles.flex}>
<PendingReviews
nb={nbPendingReviews}
reviews={pendingReviews}
customers={pendingReviewsCustomers}
/>
<Spacer />
<NewCustomers />
</div>
</div>
</div>
<div style={styles.rightCol}>
<div style={styles.flex}>
<PendingReviews
nb={nbPendingReviews}
reviews={pendingReviews}
customers={pendingReviewsCustomers}
/>
<NewCustomers />
</div>
</div>
</div>
</>
);
};

Expand Down
38 changes: 7 additions & 31 deletions examples/demo/src/dashboard/MonthlyRevenue.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,23 @@
import * as React from 'react';
import { FC } from 'react';
import Card from '@material-ui/core/Card';
import DollarIcon from '@material-ui/icons/AttachMoney';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import { useTranslate } from 'react-admin';

import CardIcon from './CardIcon';
import CardWithIcon from './CardWithIcon';

interface Props {
value?: number;
}

const useStyles = makeStyles({
main: {
flex: '1',
marginRight: '1em',
marginTop: 20,
},
card: {
overflow: 'inherit',
textAlign: 'right',
padding: 16,
minHeight: 52,
},
title: {},
});

const MonthlyRevenue: FC<Props> = ({ value }) => {
const translate = useTranslate();
const classes = useStyles();
return (
<div className={classes.main}>
<CardIcon Icon={DollarIcon} bgColor="#31708f" />
<Card className={classes.card}>
<Typography className={classes.title} color="textSecondary">
{translate('pos.dashboard.monthly_revenue')}
</Typography>
<Typography variant="h5" component="h2">
{value}
</Typography>
</Card>
</div>
<CardWithIcon
to="/commands"
icon={DollarIcon}
title={translate('pos.dashboard.monthly_revenue')}
subtitle={value}
/>
);
};

Expand Down
38 changes: 7 additions & 31 deletions examples/demo/src/dashboard/NbNewOrders.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,23 @@
import * as React from 'react';
import { FC } from 'react';
import Card from '@material-ui/core/Card';
import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import { useTranslate } from 'react-admin';

import CardIcon from './CardIcon';
import CardWithIcon from './CardWithIcon';

interface Props {
value?: number;
}

const useStyles = makeStyles({
main: {
flex: '1',
marginLeft: '1em',
marginTop: 20,
},
card: {
overflow: 'inherit',
textAlign: 'right',
padding: 16,
minHeight: 52,
},
title: {},
});

const NbNewOrders: FC<Props> = ({ value }) => {
const translate = useTranslate();
const classes = useStyles();
return (
<div className={classes.main}>
<CardIcon Icon={ShoppingCartIcon} bgColor="#ff9800" />
<Card className={classes.card}>
<Typography className={classes.title} color="textSecondary">
{translate('pos.dashboard.new_orders')}
</Typography>
<Typography variant="h5" component="h2">
{value}
</Typography>
</Card>
</div>
<CardWithIcon
to="/commands"
icon={ShoppingCartIcon}
title={translate('pos.dashboard.new_orders')}
subtitle={value}
/>
);
};

Expand Down
Loading

0 comments on commit a945a14

Please sign in to comment.