Skip to content

Commit 0f5b6ea

Browse files
christianalfonichristianalfoni
committed
merge master
2 parents a7f8434 + 863c31a commit 0f5b6ea

File tree

37 files changed

+1644
-644
lines changed

37 files changed

+1644
-644
lines changed

‎packages/app/scripts/sentry-create-release.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-console */
12
const childProcess = require('child_process');
23
const VERSION = require('@codesandbox/common/lib/version').default;
34

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import ArrowDropUp from 'react-icons/lib/md/keyboard-arrow-up';
66
import algoliasearch from 'algoliasearch/lite';
77
import compareVersions from 'compare-versions';
88
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
9-
import { CSB_PKG_PROTOCOL } from '@codesandbox/common/lib/utils/ci';
9+
import { formatVersion } from '@codesandbox/common/lib/utils/ci';
1010

1111
import { EntryContainer, IconArea, Icon } from '../../elements';
1212
import { Link } from '../elements';
@@ -27,17 +27,6 @@ interface State {
2727
versions: string[];
2828
}
2929

30-
function formatVersion(version: string) {
31-
if (CSB_PKG_PROTOCOL.test(version)) {
32-
const commitSha = version.match(/commit\/([\w\d]*)\//);
33-
if (commitSha && commitSha[1]) {
34-
return `csb:${commitSha[1]}`;
35-
}
36-
}
37-
38-
return version;
39-
}
40-
4130
export class VersionEntry extends React.PureComponent<Props, State> {
4231
state: State = {
4332
hovering: false,

‎packages/app/src/app/pages/common/Modals/ShareModal/getCode.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ import {
88
} from '@codesandbox/common/lib/utils/url-generator';
99
import { escapeHtml } from 'app/utils/escape';
1010

11-
export const BUTTON_URL = `${
12-
process.env.CODESANDBOX_HOST
13-
}/static/img/play-codesandbox.svg`;
11+
export const BUTTON_URL = `${process.env.CODESANDBOX_HOST}/static/img/play-codesandbox.svg`;
1412

1513
export const VIEW_OPTIONS = ['Editor + Preview', 'Preview', 'Editor'];
14+
export const THEME_OPTIONS = ['Dark', 'Light'];
1615

1716
const getOptionsUrl = (sandbox, mainModule, state) => {
1817
const {
1918
defaultModule,
2019
view,
20+
theme,
2121
testsView,
2222
autoResize,
2323
hideNavigation,
@@ -31,6 +31,7 @@ const getOptionsUrl = (sandbox, mainModule, state) => {
3131

3232
const options = {
3333
view: view !== VIEW_OPTIONS[0] ? view.toLowerCase() : null,
34+
theme: theme !== THEME_OPTIONS[0] ? theme.toLowerCase() : null,
3435
previewwindow: testsView ? 'tests' : null,
3536
autoresize: autoResize ? 1 : null,
3637
hidenavigation: hideNavigation ? 1 : null,

‎packages/app/src/app/pages/common/Modals/ShareModal/index.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
66
import track from '@codesandbox/common/lib/utils/analytics';
77
import { Button } from '@codesandbox/common/lib/components/Button';
88
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
9+
import { EMBED_LIGHT_THEME } from '@codesandbox/common/lib/utils/feature-flags';
910
import Title from './Title';
1011

1112
import {
@@ -22,6 +23,7 @@ import {
2223
import {
2324
BUTTON_URL,
2425
VIEW_OPTIONS,
26+
THEME_OPTIONS,
2527
getIframeScript,
2628
getEditorUrl,
2729
getEmbedUrl,
@@ -32,10 +34,11 @@ import {
3234
class ShareView extends React.Component {
3335
state = {
3436
view: VIEW_OPTIONS[0],
37+
theme: 'dark',
3538
testsView: false,
3639
defaultModule: null,
3740
autoResize: false,
38-
hideNavigation: false,
41+
hideNavigation: true,
3942
isCurrentModuleView: false,
4043
fontSize: 14,
4144
initialPath: '',
@@ -108,6 +111,10 @@ class ShareView extends React.Component {
108111
this.setState({ view });
109112
};
110113

114+
setTheme = (theme: string) => {
115+
this.setState({ theme });
116+
};
117+
111118
select = function select(event) {
112119
event.target.select();
113120
};
@@ -122,6 +129,7 @@ class ShareView extends React.Component {
122129

123130
const {
124131
view,
132+
theme,
125133
testsView,
126134
autoResize,
127135
hideNavigation,
@@ -156,6 +164,15 @@ class ShareView extends React.Component {
156164
value={view}
157165
setValue={this.setView}
158166
/>
167+
{EMBED_LIGHT_THEME && (
168+
<PaddedPreference
169+
title="Theme"
170+
type="dropdown"
171+
options={THEME_OPTIONS}
172+
value={theme}
173+
setValue={this.setTheme}
174+
/>
175+
)}
159176
<PaddedPreference
160177
title="Auto resize"
161178
type="boolean"

‎packages/app/src/embed/components/Actions/elements.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import styled from 'styled-components';
2+
import css from '@styled-system/css';
3+
import { HeartIconSVG, ReloadIconSVG, NewWindowIconSVG } from './icons';
4+
5+
// TODO: Check if we still need previewVisible
6+
export const Container = styled.div(props =>
7+
css({
8+
position: 'absolute',
9+
[props.align]: 16,
10+
zIndex: 99,
11+
12+
display: 'flex',
13+
// margin between consecutive elements
14+
'* + *': {
15+
marginLeft: 1,
16+
},
17+
18+
// 28 is the height of console
19+
bottom: props.isDragging ? -32 : props.previewVisible ? 28 + 16 : 16,
20+
opacity: props.isDragging ? 0 : 1,
21+
transitionProperty: 'opacity, bottom',
22+
transitionDuration: theme =>
23+
// go out fast, come back slow
24+
props.isDragging ? theme.speed[3] : theme.speed[5],
25+
})
26+
);
27+
28+
export const Button = styled.button(
29+
css({
30+
display: 'inline-flex',
31+
alignItems: 'center',
32+
height: 32,
33+
paddingX: 3,
34+
paddingY: 0,
35+
36+
fontSize: 3,
37+
fontWeight: 'medium',
38+
border: '1px solid',
39+
borderColor: 'grays.500',
40+
color: 'white',
41+
backgroundColor: 'grays.700',
42+
borderRadius: 4,
43+
textDecoration: 'none',
44+
cursor: 'pointer',
45+
46+
':hover': {
47+
backgroundColor: 'grays.500',
48+
},
49+
})
50+
);
51+
52+
export const HeartIcon = styled(HeartIconSVG)(props =>
53+
css({
54+
path: {
55+
stroke: props.liked ? 'reds.300' : 'white',
56+
fill: props.liked ? 'reds.300' : 'none',
57+
},
58+
})
59+
);
60+
61+
export const ReloadIcon = ReloadIconSVG;
62+
export const NewWindowIcon = NewWindowIconSVG;

‎packages/app/src/embed/components/Actions/icons.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
3+
export const HeartIconSVG = props => (
4+
<svg
5+
width="14"
6+
height="14"
7+
viewBox="0 0 14 14"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
{...props}
11+
>
12+
<path
13+
d="M6.91607 12C17.423 6.10866 12.2269 -1.90872 6.91608 2.06249C1.8346 -1.90872 -3.36155 6.10865 6.91607 12Z"
14+
stroke="none"
15+
/>
16+
</svg>
17+
);
18+
19+
export const ReloadIconSVG = props => (
20+
<svg
21+
width="11"
22+
height="11"
23+
viewBox="0 0 11 11"
24+
fill="none"
25+
xmlns="http://www.w3.org/2000/svg"
26+
{...props}
27+
>
28+
<path
29+
fillRule="evenodd"
30+
clipRule="evenodd"
31+
d="M9.99523 0.450012H11L11 4.97145V5.97621H5.97619V4.97145H9.94213C9.49598 3.16488 7.87424 1.8261 5.94194 1.8261C3.66552 1.8261 1.82013 3.68416 1.82013 5.9762C1.82013 8.26824 3.66552 10.1263 5.94194 10.1263C7.25318 10.1263 8.42143 9.50981 9.17634 8.54899L9.77639 9.19091C8.86113 10.2964 7.48313 11 5.94194 11C3.18628 11 0.952377 8.75077 0.952377 5.9762C0.952377 3.20163 3.18628 0.952389 5.94194 0.952389C7.61147 0.952389 9.08949 1.778 9.99523 3.04586V0.450012Z"
32+
fill="currentcolor"
33+
/>
34+
</svg>
35+
);
36+
37+
export const NewWindowIconSVG = props => (
38+
<svg
39+
width="15"
40+
height="12"
41+
viewBox="0 0 15 12"
42+
fill="none"
43+
xmlns="http://www.w3.org/2000/svg"
44+
{...props}
45+
>
46+
<path
47+
fillRule="evenodd"
48+
clipRule="evenodd"
49+
d="M14.4545 0H10.5C10.1988 0 10 0.198754 10 0.5C10 0.801246 10.1988 1 10.5 1H13L9.5 4.5L10.5 5.5L14 2V4.5C14 4.80125 14.1988 5 14.5 5C14.8012 5 15 4.80125 15 4.5V0.545455C15 0.244208 14.7558 0 14.4545 0ZM1.73333 1H8.00001V1.86667H1.73333C1.25469 1.86667 0.866667 2.25469 0.866667 2.73333V9.32003C0.866667 9.79868 1.25469 10.1867 1.73333 10.1867H12.1333C12.612 10.1867 13 9.79868 13 9.32004V7.00003H13.8667V9.32004C13.8667 10.2773 13.0906 11.0534 12.1333 11.0534H1.73333C0.776041 11.0534 0 10.2773 0 9.32003V2.73333C0 1.77604 0.77604 1 1.73333 1Z"
50+
fill="currentcolor"
51+
/>
52+
</svg>
53+
);

‎packages/app/src/embed/components/Actions/index.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
3+
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
4+
5+
import {
6+
Container,
7+
Button,
8+
HeartIcon,
9+
ReloadIcon,
10+
NewWindowIcon,
11+
} from './elements';
12+
13+
export function GlobalActions({
14+
sandbox,
15+
toggleLike,
16+
previewVisible,
17+
isDragging,
18+
}) {
19+
return (
20+
<Container
21+
align="right"
22+
previewVisible={previewVisible}
23+
isDragging={isDragging}
24+
>
25+
{toggleLike ? (
26+
<Tooltip
27+
content={sandbox.userLiked ? 'Dislike sandbox' : 'Like sandbox'}
28+
>
29+
<Button
30+
onClick={toggleLike}
31+
aria-label={sandbox.userLiked ? 'Dislike sandbox' : 'Like sandbox'}
32+
>
33+
<HeartIcon liked={sandbox.userLiked} />
34+
</Button>
35+
</Tooltip>
36+
) : null}
37+
<Button
38+
as="a"
39+
target="_blank"
40+
rel="noopener noreferrer"
41+
href={`${sandboxUrl(sandbox)}?from-embed`}
42+
>
43+
Open Sandbox
44+
</Button>
45+
</Container>
46+
);
47+
}
48+
49+
export function NavigationActions({ refresh, openInNewWindow, isDragging }) {
50+
return (
51+
<Container align="left" previewVisible isDragging={isDragging}>
52+
<Tooltip content="Refresh preview">
53+
<Button onClick={refresh} aria-label="Refresh preview">
54+
<ReloadIcon />
55+
</Button>
56+
</Tooltip>
57+
<Tooltip content="Open preview in new window">
58+
<Button
59+
onClick={openInNewWindow}
60+
aria-label="Open preview in new window"
61+
>
62+
<NewWindowIcon />
63+
</Button>
64+
</Tooltip>
65+
</Container>
66+
);
67+
}

‎packages/app/src/embed/components/App/elements.js‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,29 @@
11
// @flow
22
import styled from 'styled-components';
3-
import { SIDEBAR_SHOW_SCREEN_SIZE } from '../../util/constants';
3+
import css from '@styled-system/css';
44

5-
export const Container = styled.div`
6-
display: flex;
7-
flex-direction: column;
8-
height: 100%;
9-
width: 100vw;
10-
color: white;
11-
`;
5+
export const Container = styled.div(
6+
css({
7+
display: 'flex',
8+
flexDirection: 'column',
9+
height: '100%',
10+
width: '100vw',
11+
})
12+
);
1213

13-
export const Fullscreen = styled.div`
14-
width: 100vw;
15-
height: 100%;
16-
overflow: hidden;
17-
`;
14+
export const Fullscreen = styled.div(
15+
css({
16+
width: '100vw',
17+
height: '100vh',
18+
overflow: 'hidden',
19+
backgroundColor: 'editor.background',
20+
color: 'editor.foreground',
21+
h1: {
22+
// override common element which has hard coded color
23+
color: 'editor.foreground',
24+
},
25+
})
26+
);
1827

1928
export const Moving = styled.div`
2029
transition: 0.3s ease all;
@@ -27,12 +36,7 @@ export const Moving = styled.div`
2736
left: 0;
2837
right: 0;
2938
transform: translateX(${props => (props.sidebarOpen ? 250 : 0)}px);
30-
box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.5);
31-
32-
@media (min-width: ${SIDEBAR_SHOW_SCREEN_SIZE}px) {
33-
left: 250px;
34-
transform: inherit;
35-
box-shadow: none;
36-
border-left: 1px solid ${props => props.theme.colors.sideBar.border};
37-
}
39+
border: 1px solid;
40+
/* 8 digit hex code with last 2 for opacity */
41+
border-color: ${props => props.theme.colors.sideBar.border + '33'};
3842
`;

0 commit comments

Comments
 (0)