Skip to content

Commit 6fce2a9

Browse files
Tushar SonawaneCompuIves
Tushar Sonawane
authored and
CompuIves
committed
Make '+' action into a dropdown (codesandbox#131)
* make '+' action into a dropdown * add import from cli page * add new vue sandbox to menu * fix state transition lag * add NewSandboxMenu to Navigation container * add preact :atom: link to menu 🎉 * add moreInfo chevron * remove bottom highlight * add wrapper around import-from-github page * add wrapper around import-from-cli page * Prettify using the new settings * Show bottom highlight in editor * Don't prettify prettier
1 parent 361eeff commit 6fce2a9

File tree

11 files changed

+255
-64
lines changed

11 files changed

+255
-64
lines changed

‎src/app/components/MenuItem.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import styled from 'styled-components';
2+
3+
export default styled.div`
4+
transition: 0.3s ease all;
5+
display: flex;
6+
align-items: center;
7+
font-size: 0.875rem;
8+
padding: 0.75rem 1rem;
9+
10+
text-decoration: none;
11+
12+
color: rgba(255, 255, 255, 0.8);
13+
border-left: 2px solid transparent;
14+
15+
cursor: pointer;
16+
17+
&:hover {
18+
border-color: ${props => props.theme.secondary};
19+
color: white;
20+
background-color: ${props => props.theme.secondary.clearer(0.9)};
21+
}
22+
`;

‎src/app/containers/Navigation/index.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Logo from 'app/components/Logo';
1010
import Row from 'app/components/flex/Row';
1111
import Tooltip from 'app/components/Tooltip';
1212
import HeaderSearchBar from 'app/components/HeaderSearchBar';
13+
import NewSandboxAction from '../../pages/Sandbox/Editor/Content/Header/NewSandboxAction';
1314

1415
import { jwtSelector, isPatronSelector } from 'app/store/user/selectors';
1516
import { newSandboxUrl, patronUrl } from 'app/utils/url-generator';
@@ -103,11 +104,7 @@ class Navigation extends React.PureComponent<Props> {
103104
</Tooltip>
104105
</Action>
105106
)}
106-
<Action>
107-
<Tooltip title="New Sandbox">
108-
<PlusIcon to={newSandboxUrl()}>+</PlusIcon>
109-
</Tooltip>
110-
</Action>
107+
<NewSandboxAction />
111108
</Actions>
112109
{hasLogin ? <UserMenu /> : <SignInButton />}
113110
</Row>

‎src/app/pages/CliInstructions/index.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
// @flow
2+
import React from 'react';
3+
import styled from 'styled-components';
4+
5+
import Navigation from 'app/containers/Navigation';
6+
import Centered from 'app/components/flex/Centered';
7+
import Title from 'app/components/text/Title';
8+
import SubTitle from 'app/components/text/SubTitle';
9+
import MaxWidth from 'app/components/flex/MaxWidth';
10+
import Margin from 'app/components/spacing/Margin';
11+
12+
const Container = styled.div`
13+
height: 100%;
14+
width: 100%;
15+
margin: 1rem;
16+
`;
17+
18+
const Content = styled(Centered)`
19+
max-width: 50em;
20+
margin: auto;
21+
margin-top: 10%;
22+
`;
23+
24+
const Code = styled.pre`
25+
margin-bottom: 1rem;
26+
color: rgba(255, 255, 255, 0.7);
27+
`;
28+
29+
export default () => (
30+
<MaxWidth>
31+
<Margin vertical={1.5} horizontal={1.5}>
32+
<Container>
33+
<Navigation title="CLI Import" />
34+
<Content vertical>
35+
<Title>Import from CLI</Title>
36+
<SubTitle>
37+
1. Install the CLI <Code>npm i -g codesandbox</Code>
38+
</SubTitle>
39+
<SubTitle>
40+
2. Go to your `create-react-app` project{' '}
41+
<Code>cd path-of-your-project</Code>
42+
</SubTitle>
43+
<SubTitle>
44+
3. Deploy your project to CodeSandbox <Code>codesandbox ./</Code>
45+
</SubTitle>
46+
</Content>
47+
</Container>
48+
</Margin>
49+
</MaxWidth>
50+
);

‎src/app/pages/GitHub/index.js‎

