Skip to content

Commit 2171083

Browse files
Spencer-LauSpencer-Lau
committed
Fixed panel styling.
1 parent 91e6c54 commit 2171083

File tree

9 files changed

+83
-60
lines changed

9 files changed

+83
-60
lines changed

‎CHANGE_LOG.md

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,31 @@
88
### Potential Changes:
99

1010
- Export code does not actually build what it says it does - Bug fix: tags which are nested do not display accurate code in code preview
11-
- Delete all electron-related files and dependencies
12-
- Delete all webpack-related files and dependencies
1311
- Fully retire jest tests
1412
- Complete Vitest testing suite
15-
- Adding link for creation panel to reusable components tab
1613
- Make bottom panel only display context-relevant tabs
1714
- Moving chat link from bottom panel to upper right (would this require making it into a pop up?)
1815
- Migrate more state pieces into redux store??
1916
- Decluttering by adding right click and hover functionality
2017
- Move elements of tutorial into hover functionality
21-
- Get OAuth fully functional
2218
- Add built-in component templates to the marketplace
2319

20+
### Changes:
21+
22+
- Deleted all electron-related files and dependencies
23+
- Deleted all webpack-related files and dependencies
24+
- Deleted all babel-related files and dependencies (SL)
25+
- Deleted all jest-related files and dependencies (SL)
26+
- Migrated create create custom HTML component to left panel and completely removed from bottom panel (SL)
27+
- Migrated create create custom module component to left panel and completely removed from bottom panel (SL)
28+
- Migrated clear canvas to canvas container from nav bar and completely removed from nav bar (SL)
29+
- Removed page up and page down buttons and code from canvas container (SL)
30+
- OAuth fully functional
31+
32+
### Recommendations for Future Enhancements:
33+
- Unify styling, we utilized a lot of inline styling to override prior version styling due to time
34+
- Light/Dark mode, suggest removing current code regarding it and reimplement from the ground up for light/dark themes
35+
2436
## Version 21.0.0 Changes
2537

