r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

more dark theme stuff

Browse source
This commit is contained in:
catarak 2016-09-14 12:46:54 -04:00 committed by Cassie Tarakajian
parent 60ebfde298
commit 900f01c2d5
6 changed files with 176 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
client/modules/App/App.js
View file

@ -1,12 +1,10 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import DevTools from './components/DevTools'; import DevTools from './components/DevTools';
import classNames from 'classnames';
class App extends React.Component { class App extends React.Component {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
console.log(props);
this.state = { isMounted: false }; this.state = { isMounted: false };
} }
@ -15,14 +13,8 @@ class App extends React.Component {
} }
render() { render() {
const theme = this.props.route.theme;
const appClass = classNames({
app: true,
light: theme === 'light',
dark: theme === 'dark'
});
return ( return (
<div className={appClass}> <div className="app">
{this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />} {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
{this.props.children} {this.props.children}
</div> </div>
@ -31,10 +23,7 @@ class App extends React.Component {
} }
App.propTypes = { App.propTypes = {
children: PropTypes.object, children: PropTypes.object
route: PropTypes.shape({
theme: PropTypes.string.isRequired
}).isRequired
}; };
export default connect()(App); export default connect()(App);

290
client/modules/IDE/pages/IDEView.js
View file

@ -27,6 +27,7 @@ import SplitPane from 'react-split-pane';
import Overlay from '../../App/components/Overlay'; import Overlay from '../../App/components/Overlay';
import SketchList from '../components/SketchList'; import SketchList from '../components/SketchList';
import About from '../components/About'; import About from '../components/About';
import classNames from 'classnames';
class IDEView extends React.Component { class IDEView extends React.Component {
constructor(props) { constructor(props) {
@ -156,156 +157,163 @@ class IDEView extends React.Component {
} }
render() { render() {
let ideClass = classNames({
ide: true,
light: this.props.preferences.theme === 'light',
dark: this.props.preferences.theme === 'dark',
});
return ( return (
<div className="ide"> <div className={ideClass}>
{this.props.toast.isVisible && <Toast />} <div className="ide-content">
<Nav {this.props.toast.isVisible && <Toast />}
user={this.props.user} <Nav
newProject={this.props.newProject} user={this.props.user}
saveProject={this.props.saveProject} newProject={this.props.newProject}
exportProjectAsZip={this.props.exportProjectAsZip} saveProject={this.props.saveProject}
cloneProject={this.props.cloneProject} exportProjectAsZip={this.props.exportProjectAsZip}
project={this.props.project} cloneProject={this.props.cloneProject}
logoutUser={this.props.logoutUser} project={this.props.project}
stopSketch={this.props.stopSketch} logoutUser={this.props.logoutUser}
showShareModal={this.props.showShareModal} stopSketch={this.props.stopSketch}
/> showShareModal={this.props.showShareModal}
<Toolbar />
className="Toolbar" <Toolbar
isPlaying={this.props.ide.isPlaying} className="Toolbar"
startSketch={this.props.startSketch} isPlaying={this.props.ide.isPlaying}
stopSketch={this.props.stopSketch} startSketch={this.props.startSketch}
startTextOutput={this.props.startTextOutput} stopSketch={this.props.stopSketch}
stopTextOutput={this.props.stopTextOutput} startTextOutput={this.props.startTextOutput}
projectName={this.props.project.name} stopTextOutput={this.props.stopTextOutput}
setProjectName={this.props.setProjectName} projectName={this.props.project.name}
showEditProjectName={this.props.showEditProjectName} setProjectName={this.props.setProjectName}
hideEditProjectName={this.props.hideEditProjectName} showEditProjectName={this.props.showEditProjectName}
openPreferences={this.props.openPreferences} hideEditProjectName={this.props.hideEditProjectName}
preferencesIsVisible={this.props.ide.preferencesIsVisible} openPreferences={this.props.openPreferences}
setTextOutput={this.props.setTextOutput} preferencesIsVisible={this.props.ide.preferencesIsVisible}
owner={this.props.project.owner} setTextOutput={this.props.setTextOutput}
project={this.props.project} owner={this.props.project.owner}
/> project={this.props.project}
<Preferences />
isVisible={this.props.ide.preferencesIsVisible} <Preferences
closePreferences={this.props.closePreferences} isVisible={this.props.ide.preferencesIsVisible}
fontSize={this.props.preferences.fontSize} closePreferences={this.props.closePreferences}
indentationAmount={this.props.preferences.indentationAmount} fontSize={this.props.preferences.fontSize}
setIndentation={this.props.setIndentation} indentationAmount={this.props.preferences.indentationAmount}
indentWithSpace={this.props.indentWithSpace} setIndentation={this.props.setIndentation}
indentWithTab={this.props.indentWithTab} indentWithSpace={this.props.indentWithSpace}
isTabIndent={this.props.preferences.isTabIndent} indentWithTab={this.props.indentWithTab}
setFontSize={this.props.setFontSize} isTabIndent={this.props.preferences.isTabIndent}
autosave={this.props.preferences.autosave} setFontSize={this.props.setFontSize}
setAutosave={this.props.setAutosave} autosave={this.props.preferences.autosave}
lintWarning={this.props.preferences.lintWarning} setAutosave={this.props.setAutosave}
setLintWarning={this.props.setLintWarning} lintWarning={this.props.preferences.lintWarning}
textOutput={this.props.preferences.textOutput} setLintWarning={this.props.setLintWarning}
setTextOutput={this.props.setTextOutput} textOutput={this.props.preferences.textOutput}
theme={this.props.preferences.theme} setTextOutput={this.props.setTextOutput}
setTheme={this.props.setTheme} theme={this.props.preferences.theme}
/> setTheme={this.props.setTheme}
<div className="editor-preview-container"> />
<SplitPane <div className="editor-preview-container">
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}
/>
<SplitPane <SplitPane
split="vertical" split="vertical"
defaultSize={'50%'} defaultSize={this.sidebarSize}
onChange={() => (this.refs.overlay.style.display = 'block')} ref="sidebarPane"
onDragFinished={() => (this.refs.overlay.style.display = 'none')} 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 <SplitPane
split="horizontal" split="vertical"
primary="second" defaultSize={'50%'}
defaultSize={this.consoleSize} onChange={() => (this.refs.overlay.style.display = 'block')}
minSize={29} onDragFinished={() => (this.refs.overlay.style.display = 'none')}
ref="consolePane"
onDragFinished={this._handleConsolePaneOnDragFinished}
allowResize={this.props.ide.consoleIsExpanded}
> >
<Editor <SplitPane
lintWarning={this.props.preferences.lintWarning} split="horizontal"
lintMessages={this.props.editorAccessibility.lintMessages} primary="second"
updateLineNumber={this.props.updateLineNumber} defaultSize={this.consoleSize}
updateLintMessage={this.props.updateLintMessage} minSize={29}
clearLintMessage={this.props.clearLintMessage} ref="consolePane"
file={this.props.selectedFile} onDragFinished={this._handleConsolePaneOnDragFinished}
updateFileContent={this.props.updateFileContent} allowResize={this.props.ide.consoleIsExpanded}
fontSize={this.props.preferences.fontSize} >
indentationAmount={this.props.preferences.indentationAmount} <Editor
isTabIndent={this.props.preferences.isTabIndent} lintWarning={this.props.preferences.lintWarning}
files={this.props.files} lintMessages={this.props.editorAccessibility.lintMessages}
lintMessages={this.props.editorAccessibility.lintMessages} updateLineNumber={this.props.updateLineNumber}
lineNumber={this.props.editorAccessibility.lineNumber} updateLintMessage={this.props.updateLintMessage}
editorOptionsVisible={this.props.ide.editorOptionsVisible} clearLintMessage={this.props.clearLintMessage}
showEditorOptions={this.props.showEditorOptions} file={this.props.selectedFile}
closeEditorOptions={this.props.closeEditorOptions} updateFileContent={this.props.updateFileContent}
showKeyboardShortcutModal={this.props.showKeyboardShortcutModal} fontSize={this.props.preferences.fontSize}
setUnsavedChanges={this.props.setUnsavedChanges} indentationAmount={this.props.preferences.indentationAmount}
/> isTabIndent={this.props.preferences.isTabIndent}
<Console files={this.props.files}
consoleEvent={this.props.ide.consoleEvent} lintMessages={this.props.editorAccessibility.lintMessages}
isPlaying={this.props.ide.isPlaying} lineNumber={this.props.editorAccessibility.lineNumber}
isExpanded={this.props.ide.consoleIsExpanded} editorOptionsVisible={this.props.ide.editorOptionsVisible}
expandConsole={this.props.expandConsole} showEditorOptions={this.props.showEditorOptions}
collapseConsole={this.props.collapseConsole} closeEditorOptions={this.props.closeEditorOptions}
/> showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
</SplitPane> setUnsavedChanges={this.props.setUnsavedChanges}
<div> />
<div className="preview-frame-overlay" ref="overlay"> <Console
</div> 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>
{(() => { <div className="preview-frame-overlay" ref="overlay">
if ((this.props.preferences.textOutput && this.props.ide.isPlaying) || this.props.ide.isTextOutputPlaying) { </div>
return ( <div>
<TextOutput /> {(() => {
); if ((this.props.preferences.textOutput && this.props.ide.isPlaying) || this.props.ide.isTextOutputPlaying) {
} return (
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> </div>
<PreviewFrame </SplitPane>
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> </div>
{(() => { {(() => {
if (this.props.ide.modalIsVisible) { if (this.props.ide.modalIsVisible) {

2
client/routes.js
View file

@ -14,7 +14,7 @@ const checkAuth = (store) => {
const routes = (store) => const routes = (store) =>
( (
<Route path="/" component={App} theme={store.getState().preferences.theme}> <Route path="/" component={App}>
<IndexRoute component={IDEView} onEnter={checkAuth(store)} /> <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
<Route path="/login" component={LoginView} /> <Route path="/login" component={LoginView} />
<Route path="/signup" component={SignupView} /> <Route path="/signup" component={SignupView} />

8
client/styles/abstracts/_placeholders.scss
View file

@ -111,10 +111,12 @@
} }
%modal { %modal {
background-color: $light-modal-background-color; @include themify() {
border: 1px solid $light-modal-border-color; background-color: getThemifyVariable('modal-background-color');
border: 1px solid getThemifyVariable('modal-border-color');
box-shadow: 0 12px 12px getThemifyVariable('shadow-color');
}
border-radius: 2px; border-radius: 2px;
box-shadow: 0 12px 12px $light-shadow-color;
z-index: 20; z-index: 20;
} }

16
client/styles/base/_base.scss
View file

@ -13,22 +13,20 @@ body, input, button {
font-family: 'Avenir Next', Montserrat, sans-serif; font-family: 'Avenir Next', Montserrat, sans-serif;
} }
body {
background-color: $light-background-color;
}
.root-app, .app { .root-app, .app {
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
} }
a { a {
text-decoration: none; @include themify() {
color: $light-inactive-text-color;
cursor: pointer;
&:hover {
text-decoration: none; text-decoration: none;
color: $light-primary-text-color; color: getThemifyVariable('inactive-text-color');
cursor: pointer;
&:hover {
text-decoration: none;
color: getThemifyVariable('primary-text-color');
}
} }
} }

15
client/styles/layout/_ide.scss
View file

@ -1,8 +1,17 @@
.ide { .ide {
display: flex;
flex-direction: column;
height: 100%; 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 { .editor-preview-container {