Skip to content

Commit 0ad4170

Browse files
lillwimberlylillwimberly
authored
Merge pull request #3 from oslabs-beta/xiao
BottomPanel/Xiao
2 parents 5e2a176 + a6c5456 commit 0ad4170

File tree

9 files changed

+124
-40
lines changed

9 files changed

+124
-40
lines changed

‎__tests__/__snapshots__/enzyme.test.tsx.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -694,6 +694,7 @@ exports[`Test the CanvasContainer component Matches snapshot 1`] = `
694694
Object {
695695
"backgroundColor": "lightgrey",
696696
"border": "2px Solid grey",
697+
"overflow": "auto",
697698
"width": "100%",
698699
}
699700
}

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

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -237,44 +237,45 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
237237
Required
238238
</FormHelperText>
239239
</FormControl>
240-
<br></br>
240+
<br />
241241
<MyButton
242242
type="submit"
243243
onClick={submitNewState}
244244
className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
245245
>
246246
Save
247247
</MyButton>
248-
<br></br>
248+
<br />
249249

250250
</FormControl>
251251
</div>
252-
<br></br>
252+
<br />
253253
<div style={{display: 'flex', overflowX: 'scroll', width: '1700px'}}>
254254
<div style={{display: 'flex', flexDirection: 'column'}}>
255-
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
256-
Current Component State: {state.components[state.canvasFocus.componentId - 1].name}
257-
</h4>
258-
<TableStateProps rows1={rows1} setRows1={setRows1} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
255+
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
256+
Current Component State: {state.components[state.canvasFocus.componentId - 1].name}
257+
</h4>
258+
<TableStateProps rows1={rows1} setRows1={setRows1} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
259259
</div>
260260

261261
<div style={{display: 'flex', flexDirection: 'column'}}>
262-
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
263-
Available Props from Parent: {parentName ? parentName : 'No Parents'}
264-
</h4>
265-
<TableParentProps parentPassedInProps = {parentPassedInProps} parentComponent ={parentComponent} parentProps={parentProps} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
262+
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
263+
Available Props from Parent: {parentName ? parentName : 'No Parents'}
264+
</h4>
265+
<TableParentProps parentPassedInProps = {parentPassedInProps} parentComponent ={parentComponent} parentProps={parentProps} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
266266
</div>
267+
267268
<div style={{display: 'flex', flexDirection: 'column', width: `${40}px`, color: 'black', justifyContent: 'center'}}>
268-
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
269-
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
270-
</svg>
271-
</div>
269+
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
270+
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
271+
</svg>
272+
</div>
272273

273274
<div style={{display: 'flex', flexDirection: 'column'}}>
274-
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
275-
Passed in Props from Parent: {parentName ? parentName : 'No Parents'}
276-
</h4>
277-
<TablePassedInProps canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
275+
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
276+
Passed in Props from Parent: {parentName ? parentName : 'No Parents'}
277+
</h4>
278+
<TablePassedInProps canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
278279
</div>
279280
</div>
280281
</div>

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

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,60 @@
1-
import React from 'react';
1+
import React, { RefObject, useEffect, useRef } from 'react';
22
import BottomTabs from './BottomTabs';
3-
import { Resizable } from 're-resizable';
3+
// import { Resizable } from 're-resizable';
44

55
const BottomPanel = (props): JSX.Element => {
6+
let y: number = 0;
7+
let h: number = 0;
8+
9+
const node = useRef() as React.MutableRefObject<HTMLDivElement>;
10+
11+
const mouseDownHandler = (e): void => {
12+
y = e.clientY;
13+
14+
const styles = window.getComputedStyle(node.current);
15+
h = parseInt(styles.height, 10);
16+
17+
document.addEventListener('mousemove', mouseMoveHandler);
18+
document.addEventListener('mouseup', mouseUpHandler);
19+
}
20+
21+
const mouseMoveHandler = function (e: MouseEvent): void {
22+
// How far the mouse has been moved
23+
const dy = y - e.clientY;
24+
25+
// Adjust the dimension of element
26+
node.current.style.height = `${h + dy}px`;
27+
};
28+
29+
const mouseUpHandler = function () {
30+
// Remove the handlers of `mousemove` and `mouseup`
31+
document.removeEventListener('mousemove', mouseMoveHandler);
32+
document.removeEventListener('mouseup', mouseUpHandler);
33+
};
34+
35+
useEffect(() => {
36+
node.current.style.height = '50vh';
37+
},[]);
38+
639
return (
7-
<Resizable
8-
enable={{
9-
top: true
10-
}}
11-
minHeight={'50%'}
12-
>
13-
<div className="bottom-panel" >
14-
<BottomTabs isThemeLight={props.isThemeLight}/>
15-
</div>
16-
</Resizable>
40+
// decide not to use re-resizable library
41+
// <Resizable
42+
// defaultSize={{ width: 'auto', height: '50%' }}
43+
// enable={{
44+
// top: true
45+
// }}
46+
// // minHeight={'50%'}
47+
// >
48+
// <div className="bottom-panel" >
49+
// <BottomTabs isThemeLight={props.isThemeLight}/>
50+
// </div>
51+
// </Resizable>
52+
53+
// add 'tabIndex' to make the resize bar focusable
54+
<div className="bottom-panel" id='resize' ref={node}>
55+
<div id='resize-drag' onMouseDown={mouseDownHandler} tabIndex = {0} >......</div>
56+
<BottomTabs isThemeLight={props.isThemeLight}/>
57+
</div>
1758
);
1859
};
1960

‎app/src/components/form/Selector.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const FormSelector = (props): JSX.Element => {
99
const items = [];
1010
let key = 1;
1111
props.items.forEach(el => {
12-
items.push(<MenuItem style={{ color: 'black' }} value={el.value} key={`menu${key}`}>{el.text}</MenuItem>);
12+
items.push(<MenuItem style={{ color: 'black' }} value={el.value} key={`menu${key}`} >{el.text}</MenuItem>);
1313
key++
1414
})
1515
return (
@@ -27,6 +27,7 @@ const FormSelector = (props): JSX.Element => {
2727
displayEmpty
2828
className={props.classes.select}
2929
inputProps={{ className: props.isThemeLight ? `${props.classes.selectInput} ${props.classes.lightThemeFontColor}` : `${props.classes.selectInput} ${props.classes.darkThemeFontColor}` }}
30+
MenuProps={{ disablePortal: true }}
3031
>
3132
{items}
3233
</Select>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ function CanvasContainer(props): JSX.Element {
77
width: '100%',
88
backgroundColor: 'lightgrey',
99
border: '2px Solid grey',
10+
overflow: 'auto',
1011
};
1112

1213
return (

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ const DemoRender = (): JSX.Element => {
2222
const demoContainerStyle = {
2323
width: '100%',
2424
backgroundColor: '#FBFBFB',
25-
border: '2px Solid grey'
25+
border: '2px Solid grey',
26+
overflow: 'auto',
2627
};
2728

2829
const html = `

