Skip to content

Commit 3dfac9d

Browse files
sean1292sean1292
committed
Merge branch 'staging' of https://github.com/oslabs-beta/ReacType into staging
2 parents 6628283 + 8d3e4f4 commit 3dfac9d

File tree

9 files changed

+192
-91
lines changed

9 files changed

+192
-91
lines changed

‎main.js

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ function openFile() {
4141
mainWindow.webContents.send('new-file', file);
4242
}
4343

44+
function toggleTutorial() {
45+
mainWindow.webContents.send('tutorial_clicked');
46+
}
47+
4448
// Choose directory
4549
ipcMain.on('choose_app_dir', event => {
4650
const directory = dialog.showOpenDialog(mainWindow, {
@@ -92,28 +96,28 @@ const createWindow = () => {
9296
label: 'File',
9397
submenu: [
9498
{
95-
label: 'Open File',
99+
label: 'Open Image',
96100
accelerator: process.platform === 'darwin' ? 'Cmd+O' : 'Ctrl+Shift+O',
97101
click() {
98102
openFile();
99103
}
100104
}
101105
]
102106
},
103-
// {
104-
// label: 'Edit',
105-
// submenu: [
106-
// { role: 'undo' },
107-
// { role: 'redo' },
108-
// { type: 'separator' },
109-
// { role: 'cut' },
110-
// { role: 'copy' },
111-
// { role: 'paste' },
112-
// { role: 'pasteandmatchstyle' },
113-
// { role: 'delete' },
114-
// { role: 'selectall' },
115-
// ],
116-
// },
107+
{
108+
label: 'Edit',
109+
submenu: [
110+
{ role: 'undo' },
111+
{ role: 'redo' },
112+
{ type: 'separator' },
113+
{ role: 'cut' },
114+
{ role: 'copy' },
115+
{ role: 'paste' },
116+
{ role: 'pasteandmatchstyle' },
117+
{ role: 'delete' },
118+
{ role: 'selectall' },
119+
],
120+
},
117121
{
118122
label: 'View',
119123
submenu: [
@@ -137,7 +141,13 @@ const createWindow = () => {
137141
{
138142
label: 'Learn More',
139143
click() {
140-
shell.openExternal('https://electronjs.org');
144+
shell.openExternal('https://reactype.io');
145+
}
146+
},
147+
{
148+
label: 'Tutorial',
149+
click() {
150+
toggleTutorial();
141151
}
142152
}
143153
]

‎package.json

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
{
22
"name": "reactype",
3-
"version": "2.0.0",
3+
"version": "3.0.0",
44
"description": "Prototyping tool for React/Typescript Applications.",
55
"main": "main.js",
66
"contributors": [
7+
"Adam Singer",
8+
"Charles Finocchiaro",
79
"Chelsey Fewer",
10+
"Christian Padilla",
11+
"Eliot Nguyen",
12+
"Jesse Zuniga",
813
"Mitchel Severe",
9-
"Sophia Huttner",
10-
"Charles Finocchiaro",
1114
"Natalie Vick",
12-
"Christian Padilla",
13-
"Tolga Mizrakci",
15+
"Sean Sadykoff",
1416
"Shlomo Porges",
15-
"Adam Singer"
16-
],
17+
"Sophia Huttner",
18+
"Tolga Mizrakci",
19+
"Tony Ito-Cole"
20+
],
1721
"repository": {
1822
"type": "git",
1923
"url": "https://github.com/team-reactype/ReacType"
2024
},
2125
"build": {
2226
"appId": "com.team-reactype.reactype",
23-
"copyright": "Copyright © 2018",
27+
"copyright": "Copyright © 2020",
2428
"linux": {
2529
"target": [
2630
"AppImage",
@@ -88,6 +92,7 @@
8892
"dependencies": {
8993
"@material-ui/core": "^3.9.3",
9094
"@material-ui/icons": "^2.0.0",
95+
"@material-ui/styles": "^4.9.0",
9196
"@types/prettier": "^1.19.0",
9297
"@types/react": "^16.8.14",
9398
"@types/react-dom": "^16.8.4",

‎src/components/KonvaStage.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,13 @@ class KonvaStage extends Component<KonvaStagePropsInt, StateInt> {
4848
};
4949
}
5050

51-
container: HTMLDivElement;
5251
stage: Stage;
5352
layer: Konva.Layer;
53+
container: HTMLDivElement;
54+
5455
//makes a copy of the array of children plus the parent component pushed onto it
5556
getDirectChildrenCopy(focusComponent: ComponentInt) {
56-
//assign component to the docused component
57+
//assign component to the focused component
5758
const component = this.props.components.find(
5859
(comp: ComponentInt) => comp.id === focusComponent.id
5960
);
@@ -89,6 +90,7 @@ class KonvaStage extends Component<KonvaStagePropsInt, StateInt> {
8990
// take a look here https://developers.google.com/web/updates/2016/10/resizeobserver
9091
// for simplicity I will just listen window resize
9192
window.addEventListener('resize', this.checkSize);
93+
//TODO: Typing of this.container
9294
this.container.addEventListener('keydown', this.handleKeyDown);
9395
this.createGrid();
9496
}
@@ -121,6 +123,7 @@ class KonvaStage extends Component<KonvaStagePropsInt, StateInt> {
121123
//event handler to handle mouse click
122124
handleStageMouseDown = (e: any) => {
123125
// clicked on stage - clear selection
126+
//logic here doesn't seem to be working
124127
if (e.target === e.target.getStage()) {
125128
return;
126129
}
@@ -198,7 +201,7 @@ class KonvaStage extends Component<KonvaStagePropsInt, StateInt> {
198201
ref={node => {
199202
this.container = node;
200203
}}
201-
tabIndex="0" // required for keydown event to be heard by this.container
204+
tabIndex={0} // required for keydown event to be heard by this.container
202205
>
203206
<Stage
204207
className={'canvasStage'}
@@ -216,7 +219,7 @@ class KonvaStage extends Component<KonvaStagePropsInt, StateInt> {
216219
}}
217220
>
218221
{this.state.grid}
219-
{/* {The logic hereis that it creates a new rectangle or each component that belongs to this parent component, plus the parent component.
222+
{/* {The logic here is that it creates a new rectangle for each component that belongs to this parent component, plus the parent component.
220223
The parent component is rendered last. It renders based on the values in the return value of getDirectChildrenCopy. } */}
221224
{!isEmpty(focusComponent) &&
222225
this.getDirectChildrenCopy(focusComponent)

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 72 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import InputLabel from '@material-ui/core/InputLabel'; // labeling of state/clas
1616
import { ComponentInt, ComponentsInt, PropsInt } from '../utils/Interfaces'; // unused
1717
interface LeftColExpPanPropsInt extends PropsInt {
1818
classes: any;
19+
id?: number;
1920
component: ComponentInt;
2021
addChild(arg: { title: string; childType: string; HTMLInfo?: object }): void;
2122
changeFocusComponent(arg: { title: string }): void;
@@ -25,6 +26,11 @@ interface LeftColExpPanPropsInt extends PropsInt {
2526
toggleComponentClass(arg: number): void;
2627
}
2728

29+
interface TypographyProps {
30+
type: string;
31+
}
32+
33+
// TODO: ASSIGN SPECIFIC TYPING TO INCOMING PROPS (REMOVE ANY)
2834
const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
2935
const {
3036
classes,
@@ -45,17 +51,25 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
4551
return focusComponent.id === id ? 'focused' : '';
4652
}
4753

54+
// boolean flag to determine if the component card is focused or not
55+
// state/class toggles will be displayed when a component is focused
56+
const focusedToggle = isFocused() === 'focused' ? true : false;
57+
4858
return (
4959
<Grid container spacing={16} direction="row" justify="flex-start" alignItems="center">
5060
<Grid item xs={9}>
5161
<div
5262
className={classes.root}
53-
style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }}
63+
style={
64+
// shadow to highlight the focused component card
65+
focusedToggle ? { boxShadow: '4px 4px 4px rgba(0, 0, 0, .4)' } : {}
66+
}
5467
>
68+
{/* NOT SURE WHY COLOR: RED IS USED, TRIED REMOVING IT AND NO VISIBLE CHANGE OCCURED */}
5569
<Grid item xs={12} style={{ color: 'red', backgroundColor: color }}>
5670
<List style={{ color: 'red' }}>
5771
<ListItem
58-
button
72+
// button // commented out to disable materialUI hover shading effect. TBD if any adverse effects occur
5973
style={{ color: 'red' }}
6074
onClick={() => {
6175
changeFocusComponent({ title });
@@ -67,7 +81,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
6781
primary={
6882
<div>
6983
<Typography
70-
type="body2"
84+
//type='body2'
7185
style={{
7286
color: '#fff',
7387
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.2)',
@@ -76,41 +90,16 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
7690
>
7791
{title}
7892
</Typography>
79-
{/* TOGGLE FOR STATEFULNESS */}
80-
<InputLabel
81-
htmlFor="stateful"
82-
style={{
83-
color: '#fff',
84-
marginBottom: '10px',
85-
marginTop: '0px',
86-
marginLeft: '11px',
87-
padding: '0px',
88-
fontSize: '18px',
89-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)'
90-
}}
91-
>
92-
State?
93-
</InputLabel>
94-
{/*
95-
Have to change focus component after toggling state
96-
in order to properly change the code that appears in the code
97-
peview
93+
94+
{/* ALL OF THE STATE/CLASS TOGGLES AND LABELS ARE ONLY RENDERED IF THEIR COMPONENT IS THE FOCUSED COMPONENT
95+
96+
TO DO : IMPROVE DRYNESS OF CODE BY RENDERING ALL FOUR MATERIAL ELEMENTS (LABELS/SWITCH) IN ONE CONDITIONAL
9897
*/}
99-
<Switch
100-
checked={stateful}
101-
onChange={e => {
102-
toggleComponentState(id);
103-
changeFocusComponent({ title: title.toString() });
104-
}}
105-
value="stateful"
106-
color="primary"
107-
id={id.toString()}
108-
// id={props.index.toString()}
109-
/>
110-
<div>
111-
{/* TOGGLE FOR CLASS BASED */}
98+
99+
{/* LABEL AND TOGGLE(SWITCH) FOR STATEFULNESS */}
100+
{focusedToggle ? (
112101
<InputLabel
113-
htmlFor="classBased"
102+
htmlFor="stateful"
114103
style={{
115104
color: '#fff',
116105
marginBottom: '10px',
@@ -121,17 +110,58 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
121110
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)'
122111
}}
123112
>
124-
Class?
113+
State?
125114
</InputLabel>
115+
) : (
116+
''
117+
)}
118+
119+
{focusedToggle ? (
126120
<Switch
127-
checked={classBased}
121+
checked={stateful}
128122
onChange={e => {
129-
toggleComponentClass(id);
130-
changeFocusComponent({ title: title.toString() });
123+
toggleComponentState(id);
124+
changeFocusComponent({ title });
131125
}}
132-
value="classBased"
126+
value="stateful"
133127
color="primary"
128+
// id={props.id.toString()}
134129
/>
130+
) : (
131+
''
132+
)}
133+
<div>
134+
{/* LABEL/TOGGLE(SWITCH) FOR CLASS BASED */}
135+
{focusedToggle ? (
136+
<InputLabel
137+
htmlFor="classBased"
138+
style={{
139+
color: '#fff',
140+
marginBottom: '10px',
141+
marginTop: '0px',
142+
marginLeft: '11px',
143+
padding: '0px',
144+
fontSize: '18px'
145+
}}
146+
>
147+
Class?
148+
</InputLabel>
149+
) : (
150+
''
151+
)}
152+
{focusedToggle ? (
153+
<Switch
154+
checked={classBased}
155+
onChange={e => {
156+
toggleComponentClass(id);
157+
changeFocusComponent({ title });
158+
}}
159+
value="classBased"
160+
color="primary"
161+
/>
162+
) : (
163+
''
164+
)}
135165
</div>
136166
</div>
137167
}
@@ -165,7 +195,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
165195
}}
166196
>
167197
<DeleteIcon style={{ color: '#D3D3D3' }} />
168-
Delete Component
198+
<span style={{ marginTop: '3px' }}>Delete Component</span>
169199
</Button>
170200
</Fragment>
171201
)}

‎src/components/theme.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const theme = createMuiTheme({
1414
contrastText: '#fff',
1515
},
1616
secondary: indigo,
17-
},
17+
}
1818
});
1919

2020
export default theme;

0 commit comments

Comments
 (0)