more dark theme stuff
This commit is contained in:
catarak
Cassie Tarakajian
parent
60ebfde298
commit
900f01c2d5
|
|
@ -1,12 +1,10 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import DevTools from './components/DevTools';
|
||||
import classNames from 'classnames';
|
||||
|
||||
class App extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
console.log(props);
|
||||
this.state = { isMounted: false };
|
||||
}
|
||||
|
||||
|
|
@ -15,14 +13,8 @@ class App extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const theme = this.props.route.theme;
|
||||
const appClass = classNames({
|
||||
app: true,
|
||||
light: theme === 'light',
|
||||
dark: theme === 'dark'
|
||||
});
|
||||
return (
|
||||
<div className={appClass}>
|
||||
<div className="app">
|
||||
{this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
|
||||
{this.props.children}
|
||||
</div>
|
||||
|
|
@ -31,10 +23,7 @@ class App extends React.Component {
|
|||
}
|
||||
|
||||
App.propTypes = {
|
||||
children: PropTypes.object,
|
||||
route: PropTypes.shape({
|
||||
theme: PropTypes.string.isRequired
|
||||
}).isRequired
|
||||
children: PropTypes.object
|
||||
};
|
||||
|
||||
export default connect()(App);
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import SplitPane from 'react-split-pane';
|
|||
import Overlay from '../../App/components/Overlay';
|
||||
import SketchList from '../components/SketchList';
|
||||
import About from '../components/About';
|
||||
import classNames from 'classnames';
|
||||
|
||||
class IDEView extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -156,156 +157,163 @@ class IDEView extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
let ideClass = classNames({
|
||||
ide: true,
|
||||
light: this.props.preferences.theme === 'light',
|
||||
dark: this.props.preferences.theme === 'dark',
|
||||
});
|
||||
return (
|
||||
<div className="ide">
|
||||
{this.props.toast.isVisible && <Toast />}
|
||||
<Nav
|
||||
user={this.props.user}
|
||||
newProject={this.props.newProject}
|
||||
saveProject={this.props.saveProject}
|
||||
exportProjectAsZip={this.props.exportProjectAsZip}
|
||||
cloneProject={this.props.cloneProject}
|
||||
project={this.props.project}
|
||||
logoutUser={this.props.logoutUser}
|
||||
stopSketch={this.props.stopSketch}
|
||||
showShareModal={this.props.showShareModal}
|
||||
/>
|
||||
<Toolbar
|
||||
className="Toolbar"
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
startSketch={this.props.startSketch}
|
||||
stopSketch={this.props.stopSketch}
|
||||
startTextOutput={this.props.startTextOutput}
|
||||
stopTextOutput={this.props.stopTextOutput}
|
||||
projectName={this.props.project.name}
|
||||
setProjectName={this.props.setProjectName}
|
||||
showEditProjectName={this.props.showEditProjectName}
|
||||
hideEditProjectName={this.props.hideEditProjectName}
|
||||
openPreferences={this.props.openPreferences}
|
||||
preferencesIsVisible={this.props.ide.preferencesIsVisible}
|
||||
setTextOutput={this.props.setTextOutput}
|
||||
owner={this.props.project.owner}
|
||||
project={this.props.project}
|
||||
/>
|
||||
<Preferences
|
||||
isVisible={this.props.ide.preferencesIsVisible}
|
||||
closePreferences={this.props.closePreferences}
|
||||
fontSize={this.props.preferences.fontSize}
|
||||
indentationAmount={this.props.preferences.indentationAmount}
|
||||
setIndentation={this.props.setIndentation}
|
||||
indentWithSpace={this.props.indentWithSpace}
|
||||
indentWithTab={this.props.indentWithTab}
|
||||
isTabIndent={this.props.preferences.isTabIndent}
|
||||
setFontSize={this.props.setFontSize}
|
||||
autosave={this.props.preferences.autosave}
|
||||
setAutosave={this.props.setAutosave}
|
||||
lintWarning={this.props.preferences.lintWarning}
|
||||
setLintWarning={this.props.setLintWarning}
|
||||
textOutput={this.props.preferences.textOutput}
|
||||
setTextOutput={this.props.setTextOutput}
|
||||
theme={this.props.preferences.theme}
|
||||
setTheme={this.props.setTheme}
|
||||
/>
|
||||
<div className="editor-preview-container">
|
||||
<SplitPane
|
||||
split="vertical"
|
||||
defaultSize={this.sidebarSize}
|
||||
ref="sidebarPane"
|
||||
onDragFinished={this._handleSidebarPaneOnDragFinished}
|
||||
allowResize={this.props.ide.sidebarIsExpanded}
|
||||
minSize={20}
|
||||
>
|
||||
<Sidebar
|
||||
files={this.props.files}
|
||||
setSelectedFile={this.props.setSelectedFile}
|
||||
newFile={this.props.newFile}
|
||||
isExpanded={this.props.ide.sidebarIsExpanded}
|
||||
expandSidebar={this.props.expandSidebar}
|
||||
collapseSidebar={this.props.collapseSidebar}
|
||||
showFileOptions={this.props.showFileOptions}
|
||||
hideFileOptions={this.props.hideFileOptions}
|
||||
deleteFile={this.props.deleteFile}
|
||||
showEditFileName={this.props.showEditFileName}
|
||||
hideEditFileName={this.props.hideEditFileName}
|
||||
updateFileName={this.props.updateFileName}
|
||||
projectOptionsVisible={this.props.ide.projectOptionsVisible}
|
||||
openProjectOptions={this.props.openProjectOptions}
|
||||
closeProjectOptions={this.props.closeProjectOptions}
|
||||
newFolder={this.props.newFolder}
|
||||
/>
|
||||
<div className={ideClass}>
|
||||
<div className="ide-content">
|
||||
{this.props.toast.isVisible && <Toast />}
|
||||
<Nav
|
||||
user={this.props.user}
|
||||
newProject={this.props.newProject}
|
||||
saveProject={this.props.saveProject}
|
||||
exportProjectAsZip={this.props.exportProjectAsZip}
|
||||
cloneProject={this.props.cloneProject}
|
||||
project={this.props.project}
|
||||
logoutUser={this.props.logoutUser}
|
||||
stopSketch={this.props.stopSketch}
|
||||
showShareModal={this.props.showShareModal}
|
||||
/>
|
||||
<Toolbar
|
||||
className="Toolbar"
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
startSketch={this.props.startSketch}
|
||||
stopSketch={this.props.stopSketch}
|
||||
startTextOutput={this.props.startTextOutput}
|
||||
stopTextOutput={this.props.stopTextOutput}
|
||||
projectName={this.props.project.name}
|
||||
setProjectName={this.props.setProjectName}
|
||||
showEditProjectName={this.props.showEditProjectName}
|
||||
hideEditProjectName={this.props.hideEditProjectName}
|
||||
openPreferences={this.props.openPreferences}
|
||||
preferencesIsVisible={this.props.ide.preferencesIsVisible}
|
||||
setTextOutput={this.props.setTextOutput}
|
||||
owner={this.props.project.owner}
|
||||
project={this.props.project}
|
||||
/>
|
||||
<Preferences
|
||||
isVisible={this.props.ide.preferencesIsVisible}
|
||||
closePreferences={this.props.closePreferences}
|
||||
fontSize={this.props.preferences.fontSize}
|
||||
indentationAmount={this.props.preferences.indentationAmount}
|
||||
setIndentation={this.props.setIndentation}
|
||||
indentWithSpace={this.props.indentWithSpace}
|
||||
indentWithTab={this.props.indentWithTab}
|
||||
isTabIndent={this.props.preferences.isTabIndent}
|
||||
setFontSize={this.props.setFontSize}
|
||||
autosave={this.props.preferences.autosave}
|
||||
setAutosave={this.props.setAutosave}
|
||||
lintWarning={this.props.preferences.lintWarning}
|
||||
setLintWarning={this.props.setLintWarning}
|
||||
textOutput={this.props.preferences.textOutput}
|
||||
setTextOutput={this.props.setTextOutput}
|
||||
theme={this.props.preferences.theme}
|
||||
setTheme={this.props.setTheme}
|
||||
/>
|
||||
<div className="editor-preview-container">
|
||||
<SplitPane
|
||||
split="vertical"
|
||||
defaultSize={'50%'}
|
||||
onChange={() => (this.refs.overlay.style.display = 'block')}
|
||||
onDragFinished={() => (this.refs.overlay.style.display = 'none')}
|
||||
defaultSize={this.sidebarSize}
|
||||
ref="sidebarPane"
|
||||
onDragFinished={this._handleSidebarPaneOnDragFinished}
|
||||
allowResize={this.props.ide.sidebarIsExpanded}
|
||||
minSize={20}
|
||||
>
|
||||
<Sidebar
|
||||
files={this.props.files}
|
||||
setSelectedFile={this.props.setSelectedFile}
|
||||
newFile={this.props.newFile}
|
||||
isExpanded={this.props.ide.sidebarIsExpanded}
|
||||
expandSidebar={this.props.expandSidebar}
|
||||
collapseSidebar={this.props.collapseSidebar}
|
||||
showFileOptions={this.props.showFileOptions}
|
||||
hideFileOptions={this.props.hideFileOptions}
|
||||
deleteFile={this.props.deleteFile}
|
||||
showEditFileName={this.props.showEditFileName}
|
||||
hideEditFileName={this.props.hideEditFileName}
|
||||
updateFileName={this.props.updateFileName}
|
||||
projectOptionsVisible={this.props.ide.projectOptionsVisible}
|
||||
openProjectOptions={this.props.openProjectOptions}
|
||||
closeProjectOptions={this.props.closeProjectOptions}
|
||||
newFolder={this.props.newFolder}
|
||||
/>
|
||||
<SplitPane
|
||||
split="horizontal"
|
||||
primary="second"
|
||||
defaultSize={this.consoleSize}
|
||||
minSize={29}
|
||||
ref="consolePane"
|
||||
onDragFinished={this._handleConsolePaneOnDragFinished}
|
||||
allowResize={this.props.ide.consoleIsExpanded}
|
||||
split="vertical"
|
||||
defaultSize={'50%'}
|
||||
onChange={() => (this.refs.overlay.style.display = 'block')}
|
||||
onDragFinished={() => (this.refs.overlay.style.display = 'none')}
|
||||
>
|
||||
<Editor
|
||||
lintWarning={this.props.preferences.lintWarning}
|
||||
lintMessages={this.props.editorAccessibility.lintMessages}
|
||||
updateLineNumber={this.props.updateLineNumber}
|
||||
updateLintMessage={this.props.updateLintMessage}
|
||||
clearLintMessage={this.props.clearLintMessage}
|
||||
file={this.props.selectedFile}
|
||||
updateFileContent={this.props.updateFileContent}
|
||||
fontSize={this.props.preferences.fontSize}
|
||||
indentationAmount={this.props.preferences.indentationAmount}
|
||||
isTabIndent={this.props.preferences.isTabIndent}
|
||||
files={this.props.files}
|
||||
lintMessages={this.props.editorAccessibility.lintMessages}
|
||||
lineNumber={this.props.editorAccessibility.lineNumber}
|
||||
editorOptionsVisible={this.props.ide.editorOptionsVisible}
|
||||
showEditorOptions={this.props.showEditorOptions}
|
||||
closeEditorOptions={this.props.closeEditorOptions}
|
||||
showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
|
||||
setUnsavedChanges={this.props.setUnsavedChanges}
|
||||
/>
|
||||
<Console
|
||||
consoleEvent={this.props.ide.consoleEvent}
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
isExpanded={this.props.ide.consoleIsExpanded}
|
||||
expandConsole={this.props.expandConsole}
|
||||
collapseConsole={this.props.collapseConsole}
|
||||
/>
|
||||
</SplitPane>
|
||||
<div>
|
||||
<div className="preview-frame-overlay" ref="overlay">
|
||||
</div>
|
||||
<SplitPane
|
||||
split="horizontal"
|
||||
primary="second"
|
||||
defaultSize={this.consoleSize}
|
||||
minSize={29}
|
||||
ref="consolePane"
|
||||
onDragFinished={this._handleConsolePaneOnDragFinished}
|
||||
allowResize={this.props.ide.consoleIsExpanded}
|
||||
>
|
||||
<Editor
|
||||
lintWarning={this.props.preferences.lintWarning}
|
||||
lintMessages={this.props.editorAccessibility.lintMessages}
|
||||
updateLineNumber={this.props.updateLineNumber}
|
||||
updateLintMessage={this.props.updateLintMessage}
|
||||
clearLintMessage={this.props.clearLintMessage}
|
||||
file={this.props.selectedFile}
|
||||
updateFileContent={this.props.updateFileContent}
|
||||
fontSize={this.props.preferences.fontSize}
|
||||
indentationAmount={this.props.preferences.indentationAmount}
|
||||
isTabIndent={this.props.preferences.isTabIndent}
|
||||
files={this.props.files}
|
||||
lintMessages={this.props.editorAccessibility.lintMessages}
|
||||
lineNumber={this.props.editorAccessibility.lineNumber}
|
||||
editorOptionsVisible={this.props.ide.editorOptionsVisible}
|
||||
showEditorOptions={this.props.showEditorOptions}
|
||||
closeEditorOptions={this.props.closeEditorOptions}
|
||||
showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
|
||||
setUnsavedChanges={this.props.setUnsavedChanges}
|
||||
/>
|
||||
<Console
|
||||
consoleEvent={this.props.ide.consoleEvent}
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
isExpanded={this.props.ide.consoleIsExpanded}
|
||||
expandConsole={this.props.expandConsole}
|
||||
collapseConsole={this.props.collapseConsole}
|
||||
/>
|
||||
</SplitPane>
|
||||
<div>
|
||||
{(() => {
|
||||
if ((this.props.preferences.textOutput && this.props.ide.isPlaying) || this.props.ide.isTextOutputPlaying) {
|
||||
return (
|
||||
<TextOutput />
|
||||
);
|
||||
}
|
||||
return '';
|
||||
})()}
|
||||
<div className="preview-frame-overlay" ref="overlay">
|
||||
</div>
|
||||
<div>
|
||||
{(() => {
|
||||
if ((this.props.preferences.textOutput && this.props.ide.isPlaying) || this.props.ide.isTextOutputPlaying) {
|
||||
return (
|
||||
<TextOutput />
|
||||
);
|
||||
}
|
||||
return '';
|
||||
})()}
|
||||
</div>
|
||||
<PreviewFrame
|
||||
htmlFile={this.props.htmlFile}
|
||||
jsFiles={this.props.jsFiles}
|
||||
cssFiles={this.props.cssFiles}
|
||||
files={this.props.files}
|
||||
content={this.props.selectedFile.content}
|
||||
head={
|
||||
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
|
||||
}
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
|
||||
textOutput={this.props.preferences.textOutput}
|
||||
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
|
||||
/>
|
||||
</div>
|
||||
<PreviewFrame
|
||||
htmlFile={this.props.htmlFile}
|
||||
jsFiles={this.props.jsFiles}
|
||||
cssFiles={this.props.cssFiles}
|
||||
files={this.props.files}
|
||||
content={this.props.selectedFile.content}
|
||||
head={
|
||||
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
|
||||
}
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
|
||||
textOutput={this.props.preferences.textOutput}
|
||||
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
|
||||
/>
|
||||
</div>
|
||||
</SplitPane>
|
||||
</SplitPane>
|
||||
</SplitPane>
|
||||
</div>
|
||||
</div>
|
||||
{(() => {
|
||||
if (this.props.ide.modalIsVisible) {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const checkAuth = (store) => {
|
|||
|
||||
const routes = (store) =>
|
||||
(
|
||||
<Route path="/" component={App} theme={store.getState().preferences.theme}>
|
||||
<Route path="/" component={App}>
|
||||
<IndexRoute component={IDEView} onEnter={checkAuth(store)} />
|
||||
<Route path="/login" component={LoginView} />
|
||||
<Route path="/signup" component={SignupView} />
|
||||
|
|
|
|||
|
|
@ -111,10 +111,12 @@
|
|||
}
|
||||
|
||||
%modal {
|
||||
background-color: $light-modal-background-color;
|
||||
border: 1px solid $light-modal-border-color;
|
||||
@include themify() {
|
||||
background-color: getThemifyVariable('modal-background-color');
|
||||
border: 1px solid getThemifyVariable('modal-border-color');
|
||||
box-shadow: 0 12px 12px getThemifyVariable('shadow-color');
|
||||
}
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 12px 12px $light-shadow-color;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,22 +13,20 @@ body, input, button {
|
|||
font-family: 'Avenir Next', Montserrat, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $light-background-color;
|
||||
}
|
||||
|
||||
.root-app, .app {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $light-inactive-text-color;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
@include themify() {
|
||||
text-decoration: none;
|
||||
color: $light-primary-text-color;
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
.ide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ide-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
background-color: getThemifyVariable('background-color');
|
||||
}
|
||||
}
|
||||
|
||||
.editor-preview-container {
|
||||
|
|
|
|||
Loading…
Reference in New Issue