Skip to content

Commit ec5f113

Browse files
CompuIvesCompuIves
committed
Improve dashboard modal rendering when forking and closing
1 parent b14c042 commit ec5f113

File tree

3 files changed

+78
-69
lines changed

3 files changed

+78
-69
lines changed

‎packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/elements.js‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ export const Container = styled.main`
99
color: ${props =>
1010
props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
1111
border-radius: 0 0 4px 4px;
12-
padding: 2rem;
1312
width: 100%;
1413
box-sizing: border-box;
1514
position: relative;
@@ -35,12 +34,33 @@ export const Container = styled.main`
3534
`};
3635
`;
3736

37+
export const TabContainer = styled.div`
38+
width: 100%;
39+
border-radius: 4px 4px 0 0;
40+
display: flex;
41+
background: #1b1d1f;
42+
height: 62px;
43+
box-sizing: border-box;
44+
padding: 0 2rem;
45+
46+
${props =>
47+
(props.closing || props.forking) &&
48+
css`
49+
position: absolute;
50+
overflow: hidden;
51+
${delayOutEffect(0)};
52+
`};
53+
`;
54+
3855
export const InnerContainer = styled.div`
56+
padding: 1rem 2rem;
57+
overflow: hidden;
3958
${props =>
4059
(props.closing || props.forking) &&
4160
css`
4261
position: absolute;
4362
overflow: hidden;
63+
padding: 0;
4464
${delayOutEffect(0)};
4565
`};
4666
`;
@@ -60,6 +80,7 @@ export const ImportChoices = styled.div`
6080
display: flex;
6181
align-items: center;
6282
justify-content: space-between;
83+
padding-bottom: 1rem;
6384
${delayEffect(0.1)};
6485
`;
6586

@@ -121,7 +142,7 @@ export const Button = styled.button`
121142
122143
&:after {
123144
content: '';
124-
margin-top: 22px;
145+
margin-top: 21px;
125146
display: block;
126147
position: relative;
127148
background: #40a9f3;
@@ -147,17 +168,6 @@ export const Button = styled.button`
147168
}
148169
`;
149170

150-
export const TabContainer = styled.div`
151-
width: 100%;
152-
border-radius: 4px 4px 0 0;
153-
display: flex;
154-
background: #1b1d1f;
155-
height: 62px;
156-
box-sizing: border-box;
157-
padding: 0 2rem;
158-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
159-
`;
160-
161171
export const Title = styled.h2`
162172
grid-column: 1/-1;
163173
font-weight: 600;

‎packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/index.js‎

Lines changed: 54 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,12 @@ export default class Modal extends React.PureComponent {
3333
const { selectedTab } = this.state;
3434

3535
return (
36-
<>
37-
<TabContainer>
36+
<Container
37+
closing={closing}
38+
forking={forking}
39+
onMouseDown={e => e.preventDefault()}
40+
>
41+
<TabContainer forking={forking} closing={closing}>
3842
{availableTemplates.map(({ name }, i) => (
3943
<Button
4044
key={name}
@@ -45,59 +49,54 @@ export default class Modal extends React.PureComponent {
4549
</Button>
4650
))}
4751
</TabContainer>
48-
<Container
49-
closing={closing}
50-
forking={forking}
51-
onMouseDown={e => e.preventDefault()}
52-
>
53-
<InnerContainer forking={forking} closing={closing}>
54-
{availableTemplates.map((tab, i) => (
55-
<Tab key={tab.name} visible={selectedTab === i}>
56-
<Templates>
57-
{tab.templates &&
58-
tab.templates.map(template => (
59-
<Template
60-
key={template.name}
61-
template={template}
62-
selectTemplate={this.selectTemplate}
63-
/>
64-
))}
65-
{tab.types &&
66-
tab.types.map(type => (
67-
<>
68-
<Title>{type.name}</Title>
69-
{type.templates.map(template => (
70-
<Template
71-
key={template.name}
72-
template={template}
73-
selectTemplate={this.selectTemplate}
74-
/>
75-
))}
76-
</>
77-
))}
78-
</Templates>
79-
</Tab>
80-
))}
81-
<ImportChoices>
82-
<ImportChoice
83-
href="/docs/importing#import-from-github"
84-
target="_blank"
85-
>
86-
<GithubLogo /> Import from GitHub
87-
</ImportChoice>
88-
<ImportChoice
89-
href="/docs/importing#export-with-cli"
90-
target="_blank"
91-
>
92-
<TerminalIcon /> Export with CLI
93-
</ImportChoice>
94-
<ImportChoice href="/docs/importing#define-api" target="_blank">
95-
<UploadIcon /> Create with API
96-
</ImportChoice>
97-
</ImportChoices>
98-
</InnerContainer>
99-
</Container>
100-
</>
52+
53+
<InnerContainer forking={forking} closing={closing}>
54+
{availableTemplates.map((tab, i) => (
55+
<Tab key={tab.name} visible={selectedTab === i}>
56+
<Templates>
57+
{tab.templates &&
58+
tab.templates.map(template => (
59+
<Template
60+
key={template.name}
61+
template={template}
62+
selectTemplate={this.selectTemplate}
63+
/>
64+
))}
65+
{tab.types &&
66+
tab.types.map(type => (
67+
<>
68+
<Title>{type.name}</Title>
69+
{type.templates.map(template => (
70+
<Template
71+
key={template.name}
72+
template={template}
73+
selectTemplate={this.selectTemplate}
74+
/>
75+
))}
76+
</>
77+
))}
78+
</Templates>
79+
</Tab>
80+
))}
81+
<ImportChoices>
82+
<ImportChoice
83+
href="/docs/importing#import-from-github"
84+
target="_blank"
85+
>
86+
<GithubLogo /> Import from GitHub
87+
</ImportChoice>
88+
<ImportChoice
89+
href="/docs/importing#export-with-cli"
90+
target="_blank"
91+
>
92+
<TerminalIcon /> Export with CLI
93+
</ImportChoice>
94+
<ImportChoice href="/docs/importing#define-api" target="_blank">
95+
<UploadIcon /> Create with API
96+
</ImportChoice>
97+
</ImportChoices>
98+
</InnerContainer>
99+
</Container>
101100
);
102101
}
103102
}

‎packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ class CreateNewSandbox extends React.PureComponent {
211211
right: 0,
212212
left: 0,
213213

214-
margin: '0 auto 20vh',
214+
margin: '0 auto 15vh',
215215
height: 'auto',
216216
width: 950,
217217
}}

0 commit comments

Comments
 (0)