- {state.name && state.isLoggedIn ? (
-
- Your current project is {state.name}
-
- ) : null}
- {!state.name && state.isLoggedIn ? (
-
- Select "Save project as" to create and save a project
-
- ) : null}
-
-
-
-
-
-
- {state.isLoggedIn ?
: ''}
- {state.isLoggedIn ?
: ''}
- {state.isLoggedIn ?
: ''}
- {/*
*/}
+
}
- >
- EXPORT PROJECT
-
-
- }
+ onClick={() => {
+ !style.backgroundColor
+ ? setStyle({ backgroundColor: '#00001a', color: 'red' })
+ : setStyle({});
+ }}
>
- CLEAR WORKSPACE
+ Change Darkness Mode
-
-
-
- {/*
*/}
- {modal}
+
+
+ {state.name && state.isLoggedIn ? (
+
+ Your current project is {state.name}
+
+ ) : null}
+ {!state.name && state.isLoggedIn ? (
+
+ Select "Save project as" to create and save a project
+
+ ) : null}
+
+
+
+
+
+
+ {state.isLoggedIn ?
: ''}
+ {state.isLoggedIn ?
: ''}
+ {state.isLoggedIn ?
: ''}
+ {/*
*/}
+ }
+ >
+ EXPORT PROJECT
+
+
+ }
+ >
+ CLEAR WORKSPACE
+
+
+
+
+ {/*
*/}
+ {modal}
+
);
};
diff --git a/app/src/containers/AppContainer.tsx b/app/src/containers/AppContainer.tsx
index 62592b637..ccf8e0a0e 100644
--- a/app/src/containers/AppContainer.tsx
+++ b/app/src/containers/AppContainer.tsx
@@ -1,32 +1,29 @@
-import React, { useState } from 'react';
+import React, { useState, useContext, createContext } from 'react';
import { MuiThemeProvider } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+// import Button from '@material-ui/core/Button';
import LeftContainer from './LeftContainer';
import MainContainer from './MainContainer';
import RightContainer from './RightContainer';
-import { theme1, theme2 } from '../public/styles/theme';
+import { theme1 } from '../public/styles/theme';
import { makeStyles } from '@material-ui/core/styles';
-import { useStyles } from '../components/left/ComponentPanel';
+
+export const styleContext = createContext({});
+// console.log('styleContext: ', styleContext);
const AppContainer = () => {
const [theme, setTheme] = useState(theme1);
- const classes = useStyles();
- const [style, setStyle] = useState({});
+ const initialStyle = useContext(styleContext);
+ const [style, setStyle] = useState(initialStyle);
return (
// Mui theme provider provides themed styling to all MUI components in app
-
-
-
-
+
+
+
+
+
);
diff --git a/app/src/containers/LeftContainer.tsx b/app/src/containers/LeftContainer.tsx
index 2460b5e38..839e7b4be 100644
--- a/app/src/containers/LeftContainer.tsx
+++ b/app/src/containers/LeftContainer.tsx
@@ -8,7 +8,7 @@ import HTMLPanel from '../components/left/HTMLPanel';
// Left-hand portion of the app, where component options are displayed
const LeftContainer = ({ style }): JSX.Element => {
return (
-
+
diff --git a/app/src/containers/MainContainer.tsx b/app/src/containers/MainContainer.tsx
index e8302357b..0b2c99500 100644
--- a/app/src/containers/MainContainer.tsx
+++ b/app/src/containers/MainContainer.tsx
@@ -2,21 +2,15 @@ import React, { Component } from 'react';
import BottomPanel from '../components/bottom/BottomPanel';
import CanvasContainer from '../components/main/CanvasContainer';
-import { Resizable } from "re-resizable";
-
-class MainContainer extends Component {
- render() {
- return (
-
-
-
-
- {/*
*/}
-
- {/* */}
+const MainContainer = ({ style }) => {
+ return (
+
- );
- }
-}
+ );
+};
export default MainContainer;
diff --git a/app/src/containers/RightContainer.tsx b/app/src/containers/RightContainer.tsx
index 6b4497006..6900247d7 100644
--- a/app/src/containers/RightContainer.tsx
+++ b/app/src/containers/RightContainer.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useContext, useEffect, useMemo, Component } from 'react';
+import React, {
+ useState,
+ useContext,
+ useEffect,
+ useMemo,
+ Component
+} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
@@ -16,7 +22,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
import ErrorMessages from '../constants/ErrorMessages';
// need to pass in props to use the useHistory feature of react router
-const RightContainer = (props): JSX.Element => {
+const RightContainer = ({ style }): JSX.Element => {
const classes = useStyles();
const [state, dispatch] = useContext(stateContext);
const [displayMode, setDisplayMode] = useState('');
@@ -135,14 +141,14 @@ const RightContainer = (props): JSX.Element => {
state.canvasFocus.componentId
]);
- const isPage = (configTarget) : boolean => {
+ const isPage = (configTarget): boolean => {
const { components, rootComponents } = state;
return components
.filter(component => rootComponents.includes(component.id))
.some(el => el.id === configTarget.id);
- }
+ };
- const isIndex = (): boolean => configTarget.id === 1;
+ const isIndex = (): boolean => configTarget.id === 1;
const isChildOfPage = (): boolean => {
// TODO: refactor
@@ -157,9 +163,7 @@ const RightContainer = (props): JSX.Element => {
});
});
return isChild;
- }
-
-
+ };
// dispatch to 'UPDATE CSS' called when save button is clicked,
// passing in style object constructed from all changed input values
@@ -186,38 +190,37 @@ const RightContainer = (props): JSX.Element => {
dispatch({ type: 'DELETE CHILD', payload: {} });
};
- const handlePageDelete = (id) => () => {
- // TODO: return modal
- isIndex()
- ? handleDialogError('index')
- : dispatch({ type: 'DELETE PAGE', payload: { id }});
- }
-
+ const handlePageDelete = id => () => {
+ // TODO: return modal
+ isIndex()
+ ? handleDialogError('index')
+ : dispatch({ type: 'DELETE PAGE', payload: { id } });
+ };
+
const handleDeleteReusableComponent = () => {
isChildOfPage()
- ? handleDialogError('component')
- : dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
- }
+ ? handleDialogError('component')
+ : dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
+ };
const isReusable = (configTarget): boolean => {
return state.components
- .filter(comp => !state.rootComponents
- .includes(comp.id))
+ .filter(comp => !state.rootComponents.includes(comp.id))
.some(el => el.id == configTarget.id);
- }
+ };
- const handleDialogError = (err) => {
+ const handleDialogError = err => {
if (err === 'index') setDeleteIndexError(true);
else setDeleteComponentError(true);
- }
+ };
const handleCloseDialogError = () => {
setDeleteIndexError(false);
setDeleteComponentError(false);
- }
+ };
return (
-
+
@@ -416,13 +419,13 @@ const RightContainer = (props): JSX.Element => {
DELETE INSTANCE
- ) : (isPage(configTarget) ? (
-
+ ) : isPage(configTarget) ? (
+
@@ -432,11 +435,10 @@ const RightContainer = (props): JSX.Element => {
color="secondary"
className={classes.button}
onClick={handleDeleteReusableComponent}
- >
+ >
DELETE REUSABLE COMPONENT
- )
)}
@@ -447,10 +449,12 @@ const RightContainer = (props): JSX.Element => {
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
-
{ErrorMessages.deleteIndexTitle}
+
+ {ErrorMessages.deleteIndexTitle}
+
- {ErrorMessages.deleteIndexMessage}
+ {ErrorMessages.deleteIndexMessage}
@@ -465,10 +469,12 @@ const RightContainer = (props): JSX.Element => {
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
- {ErrorMessages.deleteComponentTitle}
+
+ {ErrorMessages.deleteComponentTitle}
+
- {ErrorMessages.deleteComponentMessage}
+ {ErrorMessages.deleteComponentMessage}
diff --git a/app/src/public/styles/style.css b/app/src/public/styles/style.css
index fe2c202e2..1368a40c1 100644
--- a/app/src/public/styles/style.css
+++ b/app/src/public/styles/style.css
@@ -59,6 +59,12 @@ header {
height: 100vh;
}
+.mode-change-button {
+ display: flex;
+ align-content: center;
+ padding-top: 50px;
+}
+
.progress-bar {
flex-grow: 1;
}
diff --git a/app/src/public/styles/theme.ts b/app/src/public/styles/theme.ts
index 544beaf12..7474d7109 100644
--- a/app/src/public/styles/theme.ts
+++ b/app/src/public/styles/theme.ts
@@ -11,19 +11,17 @@ export const theme1 = createMuiTheme({
primary: {
// light: '#00e676',
main: '#01d46d' // less blinding green
+ //main:'#00FFFF' // teal color
// dark: '#14a37f',
// contrastText: '#fff'
- },
- secondary: {
- main: '#ff5722'
}
}
});
-export const theme2 = createMuiTheme({
- // overrides: {
- // MuiContainer: {}
- // }
-});
+// export const theme2 = createMuiTheme({
+// // overrides: {
+// // MuiContainer: {}
+// // }
+// });
// export default theme;
diff --git a/app/src/tree/TreeChart.tsx b/app/src/tree/TreeChart.tsx
index f79c861fa..01c8ea59c 100644
--- a/app/src/tree/TreeChart.tsx
+++ b/app/src/tree/TreeChart.tsx
@@ -1,6 +1,6 @@
-import React, { useRef, useEffect, useContext } from "react";
-import { select, hierarchy, tree, linkHorizontal } from "d3";
-import useResizeObserver from "./useResizeObserver";
+import React, { useRef, useEffect, useContext } from 'react';
+import { select, hierarchy, tree, linkHorizontal } from 'd3';
+import useResizeObserver from './useResizeObserver';
import { stateContext } from '../context/context';
function usePrevious(value) {
@@ -37,9 +37,9 @@ function TreeChart({ data }) {
dimensions || wrapperRef.current.getBoundingClientRect();
// transform hierarchical data
const root = hierarchy(data[canvasId - 1]);
- const treeLayout = tree().size([height, width-125]);
-
- // Returns a new link generator with horizontal display.
+ const treeLayout = tree().size([height, width - 125]);
+
+ // Returns a new link generator with horizontal display.
// To visualize links in a tree diagram rooted on the left edge of the display
const linkGenerator = linkHorizontal()
.x(link => link.y)
@@ -99,8 +99,8 @@ function TreeChart({ data }) {
.attr('font-size', 18)
.style('fill', textAndBorderColor)
.text(node => node.data.name)
- .attr("opacity", 1)
- .attr("transform", `translate(${xPosition}, 0)`);
+ .attr('opacity', 1)
+ .attr('transform', `translate(${xPosition}, 0)`);
}, [data, dimensions, previouslyRenderedData, canvasId]);
const treeStyles = {
@@ -119,7 +119,7 @@ function TreeChart({ data }) {
justifyContent: 'center'
};
return (
- //