Merge pull request #55 from MetaCell/feature/53

#53 Fix metadata styling
MetaCell · Sep 15, 2022 · aebbec9 · aebbec9
2 parents 24f5be9 + 20db6a7
commit aebbec9
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 206 deletions.
diff --git a/src/assets/styles/variables.js b/src/assets/styles/variables.js
@@ -84,6 +84,8 @@ const vars = {
   ...nodeBlue,
   ...nodeGray,
   ...nodeGreen,
+  functionTextColor: '#4579EE',
+  functionCodeColor: '#ED745D',
 };
 
 export default vars;
diff --git a/src/components/views/mechanisms/InputOutputNode.js b/src/components/views/mechanisms/InputOutputNode.js
@@ -1,90 +1,18 @@
 import * as React from "react";
-import { withStyles } from "@mui/styles";
 import { Box, Typography } from "@mui/material";
 
-const styles = () => ({
-  card: {
-    padding: '0.625rem 0.5rem',
-    backgroundColor: 'rgba(255, 255, 255, 0.6)',
-    display: 'flex',
-    alignItems: 'center',
-
-    '&:first-child': {
-      borderTopLeftRadius: '0.625rem',
-      borderTopRightRadius: '0.625rem',
-    },
-
-    '&:last-child': {
-      borderBottomLeftRadius: '0.625rem',
-      borderBottomRightRadius: '0.625rem',
-    },
-
-    '&:not(:last-child)': {
-      marginBottom: '0.0625rem'
-    },
-  },
-
-  bullet: {
-    width: '1rem',
-    height: '1rem',
-    border: 'solid 0.0625rem',
-    borderRadius: '50%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  mr8: {
-    marginRight: '0.5rem',
-  },
-
-  ml8: {
-    marginLeft: '0.5rem',
-  },
-
-  dot: {
-    width: '0.375rem',
-    height: '0.375rem',
-    borderRadius: '50%',
-  },
-
-  contentRight: {
-    justifyContent: 'flex-end',
-    '& .MuiTypography-root': {
-      order: 1,
-    },
-
-    '& > .MuiBox-root': {
-      order: 2
-    },
-  },
-
-});
-
-
 class InputOutputNode extends React.Component {
   render() {
-    const { classes, variant, text, direction } = this.props;
+    const { text, direction } = this.props;
+    const nodeClass = direction === 'right' ? 'block reverse' : 'block';
+
     return (
-      <Box className={`${classes.card} ${direction === 'right' && classes.contentRight}`}>
-        <Box
-          className={`${classes.bullet} ${direction === "right" ? classes.ml8 : classes.mr8}`}
-          style={{
-            background: variant.backgroundColor,
-            borderColor: variant.bulletColor,
-          }}
-        >
-          <Box
-            className={classes.dot}
-            style={{
-              background: variant.bulletColor,
-            }}
-          />
-        </Box>
+      <Box className={nodeClass}>
+        <Box className="disc" />
         <Typography>{text}</Typography>
       </Box>
     );
   }
 }
 
-export default withStyles(styles)(InputOutputNode);
+export default InputOutputNode;
diff --git a/src/components/views/mechanisms/MechMetadata.js b/src/components/views/mechanisms/MechMetadata.js
@@ -6,130 +6,54 @@ import InputOutputNode from "./InputOutputNode";
 import TextField from '@mui/material/TextField';
 import Typography from "@mui/material/Typography";
 import { PortTypes, PortWidget } from "@metacell/meta-diagram";
+import vars from "../../../assets/styles/variables";
 
