Skip to content

Commit c124cfa

Browse files
BasicPrimitivesBasicPrimitives
committed
Added simple drawer for sm
1 parent c282cda commit c124cfa

6 files changed

Lines changed: 154 additions & 84 deletions

File tree

‎client/src/containers/App/App.js‎

Lines changed: 74 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
1-
import React from 'react';
1+
import React, {useEffect} from 'react';
22
import clsx from 'clsx';
33
import { makeStyles, useTheme } from '@material-ui/core/styles';
44
import Drawer from '@material-ui/core/Drawer';
55
import CssBaseline from '@material-ui/core/CssBaseline';
6-
import AppBar from '@material-ui/core/AppBar';
7-
import Toolbar from '@material-ui/core/Toolbar';
8-
import Typography from '@material-ui/core/Typography';
96
import Divider from '@material-ui/core/Divider';
107
import IconButton from '@material-ui/core/IconButton';
11-
import MenuIcon from '@material-ui/icons/Menu';
128
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
139
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
1410
import Helmet from 'react-helmet';
15-
import Link from '@material-ui/core/Link';
16-
import GitHubIcon from '@material-ui/icons/GitHub';
1711
import AppDrawer from './AppDrawer';
1812
import Version from './Version';
13+
import useMediaQuery from '@material-ui/core/useMediaQuery';
14+
import Hidden from '@material-ui/core/Hidden';
15+
import withWidth from '@material-ui/core/withWidth';
16+
import AppBar from './AppBar';
1917

2018
const drawerWidth = 350;
2119

@@ -40,6 +38,9 @@ const useStyles = makeStyles((theme) => ({
4038
duration: theme.transitions.duration.enteringScreen,
4139
}),
4240
},
41+
appBarShiftStatic: {
42+
flexGrow: 1
43+
},
4344
menuButton: {
4445
marginRight: theme.spacing(2),
4546
},
@@ -77,13 +78,18 @@ const useStyles = makeStyles((theme) => ({
7778
}),
7879
marginLeft: 0,
7980
},
81+
contentStatic: {
82+
flexGrow: 1,
83+
padding: theme.spacing(1),
84+
}
8085
}));
8186

