Skip to content

Commit 7a89c6d

Browse files
author
Ives van Hoorne
committed
Fix colors sometimes not showing
1 parent fccc78e commit 7a89c6d

File tree

4 files changed

+140
-130
lines changed

4 files changed

+140
-130
lines changed

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

Lines changed: 54 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// @flow
22
import * as React from 'react';
3-
import styled from 'styled-components';
3+
import styled, { ThemeProvider } from 'styled-components';
44
import { createSelector } from 'reselect';
55
import { Prompt } from 'react-router-dom';
66
import { bindActionCreators } from 'redux';
@@ -12,7 +12,6 @@ import type {
1212
CurrentUser,
1313
Module,
1414
Directory,
15-
ModuleError,
1615
} from 'common/types';
1716
import { currentUserSelector } from 'app/store/user/selectors';
1817
import moduleActionCreators from 'app/store/entities/sandboxes/modules/actions';
@@ -28,6 +27,8 @@ import {
2827
} from 'app/store/entities/sandboxes/modules/selectors';
2928
import { directoriesFromSandboxSelector } from 'app/store/entities/sandboxes/directories/selectors';
3029

30+
import getTemplateDefinition from 'common/templates';
31+
3132
import SplitPane from 'react-split-pane';
3233

3334
import CodeEditor from 'app/components/sandbox/CodeEditor';
@@ -201,51 +202,57 @@ class EditorPreview extends React.PureComponent<Props, $FlowFixMeState> {
201202
);
202203

203204
return (
204-
<FullSize>
205-
<Prompt
206-
when={notSynced}
207-
message={() =>
208-
'You have not saved this sandbox, are you sure you want to navigate away?'}
209-
/>
210-
<Header
211-
sandbox={sandbox}
212-
sandboxActions={sandboxActions}
213-
userActions={userActions}
214-
modalActions={modalActions}
215-
user={user}
216-
workspaceHidden={workspaceHidden}
217-
toggleWorkspace={toggleWorkspace}
218-
canSave={notSynced}
219-
/>
220-
<SplitPane
221-
onDragStarted={this.startResizing}
222-
onDragFinished={this.stopResizing}
223-
split="vertical"
224-
defaultSize="50%"
225-
minSize={360}
226-
paneStyle={{ height: '100%' }}
227-
resizerStyle={{
228-
visibility:
229-
(!sandbox.showPreview && sandbox.showEditor) ||
230-
(sandbox.showPreview && !sandbox.showEditor)
231-
? 'hidden'
232-
: 'visible',
233-
}}
234-
pane1Style={{
235-
display: sandbox.showEditor ? 'block' : 'none',
236-
minWidth:
237-
!sandbox.showPreview && sandbox.showEditor ? '100%' : 'inherit',
238-
}}
239-
pane2Style={{
240-
display: sandbox.showPreview ? 'block' : 'none',
241-
minWidth:
242-
sandbox.showPreview && !sandbox.showEditor ? '100%' : 'inherit',
243-
}}
244-
>
245-
{sandbox.showEditor && EditorPane}
246-
{PreviewPane}
247-
</SplitPane>
248-
</FullSize>
205+
<ThemeProvider
206+
theme={{
207+
templateColor: getTemplateDefinition(sandbox.template).color,
208+
}}
209+
>
210+
<FullSize>
211+
<Prompt
212+
when={notSynced}
213+
message={() =>
214+
'You have not saved this sandbox, are you sure you want to navigate away?'}
215+
/>
216+
<Header
217+
sandbox={sandbox}
218+
sandboxActions={sandboxActions}
219+
userActions={userActions}
220+
modalActions={modalActions}
221+
user={user}
222+
workspaceHidden={workspaceHidden}
223+
toggleWorkspace={toggleWorkspace}
224+
canSave={notSynced}
225+
/>
226+
<SplitPane
227+
onDragStarted={this.startResizing}
228+
onDragFinished={this.stopResizing}
229+
split="vertical"
230+
defaultSize="50%"
231+
minSize={360}
232+
paneStyle={{ height: '100%' }}
233+
resizerStyle={{
234+
visibility:
235+
(!sandbox.showPreview && sandbox.showEditor) ||
236+
(sandbox.showPreview && !sandbox.showEditor)
237+
? 'hidden'
238+
: 'visible',
239+
}}
240+
pane1Style={{
241+
display: sandbox.showEditor ? 'block' : 'none',
242+
minWidth:
243+
!sandbox.showPreview && sandbox.showEditor ? '100%' : 'inherit',
244+
}}
245+
pane2Style={{
246+
display: sandbox.showPreview ? 'block' : 'none',
247+
minWidth:
248+
sandbox.showPreview && !sandbox.showEditor ? '100%' : 'inherit',
249+
}}
250+
>
251+
{sandbox.showEditor && EditorPane}
252+
{PreviewPane}
253+
</SplitPane>
254+
</FullSize>
255+
</ThemeProvider>
249256
);
250257
}
251258
}

