changed export modal close button to iconButton from icon, slightly decreased size of export modal

ChristianEdwardPadilla · ChristianEdwardPadilla · commit a0f4b60f7a6c · 2019-05-18T16:11:27.000-04:00
diff --git a/src/components/HTMLComponentPanel.jsx b/src/components/HTMLComponentPanel.jsx
@@ -1,21 +1,21 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { compose } from "redux";
-import { withStyles } from "@material-ui/core/styles";
-import TextField from "@material-ui/core/TextField";
-import IconButton from "@material-ui/core/IconButton";
-import ImageIcon from "@material-ui/icons/Image";
-import FormIcon from "@material-ui/icons/Description";
-import ButtonIcon from "@material-ui/icons/EditAttributes";
-import LinkIcon from "@material-ui/icons/Link";
-import ListIcon from "@material-ui/icons/List";
-import ParagraphIcon from "@material-ui/icons/LocalParking";
-import theme from "../components/theme.ts";
-import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
-import Tab from "@material-ui/core/Tab";
-import Chip from "@material-ui/core/Chip";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import IconButton from '@material-ui/core/IconButton';
+import ImageIcon from '@material-ui/icons/Image';
+import FormIcon from '@material-ui/icons/Description';
+import ButtonIcon from '@material-ui/icons/EditAttributes';
+import LinkIcon from '@material-ui/icons/Link';
+import ListIcon from '@material-ui/icons/List';
+import ParagraphIcon from '@material-ui/icons/LocalParking';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Tab from '@material-ui/core/Tab';
+import Chip from '@material-ui/core/Chip';
+import theme from './theme.ts';
 
 // import {HTMLelements,getSize} from "../utils/htmlElements.util";
 
@@ -26,13 +26,13 @@ class HTMLComponentPanel extends Component {
     HtmlComponentName: '',
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.setState({
       HtmlComponentName: event.target.value,
     });
   };
 
-  handleCreateHTMLChild = type => {
+  handleCreateHTMLChild = (type) => {
     this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
   };
 
@@ -52,10 +52,10 @@ class HTMLComponentPanel extends Component {
                 className="htmlicons"
                 aria-label="Image"
                 onClick={() => {
-                  this.handleCreateHTMLChild("Image");
+                  this.handleCreateHTMLChild('Image');
                 }}
               >
-                <ImageIcon style={{ color: "#e0e0e0" }} />
+                <ImageIcon style={{ color: '#e0e0e0' }} />
               </IconButton>
             </div>
           </Grid>
@@ -118,32 +118,32 @@ class HTMLComponentPanel extends Component {
 function styles(theme) {
   return {
     htmlPanel: {
-      width: "100%",
-      height: "30%",
+      width: '100%',
+      height: '30%',
       // backgroundColor: "#333333",
-      borderStyle: "solid",
-      borderWidth: "0.5px",
-      borderRadius: "1px",
-      borderColor: "#424242",
-      bottom: "0px",
-      padding: "20px"
+      borderStyle: 'solid',
+      borderWidth: '0.5px',
+      borderRadius: '1px',
+      borderColor: '#424242',
+      bottom: '0px',
+      padding: '20px',
     },
     chip: {
-      color: "rgba(193, 66, 66, 0)"
+      color: 'rgba(193, 66, 66, 0)',
     },
     htmliconwrapper: {
-      verticalAlign: "baseline"
+      verticalAlign: 'baseline',
     },
     htmlicons: {
-      color: "#ffffff"
+      color: '#ffffff',
     },
     tabRoot: {
-      textTransform: "initial",
+      textTransform: 'initial',
       minWidth: 100,
       fontWeight: theme.typography.fontWeightRegular,
       // marginRight: theme.spacing.unit * 4,
-      color: "#ffffff"
-    }
+      color: '#ffffff',
+    },
   };
 }
 
diff --git a/src/components/LeftColExpansionPanel.jsx b/src/components/LeftColExpansionPanel.jsx
@@ -1,47 +1,54 @@
-import React, { Fragment } from "react";
-import { withStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
-import IconButton from "@material-ui/core/IconButton";
-import Grid from "@material-ui/core/Grid";
-import AddIcon from "@material-ui/icons/Add";
-import DeleteIcon from "@material-ui/icons/Delete";
-import Fab from "@material-ui/core/Fab";
+import React, { Fragment } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
+import Grid from '@material-ui/core/Grid';
+import AddIcon from '@material-ui/icons/Add';
+import DeleteIcon from '@material-ui/icons/Delete';
+import Fab from '@material-ui/core/Fab';
 
-import { openExpansionPanel } from "../utils/componentReducer.util";
+import { openExpansionPanel } from '../utils/componentReducer.util';
 
-const LeftColExpansionPanel = props => {
-  const { classes, focusComponent, component, addChild, changeFocusComponent, selectableChildren } = props;
+const LeftColExpansionPanel = (props) => {
+  const {
+    classes,
+    focusComponent,
+    component,
+    addChild,
+    changeFocusComponent,
+    selectableChildren,
+    components,
+    deleteComponent,
+  } = props;
   const { title, id, color } = component;
 
+  // show a string of all direct parents. SO the user can gaze at it.
+  const directParents = components
+    .filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId == id))
+    .map(comp => comp.title)
+    .join(',');
+
   function isFocused() {
     return focusComponent.id == id ? 'focused' : '';
   }
 
   return (
-    <Grid
-      container
-      spacing={16}
-      direction="row"
-      justify="flex-start"
-      alignItems="baseline"
-    >
+    <Grid container spacing={16} direction="row" justify="flex-start" alignItems="baseline">
       <Grid item xs={9}>
         <div
           className={classes.root}
-          style={
-            !isFocused() ? {} : { boxShadow: "0 10px 10px rgba(0,0,0,0.22)" }
-          }
+          style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.22)' }}
         >
-          <Grid item xs={12} style={{ color: "red" }}>
-            <List style={{ color: "red" }}>
+          <Grid item xs={12} style={{ color: 'red' }}>
+            <List style={{ color: 'red' }}>
               <ListItem
                 button
                 component="a"
-                style={{ color: "red" }}
+                style={{ color: 'red' }}
                 onClick={() => {
                   changeFocusComponent({ title });
                 }}
@@ -50,7 +57,7 @@ const LeftColExpansionPanel = props => {
                   disableTypography
                   className={classes.light}
                   primary={
-                    <Typography type="body2" style={{ color: color }}>
+                    <Typography type="body2" style={{ color }}>
                       {title}
                     </Typography>
                   }
@@ -68,21 +75,21 @@ const LeftColExpansionPanel = props => {
                 {directParents ? (
                   <p
                     style={{
-                      marginLeft: "10px",
-                      color: "white",
-                      fontSize: "12px",
-                      marginTop: "1px"
+                      marginLeft: '10px',
+                      color: 'white',
+                      fontSize: '12px',
+                      marginTop: '1px',
                     }}
                   >
                     Used in: {directParents}
                   </p>
                 ) : (
                   <p
                     style={{
-                      marginLeft: "10px",
-                      color: "white",
-                      fontSize: "12px",
-                      marginTop: "1px"
+                      marginLeft: '10px',
+                      color: 'white',
+                      fontSize: '12px',
+                      marginTop: '1px',
                     }}
                   >
                     Not used
@@ -96,16 +103,15 @@ const LeftColExpansionPanel = props => {
                 aria-label="Delete"
                 className={classes.margin}
                 style={{
-                  marginLeft: "10px",
-                  marginTop: "5px",
-                  marginBottom: "10px"
+                  marginLeft: '10px',
+                  marginTop: '5px',
+                  marginBottom: '10px',
                 }}
                 // style={{ maxWidth: "20px" }}
-                onClick={() =>
-                  deleteComponent({
-                    componentId: id,
-                    stateComponents: components
-                  })
+                onClick={() => deleteComponent({
+                  componentId: id,
+                  stateComponents: components,
+                })
                 }
               >
                 <DeleteIcon className={classes.extendedIcon} />
@@ -133,9 +139,9 @@ const LeftColExpansionPanel = props => {
         ) : (
           <IconButton aria-label="Add">
             <AddIcon
-              style={{ color, float: "right" }}
+              style={{ color, float: 'right' }}
               onClick={() => {
-                addChild({ title, childType: "COMP" });
+                addChild({ title, childType: 'COMP' });
               }}
             />
             <ListItemSecondaryAction>
diff --git a/src/components/SimpleModal.jsx b/src/components/SimpleModal.jsx
@@ -4,20 +4,24 @@ import Modal from '@material-ui/core/Modal';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
-import Icon from '@material-ui/core/Icon';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
 
 const styles = theme => ({
   paper: {
     position: 'absolute',
     width: 'auto',
     maxWidth: '500px',
+    height: 'auto',
+    maxHeight: '300px',
     backgroundColor: theme.palette.background.paper,
     boxShadow: theme.shadows[5],
     padding: '4%',
     minWidth: '500px',
+    minHeight: '300px',
   },
   button: {
-    marginTop: '8%',
+    marginTop: '0%',
     height: 'auto',
     marginLeft: '3%',
     borderRadius: '4px',
@@ -54,9 +58,9 @@ const SimpleModal = (props) => {
           }}
           className={classes.paper}
         >
-          <Icon
+          <IconButton
+            aria-label="Close"
             onClick={closeModal}
-            className="closeIcon"
             style={{
               position: 'absolute',
               top: '2%',
@@ -65,8 +69,8 @@ const SimpleModal = (props) => {
               fontWeight: 'bold',
             }}
           >
-            close
-          </Icon>
+            <CloseIcon />
+          </IconButton>
           <Typography variant="title" id="modal-title">
             {message}
           </Typography>
