Skip to content

Commit 8e59fd4

Browse files
wang9huwang9hu
committed
fixed the overall scroll problem in bottom panel
1 parent a6c5456 commit 8e59fd4

File tree

4 files changed

+34
-80
lines changed

4 files changed

+34
-80
lines changed

‎app/src/components/ContextAPIManager/ContextManager.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import DisplayContainer from './DisplayTab/DisplayContainer';
1313
const useStyles = makeStyles({
1414
contextContainer: {
1515
backgroundColor: 'white',
16-
height: '100%'
16+
height: 'fit-content'
1717
}
1818
});
1919

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import DisplayContainer from './DisplayTab/DisplayContainer';
1313
const useStyles = makeStyles({
1414
contextContainer: {
1515
backgroundColor: 'white',
16-
height: '100%'
16+
height: 'fit-content'
1717
}
1818
});
1919

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

Lines changed: 22 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -51,87 +51,35 @@ const BottomTabs = (props): JSX.Element => {
5151
className={`${classes.root} ${classes.rootLight}`}
5252
style={{ backgroundColor: '#003366' }}
5353
>
54-
<Box
55-
display="flex"
56-
justifyContent="space-between"
57-
alignItems="center"
58-
paddingBottom="10px"
59-
paddingRight="10px"
60-
>
61-
<Tabs
62-
value={tab}
63-
onChange={handleChange}
64-
classes={{
65-
root: classes.tabsRoot,
66-
indicator: classes.tabsIndicator
67-
}}
68-
>
69-
<Tab
70-
disableRipple
71-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
72-
label="Creation Panel"
73-
/>
74-
<Tab
75-
disableRipple
76-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
77-
label="Customization"
78-
/>
79-
<Tab
80-
disableRipple
81-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
82-
label="CSS Editor"
83-
/>
84-
<Tab
85-
disableRipple
86-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
87-
label="Code Preview"
88-
/>
89-
<Tab
90-
disableRipple
91-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
92-
label="Component Tree"
93-
/>
94-
<Tab
95-
disableRipple
96-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
97-
label="Context Manager"
98-
/>
99-
<Tab
100-
disableRipple
101-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
102-
label="State Manager"
103-
/>
54+
<Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
55+
<Tabs value={tab} onChange={handleChange} classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}>
56+
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Creation Panel" />
57+
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Customization" />
58+
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="CSS Editor" />
59+
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Code Preview" />
60+
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Component Tree" />
61+
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Context Manager" />
62+
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="State Manager" />
10463
</Tabs>
10564
<div className={classes.projectTypeWrapper}>
10665
<FormControl size="small">
107-
<Select
108-
variant="outlined"
109-
labelId="project-type-label"
110-
id="demo-simple-select"
111-
className={classes.projectSelector}
112-
value={state.projectType}
113-
onChange={handleProjectChange}
114-
>
115-
<MenuItem style={{ color: 'black' }} value={'Classic React'}>
116-
Classic React
117-
</MenuItem>
118-
<MenuItem style={{ color: 'black' }} value={'Gatsby.js'}>
119-
Gatsby.js
120-
</MenuItem>
121-
<MenuItem style={{ color: 'black' }} value={'Next.js'}>
122-
Next.js
123-
</MenuItem>
66+
<Select variant="outlined" labelId="project-type-label" id="demo-simple-select" className={classes.projectSelector} value={state.projectType} onChange={handleProjectChange} MenuProps={{ disablePortal: true }}>
67+
<MenuItem style={{ color: 'black' }} value={'Classic React'}>Classic React</MenuItem>
68+
<MenuItem style={{ color: 'black' }} value={'Gatsby.js'}>Gatsby.js</MenuItem>
69+
<MenuItem style={{ color: 'black' }} value={'Next.js'}>Next.js</MenuItem>
12470
</Select>
12571
</FormControl>
12672
</div>
12773
</Box>
128-
{tab === 0 && <CreationPanel isThemeLight={props.isThemeLight} />}
129-
{tab === 1 && <CustomizationPanel isThemeLight={props.isThemeLight} />}
130-
{tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
131-
{tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />}
132-
{tab === 4 && <Tree data={components} />}
133-
{tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
134-
{tab === 6 && <StateManager theme={theme} setTheme={setTheme} isThemeLight={props.isThemeLight} />}
74+
<div className='tab-content'>
75+
{tab === 0 && <CreationPanel isThemeLight={props.isThemeLight} />}
76+
{tab === 1 && <CustomizationPanel isThemeLight={props.isThemeLight} />}
77+
{tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
78+
{tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />}
79+
{tab === 4 && <Tree data={components} />}
80+
{tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
81+
{tab === 6 && <StateManager theme={theme} setTheme={setTheme} isThemeLight={props.isThemeLight} />}
82+
</div>
13583
</div>
13684
);
13785
};

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ h4 {
3232
color:black;
3333
display: flex;
3434
flex-direction: row;
35-
height: 100%;
35+
/* height: 100%; */
3636
background-color: #fff;
3737
}
3838
.customization-section {
@@ -72,7 +72,7 @@ header {
7272
.app-container {
7373
display: flex;
7474
width: 100%;
75-
height: 100vh;
75+
height: calc(100vh - 64px);
7676
}
7777

7878
.mode-change-button {
@@ -389,9 +389,9 @@ BOTTOM PANEL
389389
/////////////////////////////////////////////////////
390390
*/
391391
.bottom-hide {
392-
max-height: 8.625rem;
392+
max-height: 76px;
393393
box-sizing: border-box;
394-
transition: all 0.5s ease-out;
394+
transition: all 0.5s ease-in-out;
395395
}
396396

397397
.bottom-hide:focus-within {
@@ -402,6 +402,12 @@ BOTTOM PANEL
402402
max-height: 100%;
403403
}
404404

405+
.tab-content {
406+
height: calc(100% - 76px);
407+
overflow-y: scroll;
408+
overflow-x: hidden;
409+
}
410+
405411
#resize-drag {
406412
cursor: row-resize;
407413
background-color: silver;

0 commit comments

Comments
 (0)