‎src/app/pages/Sandbox/Editor/Workspace/index.js‎

Lines changed: 78 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ import { createSelector } from 'reselect';
55
import { bindActionCreators } from 'redux';
66
import { connect } from 'react-redux';
77
import { Link } from 'react-router-dom';
8-
import styled from 'styled-components';
8+
import styled, { ThemeProvider } from 'styled-components';
99

1010
import type { Sandbox, User } from 'common/types';
1111
import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
1212
import { modulesFromSandboxNotSavedSelector } from 'app/store/entities/sandboxes/modules/selectors';
1313
import { usersSelector } from 'app/store/entities/users/selectors';
1414
import { isPatronSelector } from 'app/store/user/selectors';
15+
import getTemplateDefinition from 'common/templates';
1516

1617
import showAlternativeComponent from 'app/hoc/show-alternative-component';
1718
import fadeIn from 'app/utils/animation/fade-in';
@@ -80,76 +81,85 @@ const Workspace = ({
8081
sandboxActions,
8182
isPatron,
8283
}: Props) =>
83-
<Container>
84-
<div>
85-
<Logo />
86-
<WorkspaceItem defaultOpen title="Project">
87-
<Project
88-
updateSandboxInfo={sandboxActions.updateSandboxInfo}
89-
id={sandbox.id}
90-
title={sandbox.title}
91-
viewCount={sandbox.viewCount}
92-
likeCount={sandbox.likeCount}
93-
forkCount={sandbox.forkCount}
94-
git={sandbox.git}
95-
description={sandbox.description}
96-
forkedSandbox={sandbox.forkedFromSandbox}
97-
preventTransition={preventTransition}
98-
owned={sandbox.owned}
99-
author={user}
100-
privacy={sandbox.privacy}
101-
/>
102-
</WorkspaceItem>
103-
104-
<WorkspaceItem defaultOpen title="Files">
105-
<Files sandbox={sandbox} sandboxActions={sandboxActions} />
106-
</WorkspaceItem>
107-
108-
<WorkspaceItem title="Dependencies">
109-
<Dependencies
110-
sandboxId={sandbox.id}
111-
npmDependencies={sandbox.npmDependencies}
112-
externalResources={sandbox.externalResources}
113-
sandboxActions={sandboxActions}
114-
processing={
115-
!!(sandbox.dependencyBundle && sandbox.dependencyBundle.processing)
116-
}
117-
/>
118-
</WorkspaceItem>
119-
120-
{(sandbox.owned || sandbox.tags.length > 0) &&
121-
<WorkspaceItem title="Tags">
122-
<Tags
123-
sandboxId={sandbox.id}
124-
addTag={sandboxActions.addTag}
125-
removeTag={sandboxActions.removeTag}
126-
isOwner={sandbox.owned}
127-
tags={sandbox.tags}
128-
/>
129-
</WorkspaceItem>}
130-
131-
{sandbox.owned &&
132-
<WorkspaceItem title="Sandbox Actions">
133-
<SandboxActions
84+
console.log(getTemplateDefinition(sandbox.template).color) ||
85+
<ThemeProvider
86+
theme={{
87+
templateColor: getTemplateDefinition(sandbox.template).color,
88+
}}
89+
>
90+
<Container>
91+
<div>
92+
<Logo />
93+
<WorkspaceItem defaultOpen title="Project">
94+
<Project
95+
updateSandboxInfo={sandboxActions.updateSandboxInfo}
13496
id={sandbox.id}
135-
deleteSandbox={sandboxActions.deleteSandbox}
136-
newSandboxUrl={sandboxActions.newSandboxUrl}
137-
setSandboxPrivacy={sandboxActions.setSandboxPrivacy}
138-
isPatron={isPatron}
97+
title={sandbox.title}
98+
viewCount={sandbox.viewCount}
99+
likeCount={sandbox.likeCount}
100+
forkCount={sandbox.forkCount}
101+
git={sandbox.git}
102+
description={sandbox.description}
103+
forkedSandbox={sandbox.forkedFromSandbox}
104+
preventTransition={preventTransition}
105+
owned={sandbox.owned}
106+
author={user}
139107
privacy={sandbox.privacy}
140108
/>
141-
</WorkspaceItem>}
142-
</div>
143-
144-
<div>
145-
<ConnectionNotice />
146-
<TermsContainer>
147-
By using CodeSandbox you agree to our{' '}
148-
<Link to={tosUrl()}>Terms and Conditions</Link> and{' '}
149-
<Link to={privacyUrl()}>Privacy Policy</Link>.
150-
</TermsContainer>
151-
</div>
152-
</Container>;
109+
</WorkspaceItem>
110+
111+
<WorkspaceItem defaultOpen title="Files">
112+
<Files sandbox={sandbox} sandboxActions={sandboxActions} />
113+
</WorkspaceItem>
114+
115+
<WorkspaceItem title="Dependencies">
116+
<Dependencies
117+
sandboxId={sandbox.id}
118+
npmDependencies={sandbox.npmDependencies}
119+
externalResources={sandbox.externalResources}
120+
sandboxActions={sandboxActions}
121+
processing={
122+
!!(
123+
sandbox.dependencyBundle && sandbox.dependencyBundle.processing
124+
)
125+
}
126+
/>
127+
</WorkspaceItem>
128+
129+
{(sandbox.owned || sandbox.tags.length > 0) &&
130+
<WorkspaceItem title="Tags">
131+
<Tags
132+
sandboxId={sandbox.id}
133+
addTag={sandboxActions.addTag}
134+
removeTag={sandboxActions.removeTag}
135+
isOwner={sandbox.owned}
136+
tags={sandbox.tags}
137+
/>
138+
</WorkspaceItem>}
139+
140+
{sandbox.owned &&
141+
<WorkspaceItem title="Sandbox Actions">
142+
<SandboxActions
143+
id={sandbox.id}
144+
deleteSandbox={sandboxActions.deleteSandbox}
145+
newSandboxUrl={sandboxActions.newSandboxUrl}
146+
setSandboxPrivacy={sandboxActions.setSandboxPrivacy}
147+
isPatron={isPatron}
148+
privacy={sandbox.privacy}
149+
/>
150+
</WorkspaceItem>}
151+
</div>
152+
153+
<div>
154+
<ConnectionNotice />
155+
<TermsContainer>
156+
By using CodeSandbox you agree to our{' '}
157+
<Link to={tosUrl()}>Terms and Conditions</Link> and{' '}
158+
<Link to={privacyUrl()}>Privacy Policy</Link>.
159+
</TermsContainer>
160+
</div>
161+
</Container>
162+
</ThemeProvider>;
153163

