Commit bfb23a4f authored by John Sparger's avatar John Sparger
Browse files

GlobalAppBar content now positions and resizes correctly

parent 9d402e8c
......@@ -3,7 +3,11 @@
## How to install this module in your app
You can install `ce-ui-common` in a dependent directly from this git repository:
### Prerequisites
First, make sure you have installed all of `ce-ui-common`'s peer dependencies into your app. You can find the list of peer dependencies in this repository's `package.json`.
### Installation
You can install `ce-ui-common` in a dependent app directly from this git repository:
```
npm install git+https://gitlab.esss.lu.se/ccce/dev/ce-ui-common.git
......
import { AppBar, Box, styled, Toolbar, Typography } from "@mui/material";
const defaultStyle = ({ theme }) => ({
"& > .AppBar > .Toolbar": {
"& > .Toolbar": {
"& > .HomeBox": {
"margin-right": theme.spacing(2)
},
......@@ -14,21 +14,19 @@ const defaultStyle = ({ theme }) => ({
export function CeuiButtonAppBar({ title, actionButton, homeButton, className, ...delegated }) {
return (
<Box className={`${className} ButtonAppBar`} {...delegated}>
<AppBar className="AppBar" position="fixed">
<Toolbar className="Toolbar">
<div className="HomeBox">
{homeButton}
</div>
<Typography variant="title" className="Title" noWrap>
{title}
</Typography>
<div className="ActionBox">
{actionButton}
</div>
</Toolbar>
</AppBar>
</Box>
<AppBar className={`${className} ButtonAppBar`} position="fixed" {...delegated}>
<Toolbar className="Toolbar">
<div className="HomeBox">
{homeButton}
</div>
<Typography variant="title" className="Title" noWrap>
{title}
</Typography>
<div className="ActionBox">
{actionButton}
</div>
</Toolbar>
</AppBar>
);
}
......
import { Box, styled } from "@mui/material";
import { Box, CssBaseline, styled, Toolbar, Typography } from "@mui/material";
import { createContext, useCallback, useState } from "react";
import { ButtonAppBar } from "./ButtonAppBar";
import { MenuDrawer } from "./MenuDrawer";
const defaultStyle = ({ theme, ...props }) => ({
"& > .ButtonAppBar > .AppBar": {
"z-index": theme.zIndex.drawer + 1
display: "flex",
"& > .ButtonAppBar": {
"z-index": theme.zIndex.drawer + 1
},
"& > .MenuDrawer > .Drawer > .MuiDrawer-paper > .Spacer": {
"padding": 0,
...theme.mixins.toolbar
"& > .ContentBox": {
padding: theme.spacing(3),
},
"& > .Spacer": {
"padding": 0,
...theme.mixins.toolbar
"& > .MenuDrawer": {
boxSizing: "border-box",
"& > .MuiDrawer-paper > .Spacer": {
...theme.mixins.toolbar
},
},
"& .GlobalAppBar-Content": {
"margin-left": props.widthOpen,
}
})
export const GlobalAppBarContext = createContext({
......@@ -46,8 +45,10 @@ export function CeuiGlobalAppBar({ defaultHomeButton, defaultActionButton, defau
{menuItems}
</MenuDrawer>
<GlobalAppBarContext.Provider value={value}>
<div className="Spacer" />
<div className="GlobalAppBar-Content" >Some Dev Content</div>
<Box component="main" className="ContentBox">
<Toolbar />
{children}
</Box>
</GlobalAppBarContext.Provider>
</Box>
</>
......
import { ThemeProvider } from "@emotion/react";
import { Home } from "@mui/icons-material";
import { Button, IconButton } from "@mui/material";
import { Button, IconButton, Typography } from "@mui/material";
import { theme } from "../../style/Theme";
import { GlobalAppBar } from "./GlobalAppBar";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Navigation/GlobalAppBar",
component: GlobalAppBar
component: GlobalAppBar,
parameters: {
layout: 'fullscreen',
},
}
const Harness = (args) => {
......@@ -20,7 +23,33 @@ const Harness = (args) => {
return (
<GlobalAppBar {...{menuItems, ...args}}>
<div>Here is some content!</div>
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
Convallis convallis tellus id interdum velit laoreet id donec ultrices.
Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
feugiat vivamus at augue. At augue eget arcu dictum varius duis at
consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
sapien faucibus et molestie ac.
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
posuere sollicitudin aliquam ultrices sagittis orci a.
</Typography>
</GlobalAppBar>
)
}
......@@ -32,5 +61,5 @@ Default.args = {
defaultHomeButton: <IconButton color="inherit"><Home /></IconButton>,
defaultTitle: "Example title",
defaultActionButton: <Button variant="filled">Login</Button>,
widthOpen: "241px"
widthOpen: "241px",
}
......@@ -3,15 +3,17 @@ import { Box, IconButton, Stack, styled, Typography } from "@mui/material";
import { Drawer, DrawerFooter } from "./Drawer";
const defaultStyle = ({ theme, ...props }) => {
const width = props.open ? (props.widthOpen ?? 240) : (props.widthClosed ?? 80)
return ({
width,
"& > .Spacer": {
"padding": theme.spacing(2),
...(props.toolbar && theme.mixins.toolbar)
},
"& > .Drawer,.MuiDrawer-paper": {
"width": props.open ? (props.widthOpen ?? 240) : (props.widthClosed ?? 80)
"& > .MuiDrawer-paper": {
width,
},
"& > .Drawer > .MuiDrawer-paper > .Footer": {
"& > .MuiDrawer-paper > .Footer": {
"& > .ToggleBox": {
"display": "flex",
"padding": theme.spacing(1),
......@@ -26,26 +28,25 @@ const defaultStyle = ({ theme, ...props }) => {
export function CeuiMenuDrawer({ open, toggleDrawer, toolbar = true, children, className, ...delegated }) {
return (
<Box className={`${className} MenuDrawer`} {...delegated}>
<Drawer
className="Drawer"
variant="permanent"
open={open}
onClose={toggleDrawer}
ModalProps={{ keepMounted: true }} // better performance on mobile
>
<div className="Spacer" />
{children}
<DrawerFooter className="Footer">
<Box className="ToggleBox">
<IconButton className="ToggleButton" onClick={toggleDrawer}>
{open ? <ChevronLeft /> : <ChevronRight />}
</IconButton>
{open ? <Stack direction="column" justifyContent="center"><Typography>Collapse sidebar</Typography></Stack> : <></>}
</Box>
</DrawerFooter>
</Drawer>
</Box>
<Drawer
className={`${className} MenuDrawer`}
variant="permanent"
open={open}
onClose={toggleDrawer}
ModalProps={{ keepMounted: true }} // better performance on mobile
{...delegated}
>
<Box className="Spacer" />
{children}
<DrawerFooter className="Footer">
<Box className="ToggleBox">
<IconButton className="ToggleButton" onClick={toggleDrawer}>
{open ? <ChevronLeft /> : <ChevronRight />}
</IconButton>
{open ? <Stack direction="column" justifyContent="center"><Typography>Collapse sidebar</Typography></Stack> : <></>}
</Box>
</DrawerFooter>
</Drawer>
);
}
......
......@@ -26,15 +26,14 @@ export const theme = createTheme({
props: { variant: 'themeExample' },
style: (props) => {
return ({
"& .AppBar": {
"background-color": "black",
},
"& .HomeBox,.ActionBox": {
"border-style": "dashed",
"border-color": props.theme.palette.primary.main,
"border-width": props.theme.spacing(.5)
}
})},
"& > .Toolbar > .HomeBox,.ActionBox": {
"border-style": "dashed",
"border-color": props.theme.palette.primary.main,
"border-width": props.theme.spacing(.5)
}
})
},
}
]
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment