Skip to content

Commit a94fd15

Browse files
jujuprojujupro
committed
Merge branch 'dev' into rose
2 parents e746e9e + 96df861 commit a94fd15

File tree

8 files changed

+150
-107
lines changed

8 files changed

+150
-107
lines changed

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -138,23 +138,23 @@ const HTMLItem: React.FC<{
138138

139139
{/* Custom Elements */}
140140
{id > 20 && (
141-
<span id="customHTMLElement">
142-
<div
143-
ref={drag}
144-
style={{ borderColor: '#C6C6C6' }}
145-
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
146-
id="HTMLItem"
147-
>
148-
<div>{name}</div>
149-
</div>
150-
<button
141+
<div
142+
ref={drag}
143+
style={{ borderColor: '#C6C6C6' }}
144+
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
145+
id="HTMLItem"
146+
>
147+
{typeof CodeIcon !== 'undefined' && (
148+
<CodeIcon fontSize="small" align-items="center" />)}
149+
{name}
150+
<button
151151
id="newElement"
152152
style={{ color: '#C6C6C6' }}
153153
onClick={() => deleteAllInstances(id)}
154-
>
155-
X
156-
</button>
157-
</span>
154+
>
155+
X
156+
</button>
157+
</div>
158158
)}
159159
{modal}
160160
</Grid>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,6 @@ const useStyles = makeStyles({
325325
},
326326
addComponentWrapper: {
327327
width: '100%',
328-
margin: '5px 0px 0px 0px'
329328
},
330329
input: {
331330
borderRadius: '5px',

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import {
5656
DeleteContextPayload,
5757
addComponentToContext
5858
} from '../../../src/redux/reducers/slice/contextReducer';
59+
import Canvas from '../components/main/Canvas';
5960

6061
// // for websockets
6162
// // Part - join room and room code functionality
@@ -282,6 +283,7 @@ const RoomsContainer = () => {
282283
return userName.length === 0 || roomCode.length === 0;
283284
}
284285

286+
// Turning off the cursor live tracking on canvas with the press of a button.
285287
const handleKeyDown = (e) => {
286288
if (e.key === 'Enter' && e.target.id === 'filled-hidden-label-small') {
287289
e.preventDefault();

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,25 +20,26 @@ const Sidebar: React.FC<SidebarProps> = ({
2020
}) => {
2121
const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
2222
setActiveTab(newValue);
23-
toggleVisibility(true);// Show the left-container when a different tab is clicked
24-
oldValue = newValue;//setting the oldvalue to match the new tab
23+
toggleVisibility(true); // Show the left-container when a different tab is clicked
24+
oldValue = newValue; //setting the oldvalue to match the new tab
2525
};
2626

2727
const handleTabClick = (event: React.MouseEvent, oldValue: number) => {
28-
if (activeTab === oldValue) { //if the person is clicking the same tab, oldValue should match activeTab since it did not trigger an onChange
28+
if (activeTab === oldValue) {
29+
//if the person is clicking the same tab, oldValue should match activeTab since it did not trigger an onChange
2930
setActiveTab(null);
3031
toggleVisibility(false); // Hide the left-container when the same tab is clicked again
3132
}
32-
}
33+
};
3334

3435
return (
3536
<Tabs
3637
key={activeTab}
3738
orientation="vertical"
3839
variant="scrollable"
3940
value={activeTab}
40-
onChange = {handleTabChange}
41-
onClick = {(e: React.MouseEvent) => handleTabClick(e, oldValue)}
41+
onChange={handleTabChange}
42+
onClick={(e: React.MouseEvent) => handleTabClick(e, oldValue)}
4243
TabIndicatorProps={{
4344
style: {
4445
backgroundColor: '#4A4A4A'
@@ -53,10 +54,10 @@ const Sidebar: React.FC<SidebarProps> = ({
5354
gap: '50px',
5455
width: 67,
5556
background: '#151515',
56-
height: '100vh',
57+
height: '100vh'
5758
}}
5859
>
59-
<Tab sx={{position: 'absolute', visibility: "hidden"}} value={null}/>
60+
<Tab sx={{ position: 'absolute', visibility: 'hidden' }} value={null} />
6061
<Tab
6162
sx={{
6263
color: activeTab === 0 ? '#a5ead6' : '#4A4A4A',

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

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
1616
import renderChildren from '../../helperFunctions/renderChildren';
1717
import { emitEvent, getSocket } from '../../helperFunctions/socket';
1818
import { GiBoba } from 'react-icons/gi';
19+
import { Console } from 'console';
1920

2021
function Canvas(props: {}): JSX.Element {
2122
const state = useSelector((store: RootState) => store.appState);
@@ -27,9 +28,20 @@ function Canvas(props: {}): JSX.Element {
2728
//-------cursors tracking-------
2829
console.log('canvas is rendered');
2930

31+
//remote cursor data
32+
3033
const [remoteCursors, setRemoteCursors] = useState([]);
34+
35+
//toggle switch
3136
const [toggleSwitch, setToggleSwitch] = useState(true);
3237

38+
// toggle text
39+
const [toggleText, setToggleText] = useState('off');
40+
41+
const toggleButton = () => {
42+
setToggleText(toggleText === 'on' ? 'off' : 'on');
43+
};
44+
3345
const debounceSetPosition = debounce((newX, newY) => {
3446
//emit socket event every 300ms when cursor moves
3547
if (userList.length > 1)
@@ -112,6 +124,12 @@ function Canvas(props: {}): JSX.Element {
112124

113125
console.log('Toggle Switch:', toggleSwitch);
114126

127+
//Function to handle the click events.
128+
const multipleClicks = () => {
129+
handleToggleSwitch();
130+
toggleButton();
131+
};
132+
115133
const socket = getSocket();
116134
/* wrap the socket event listener in useEffect with dependency array as [socket], so the effect will run only when:
117135
1. After the initial rendering of the component 2. Every time the socket instance changes(connect, disconnect) */
@@ -330,19 +348,29 @@ function Canvas(props: {}): JSX.Element {
330348
</div>
331349
)
332350
)}
333-
334-
<label
335-
className="switch"
336-
style={{
337-
position: 'relative',
338-
display: 'inline-block',
339-
width: '60px',
340-
height: '34px'
341-
}}
342-
>
343-
<button className="btn-toggle" onClick={handleToggleSwitch}>
344-
On/Off
345-
</button>
351+
<label className="switch">
352+
{userList.length > 1 && (
353+
<button
354+
className="btn-toggle"
355+
onClick={multipleClicks}
356+
style={{
357+
position: 'fixed',
358+
width: 'max-content',
359+
height: 'max-content',
360+
bottom: '100px',
361+
left: '51vw',
362+
textAlign: 'center',
363+
color: '#ffffff',
364+
backgroundColor: '#151515',
365+
zIndex: 0,
366+
padding: '5px',
367+
borderColor: '#46C0A5',
368+
borderRadius: '5px'
369+
}}
370+
>
371+
{toggleText === 'on' ? 'View Cursors' : 'Hide Cursors'}
372+
</button>
373+
)}
346374
</label>
347375
</div>
348376
);

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 24 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -532,26 +532,24 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
532532
<ProjectManager />
533533
<div className="rightPanelWrapper">
534534
<div>
535-
<div className={classes.rootConfigHeader}>
536535
<h4
537-
className={
538-
isThemeLight
539-
? classes.lightThemeFontColor
540-
: classes.darkThemeFontColor
541-
}
542-
>
543-
Parent Component:
544-
<br />
545-
<br />
546-
<span className={classes.rootCompName}>
547-
{configTarget.name}
548-
</span>
549-
<p style={{ fontSize: '16px' }}>
550-
Drag and drop an html element (or focus one) to see what
551-
happens!
552-
</p>
553-
</h4>
554-
</div>
536+
className={
537+
isThemeLight
538+
? classes.lightThemeFontColor
539+
: classes.darkThemeFontColor
540+
}
541+
>
542+
Parent Component:
543+
<br />
544+
<br />
545+
<span className={classes.rootCompName}>
546+
{configTarget.name}
547+
</span>
548+
<p style={{ fontSize: '16px' }}>
549+
Drag and drop an html element (or focus one) to see what
550+
happens!
551+
</p>
552+
</h4>
555553
</div>
556554
</div>
557555
<ProjectManager />
@@ -581,17 +579,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
581579
{configTarget.child.type === 'component'
582580
? ' component'
583581
: ' element'}{' '}
582+
: {configTarget.child.name}
584583
<br />
585-
<br />
586-
<span
587-
className={
588-
isThemeLight
589-
? `${classes.compName} ${classes.lightThemeFontColor}`
590-
: `${classes.compName} ${classes.darkThemeFontColor}`
591-
}
592-
>
593584
{configTarget.child.name}
594-
</span>
595585
</h4>
596586
</div>
597587
<section className={'customization-section'}>
@@ -877,18 +867,18 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
877867
<Button
878868
variant="contained"
879869
color="primary"
870+
onClick={handleSave}
880871
className={
881872
isThemeLight
882873
? `${classes.button} ${classes.saveButtonLight}`
883874
: `${classes.button} ${classes.saveButtonDark}`
884875
}
885-
onClick={handleSave}
886876
id="saveButton"
887877
>
888878
SAVE
889879
</Button>
890880
</div>
891-
<div className={classes.buttonRow}>
881+
{/* <div className={classes.buttonRow}>
892882
<Button
893883
variant="contained"
894884
color="primary"
@@ -902,9 +892,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
902892
>
903893
CSS
904894
</Button>
905-
</div>
895+
</div> */}
906896

907-
<div>
897+
{/* <div>
908898
<Button
909899
variant="contained"
910900
color="primary"
@@ -923,7 +913,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
923913
>
924914
Tailwind
925915
</Button>
926-
</div>
916+
</div> */}
927917
{configTarget.child ? (
928918
<div className={classes.buttonRow}>
929919
<Button
@@ -1035,7 +1025,7 @@ const useStyles = makeStyles({
10351025
marginTop: '20px'
10361026
},
10371027
configType: {
1038-
minWidth: '185px',
1028+
minWidth: '100px',
10391029
fontSize: '85%'
10401030
},
10411031
configValue: {

0 commit comments

Comments
 (0)