Lines changed: 43 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Navigation from 'app/containers/Navigation';
66
import Centered from 'app/components/flex/Centered';
77
import Title from 'app/components/text/Title';
88
import SubTitle from 'app/components/text/SubTitle';
9+
import MaxWidth from 'app/components/flex/MaxWidth';
10+
import Margin from 'app/components/spacing/Margin';
911
import Input from 'app/components/Input';
1012
import Button from 'app/components/buttons/Button';
1113
import { gitHubToSandboxUrl, protocolAndHost } from 'app/utils/url-generator';
@@ -77,42 +79,47 @@ export default class GitHub extends React.PureComponent<{}, State> {
7779
render() {
7880
const { url, transformedUrl, error } = this.state;
7981
return (
80-
<Container>
81-
<Navigation title="GitHub Import" />
82-
83-
<Content vertical horizontal>
84-
<Description>
85-
<Title>Import from GitHub</Title>
86-
<SubTitle>
87-
Enter the URL to your GitHub repository to generate a URL to your
88-
sandbox. The sandbox will stay in sync with your repository.
89-
</SubTitle>
90-
</Description>
91-
92-
<Label htmlFor="githuburl">
93-
URL to GitHub Repository (supports branches and paths too)
94-
</Label>
95-
<StyledInput
96-
name="githuburl"
97-
value={url}
98-
onChange={this.updateUrl}
99-
placeholder="Insert GitHub URL..."
100-
/>
101-
102-
{error !== null && <ErrorMessage>{error}</ErrorMessage>}
103-
104-
<Label htmlFor="sandboxurl">Converted Sandbox URL</Label>
105-
<StyledInput
106-
name="sandboxurl"
107-
value={transformedUrl}
108-
placeholder="The Sandbox URL"
109-
/>
110-
111-
<Button disabled={!transformedUrl} to={gitHubToSandboxUrl(url)}>
112-
Open Sandbox
113-
</Button>
114-
</Content>
115-
</Container>
82+
<MaxWidth>
83+
<Margin vertical={1.5} horizontal={1.5}>
84+
<Container>
85+
<Navigation title="GitHub Import" />
86+
87+
<Content vertical horizontal>
88+
<Description>
89+
<Title>Import from GitHub</Title>
90+
<SubTitle>
91+
Enter the URL to your GitHub repository to generate a URL to
92+
your sandbox. The sandbox will stay in sync with your
93+
repository.
94+
</SubTitle>
95+
</Description>
96+
97+
<Label htmlFor="githuburl">
98+
URL to GitHub Repository (supports branches and paths too)
99+
</Label>
100+
<StyledInput
101+
name="githuburl"
102+
value={url}
103+
onChange={this.updateUrl}
104+
placeholder="Insert GitHub URL..."
105+
/>
106+
107+
{error !== null && <ErrorMessage>{error}</ErrorMessage>}
108+
109+
<Label htmlFor="sandboxurl">Converted Sandbox URL</Label>
110+
<StyledInput
111+
name="sandboxurl"
112+
value={transformedUrl}
113+
placeholder="The Sandbox URL"
114+
/>
115+
116+
<Button disabled={!transformedUrl} to={gitHubToSandboxUrl(url)}>
117+
Open Sandbox
118+
</Button>
119+
</Content>
120+
</Container>
121+
</Margin>
122+
</MaxWidth>
116123
);
117124
}
118125
}

