Skip to content

Commit 632ef36

Browse files
wang9huwang9hu
committed
merged Lillian/stillUpdating branch, changed creation panel styles a little
1 parent 03b344f commit 632ef36

File tree

11 files changed

+122
-146
lines changed

11 files changed

+122
-146
lines changed

‎app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import {
44
styled,
55
Theme
66
} from "@material-ui/core/styles";
7-
import Button from "@material-ui/core/Button";
87
import {
98
FormControl,
109
FormHelperText,
1110
MenuItem,
1211
InputLabel,
1312
Select,
14-
TextField
13+
TextField,
14+
Button
1515
} from "@material-ui/core";
1616
import StateContext from "../../../../context/context";
1717
import TableStateProps from "./TableStateProps";
@@ -239,13 +239,15 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
239239
</FormHelperText>
240240
</FormControl>
241241
<br />
242-
<MyButton
243-
type="submit"
244-
onClick={submitNewState}
245-
className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
242+
<Button
243+
variant='contained'
244+
color='primary'
245+
type="submit"
246+
onClick={submitNewState}
247+
className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
246248
>
247249
Save
248-
</MyButton>
250+
</Button>
249251
<br />
250252

251253
</FormControl>
@@ -370,7 +372,7 @@ const useStyles = makeStyles((theme: Theme) =>
370372
margin: "-20px 0px 5px 150px",
371373
borderStyle: "none",
372374
transition: "0.3s",
373-
borderRadius: "25px",
375+
// borderRadius: "25px",
374376
},
375377
rootToggle: {
376378
color: "#696969",
@@ -439,14 +441,15 @@ const useStyles = makeStyles((theme: Theme) =>
439441
}
440442
})
441443
);
442-
const MyButton = styled(Button)({
443-
background: "#0099E6",
444-
border: 0,
445-
borderRadius: 3,
446-
boxShadow: "0 0px 0px 2px #1a1a1a",
447-
color: "white",
448-
height: 24,
449-
width: 40,
450-
padding: "0 30px",
451-
});
444+
// change to Button to keep styling consistent
445+
// const MyButton = styled(Button)({
446+
// background: "#0099E6",
447+
// border: 0,
448+
// borderRadius: 3,
449+
// boxShadow: "0 0px 0px 2px #1a1a1a",
450+
// color: "white",
451+
// height: 24,
452+
// width: 40,
453+
// padding: "0 30px",
454+
// });
452455
export default StatePropsPanel;

‎app/src/components/bottom/CodePreview.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ const CodePreview: React.FC<{
3838

3939
const [state] = useContext(StateContext);
4040
const [, setDivHeight] = useState(0);
41-
const components = state.components;
4241
let currentComponent = state.components.find(
4342
(elem: Component) => elem.id === state.canvasFocus.componentId
4443
);
@@ -59,7 +58,7 @@ const CodePreview: React.FC<{
5958
type: 'CODE_PREVIEW_INPUT',
6059
payload: currentComponent.code
6160
});
62-
}, [currentComponent, components]); // Lillian added another dependency here to utilize useEffect
61+
}, [currentComponent, state.components]);
6362