-const styles = () => ({
-  root: {
-    position: 'relative',
-    width: '18rem',
-    borderRadius: '0.875rem',
-    border: 'solid 0.0625rem',
-    padding: '0.5rem',
-
-    '& .MuiTypography-root': {
-      fontWeight: '500',
-      fontSize: '0.8125rem',
-      lineHeight: '1.25rem',
-      letterSpacing: '-0.005rem',
-      margin: 0,
-    },
-
-    '& label': {
-      display: 'block',
-      fontWeight: 400,
-      fontSize: '0.625rem',
-      lineHeight: '0.625rem',
-      letterSpacing: '-0.005rem',
-      color: '#76787D',
-      textTransform: 'uppercase'
-    },
-  },
-
-  header: {
-    marginBottom: '0.25rem',
-    padding: '0.75rem 0',
-
-    '& img': {
-      display: 'block',
-      margin: '0 auto 0.25rem',
-    },
-
-    '& p': {
-      textAlign: 'center',
-    },
+const styles = {
+  textColor: {
+    color: vars.functionTextColor
   },
-
-  block: {
-  },
-
-  cardSecondary: {
-    background: '#FFFFFF',
-    padding: '0.5rem',
-    width: 'calc((100% - 0.125rem) / 3)',
-
-    '&:first-child': {
-      borderTopLeftRadius: '0.625rem',
-    },
-
-    '&:nth-child(3)': {
-      borderTopRightRadius: '0.625rem',
-    },
-
-    '&:last-child': {
-      width: '100%',
-      borderBottomLeftRadius: '0.625rem',
-      borderBottomRightRadius: '0.625rem',
-    },
-  },
-
-  separator: {
-    width: '0.125rem',
-    height: '1rem',
-    borderRadius: '1.25rem',
-    margin: '0.25rem auto'
-  },
-
-  function: {
-    '&.MuiTypography-root': {
-      marginTop: '0.25rem',
-      fontFamily: "'Roboto Mono', monospace",
-    },
-  },
-});
+  codeColor: {
+    color: vars.functionCodeColor
+    }
+};
 
 class MechMetadata extends React.Component {
   render() {
     const { classes, model, model: { options }, engine, changeVisibility } = this.props;
+    console.log(classes)
     const functionValues = (label, value) => (
-      <Box className={classes.cardSecondary}>
+      <Box className="block">
         <Typography component="label">{label}</Typography>
-        <TextField
+        {/* <TextField
           id="outlined-multiline-flexible"
           maxRows={4}
           value={value}
           onChange={ (e) => {console.log(e)} }
           variant="outlined"
           style={{ zIndex: 11 }}
-        />
-        {/* <Typography>{value}</Typography> */}
+        /> */}
+        <Typography>{value}</Typography>
       </Box>
     )
     return (
-      <>
+      <Box className={`primary-node rounded ${options.variant}`}>
         {options.selected && (
           <NodeSelection node={model} engine={engine} text={"Hide properties"} changeVisibility={changeVisibility} />
         )}
-        <Box
-          className={classes.root}
-          style={{
-            background: options?.variant.backgroundColor,
-            borderColor: options?.variant.borderColor,
-            boxShadow: options?.variant.boxShadow,
-          }}
-        >
-          <Box className={classes.header}>
-            <img src={options.icon} alt="mechanism" />
-            <Typography component="p" style={{ color: options?.variant.textColor }}>
+          <Box className="primary-node_header">
+            <Box className="icon" />
+            <Typography component="p">
               {options.name}
             </Typography>
           </Box>
 
-          <Box className={classes.block}>
+          <Box>
           { options.ports.map(port => {
             switch (port.getType()) {
               case PortTypes.INPUT_PORT:
                 return (
                   <PortWidget key={model.getID() + '_' + port.getId()} engine={engine} port={model.getPort(port.getId())}>
-                    <InputOutputNode variant={options?.variant} text={port.getId()} />
+                    <InputOutputNode text={port.getId()} />
                   </PortWidget>
                 );
               default:
@@ -138,46 +62,36 @@ class MechMetadata extends React.Component {
           })}
           </Box>
 
-          <Box
-            className={classes.separator}
-            style={{
-              background: options?.variant.borderColor,
-            }}
-          />
+          <Box className="seprator" />
 
-          <Box className={classes.block}>
-            <Box display="flex" flexWrap="wrap" gap="0.0625rem">
-              {
-                functionValues('Context', '12')
-              }
-              {
-                functionValues('Size', '8.90')
-              }
-              {
-                functionValues('Prefs', '44')
-              }
-              <Box className={classes.cardSecondary}>
-                <Typography component="label">Function</Typography>
-                <Typography className={classes.function}><Typography component="strong" style={{ color: '#4579EE' }}>function</Typography>=pnl.<Typography style={{ color: '#ED745D' }} component="strong">Logistic</Typography>(gain=1.0, bias=-4)</Typography>
-              </Box>
+          <Box className="block-wrapper">
+            {
+              functionValues('Context', '12')
+            }
+            {
+              functionValues('Size', '8.90')
+            }
+            {
+              functionValues('Prefs', '44')
+            }
+            <Box className="block">
+              <Typography component="label">Function</Typography>
+              <Typography className="function">
+                <Typography component="strong" className={classes?.textColor} >
+                  function
+                </Typography>=pnl.<Typography className={classes?.codeColor} component="strong">Logistic</Typography>(gain=1.0, bias=-4)</Typography>
             </Box>
-
           </Box>
 
-          <Box
-            className={classes.separator}
-            style={{
-              background: options?.variant.borderColor,
-            }}
-          />
+          <Box className="seprator" />
 
-          <Box className={classes.block}>
+          <Box>
           { options.ports.map(port => {
             switch (port.getType()) {
               case PortTypes.OUTPUT_PORT:
                 return (
                   <PortWidget key={model.getID() + '_' + port.getId()} engine={engine} port={model.getPort(port.getId())}>
-                    <InputOutputNode variant={options?.variant} text={port.getId()} direction="right" />
+                    <InputOutputNode text={port.getId()} direction="right" />
                   </PortWidget>
                 );
               default:
@@ -186,7 +100,6 @@ class MechMetadata extends React.Component {
           })}
           </Box>
         </Box>
-      </>
     );
   }
 }

diff --git a/src/model/nodes/mechanism/MechanismNode.ts b/src/model/nodes/mechanism/MechanismNode.ts
@@ -67,11 +67,11 @@ export default class MechanismNode implements IMetaDiagramConverter {
             this.name,
             'mechanism',
             new Position(x, y),
-            'node-gray',
+            'node-blue',
             ports,
             new Map(Object.entries({
                 name: 'Mechanism Name',
-                variant: 'node-gray',
+                variant: 'node-blue',
                 pnlClass: 'ProcessingMechanism',
                 shape: 'circle',
                 selected: false

diff --git a/src/theme.js b/src/theme.js
@@ -368,6 +368,19 @@ const theme = {
           border-color: ${nodeRedBorderColor};
         }
 
+        .primary-node.node-red .block .disc {
+          background: ${nodeRedBackgroundColor};
+          border-color: ${nodeRedTextColor};
+        }
+
+        .primary-node.node-red .block .disc:after {
+          background: ${nodeRedTextColor};
+        }
+
+        .primary-node.node-red .seprator {
+          background: ${nodeRedBorderColor};
+        }
+
         .primary-node.node-blue {
           background: ${nodeBlueBackgroundColor};
           box-shadow: ${nodeBlueBoxShadow};
@@ -405,6 +418,32 @@ const theme = {
           background: ${nodeGrayBackgroundColor};
           border-color: rgba(130, 130, 130, 0.2);
         }
+
+        .primary-node.node-blue .block .disc {
+          background: ${nodeBlueBackgroundColor};
+          border-color: ${nodeBlueTextColor};
+        }
+
+        .primary-node.node-blue .block .disc:after {
+          background: ${nodeBlueTextColor};
+        }
+
+        .primary-node.node-blue .seprator {
+          background: ${nodeBlueBorderColor};
+        }
+
+        .primary-node.node-gray .block .disc {
+          background: ${nodeGrayBackgroundColor};
+          border-color: ${nodeGrayTextColor};
+        }
+
+        .primary-node.node-gray .block .disc:after {
+          background: ${nodeGrayTextColor};
+        }
+
+        .primary-node.node-gray .seprator {
+          background: ${nodeGrayBorderColor};
+        }
       `,
     },