154164
// The skeleton to show if sandbox doesn't exist
155165
const Skeleton = () => <Container />;

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@ type Props = {
1414
match: Object,
1515
};
1616

17-
export default class ContentSplit extends React.PureComponent<
18-
Props,
19-
$FlowFixMeState,
20-
> {
17+
type State = {
18+
resizing: boolean,
19+
workspaceHidden: boolean,
20+
};
21+
22+
export default class ContentSplit extends React.PureComponent<Props, State> {
2123
state = {
2224
resizing: false,
2325
workspaceHidden: false,

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

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
// @flow
22
import * as React from 'react';
3-
import styled, { ThemeProvider } from 'styled-components';
3+
import styled from 'styled-components';
44
import { bindActionCreators } from 'redux';
55
import { connect } from 'react-redux';
66
import { Link } from 'react-router-dom';
77
import { createSelector } from 'reselect';
88

9-
import getTemplateDefinition from 'common/templates';
10-
119
import type { Sandbox } from 'common/types';
1210

1311
import { sandboxesSelector } from 'app/store/entities/sandboxes/selectors';
@@ -129,14 +127,7 @@ class SandboxPage extends React.PureComponent<Props, $FlowFixMeState> {
129127

130128
return (
131129
<Container>
132-
<ThemeProvider
133-
theme={{
134-
templateColor: getTemplateDefinition(sandbox && sandbox.template)
135-
.color,
136-
}}
137-
>
138-
<Editor match={match} sandbox={sandbox} />
139-
</ThemeProvider>
130+
<Editor match={match} sandbox={sandbox} />
140131
</Container>
141132
);
142133
}

0 commit comments

Comments
 (0)