Skip to content

Commit

Permalink
GEP-124 update and fix showcase
Browse files Browse the repository at this point in the history
  • Loading branch information
@filippomc
filippomc committed Sep 27, 2024
1 parent 72f5d15 commit 2a77bd1
Show file tree
Hide file tree
Showing 45 changed files with 2,793 additions and 2,970 deletions.
14 changes: 8 additions & 6 deletions geppetto-showcase/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,18 @@
},
"dependencies": {
"@babel/runtime": "^7.15.4",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@fortawesome/fontawesome-free": "^6.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",
"@material-ui/core": "4.11.4",
"@material-ui/icons": "^4.11.2",
"@fortawesome/free-brands-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@metacell/geppetto-meta-client": "^2.0.0",
"@metacell/geppetto-meta-core": "^2.0.0",
"@metacell/geppetto-meta-ui": "^2.0.0",
"@mui/icons-material": "^6.1.1",
"@mui/material": "^6.1.1",
"@nosferatu500/react-sortable-tree": "3.0.5",
"@types/node": "^15.0.2",
"@types/react": "^17.0.5",
Expand All @@ -73,7 +77,6 @@
"d3": "4.0.0",
"d3-plugins-dist": "^3.2.0",
"file-saver": "^2.0.2",
"@fortawesome/fontawesome-free": "^6.6.0",
"griddle-react": "^1.13.1",
"handlebars": "^4.0.5",
"html-to-image": "^1.9.0",
Expand Down Expand Up @@ -117,7 +120,6 @@
"remarkable": "^1.7.3",
"stats.js": "^0.17.0",
"string-similarity": "^4.0.1",
"styled-components": "^4.3.2",
"text": "^0.1.0",
"three": "^0.118.0",
"three-render-objects": ">=1.13.3",
Expand Down
42 changes: 24 additions & 18 deletions geppetto-showcase/src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React, { Component } from 'react';
import {
createMuiTheme,
createTheme,
responsiveFontSizes,
MuiThemeProvider,
} from '@material-ui/core/styles';
import { blue, orange } from '@material-ui/core/colors';
ThemeProvider,
StyledEngineProvider,
} from '@mui/material/styles';
import { blue, orange } from '@mui/material/colors';
import Main from './components/Main';
import CssBaseline from '@material-ui/core/CssBaseline';
import CssBaseline from '@mui/material/CssBaseline';
const GEPPETTO = {};
window.GEPPETTO = GEPPETTO;

Expand All @@ -16,35 +17,40 @@ console.warn = () => null;