6463
/**
6564
* Handler thats listens to changes in code editor

‎app/src/components/left/HTMLPanel.tsx‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ import { makeStyles, styled } from '@material-ui/core/styles';
55
import {
66
Button,
77
InputLabel,
8-
TextField,
8+
// TextField,
99
} from "@material-ui/core";
10+
import TextField from '@mui/material/TextField';
1011

1112
/*
1213
DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -163,8 +164,9 @@ const HTMLPanel = (props): JSX.Element => {
163164
Tag:
164165
</InputLabel>
165166
<TextField
166-
color={'primary'}
167-
variant={'outlined'}
167+
// label='Tag'
168+
color='primary'
169+
variant='outlined'
168170
type="text"
169171
name="Tag"
170172
value={tag}
@@ -189,8 +191,9 @@ const HTMLPanel = (props): JSX.Element => {
189191
Element Name:
190192
</InputLabel>
191193
<TextField
192-
color={'primary'}
193-
variant={'outlined'}
194+
// label='Element Name'
195+
color='primary'
196+
variant='outlined'
194197
type="text"
195198
name="Tag Name"
196199
value={name}
@@ -204,19 +207,20 @@ const HTMLPanel = (props): JSX.Element => {
204207
}
205208
}}
206209
/>
207-
208-
209210
{(!name.charAt(0).match(/[A-Za-z]/) || !alphanumeric(name) || name.trim() === '' || name.length > 10 || checkNameDupe(name))
210211
&& <span className={isThemeLight ? `${classes.errorMessage} ${classes.errorMessageLight}` : `${classes.errorMessage} ${classes.errorMessageDark}`}>
211212
<em>{errorMsg}</em>
212213
</span>}
213-
<AddElementButton
214+
<br></br>
215+
<Button
214216
className={isThemeLight ? `${classes.addElementButton} ${classes.lightThemeFontColor}` : `${classes.addElementButton} ${classes.darkThemeFontColor}`}
215217
id="submitButton"
216218
type="submit"
219+
color='primary'
220+
variant='contained'
217221
value="Add Element"
218222
>Add Element
219-
</AddElementButton>
223+
</Button>
220224
</form>
221225
</div>
222226
</div>
@@ -267,13 +271,14 @@ const useStyles = makeStyles({
267271
addElementButton: {
268272
backgroundColor: 'transparent',
269273
height: '40px',
270-
width: '105px',
274+
width: '200px',
271275
fontFamily: 'Roboto, Raleway, sans-serif',
272276
fontSize: '85%',
273277
textAlign: 'center',
274278
borderStyle: 'none',
275279
transition: '0.3s',
276280
borderRadius: '4px',
281+
alignSelf: 'center'
277282
},
278283
lightThemeFontColor: {
279284
color: '#155084',
@@ -288,10 +293,11 @@ const useStyles = makeStyles({
288293
}
289294
},
290295
errorMessage: {
296+
display: 'flex',
297+
alignSelf: 'center',
291298
fontSize:"11px",
292299
marginTop: "10px",
293300
width: "150px",
294-
marginLeft: "-15px"
295301
},
296302
errorMessageLight: {
297303
color: '#6B6B6B'
@@ -301,16 +307,17 @@ const useStyles = makeStyles({
301307
}
302308
});
303309

304-
const AddElementButton = styled(Button)({
305-
background: "#0099E6",
306-
border: 0,
307-
borderRadius: 3,
308-
boxShadow: "0 0px 0px 2px #1a1a1a",
309-
color: "white",
310-
height: 24,
311-
width: 160,
312-
padding: "0px 30px",
313-
alignSelf: 'center',
314-
});
310+
// changed to Button component to keep styling consistent
311+
// const AddElementButton = styled(Button)({
312+
// background: "#0099E6",
313+
// border: 0,
314+
// borderRadius: 3,
315+
// boxShadow: "0 0px 0px 2px #1a1a1a",
316+
// color: "white",
317+
// height: 24,
318+
// width: 160,
319+
// padding: "0px 30px",
320+
// alignSelf: 'center',
321+
// });
315322

316323
export default HTMLPanel;

‎app/src/components/main/Canvas.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ function Canvas(props): JSX.Element {
146146
childId: null
147147
}
148148
});
149+
// comment out below, not sure what the previous team want to do for this
149150
// } else {
150151
// alert('something is wrong');
151152
// able to duplicate a component in dev only does not work for prod
@@ -199,9 +200,6 @@ function Canvas(props): JSX.Element {
199200
// const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
200201
const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
201202
const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);
202-
// console.log('CURRENTCOMPONENT.CHILDREN : ', currentComponent.children)
203-
// console.log('STATE: ', state.components);
204-
// console.log('CURRENTCOMPONENT : ', currentComponent);
205203
return (
206204
<div className={'componentContainer'} ref={drop} style={props.isThemeLight ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
207205
{renderChildren(currentComponent.children)}

‎app/src/components/main/DirectChildComponent.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ function DirectChildComponent({
1818

1919
// find the top-level component corresponding to this instance of the component
2020
// find the current component to render on the canvas
21-
2221
const referencedComponent: Component = state.components.find(
2322
(elem: Component) => elem.id === typeId
2423
);
@@ -64,11 +63,17 @@ function DirectChildComponent({
6463
);
6564
// Renders name and not children of subcomponents to clean up Canvas view when dragging components
6665
// into the main canvas. To render html elements on canvas, import and invoke renderChildren
66+
return (
67+
<div
68+
onClick={onClickHandler}
69+
style={combinedStyle}
70+
ref={drag}
71+
>
72+
<span>
73+
<strong>{name}</strong>
74+
<DeleteButton id={childId} name={name} />
75+
</span>
6776

68-
return (
69-
<div onClick={onClickHandler} style={combinedStyle} ref={drag}>
70-
<strong>{name}</strong>
71-
<DeleteButton id={childId} name={name} />
7277
</div>
7378
);
7479
}

‎app/src/components/main/DirectChildHTMLNestable.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,8 +175,10 @@ function DirectChildHTMLNestable({
175175
id={`canv${childId}`}
176176
>
177177
<span>
178-
<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>
179-
<strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
178+
<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}
179+
</strong>
180+
<strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
181+
</strong>
180182
{routeButton}
181183
<DeleteButton id={childId} name={name} />
182184
</span>

‎app/src/components/right/ComponentPanel.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ import {
88
Checkbox,
99
FormControlLabel,
1010
InputLabel,
11-
TextField,
11+
// TextField,
1212
} from "@material-ui/core";
13+
import TextField from '@mui/material/TextField';
1314

1415
// The component panel section of the left panel displays all components and has the ability to add new components
1516
const ComponentPanel = ({isThemeLight}): JSX.Element => {
@@ -153,14 +154,15 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
153154
New Component
154155
</h4>
155156
{/* input for new component */}
156-
<div style={{display: 'flex', justifyContent:'space-evenly', marginTop: '20px', alignItems:'baseline'}}>
157+
<div style={{display: 'flex', justifyContent:'center', marginTop: '20px', marginBottom: '20px', alignItems:'baseline'}}>
157158
<div style={{alignSelf:'center'}}>
158159
<InputLabel className={isThemeLight ? `${classes.inputLabel} ${classes.lightThemeFontColor}` : `${classes.inputLabel} ${classes.darkThemeFontColor}`}>
159160
Name:
160161
</InputLabel>
161162
<div className={classes.inputWrapper}>
162163
<TextField
163-
color={'primary'}
164+
// label='New Component Name'
165+
color='primary'
164166
variant="outlined"
165167
className={isThemeLight ? `${classes.inputField} ${classes.lightThemeFontColor}` : `${classes.inputField} ${classes.darkThemeFontColor}`}
166168
// inputprops and helpertext must be lowercase
@@ -199,15 +201,17 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
199201
/>
200202
</div>
201203
</div>
202-
<div>
204+
<div style={{display: 'flex', justifyContent: 'center'}}>
203205
<br/>
204-
<CreateButton
206+
<Button
205207
className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
208+
color='primary'
209+
variant='contained'
206210
id="addComponentButton"
207211
onClick={handleNameSubmit}
208212
>
209213
Create
210-
</CreateButton>
214+
</Button>
211215
</div>
212216
</div>
213217
</div>
@@ -276,7 +280,6 @@ const useStyles = makeStyles({
276280
fontFamily: 'Roboto, Raleway, sans-serif',
277281
fontSize: '90%',
278282
textAlign: 'center',
279-
margin: '-20px 0px 5px 150px',
280283
borderStyle: 'none',
281284
transition: '0.3s',
282285
borderRadius: '25px',
@@ -298,16 +301,16 @@ const useStyles = makeStyles({
298301
}
299302
}
300303
});
301-
302-
const CreateButton = styled(Button)({
303-
background: "#0099E6",
304-
border: 0,
305-
borderRadius: 3,
306-
boxShadow: "0 0px 0px 2px #1a1a1a",
307-
color: "white",
308-
height: 24,
309-
width: 60,
310-
padding: "0 30px",
311-
});
304+
// change to Button to make styling consistent
305+
// const CreateButton = styled(Button)({
306+
// background: "#0099E6",
307+
// border: 0,
308+
// borderRadius: 3,
309+
// boxShadow: "0 0px 0px 2px #1a1a1a",
310+
// color: "white",
311+
// height: 24,
312+
// width: 60,
313+
// padding: "0 30px",
314+
// });
312315

313316
export default ComponentPanel;

‎app/src/components/right/ContextMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* imput component
1+
/* input component
22
input component
33
button component
44
*/

0 commit comments

Comments
 (0)