8287
const App = (props) => {
8388
const { children } = props;
8489
const classes = useStyles();
8590
const theme = useTheme();
86-
const [open, setOpen] = React.useState(true);
91+
const [open, setOpen] = React.useState(false);
92+
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
8793

8894
const handleDrawerOpen = () => {
8995
setOpen(true);
@@ -93,74 +99,73 @@ const App = (props) => {
9399
setOpen(false);
94100
};
95101

102+
useEffect(() => {
103+
setOpen(!isSmallScreen);
104+
}, [isSmallScreen]);
105+
96106
return (
97107
<div className={classes.root}>
98108
<Helmet titleTemplate="Basic Primitives Diagrams %s" />
99109
<CssBaseline />
100-
<AppBar
101-
position="fixed"
102-
className={clsx(classes.appBar, {
103-
[classes.appBarShift]: open,
104-
})}
105-
>
106-
<Toolbar>
107-
<IconButton
108-
color="inherit"
109-
aria-label="open drawer"
110-
onClick={handleDrawerOpen}
111-
edge="start"
112-
className={clsx(classes.menuButton, open && classes.hide)}
113-
>
114-
<MenuIcon />
115-
</IconButton>
116-
<div className={classes.grow}>
117-
<Typography variant="h6" noWrap>
118-
Basic Primitives
119-
</Typography>
110+
<Hidden smDown implementation="js">
111+
<AppBar open={open} className={clsx(classes.appBar, {
112+
[classes.appBarShift]: open,
113+
})} handleDrawerOpen={handleDrawerOpen}
114+
/>
115+
<Drawer
116+
className={classes.drawer}
117+
variant="persistent"
118+
anchor="left"
119+
open={open}
120+
classes={{
121+
paper: classes.drawerPaper,
122+
}}
123+
>
124+
<div className={classes.drawerHeader}>
125+
{Version()}
126+
<IconButton onClick={handleDrawerClose}>
127+
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
128+
</IconButton>
129+
</div>
130+
<Divider />
131+
<AppDrawer onClose={() => setOpen(!isSmallScreen)} />
132+
</Drawer>
133+
<main
134+
className={clsx(classes.content, {
135+
[classes.contentShift]: open,
136+
})}
137+
>
138+
<div className={classes.drawerHeader} />
139+
{children}
140+
</main>
141+
</Hidden>
142+
<Hidden mdUp implementation="js">
143+
<AppBar open={open} className={classes.appBarShiftStatic} handleDrawerOpen={handleDrawerOpen} />
144+
<Drawer
145+
className={classes.drawer}
146+
anchor="left"
147+
open={open}
148+
classes={{
149+
paper: classes.drawerPaper,
150+
}}
151+
>
152+
<div className={classes.drawerHeader}>
153+
{Version()}
154+
<IconButton onClick={handleDrawerClose}>
155+
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
156+
</IconButton>
120157
</div>
121-
<IconButton
122-
color="inherit"
123-
edge="end"
124-
aria-label="GitHub repos."
125-
>
126-
<Link
127-
color="inherit"
128-
href="https://github.com/BasicPrimitives"
129-
>
130-
<GitHubIcon />
131-
</Link>
132-
</IconButton>
133-
</Toolbar>
134-
</AppBar>
135-
<Drawer
136-
className={classes.drawer}
137-
variant="persistent"
138-
anchor="left"
139-
open={open}
140-
classes={{
141-
paper: classes.drawerPaper,
142-
}}
143-
>
144-
<div className={classes.drawerHeader}>
145-
{Version()}
146-
<IconButton onClick={handleDrawerClose}>
147-
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
148-
</IconButton>
149-
</div>
150-
<Divider />
151-
<AppDrawer />
152-
</Drawer>
153-
<main
154-
className={clsx(classes.content, {
155-
[classes.contentShift]: open,
156-
})}
157-
>
158-
<div className={classes.drawerHeader} />
159-
{children}
160-
</main>
158+
<Divider />
159+
<AppDrawer onClose={() => setOpen(!isSmallScreen)} />
160+
</Drawer>
161+
<main className={classes.contentStatic} >
162+
<div className={classes.drawerHeader} />
163+
{children}
164+
</main>
165+
</Hidden>
161166
</div>
162167
);
163168
}
164169

165170

166-
export default App;
171+
export default withWidth()(App);

‎client/src/containers/App/AppBar.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import AppBar from '@material-ui/core/AppBar';
4+
import Link from '@material-ui/core/Link';
5+
import GitHubIcon from '@material-ui/icons/GitHub';
6+
import IconButton from '@material-ui/core/IconButton';
7+
import MenuIcon from '@material-ui/icons/Menu';
8+
import clsx from 'clsx';
9+
import Toolbar from '@material-ui/core/Toolbar';
10+
import Typography from '@material-ui/core/Typography';
11+
12+
const useStyles = makeStyles((theme) => ({
13+
grow: {
14+
flexGrow: 1,
15+
},
16+
menuButton: {
17+
marginRight: theme.spacing(2),
18+
},
19+
hide: {
20+
display: 'none',
21+
},
22+
}));
23+
24+
export default function ApplicationBar(props) {
25+
const { open, className, handleDrawerOpen } = props;
26+
const classes = useStyles();
27+
return (
28+
<AppBar
29+
position="fixed"
30+
className={className}
31+
>
32+
<Toolbar>
33+
<IconButton
34+
color="inherit"
35+
aria-label="open drawer"
36+
onClick={handleDrawerOpen}
37+
edge="start"
38+
className={clsx(classes.menuButton, open && classes.hide)}
39+
>
40+
<MenuIcon />
41+
</IconButton>
42+
<div className={classes.grow}>
43+
<Typography variant="h6" noWrap>
44+
Basic Primitives
45+
</Typography>
46+
</div>
47+
<IconButton
48+
color="inherit"
49+
edge="end"
50+
aria-label="GitHub repos."
51+
>
52+
<Link
53+
color="inherit"
54+
href="https://github.com/BasicPrimitives"
55+
>
56+
<GitHubIcon />
57+
</Link>
58+
</IconButton>
59+
</Toolbar>
60+
</AppBar>
61+
);
62+
}

‎client/src/containers/FamilyChartWithAnnotations/FamilyChartWithAnnotations.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useMemo, useCallback } from 'react';
1+
import React, { useEffect, useMemo } from 'react';
22
import Helmet from 'react-helmet';
33
import Container from '@material-ui/core/Container';
44
import Drawer from '@material-ui/core/Drawer';