2638
### Changes:

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ const CreateContainer = (props): JSX.Element => {
6969
alignItems: 'center',
7070
justifyContent: 'top',
7171
color: '#f7f4dc',
72-
textAlign: 'center'
72+
textAlign: 'center',
73+
marginLeft: '15px',
7374
}}
7475
>
7576
<CreateMenu />

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ const HTMLItem: React.FC<{
8989
>
9090
<ListItemText
9191
primary={'Yes, delete all instances'}
92-
style={{ textAlign: 'center' }}
92+
style={{ textAlign: 'center', color: 'white' }}
9393
onClick={closeModal}
9494
/>
9595
</ListItem>
@@ -105,7 +105,7 @@ const HTMLItem: React.FC<{
105105
>
106106
<ListItemText
107107
primary={'No, do not delete element'}
108-
style={{ textAlign: 'center' }}
108+
style={{ textAlign: 'center', color: 'white' }}
109109
onClick={closeModal}
110110
/>
111111
</ListItem>
@@ -154,7 +154,8 @@ const HTMLItem: React.FC<{
154154
ref={drag}
155155
style={{
156156
backgroundColor: 'rgb(30, 32, 36)',
157-
// backgroundImage: 'linear-gradient(160deg, #2D313A 0%, #1E2024 100%)'
157+
borderColor: 'rgb(100, 100, 115)',
158+
width: '100%',
158159
}}
159160
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
160161
id="HTMLItem"
@@ -172,7 +173,7 @@ const HTMLItem: React.FC<{
172173
{id > 10000 && (
173174
<div
174175
ref={drag}
175-
style={{ borderColor: '#C6C6C6' }}
176+
style={{ borderColor: '#C6C6C6', width: '100%' }}
176177
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
177178
id="HTMLItem"
178179
onClick={() => {

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -235,13 +235,9 @@ const useStyles = makeStyles({
235235
height: '30px',
236236
},
237237
inputWrapper: {
238-
// textAlign: 'center',
239-
display: 'flex',
240-
flexDirection: 'column',
241238
width: '100%',
242239
marginBottom: '0px', // was originally 10px, decreased to 0 to decrease overall menu height
243240
alignItems: 'center',
244-
// justifyContent: 'space-evenly',
245241
},
246242
addComponentWrapper: {
247243
width: '100%',

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ const Sidebar: React.FC<SidebarProps> = ({
5959
<Tabs
6060
key={activeTab}
6161
orientation="vertical"
62-
variant="scrollable"
6362
value={activeTab ?? 0} // default to 0 if activeTab is null
6463
onChange={handleTabChange}
6564
TabIndicatorProps={{
@@ -77,7 +76,7 @@ const Sidebar: React.FC<SidebarProps> = ({
7776
background: '#1e2024',
7877
marginRight: '2px',
7978
height: '100vh',
80-
position: 'relative'
79+
position: 'relative',
8180
}}
8281
>
8382
<Tab sx={{ position: 'absolute', visibility: 'hidden' }} value={null} />

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,10 @@ const TabWithTooltip: React.FC<TabWithTooltipProps> = ({
3535
backgroundColor: activeTab === value && '#2D313A',
3636
'&.Mui-selected': { color: '#f88e16' },
3737
'&:hover': { color: '#f88e16' },
38-
fontSize: '11px',
39-
textTransform: 'none',
4038
position: isCollabTab ? 'absolute' : 'relative',
4139
bottom: isCollabTab ? '80px' : 'auto',
42-
opacity: 1
40+
opacity: 1,
41+
minWidth: '60px',
4342
}}
4443
icon={iconType}
4544
value={value}

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

Lines changed: 55 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,20 @@ const ComponentPanel = ({ setIsCreatingModule, isThemeLight }): JSX.Element => {
6363
}
6464
};
6565

66+
const handleCreateElement = useCallback((e) => {
67+
if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA' && e.target.id !== 'filled-hidden-label-small') {
68+
e.preventDefault();
69+
document.getElementById('submitButton').click();
70+
}
71+
}, []);
72+
73+
useEffect(() => {
74+
document.addEventListener('keydown', handleCreateElement);
75+
return () => {
76+
document.removeEventListener('keydown', handleCreateElement);
77+
};
78+
}, []);
79+
6680
const handleNameInput = (e: React.ChangeEvent<HTMLInputElement>) => {
6781
setErrorStatus(false);
6882
setCompName(e.target.value);
@@ -172,7 +186,7 @@ const ComponentPanel = ({ setIsCreatingModule, isThemeLight }): JSX.Element => {
172186
{/* <div className={`${classes.panelWrapper}`}> */}
173187
<div className={classes.addComponentWrapper}>
174188
<div className={classes.inputWrapper}>
175-
<form onSubmit={handleNameSubmit} className="customForm">
189+
<form className="customForm">
176190
<br></br>
177191
<TextField
178192
// label='New Component Name'
@@ -200,42 +214,46 @@ const ComponentPanel = ({ setIsCreatingModule, isThemeLight }): JSX.Element => {
200214
// style={{}}
201215
// InputProps={{ style: { color: isThemeLight ? 'white' : 'white' } }}
202216
/>
203-
<div style={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-end' }}>
204-
<FormControlLabel
205-
value="top"
206-
control={
207-
<Checkbox
208-
className={
209-
isThemeLight
210-
? `${classes.rootCheckBox} ${classes.lightThemeFontColor}`
211-
: `${classes.rootCheckBox} ${classes.darkThemeFontColor}`
212-
}
213-
color="primary"
214-
checked={isRoot}
215-
onChange={() => setIsRoot(!isRoot)}
216-
/>
217-
}
218-
// name varies depending on mode
219-
label={state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Page Module' : 'Root Module'}
220-
className={
221-
isThemeLight
222-
? `${classes.rootCheckBoxLabel} ${classes.lightThemeFontColor}`
223-
: `${classes.rootCheckBoxLabel} ${classes.darkThemeFontColor}`
224-
}
225-
labelPlacement="right"
226-
/>
227-
<Fab
228-
id="submitButton"
229-
type="submit"
230-
color="primary"
231-
aria-label="add"
232-
size="small"
233-
value="Add Element"
234-
sx={{ width: '15%', height: 40, borderRadius: 1 }}
235-
onClick={handleNameSubmit}
236-
>
237-
<AddIcon />
238-
</Fab>
217+
<div style={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-start' }}>
218+
<div style={{ width: '80%' }}>
219+
<FormControlLabel
220+
value="top"
221+
control={
222+
<Checkbox
223+
// className={
224+
// isThemeLight
225+
// ? `${classes.rootCheckBox} ${classes.lightThemeFontColor}`
226+
// : `${classes.rootCheckBox} ${classes.darkThemeFontColor}`
227+
// }
228+
color="primary"
229+
checked={isRoot}
230+
onChange={() => setIsRoot(!isRoot)}
231+
/>
232+
}
233+
// name varies depending on mode
234+
label={state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Page Module' : 'Root Module'}
235+
className={
236+
isThemeLight
237+
? `${classes.rootCheckBoxLabel} ${classes.lightThemeFontColor}`
238+
: `${classes.rootCheckBoxLabel} ${classes.darkThemeFontColor}`
239+
}
240+
labelPlacement="end"
241+
/>
242+
</div>
243+
<div style={{ width: '20%' }}>
244+
<Fab
245+
id="submitButton"
246+
type="submit"
247+
color="primary"
248+
aria-label="add"
249+
size="small"
250+
value="Add Element"
251+
sx={{ width: 36, height: 40, borderRadius: 1 }}
252+
onClick={handleNameSubmit}
253+
>
254+
<AddIcon />
255+
</Fab>
256+
</div>
239257
</div>
240258
</form>
241259
{/* <div style={{ display: 'flex', justifyContent: 'end' }}>
@@ -306,13 +324,9 @@ const useStyles = makeStyles({
306324
height: '30px',
307325
},
308326
inputWrapper: {
309-
// textAlign: 'center',
310-
display: 'flex',
311-
flexDirection: 'column',
312327
width: '100%',
313328
marginBottom: '0px', // was originally 10px, decreased to 0 to decrease overall height
314329
alignItems: 'center',
315-
// justifyContent: 'space-between',
316330
},
317331
// panelWrapper: {
318332
// display: 'flex',

‎app/src/containers/LeftContainer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const App = () => {
3636
activeTab={activeTab}
3737
setActiveTab={setActiveTab}
3838
toggleVisibility={toggleVisibility}
39+
style={{ display: 'flex' }}
3940
/>
4041
<ContentArea activeTab={activeTab} isVisible={isVisible} />
4142
</div>

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)