Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Material UI #547

Draft
wants to merge 5 commits into
base: develop
Choose a base branch
from
Draft

Update Material UI #547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f7a4f04
GEP-124 refactor styling to remove old material API
filippomc Sep 25, 2024
ecc21d6
GEP-124 material ui base update to v6
filippomc Sep 25, 2024
05e7588
Merge branch 'develop' of github.com:MetaCell/geppetto-meta into develop
filippomc Sep 25, 2024
72f5d15
Merge branch 'develop' of github.com:MetaCell/geppetto-meta into develop
filippomc Sep 26, 2024
2a77bd1
GEP-124 update and fix showcase
filippomc Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions geppetto-showcase/package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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