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 { 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);

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 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) {

2
client/routes.js
View file

@ -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} />

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

@ -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;
}

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

@ -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');
}
}
}

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

@ -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 {