paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 36 Packages Projects Releases Wiki Activity

Merge pull request #27 from spotify/rugvip/components

Browse Source 
frontend/app: move sidebar and header into separate components
This commit is contained in:
JD Welch
2020-02-04 11:12:16 +01:00
committed by GitHub
parent a4da0e9d24 ba19ca2558
commit c34c416964
5 changed files with 96 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/packages/app/src/App.tsx
+4 -64
View File
@@ -1,13 +1,9 @@
import React, { FC } from 'react';
import helloWorld, { MyComponent } from '@backstage/plugin-hello-world';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Typography from '@material-ui/core/Typography';
import SideBar from './components/SideBar';
import PageHeader from './components/PageHeader';
const useStyles = makeStyles(theme => ({
root: {
@@ -22,21 +18,6 @@ const useStyles = makeStyles(theme => ({
overflowX: 'hidden',
overflowY: 'auto',
},
sideBar: {
background: '#181818',
color: 'white',
height: '100vh',
paddingLeft: theme.spacing(2),
paddingTop: theme.spacing(2),
},
pageHeader: {
// FIXME: Make part of PageHeader component
background: 'linear-gradient(262.63deg, #19D15A 4.2%, #1CAB5B 72.01%)',
height: '120px',
paddingTop: theme.spacing(2),
paddingLeft: theme.spacing(2),
color: 'white',
},
pageBody: {
paddingLeft: theme.spacing(2),
paddingTop: theme.spacing(2),
@@ -51,50 +32,9 @@ const App: FC<{}> = () => {
return (
<div className={classes.root}>
{/* TODO: SideBar component */}
{/* Based on NewSideBar from Backstage */}
<div className={classes.sideBar}>
<Link href="#" variant="body1">
[Co-brand Logo]
</Link>
<List component="nav">
<ListItem button>
<ListItemText primary="Home" />
</ListItem>
<ListItem button>
<ListItemText primary="Services" />
</ListItem>
<ListItem button>
<ListItemText primary="Libraries" />
</ListItem>
<ListItem button>
<ListItemText primary="Websites" />
</ListItem>
<ListItem button>
<ListItemText primary="+ Create..." />
</ListItem>
</List>
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
spacing={2}
>
<Grid item>
<Avatar>A</Avatar>
</Grid>
<Typography variant="caption">$userName</Typography>
</Grid>
</div>
<SideBar />
<div className={classes.mainContentArea}>
{/* TODO: PageHeader component */}
<header className={classes.pageHeader}>
<Typography variant="h2">This is Backstage!</Typography>
<Typography variant="caption">
Backstage is an open platform for building developer portals
</Typography>
</header>
<PageHeader />
<div className={classes.pageBody}>
<Typography variant="body1">
{' '}
frontend/packages/app/src/components/PageHeader/PageHeader.tsx
+28
View File
@@ -0,0 +1,28 @@
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import React, { FC } from 'react';
const useStyles = makeStyles(theme => ({
root: {
background: 'linear-gradient(262.63deg, #19D15A 4.2%, #1CAB5B 72.01%)',
height: '120px',
paddingTop: theme.spacing(2),
paddingLeft: theme.spacing(2),
color: 'white',
},
}));
const SideBar: FC<{}> = () => {
const classes = useStyles();
return (
<header className={classes.root}>
<Typography variant="h2">This is Backstage!</Typography>
<Typography variant="caption">
Backstage is an open platform for building developer portals
</Typography>
</header>
);
};
export default SideBar;
frontend/packages/app/src/components/PageHeader/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from './PageHeader';
frontend/packages/app/src/components/SideBar/SideBar.tsx
+62
View File
@@ -0,0 +1,62 @@
import Avatar from '@material-ui/core/Avatar';
import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import React, { FC } from 'react';
const useStyles = makeStyles(theme => ({
root: {
background: '#181818',
color: 'white',
height: '100vh',
paddingLeft: theme.spacing(2),
paddingTop: theme.spacing(2),
},
}));
const SideBar: FC<{}> = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<Link href="#" variant="body1">
[Co-brand Logo]
</Link>
<List component="nav">
<ListItem button>
<ListItemText primary="Home" />
</ListItem>
<ListItem button>
<ListItemText primary="Services" />
</ListItem>
<ListItem button>
<ListItemText primary="Libraries" />
</ListItem>
<ListItem button>
<ListItemText primary="Websites" />
</ListItem>
<ListItem button>
<ListItemText primary="+ Create..." />
</ListItem>
</List>
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
spacing={2}
>
<Grid item>
<Avatar>A</Avatar>
</Grid>
<Typography variant="caption">$userName</Typography>
</Grid>
</div>
);
};
export default SideBar;
frontend/packages/app/src/components/SideBar/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from './SideBar';