#16 Add icon example to the nodes

MetaCell · Jul 30, 2022 · b58c1b6 · b58c1b6
1 parent 9545f85
commit b58c1b6
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 2 deletions.
diff --git a/example/components/assets/svg/node/blue.png b/example/components/assets/svg/node/blue.png
diff --git a/example/components/assets/svg/node/gray.png b/example/components/assets/svg/node/gray.png
diff --git a/example/components/assets/svg/node/red.png b/example/components/assets/svg/node/red.png
diff --git a/example/components/widgets/CustomNodeWidget.tsx b/example/components/widgets/CustomNodeWidget.tsx
@@ -18,7 +18,7 @@ export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
             )}
 
             <Box className="primary-node_header">
-              <img src="" alt={this.props.model.getOptions()['name']} />
+              <Box className="icon" />
 
               <Typography component="p">
                 {this.props.model.getOptions()['name']}

diff --git a/example/theme.ts b/example/theme.ts
@@ -1,5 +1,8 @@
 import vars from './components/assets/styles/variables';
 import { createTheme } from '@mui/material/styles';
+import nodeBlue from "./components/assets/svg/node/blue.png";
+import nodeGray from "./components/assets/svg/node/gray.png";
+import nodeRed from './components/assets/svg/node/red.png';
 
 const {
   nodeRedBackgroundColor,
@@ -38,6 +41,10 @@ const theme = {
           border-color: ${nodeRedBorderColor};
         }
 
+        .primary-node.node-red .icon {
+          background: url(${nodeRed});
+        }
+
         .primary-node.node-red .primary-node_header p {
           color: ${nodeRedTextColor};
         }
@@ -53,6 +60,10 @@ const theme = {
           border-color: ${nodeBlueBorderColor};
         }
 
+        .primary-node.node-blue .icon {
+          background: url(${nodeBlue});
+        }
+
         .primary-node.node-blue .primary-node_header p {
           color: ${nodeBlueTextColor};
         }
@@ -68,6 +79,10 @@ const theme = {
           border-color: ${nodeGrayBorderColor};
         }
 
+        .primary-node.node-gray .icon {
+          background: url(${nodeGray});
+        }
+
         .primary-node.node-gray .primary-node_header p {
           color: ${nodeGrayTextColor};
         }

diff --git a/src/theme.ts b/src/theme.ts
@@ -92,7 +92,9 @@ const applicationTheme = (params: ThemeVars) => {
             width: 20px;
             height: 20px;
             margin: 0 auto 0.25rem;
-            background: url(data:image/svg+xml;base64,${new Buffer(nodeGreen).toString('base64')});
+            background: url(data:image/svg+xml;base64,${new Buffer(
+              nodeGreen
+            ).toString('base64')});
           }
 
           .primary-node .primary-node_header p {