‎client/src/containers/ReactUseCases/ReactHowToUse.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { faUserPlus, faUserSlash, faCoffee, faSitemap, faUser, faComment, faCog
1515
import primitives from 'basicprimitives';
1616
import { OrgDiagram, FamDiagram } from 'basicprimitivesreact';
1717
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
18-
import { DndProvider, DropTarget, DragSource } from 'react-dnd';
18+
import { DndProvider, useDrag, useDrop, DropTarget, DragSource } from 'react-dnd';
1919
import { HTML5Backend } from 'react-dnd-html5-backend';
2020
require('./global.scss');
2121

@@ -70,6 +70,8 @@ function ReactHowToUse(props) {
7070
DndProvider,
7171
DropTarget,
7272
DragSource,
73+
useDrag,
74+
useDrop,
7375
HTML5Backend,
7476
FontAwesomeIcon,
7577
faUserPlus,

‎client/src/containers/Reference/ApiReference.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useEffect } from 'react';
22
import Helmet from 'react-helmet';
33
import { Link } from '@reach/router';
4+
import TableContainer from '@material-ui/core/TableContainer';
5+
import Paper from '@material-ui/core/Paper';
46
import Table from '@material-ui/core/Table';
57
import TableBody from '@material-ui/core/TableBody';
68
import TableCell from '@material-ui/core/TableCell';
@@ -29,12 +31,6 @@ function ApiReference(props) {
2931
let key = 0;
3032

3133
function handleIterate(Tag, props, children, level) {
32-
if (level === 1) {
33-
props = {
34-
...props,
35-
className: 'first-level-class'
36-
};
37-
}
3834
key++;
3935
switch(Tag) {
4036
case "h2":
@@ -56,7 +52,7 @@ function ApiReference(props) {
5652
}
5753
break;
5854
case 'table':
59-
return <Table key={key}>{children}</Table>;
55+
return <Paper style={{overflowX: "auto"}}><Table style={{minWidth: 640}} key={key}>{children}</Table></Paper>;
6056
case 'tbody':
6157
return <TableBody key={key}>{children}</TableBody>;
6258
case 'thead':
@@ -76,6 +72,8 @@ function ApiReference(props) {
7672
return <TableCell style={style} key={key}>{children}</TableCell>;
7773
case 'td':
7874
return <TableCell key={key}>{children}</TableCell>;
75+
case 'span':
76+
return <Container maxWidth={false}>{children}</Container>;
7977
default:
8078
break;
8179
}
@@ -88,10 +86,10 @@ function ApiReference(props) {
8886
}
8987

9088
return (markdown ?
91-
<Container fixed>
89+
<>
9290
<Helmet title={` API Reference - ${title}`} />
9391
<MDReactComponent text={markdown} onIterate={handleIterate} />
94-
</Container>
92+
</>
9593
: <>
9694
</>
9795
);

‎server/src/static/orgeditor.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
## Demoed features
22
### General
33
* Diagram reset
4-
* PDF file generation
4+
* [PDF file generation](https://pdfkit.org/)
55
* Diagram options drawer
66
* Nodes search drawer
77
* Add new root node
8-
* Drag & Drop node from parent to parent
8+
* [React](https://reactjs.org/)
9+
* [Redux](https://redux.js.org/)
10+
* [React Drag & Drop support](https://react-dnd.github.io/react-dnd/docs/overview)
11+
* [React Material-UI](https://material-ui.com/)
912
### Dual Mode View
10-
* Showing two diagram components side by side lets you see distant parts of the same diagram
13+
* Showing two diagraming components side by side let you see distant parts of the same diagram
1114
* Zoom in on one side and Drag & Drop nodes to other side.
1215
### Diagram node:
1316
* Edit node properties
@@ -22,5 +25,5 @@
2225
* Remove item from selected nodes
2326

2427

25-
## Matrix children layout
28+
### Matrix children layout
2629
Usually organizational charts grow horizontally more than vertically. So keeping nodes in square formation saves horizontal space. It is important to fit matrix into width of screen, it is fine to scroll nodes vertically or horizontally, but necessaty to scroll both ways creates usability issue, so chart support extra option `maximumColumnsInMatrix` limiting number of columns. For example when node has 4 children they are matrxied into 2 * 2 matrix, 9 children are matrixed into 3 * 3 matrix, 16 into 4 * 4 and so on, but if we put limitation for number of columns for example at 4 then 20 children would be matrixed into 4 * 5 matrix.

0 commit comments

Comments
 (0)