Merge pull request #91 from ChristianEdwardPadilla/development

styling generally

Author: ChristianEdwardPadilla

src/components/BottomTabs.jsx

@@ -162,13 +162,13 @@ class BottomTabs extends Component {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label="Component State"
+            label={`HTML Element Attributes ${htmlAttribCount ? `(${htmlAttribCount})` : ''} `}
           />
-          <Tab
+          {/* <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label={`HTML Element Attributes ${htmlAttribCount ? `(${htmlAttribCount})` : ''} `}
-          />
+            label="Component State"
+          /> */}
         </Tabs>
 
         {value === 0 && (

src/components/HTMLComponentPanel.jsx

@@ -33,9 +33,9 @@ class HTMLComponentPanel extends Component {
   };
 
   render() {
-    const { addChild } = this.props;
+    const { classes } = this.props;
     return (
-      <div className={'htmlPanel'} alignItems="flex-start" align="center">
+      <div align="center">
         <Tab
           disableRipple
           classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
@@ -67,7 +67,7 @@ class HTMLComponentPanel extends Component {
                 variant="outlined"
                 style={{
                   color: 'white',
-                  fontSize: '50%',
+                  fontSize: '80%',
                   margin: 0,
                   padding: 0,
                 }}
@@ -94,7 +94,7 @@ class HTMLComponentPanel extends Component {
               variant="outlined"
               style={{
                 color: 'white',
-                fontSize: '50%',
+                fontSize: '80%',
               }}
             />
           </Grid>
@@ -118,7 +118,7 @@ class HTMLComponentPanel extends Component {
               variant="outlined"
               style={{
                 color: 'white',
-                fontSize: '50%',
+                fontSize: '80%',
               }}
             />
           </Grid>
@@ -142,7 +142,7 @@ class HTMLComponentPanel extends Component {
               variant="outlined"
               style={{
                 color: 'white',
-                fontSize: '50%',
+                fontSize: '80%',
               }}
             />
           </Grid>
@@ -166,11 +166,18 @@ class HTMLComponentPanel extends Component {
               variant="outlined"
               style={{
                 color: 'white',
-                fontSize: '50%',
+                fontSize: '80%',
               }}
             />
           </Grid>
-          <Grid item xs={4}>
+          <Grid
+            item
+            xs={4}
+            style={{
+              margin: 0,
+              padding: 0,
+            }}
+          >
             <IconButton
               className="htmlicons"
               aria-label="Paragraph"
@@ -182,15 +189,19 @@ class HTMLComponentPanel extends Component {
                 padding: 0,
               }}
             >
-              <ParagraphIcon style={{ color: '#e0e0e0' }} />
+              <ParagraphIcon
+                style={{ color: '#e0e0e0', paddingRight: '0px', marginRight: '0px' }}
+              />
             </IconButton>
             <Chip
               label="Paragraph"
               className={classes.chip}
               variant="outlined"
               style={{
                 color: 'white',
-                fontSize: '50%',
+                fontSize: '62%',
+                padding: '0px',
+                margin: '0px',
               }}
             />
           </Grid>

src/components/HtmlAttr.jsx

@@ -81,7 +81,7 @@ class HtmlAttr extends Component {
                 notchedOutline: classes.notchedOutline,
               },
             }}
-            style={{ background: '#424242', height: '80%' }}
+            style={{ background: '#424242', height: '70%' }}
             label={attr}
             variant="outlined"
             id={attr}
@@ -92,7 +92,7 @@ class HtmlAttr extends Component {
         <Grid item xs={1}>
           <Fab
             variant="extended"
-            size="large"
+            size="small"
             color="default"
             aria-label="Save"
             style={{
@@ -107,7 +107,7 @@ class HtmlAttr extends Component {
           </Fab>
         </Grid>
         <Grid item xs={4}>
-          <Paper className={classes.root} style={{ height: '80%' }}>
+          <Paper className={classes.root} style={{ height: '70%' }}>
             <p style={{ color: 'black' }}>
               {focusChild.HTMLInfo[attr] ? focusChild.HTMLInfo[attr] : ' no attribute assigned'}
             </p>

src/components/KonvaStage.tsx

@@ -147,19 +147,7 @@ class KonvaStage extends Component {
         }}
         tabIndex="0" // required for keydown event to be heard by this.container
       >
-        {/* <Button
-          onClick={deleteChild}
-          style={{
-            width: '150px',
-            position: 'relative',
-            float: 'right',
-            background: '#dbdbdb',
-            zIndex: 2,
-          }}
-        >
-          delete child
-        </Button> */}
-        <Fab
+        {/* <Fab
           variant="extended"
           size="small"
           color="inherit"
@@ -179,7 +167,7 @@ class KonvaStage extends Component {
         >
           <DeleteIcon />
           Delete Child
-        </Fab>
+        </Fab> */}
         <Stage
           className={'canvasStage'}
           ref={node => {

src/components/LeftColExpansionPanel.jsx

@@ -1,14 +1,14 @@
-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 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 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 Button from '@material-ui/core/Button';
 
 const LeftColExpansionPanel = props => {
   const {
@@ -82,49 +82,51 @@ const LeftColExpansionPanel = props => {
                 {directParents ? (
                   <p
                     style={{
-                      marginLeft: "10px",
-                      color: "white",
-                      fontSize: "12px",
-                      marginTop: "1px"
+                      padding: '0px',
+                      marginTop: '0px',
+                      marginLeft: '15px',
+                      color: '#D3D3D3',
+                      fontSize: '12px',
                     }}
                   >
                     Used in: {directParents}
                   </p>
                 ) : (
                   <p
                     style={{
-                      marginLeft: "10px",
-                      color: "white",
-                      fontSize: "12px",
-                      marginTop: "1px"
+                      padding: '0px',
+                      marginTop: '0px',
+                      marginLeft: '15px',
+                      color: '#D3D3D3',
+                      fontSize: '12px',
                     }}
                   >
                     Not used
                   </p>
                 )}
               </span>
-              <Fab
-                variant="extended"
+              <Button
+                variant="text"
                 size="small"
-                color="inherit"
+                color="default"
                 aria-label="Delete"
                 className={classes.margin}
+                onClick={() => deleteComponent({
+                  componentId: id,
+                  stateComponents: components,
+                })
+                }
                 style={{
-                  marginLeft: "10px",
-                  marginTop: "5px",
-                  marginBottom: "10px"
+                  color: '#D3D3D3',
+                  marginBottom: '10px',
+                  marginTop: '0px',
+                  marginLeft: '11px',
+                  padding: '0px',
                 }}
-                // style={{ maxWidth: "20px" }}
-                onClick={() =>
-                  deleteComponent({
-                    componentId: id,
-                    stateComponents: components
-                  })
-                }
               >
-                <DeleteIcon />
+                <DeleteIcon style={{ color: '#D3D3D3' }} />
                 Delete
-              </Fab>
+              </Button>
               {/* <IconButton
                 style={{ display: "inline-block" }}
                 onClick={() =>

src/components/SimpleModal.jsx

@@ -78,7 +78,7 @@ const SimpleModal = (props) => {
           <div>
             {secBtnLabel ? (
               <Button
-                variant="extendedFab"
+                variant="contained"
                 color="secondary"
                 className={classes.button}
                 onClick={secBtnAction}
@@ -88,7 +88,7 @@ const SimpleModal = (props) => {
             ) : null}
             {primBtnLabel ? (
               <Button
-                variant="extendedFab"
+                variant="contained"
                 color="primary"
                 className={classes.button}
                 onClick={primBtnAction}

src/containers/LeftContainer.tsx

@@ -38,15 +38,39 @@ const mapDispatchToProps = (dispatch: any) => ({
   changeFocusChild: ({ childId }: { childId: number }) => dispatch(actions.changeFocusChild({ childId })),
   deleteComponent: ({ componentId, stateComponents }: { componentId: number; stateComponents: ComponentsInt }) =>
     dispatch(actions.deleteComponent({ componentId, stateComponents })),
+  deleteAllData: () => dispatch(actions.deleteAllData()),
+  createApp: ({ path, components, genOption }) =>
+    dispatch(
+      actions.createApplication({
+        path,
+        components,
+        genOption,
+      }),
+    ),
 });
 
 class LeftContainer extends Component<Props> {
   state = {
     componentName: '',
     modal: null,
     genOptions: ['Export components', 'Export components with application files'],
+    genOption: 0,
   };
 
+  constructor(props) {
+    super(props);
+
+    IPC.on('app_dir_selected', (event, path) => {
+      const { components } = this.props;
+      const { genOption } = this.state;
+      this.props.createApp({
+        path,
+        components,
+        genOption,
+      });
+    });
+  }
+
   handleChange = event => {
     this.setState({
       [event.target.name]: event.target.value,

src/public/styles/style.css

@@ -80,24 +80,12 @@ LEFT COLUMN
 .left {
   padding: 20px;
   width: 20%;
-  min-width: 350px;
+  min-width: 300px;
   display: flex;
   flex-direction: column;
   position: relative;
 }
 
-.htmlPanel {
-  /* position: absolute;
-  bottom: 0;
-  margin-right: 50px;
-  margin-left: 50px;
-  margin-bottom: 50px;
-  left: 0px;
-  right: 0px;
-  width: 100%;
-  padding: 1%; */
-}
-
 .component-input {
   bottom: 2.8%;
 }