export default class App extends Component {
render () {
let theme = createMuiTheme({
let theme = createTheme({
typography: { fontFamily: 'Roboto, Helvetica, Arial, sans-serif' },
palette: {
type: 'dark',
mode: 'dark',
primary: { main: orange[500] },
secondary: { main: blue[500] },
},
overrides: {
MuiListItemIcon: {
root: {
'& i.my-svg-icon': {
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.32911 13.2291L3.85411 9.75414L2.67078 10.9291L7.32911 15.5875L17.3291 5.58748L16.1541 4.41248L7.32911 13.2291Z' fill='%23D6D5D7'/%3E%3C/svg%3E");`,
display: 'inline-block',
width: '16px',
height: '12px',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat'
styleOverrides: {
root: {
'& i.my-svg-icon': {
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.32911 13.2291L3.85411 9.75414L2.67078 10.9291L7.32911 15.5875L17.3291 5.58748L16.1541 4.41248L7.32911 13.2291Z' fill='%23D6D5D7'/%3E%3C/svg%3E");`,
display: 'inline-block',
width: '16px',
height: '12px',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat'
}
}
}
}

},
MuiMenuItem: { styleOverrides: { root: { display: 'flex !important', } } }
}
});
theme = responsiveFontSizes(theme);

return (
<MuiThemeProvider theme={theme}>
(<StyledEngineProvider injectFirst>(<ThemeProvider theme={theme}>
<CssBaseline />
<Main />
</MuiThemeProvider>
</ThemeProvider>)
</StyledEngineProvider>)
);
}
}
42 changes: 18 additions & 24 deletions geppetto-showcase/src/components/BottomNavigation.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,29 @@
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Divider from '@material-ui/core/Divider';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
import Box from '@mui/material/Box';
import pages from '../pages/index';
import { Link } from 'react-router-dom';

const styles = (theme) => ({
const styles = {
root: {
width: '100%',
display: 'flex',
},
grow: {
flexGrow: 1,
},
divider: {
marginBottom: theme.spacing(2),
},
});
grow: { flexGrow: 1, },
divider: theme => ({ marginBottom: theme.spacing(2), }),
};

class BottomNavigation extends Component {
getPages() {
getPages () {
const currentPath = window.location.pathname;
let nextPage = null;
let previousPage = null;
let next = 1;
let previous = -1;
const activePages = pages.filter((page) => {
return page.component != null;
});
const activePages = pages.filter(page => page.component != null);
for (let i = 0; i < activePages.length; i++) {
let page = activePages[i];
if (page.to === currentPath) {
Expand All @@ -47,13 +41,13 @@ class BottomNavigation extends Component {
return { previous: previousPage, next: nextPage };
}

render() {
const { classes, currentPageHandler } = this.props;
render () {
const { currentPageHandler } = this.props;
const pages = this.getPages();
return (
<div>
<Divider variant="middle" className={classes.divider} />
<div className={classes.root}>
<Divider variant="middle" sx={styles.divider} />
<Box sx={styles.root}>
{pages.previous !== null ? (
<Link to={pages.previous.to} style={{ textDecoration: 'none' }}>
<Button
Expand All @@ -65,7 +59,7 @@ class BottomNavigation extends Component {
</Button>
</Link>
) : null}
<span className={classes.grow} />
<Box component="span" sx={styles.grow} />
{pages.next !== null ? (
<Link to={pages.next.to} style={{ textDecoration: 'none' }}>
<Button
Expand All @@ -78,10 +72,10 @@ class BottomNavigation extends Component {
</Button>
</Link>
) : null}
</div>
</Box>
</div>
);
}
}

export default withStyles(styles, { withTheme: true })(BottomNavigation);
export default BottomNavigation;
39 changes: 19 additions & 20 deletions geppetto-showcase/src/components/DrawerContent.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ListItem from '@material-ui/core/ListItem';
import { ExpandLess, ExpandMore } from '@material-ui/icons';
import ListItemText from '@material-ui/core/ListItemText';
import List from '@material-ui/core/List';
import Collapse from '@material-ui/core/Collapse';
import { withStyles } from '@material-ui/core/styles';
import ListItem from '@mui/material/ListItem';
import { ExpandLess, ExpandMore } from '@mui/icons-material';
import ListItemText from '@mui/material/ListItemText';
import List from '@mui/material/List';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import pages from '../pages/index';
import stringSimilarity from 'string-similarity';

const styles = theme => ({
const styles = {
nested: {
paddingLeft: theme.spacing(4),
paddingLeft: 4,
textDecoration: 'none',
outline: 'none',
color: 'inherit',
Expand All @@ -27,18 +27,18 @@ const styles = theme => ({
},
},

lists: {
lists: theme => ({
backgroundColor: theme.palette.background.paper,
marginTop: theme.spacing(1),
},
marginTop: 1,
}),
listText: {
fontWeight: 400,
letterSpacing: 0,
textTransform: 'none',
fontSize: '0.875rem',
textAlign: 'left',
},
});
};

class DrawerContent extends Component {
constructor (props) {
Expand Down Expand Up @@ -139,19 +139,19 @@ class DrawerContent extends Component {
}

render () {
const { classes, theme, searchFilter, currentPageHandler } = this.props;
const { searchFilter, currentPageHandler } = this.props;
const content = this.filterContent(searchFilter);

return (
<nav className={classes.lists} aria-label="mailbox folders">
<Box component="nav" sx={styles.lists} aria-label="mailbox folders">
{Object.keys(content).map(key => {
const open = content[key].open;
const handler = content[key].handler;
const children = content[key].children;
return (
<List key={key}>
<ListItem key={key} button onClick={handler}>
<ListItemText className={classes.listText} primary={key} />
<ListItemText sx={styles.listText} primary={key} />
{open != null ? open ? <ExpandLess /> : <ExpandMore /> : null}
</ListItem>
<Collapse component="li" in={open} timeout="auto" unmountOnExit>
Expand All @@ -164,15 +164,14 @@ class DrawerContent extends Component {
<ListItem
key={value.name}
button
{...(this.isActivePage(to) && { style: { color: theme.palette.primary.main }, })}
className={classes.nested}
sx={theme => ({ ...styles.nested, color: this.isActivePage(to) ? theme.palette.text.primary : "inherit", })}
component={Link}
to={to}
disabled={disabled}
onClick={() => currentPageHandler(to)}
>
<ListItemText
className={classes.listText}
sx={styles.listText}
primary={name}
/>
</ListItem>
Expand All @@ -183,9 +182,9 @@ class DrawerContent extends Component {
</List>
);
})}
</nav>
</Box>
);
}
}

export default withStyles(styles, { withTheme: true })(DrawerContent);
export default DrawerContent;
Loading

0 comments on commit 2a77bd1

Please sign in to comment.