‎src/app/pages/Sandbox/Editor/Content/Header/Action.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ const styles = props =>
3535
3636
&:hover {
3737
color: rgba(255,255,255, 1);
38-
border-color: ${props.theme.secondary()}
38+
border-color: ${props.hideBottomHighlight
39+
? 'transparent'
40+
: props.theme.secondary()}
3941
}
4042
`}
4143
`;
@@ -85,6 +87,7 @@ type Props = {
8587
highlight: ?boolean,
8688
tooltip: ?string,
8789
moreInfo: ?boolean,
90+
hideBottomHighlight: ?boolean,
8891
unresponsive: boolean,
8992
a: ?boolean,
9093
iconProps: Object,

‎src/app/pages/Sandbox/Editor/Content/Header/NewSandboxAction.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import PlusIcon from 'react-icons/lib/go/plus';
4+
5+
import HoverMenu from 'app/components/HoverMenu';
6+
7+
import Action from './Action';
8+
import NewSandboxMenu from './NewSandboxMenu';
9+
10+
const Container = styled.div`
11+
position: relative;
12+
z-index: 2;
13+
height: 100%;
14+
display: flex;
15+
align-items: center;
16+
vertical-align: middle;
17+
`;
18+
19+
type Props = {
20+
showHighlight: boolean,
21+
};
22+
23+
type State = {
24+
menuOpen: boolean,
25+
};
26+
27+
export default class NewSandboxAction extends React.PureComponent<
28+
Props,
29+
State
30+
> {
31+
state = {
32+
menuOpen: false,
33+
};
34+
35+
closeMenu = () => this.setState({ menuOpen: false });
36+
openMenu = () => this.setState({ menuOpen: true });
37+
38+
render() {
39+
const { menuOpen } = this.state;
40+
return (
41+
<Container>
42+
<Action
43+
onClick={menuOpen ? this.closeMenu : this.openMenu}
44+
tooltip="New Sandbox"
45+
Icon={PlusIcon}
46+
moreInfo
47+
hideBottomHighlight={!this.props.showHighlight}
48+
/>
49+
{menuOpen && (
50+
<HoverMenu onClose={this.closeMenu}>
51+
<NewSandboxMenu />
52+
</HoverMenu>
53+
)}
54+
</Container>
55+
);
56+
}
57+
}

‎src/app/pages/Sandbox/Editor/Content/Header/NewSandboxMenu.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { Link } from 'react-router-dom';
4+
5+
import delayEffect from 'app/utils/animation/delay-effect';
6+
import MenuItem from 'app/components/MenuItem';
7+
8+
import {
9+
newSandboxUrl,
10+
newPreactSandboxUrl,
11+
newVueSandboxUrl,
12+
importFromGitHubUrl,
13+
uploadFromCliUrl,
14+
} from 'app/utils/url-generator';
15+
16+
const Container = styled.div`
17+
position: absolute;
18+
background-color: ${props => props.theme.background2};
19+
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.75);
20+
21+
${delayEffect(0)};
22+
top: 40px;
23+
right: 0;
24+
25+
min-width: 200px;
26+
27+
z-index: 20;
28+
`;
29+
30+
export default () => (
31+
<Container>
32+
<Link style={{ textDecoration: 'none' }} to={newSandboxUrl()}>
33+
<MenuItem>New React Sandbox</MenuItem>
34+
</Link>
35+
<Link style={{ textDecoration: 'none' }} to={newPreactSandboxUrl()}>
36+
<MenuItem>New Preact Sandbox</MenuItem>
37+
</Link>
38+
<Link style={{ textDecoration: 'none' }} to={newVueSandboxUrl()}>
39+
<MenuItem>New Vue Sandbox</MenuItem>
40+
</Link>
41+
<Link style={{ textDecoration: 'none' }} to={importFromGitHubUrl()}>
42+
<MenuItem>Import from Github</MenuItem>
43+
</Link>
44+
<Link style={{ textDecoration: 'none' }} to={uploadFromCliUrl()}>
45+
<MenuItem>Upload from CLI</MenuItem>
46+
</Link>
47+
</Container>
48+
);

‎src/app/pages/Sandbox/Editor/Content/Header/index.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Media from 'react-media';
66
import Save from 'react-icons/lib/md/save';
77
import Fork from 'react-icons/lib/go/repo-forked';
88
import Download from 'react-icons/lib/go/cloud-download';
9-
import PlusIcon from 'react-icons/lib/go/plus';
109
import GithubIcon from 'react-icons/lib/go/mark-github';
1110
import ChevronLeft from 'react-icons/lib/md/chevron-left';
1211
import HeartIcon from 'react-icons/lib/fa/heart-o';
@@ -20,12 +19,7 @@ import type { Sandbox, CurrentUser } from 'common/types';
2019
import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
2120
import userActionCreators from 'app/store/user/actions';
2221
import modalActionCreators from 'app/store/modal/actions';
23-
import {
24-
searchUrl,
25-
newSandboxUrl,
26-
importFromGitHubUrl,
27-
patronUrl,
28-
} from 'app/utils/url-generator';
22+
import { searchUrl, patronUrl } from 'app/utils/url-generator';
2923
import ModeIcons from 'app/components/sandbox/ModeIcons';
3024

3125
// $FlowIssue
@@ -36,6 +30,7 @@ import UserMenu from 'app/containers/UserMenu';
3630
import Preferences from 'app/containers/Preferences';
3731

3832
import Action from './Action';
33+
import NewSandboxAction from './NewSandboxAction';
3934
import FeedbackView from './FeedbackView';
4035
import ShareView from './ShareView';
4136

@@ -250,16 +245,7 @@ export default class Header extends React.PureComponent<Props> {
250245
email={user.email}
251246
sendMessage={userActions.sendFeedback}
252247
/>
253-
<Action
254-
href={importFromGitHubUrl()}
255-
tooltip="Import from GitHub"
256-
Icon={GithubIcon}
257-
/>
258-
<Action
259-
href={newSandboxUrl()}
260-
tooltip="New Sandbox"
261-
Icon={PlusIcon}
262-
/>
248+
<NewSandboxAction showHighlight />
263249
<Action
264250
onClick={this.openPreferences}
265251
tooltip="Preferences"

0 commit comments

Comments
 (0)