From 7eac10a075f865c6a56559e314c3005950ea1f7d Mon Sep 17 00:00:00 2001 From: vidhya-metacell Date: Thu, 21 Jul 2022 13:55:08 +0200 Subject: [PATCH 1/5] #13 Introduce the main theme to meta diagram --- src/index.tsx | 15 ++++-- theme.tsx | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 134 insertions(+), 4 deletions(-) create mode 100644 theme.tsx diff --git a/src/index.tsx b/src/index.tsx index 43b1da5..95843e4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,6 +10,10 @@ import { MetaNodeModel } from './react-diagrams/MetaNodeModel'; import { getLinkModel } from './helpers/linksHelper'; import { makeStyles } from '@mui/styles'; import Sidebar from './components/Sidebar'; +import { ThemeProvider } from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import theme from "./theme"; +import { Box } from '@mui/material'; const useStyles = makeStyles(_ => ({ container: { @@ -75,10 +79,13 @@ const MetaDiagram = ({ ? canvasClassName : classes.canvasContainer; return ( -
- - -
+ + + + + + + ); }; diff --git a/theme.tsx b/theme.tsx new file mode 100644 index 0000000..0aa13bd --- /dev/null +++ b/theme.tsx @@ -0,0 +1,123 @@ +import { createTheme } from '@mui/material/styles'; +import vars from './components/assets/styles/variables'; + +const { + primaryBg, + fontFamily, + chipTextColor, + chipBgColor, + textWhite, + listItemActiveBg, + listSelectedTextColor, + listBoxShadow, + listBorderColor} = vars; + +const theme: any = { + components: { + MuiCssBaseline: { + styleOverrides: ` + html { + background: ${primaryBg}; + font-family: ${fontFamily}; + } + body { + background-color:${primaryBg}; + font-family: ${fontFamily}; + font-size: 1rem; + } + `, + }, + + MuiList: { + styleOverrides: { + root: { + '&.customSwitch': { + padding: '0.125rem', + background: chipTextColor, + borderRadius: '0.5rem', + display: 'flex', + + '& .MuiListItemButton-root': { + padding: '0.25rem 0.75rem', + borderRadius: '0.4375rem', + width: '10.59375rem', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + + '&:not(:last-child)': { + marginBottom: '0', + }, + + '&.Mui-disabled': { + opacity: 1, + }, + + '&.Mui-selected': { + background: textWhite, + boxShadow: listBoxShadow, + border: `0.03125rem solid ${listBorderColor}`, + + '& .MuiTypography-root': { + color: listSelectedTextColor + }, + }, + }, + + '& .MuiChip-root': { + marginLeft: '0.25rem' + }, + + '& .MuiTypography-root': { + fontWeight: 500, + fontSize: '0.8125rem', + lineHeight: '1.25rem', + letterSpacing: '-0.005rem', + color: chipBgColor, + margin: 0 + }, + }, + } + } + }, + + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 'inherit' + }, + } + }, + + MuiListItemButton: { + styleOverrides: { + root: { + padding: 0, + width: '2.5rem', + height: '2.5rem', + borderRadius: '50%', + justifyContent: 'center', + backgroundColor: chipTextColor, + '&:hover': { + backgroundColor: chipTextColor, + }, + '&:not(:last-child)': { + marginBottom: '0.75rem', + }, + '&.Mui-selected': { + backgroundColor: listItemActiveBg, + '&:hover': { + backgroundColor: listItemActiveBg, + }, + }, + + '&.Mui-disabled': { + opacity: 0.8, + }, + }, + } + }, + }, +}; + +export default createTheme(theme); From 8adc92dcd28713939082fd3485e1db1db8a9f4c5 Mon Sep 17 00:00:00 2001 From: vidhya-metacell Date: Thu, 21 Jul 2022 14:48:09 +0200 Subject: [PATCH 2/5] #13 Make theme customisable from the example project --- example/index.tsx | 2 +- src/index.tsx | 7 ++- src/theme.ts | 128 ++++++++++++++++++++++++++++++++++++++++++++++ theme.tsx | 123 -------------------------------------------- 4 files changed, 134 insertions(+), 126 deletions(-) create mode 100644 src/theme.ts delete mode 100644 theme.tsx diff --git a/example/index.tsx b/example/index.tsx index 0e2abef..8e888a3 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -33,7 +33,7 @@ const App = () => { return (
- +
); }; diff --git a/src/index.tsx b/src/index.tsx index 95843e4..894abbc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,7 +10,7 @@ import { MetaNodeModel } from './react-diagrams/MetaNodeModel'; import { getLinkModel } from './helpers/linksHelper'; import { makeStyles } from '@mui/styles'; import Sidebar from './components/Sidebar'; -import { ThemeProvider } from '@mui/material/styles'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import theme from "./theme"; import { Box } from '@mui/material'; @@ -33,6 +33,7 @@ interface MetaDiagramProps { componentsMap: ComponentsMap; wrapperClassName?: string; canvasClassName?: string; + customThemeVariables: object; } const MetaDiagram = ({ @@ -41,6 +42,7 @@ const MetaDiagram = ({ componentsMap, wrapperClassName, canvasClassName, + customThemeVariables, }: MetaDiagramProps) => { const classes = useStyles(); @@ -78,8 +80,9 @@ const MetaDiagram = ({ const diagramClassName = canvasClassName ? canvasClassName : classes.canvasContainer; + return ( - + diff --git a/src/theme.ts b/src/theme.ts new file mode 100644 index 0000000..c6ed1d2 --- /dev/null +++ b/src/theme.ts @@ -0,0 +1,128 @@ +import vars from './components/assets/styles/variables'; + +type ThemeVars = { + [key: string]: any; +}; + +const applicationTheme = (params: ThemeVars) => { + const { + primaryBg, + fontFamily, + chipTextColor, + chipBgColor, + textWhite, + listItemActiveBg, + listSelectedTextColor, + listBoxShadow, + listBorderColor + } = params; + return { + components: { + MuiCssBaseline: { + styleOverrides: ` + html { + background: ${primaryBg}; + font-family: ${fontFamily}; + } + body { + background-color:${primaryBg}; + font-family: ${fontFamily}; + font-size: 1rem; + } + `, + }, + + MuiList: { + styleOverrides: { + root: { + '&.customSwitch': { + padding: '0.125rem', + background: chipTextColor, + borderRadius: '0.5rem', + display: 'flex', + + '& .MuiListItemButton-root': { + padding: '0.25rem 0.75rem', + borderRadius: '0.4375rem', + width: '10.59375rem', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + + '&:not(:last-child)': { + marginBottom: '0', + }, + + '&.Mui-disabled': { + opacity: 1, + }, + + '&.Mui-selected': { + background: textWhite, + boxShadow: listBoxShadow, + border: `0.03125rem solid ${listBorderColor}`, + + '& .MuiTypography-root': { + color: listSelectedTextColor + }, + }, + }, + + '& .MuiChip-root': { + marginLeft: '0.25rem' + }, + + '& .MuiTypography-root': { + fontWeight: 500, + fontSize: '0.8125rem', + lineHeight: '1.25rem', + letterSpacing: '-0.005rem', + color: chipBgColor, + margin: 0 + }, + }, + } + } + }, + + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 'inherit' + }, + } + }, + + MuiListItemButton: { + styleOverrides: { + root: { + padding: 0, + width: '2.5rem', + height: '2.5rem', + borderRadius: '50%', + justifyContent: 'center', + backgroundColor: chipTextColor, + '&:hover': { + backgroundColor: chipTextColor, + }, + '&:not(:last-child)': { + marginBottom: '0.75rem', + }, + '&.Mui-selected': { + backgroundColor: listItemActiveBg, + '&:hover': { + backgroundColor: listItemActiveBg, + }, + }, + + '&.Mui-disabled': { + opacity: 0.8, + }, + }, + } + }, + }, + }; +}; + +export default (customVariables: ThemeVars) => applicationTheme({ ...vars, ...customVariables }); \ No newline at end of file diff --git a/theme.tsx b/theme.tsx deleted file mode 100644 index 0aa13bd..0000000 --- a/theme.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { createTheme } from '@mui/material/styles'; -import vars from './components/assets/styles/variables'; - -const { - primaryBg, - fontFamily, - chipTextColor, - chipBgColor, - textWhite, - listItemActiveBg, - listSelectedTextColor, - listBoxShadow, - listBorderColor} = vars; - -const theme: any = { - components: { - MuiCssBaseline: { - styleOverrides: ` - html { - background: ${primaryBg}; - font-family: ${fontFamily}; - } - body { - background-color:${primaryBg}; - font-family: ${fontFamily}; - font-size: 1rem; - } - `, - }, - - MuiList: { - styleOverrides: { - root: { - '&.customSwitch': { - padding: '0.125rem', - background: chipTextColor, - borderRadius: '0.5rem', - display: 'flex', - - '& .MuiListItemButton-root': { - padding: '0.25rem 0.75rem', - borderRadius: '0.4375rem', - width: '10.59375rem', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - - '&:not(:last-child)': { - marginBottom: '0', - }, - - '&.Mui-disabled': { - opacity: 1, - }, - - '&.Mui-selected': { - background: textWhite, - boxShadow: listBoxShadow, - border: `0.03125rem solid ${listBorderColor}`, - - '& .MuiTypography-root': { - color: listSelectedTextColor - }, - }, - }, - - '& .MuiChip-root': { - marginLeft: '0.25rem' - }, - - '& .MuiTypography-root': { - fontWeight: 500, - fontSize: '0.8125rem', - lineHeight: '1.25rem', - letterSpacing: '-0.005rem', - color: chipBgColor, - margin: 0 - }, - }, - } - } - }, - - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 'inherit' - }, - } - }, - - MuiListItemButton: { - styleOverrides: { - root: { - padding: 0, - width: '2.5rem', - height: '2.5rem', - borderRadius: '50%', - justifyContent: 'center', - backgroundColor: chipTextColor, - '&:hover': { - backgroundColor: chipTextColor, - }, - '&:not(:last-child)': { - marginBottom: '0.75rem', - }, - '&.Mui-selected': { - backgroundColor: listItemActiveBg, - '&:hover': { - backgroundColor: listItemActiveBg, - }, - }, - - '&.Mui-disabled': { - opacity: 0.8, - }, - }, - } - }, - }, -}; - -export default createTheme(theme); From cfd270dc5cb0b95d23b31b571cb1b0ec70c5507d Mon Sep 17 00:00:00 2001 From: vidhya-metacell Date: Thu, 21 Jul 2022 15:18:15 +0200 Subject: [PATCH 3/5] #13 Add canvas background from example application --- {src => example}/components/assets/svg/bg-dotted.svg | 0 example/index.tsx | 6 +++++- src/index.tsx | 7 ++----- 3 files changed, 7 insertions(+), 6 deletions(-) rename {src => example}/components/assets/svg/bg-dotted.svg (100%) diff --git a/src/components/assets/svg/bg-dotted.svg b/example/components/assets/svg/bg-dotted.svg similarity index 100% rename from src/components/assets/svg/bg-dotted.svg rename to example/components/assets/svg/bg-dotted.svg diff --git a/example/index.tsx b/example/index.tsx index 8e888a3..e555126 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -5,6 +5,7 @@ import MetaDiagram, {MetaNode, Position, ComponentsMap, MetaLink} from "./.."; import {CustomNodeWidget} from "./components/widgets/CustomNodeWidget"; import {makeStyles} from "@material-ui/core"; import CustomLinkWidget from "./components/widgets/CustomLinkWidget"; +import BG from "./components/assets/svg/bg-dotted.svg"; const useStyles = makeStyles(_ => ({ main: { @@ -12,6 +13,9 @@ const useStyles = makeStyles(_ => ({ height: '100%', width: '100%', }, + canvasBG: { + backgroundImage: `url(${BG})` + } })) const App = () => { @@ -33,7 +37,7 @@ const App = () => { return (
- +
); }; diff --git a/src/index.tsx b/src/index.tsx index 894abbc..57f7f04 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -23,7 +23,7 @@ const useStyles = makeStyles(_ => ({ canvasContainer: { height: '100%', width: '100%', - background: '#333333', + background: '#fffff', }, })); @@ -77,16 +77,13 @@ const MetaDiagram = ({ const containerClassName = wrapperClassName ? wrapperClassName : classes.container; - const diagramClassName = canvasClassName - ? canvasClassName - : classes.canvasContainer; return ( - + ); From 29e4ff969c16df7b2802f107f2d1a187eb1a9cb9 Mon Sep 17 00:00:00 2001 From: vidhya-metacell Date: Thu, 21 Jul 2022 15:55:46 +0200 Subject: [PATCH 4/5] #13 Linter fixes --- src/index.tsx | 7 +++++-- src/theme.ts | 35 ++++++++++++++--------------------- 2 files changed, 19 insertions(+), 23 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 57f7f04..e406893 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -12,7 +12,7 @@ import { makeStyles } from '@mui/styles'; import Sidebar from './components/Sidebar'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; -import theme from "./theme"; +import theme from './theme'; import { Box } from '@mui/material'; const useStyles = makeStyles(_ => ({ @@ -83,7 +83,10 @@ const MetaDiagram = ({ - + ); diff --git a/src/theme.ts b/src/theme.ts index c6ed1d2..a9849a0 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -14,7 +14,7 @@ const applicationTheme = (params: ThemeVars) => { listItemActiveBg, listSelectedTextColor, listBoxShadow, - listBorderColor + listBorderColor, } = params; return { components: { @@ -31,7 +31,6 @@ const applicationTheme = (params: ThemeVars) => { } `, }, - MuiList: { styleOverrides: { root: { @@ -40,7 +39,6 @@ const applicationTheme = (params: ThemeVars) => { background: chipTextColor, borderRadius: '0.5rem', display: 'flex', - '& .MuiListItemButton-root': { padding: '0.25rem 0.75rem', borderRadius: '0.4375rem', @@ -48,51 +46,43 @@ const applicationTheme = (params: ThemeVars) => { display: 'flex', alignItems: 'center', justifyContent: 'center', - '&:not(:last-child)': { marginBottom: '0', }, - '&.Mui-disabled': { opacity: 1, }, - '&.Mui-selected': { background: textWhite, boxShadow: listBoxShadow, border: `0.03125rem solid ${listBorderColor}`, - '& .MuiTypography-root': { - color: listSelectedTextColor + color: listSelectedTextColor, }, }, }, - '& .MuiChip-root': { - marginLeft: '0.25rem' + marginLeft: '0.25rem', }, - '& .MuiTypography-root': { fontWeight: 500, fontSize: '0.8125rem', lineHeight: '1.25rem', letterSpacing: '-0.005rem', color: chipBgColor, - margin: 0 + margin: 0, }, }, - } - } + }, + }, }, - MuiListItemIcon: { styleOverrides: { root: { - minWidth: 'inherit' + minWidth: 'inherit', }, - } + }, }, - MuiListItemButton: { styleOverrides: { root: { @@ -114,15 +104,18 @@ const applicationTheme = (params: ThemeVars) => { backgroundColor: listItemActiveBg, }, }, - '&.Mui-disabled': { opacity: 0.8, }, }, - } + }, }, }, }; }; -export default (customVariables: ThemeVars) => applicationTheme({ ...vars, ...customVariables }); \ No newline at end of file +export default (customVariables: ThemeVars) => + applicationTheme({ + ...vars, + ...customVariables, + }); From 141d322ae223bd0bee4345b2e1a7a1f3cdc8330d Mon Sep 17 00:00:00 2001 From: vidhya-metacell Date: Fri, 22 Jul 2022 17:09:37 +0200 Subject: [PATCH 5/5] #14 Merging Canvas and theme props to single object --- example/index.tsx | 7 ++++++- src/index.tsx | 12 +++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/example/index.tsx b/example/index.tsx index e555126..80e06e8 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -37,7 +37,12 @@ const App = () => { return (
- +
); }; diff --git a/src/index.tsx b/src/index.tsx index e406893..6baa67b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -33,7 +33,10 @@ interface MetaDiagramProps { componentsMap: ComponentsMap; wrapperClassName?: string; canvasClassName?: string; - customThemeVariables: object; + metaTheme: { + customThemeVariables: {}; + canvasClassName: string; + }; } const MetaDiagram = ({ @@ -41,8 +44,7 @@ const MetaDiagram = ({ metaLinks, componentsMap, wrapperClassName, - canvasClassName, - customThemeVariables, + metaTheme, }: MetaDiagramProps) => { const classes = useStyles(); @@ -79,12 +81,12 @@ const MetaDiagram = ({ : classes.container; return ( - +