‎app/src/containers/MainContainer.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ const MainContainer = (props): JSX.Element => {
1212
<CanvasContainer isThemeLight={props.isThemeLight}/>
1313
<DemoRender />
1414
</div>
15-
<BottomPanel isThemeLight={props.isThemeLight}/>
15+
<div className='bottom-hide'>
16+
<BottomPanel isThemeLight={props.isThemeLight}/>
17+
</div>
1618
</div>
1719
);
1820
};

‎app/src/public/styles/style.css

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,12 @@
77
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
88
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
99

10+
1011
html {
1112
box-sizing: border-box;
13+
/* height: 100vh;
14+
width: 100vw; */
15+
overflow: auto;
1216
}
1317
body {
1418
margin: 0;
@@ -17,6 +21,8 @@ body {
1721
font-size: 0.9 em;
1822
font-weight: 400;
1923
overflow: hidden;
24+
height: 100vh;
25+
width: 100vw;
2026
}
2127
h4 {
2228
color: #155084;
@@ -226,6 +232,7 @@ h1 {
226232
flex-direction: column;
227233
flex: 1;
228234
min-width: 700px;
235+
/* overflow: auto; */
229236
}
230237

231238
.main-header {
@@ -302,10 +309,11 @@ RIGHT COLUMN
302309
// RIGHT NOW, I'M NOT SURE WHAT RIGHT COL IS REFERING TO
303310
*/
304311
#rightContainer {
305-
overflow-y: scroll;
312+
overflow-y: auto;
306313
overflow-x: hidden;
307314
display: flex;
308315
flex-direction: row;
316+
height: 100%;
309317
}
310318

311319
.right {
@@ -380,12 +388,40 @@ RIGHT COLUMN
380388
BOTTOM PANEL
381389
/////////////////////////////////////////////////////
382390
*/
391+
.bottom-hide {
392+
max-height: 8.625rem;
393+
box-sizing: border-box;
394+
transition: all 0.5s ease-out;
395+
}
396+
397+
.bottom-hide:focus-within {
398+
max-height: 100%;
399+
}
400+
401+
.bottom-hide:hover {
402+
max-height: 100%;
403+
}
404+
405+
#resize-drag {
406+
cursor: row-resize;
407+
background-color: silver;
408+
height: 16px;
409+
top: 0;
410+
/* left: 50px; */
411+
width: 100%;
412+
border: 2px solid black;
413+
border-radius: 8px;
414+
text-align: center;
415+
line-height: 0px;
416+
user-select: none;
417+
color:rgb(32, 32, 32);
418+
font-size: x-large;
419+
}
383420

384421
.bottom-panel {
385422
transition: width 250ms ease-in-out;
386423
width: 100%;
387424
height: 100%;
388-
min-height: 25%;
389425
}
390426

391427
.htmlattr {

‎app/src/tutorial/Customization.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
2-
import display from '../../../resources/customizing_elements_images/display.png';
3-
import height from '../../../resources/customizing_elements_images/height.png';
4-
import width from '../../../resources/customizing_elements_images/width.png';
5-
import backgroundColor from '../../../resources/customizing_elements_images/backgroundColor.png';
2+
import display from '../../../resources/customizing_elements_images/Display.png';
3+
import height from '../../../resources/customizing_elements_images/Height.png';
4+
import width from '../../../resources/customizing_elements_images/Width.png';
5+
import backgroundColor from '../../../resources/customizing_elements_images/BackgroundColor.png';
66
import text from '../../../resources/customizing_elements_images/textState.png';
77
import link from '../../../resources/customizing_elements_images/linkState.png';
88
import cssClasses from '../../../resources/customizing_elements_images/CSS.png';

0 commit comments

Comments
 (0)