merge master into sketch collections, to include updating theming

This commit is contained in:
Cassie Tarakajian 2019-11-25 10:46:28 -05:00
commit 5319bbbeb7
7 changed files with 28 additions and 20 deletions

View file

@ -7,7 +7,7 @@ const logoUrl = require('../images/p5js-logo-small.svg');
const editorUrl = require('../images/code.svg'); const editorUrl = require('../images/code.svg');
const PreviewNav = ({ owner, project }) => ( const PreviewNav = ({ owner, project }) => (
<nav className="nav"> <nav className="nav preview-nav">
<div className="nav__items-left"> <div className="nav__items-left">
<div className="nav__item-logo"> <div className="nav__item-logo">
<InlineSVG src={logoUrl} alt="p5.js logo" /> <InlineSVG src={logoUrl} alt="p5.js logo" />

View file

@ -14,7 +14,7 @@ class App extends React.Component {
componentDidMount() { componentDidMount() {
this.setState({ isMounted: true }); // eslint-disable-line react/no-did-mount-set-state this.setState({ isMounted: true }); // eslint-disable-line react/no-did-mount-set-state
document.body.className = 'light'; document.body.className = this.props.theme;
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
@ -26,6 +26,12 @@ class App extends React.Component {
} }
} }
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
document.body.className = this.props.theme;
}
}
render() { render() {
return ( return (
<div className="app"> <div className="app">
@ -45,10 +51,18 @@ App.propTypes = {
}), }),
}).isRequired, }).isRequired,
setPreviousPath: PropTypes.func.isRequired, setPreviousPath: PropTypes.func.isRequired,
theme: PropTypes.string,
}; };
App.defaultProps = { App.defaultProps = {
children: null children: null,
theme: 'light'
}; };
export default connect(() => ({}), { setPreviousPath })(App); const mapStateToProps = state => ({
theme: state.preferences.theme,
});
const mapDispatchToProps = { setPreviousPath };
export default connect(mapStateToProps, mapDispatchToProps)(App);

View file

@ -11,13 +11,6 @@ import * as ProjectActions from '../actions/project';
class FullView extends React.Component { class FullView extends React.Component {
componentDidMount() { componentDidMount() {
this.props.getProject(this.props.params.project_id); this.props.getProject(this.props.params.project_id);
document.body.className = this.props.theme;
}
componentWillUpdate(nextProps) {
if (nextProps.theme !== this.props.theme) {
document.body.className = nextProps.theme;
}
} }
ident = () => {} ident = () => {}
@ -62,7 +55,6 @@ class FullView extends React.Component {
} }
FullView.propTypes = { FullView.propTypes = {
theme: PropTypes.string.isRequired,
params: PropTypes.shape({ params: PropTypes.shape({
project_id: PropTypes.string project_id: PropTypes.string
}).isRequired, }).isRequired,
@ -98,7 +90,6 @@ FullView.propTypes = {
function mapStateToProps(state) { function mapStateToProps(state) {
return { return {
user: state.user, user: state.user,
theme: state.preferences.theme,
htmlFile: getHTMLFile(state.files), htmlFile: getHTMLFile(state.files),
jsFiles: getJSFiles(state.files), jsFiles: getJSFiles(state.files),
cssFiles: getCSSFiles(state.files), cssFiles: getCSSFiles(state.files),

View file

@ -65,7 +65,6 @@ class IDEView extends React.Component {
window.onbeforeunload = () => this.warnIfUnsavedChanges(); window.onbeforeunload = () => this.warnIfUnsavedChanges();
document.body.className = this.props.preferences.theme;
this.autosaveInterval = null; this.autosaveInterval = null;
} }
@ -89,10 +88,6 @@ class IDEView extends React.Component {
this.props.getProject(nextProps.params.project_id); this.props.getProject(nextProps.params.project_id);
} }
} }
if (nextProps.preferences.theme !== this.props.preferences.theme) {
document.body.className = nextProps.preferences.theme;
}
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {

View file

@ -12,3 +12,9 @@
} }
} }
} }
.preview-nav {
.nav__item {
margin-left: #{5 / $base-font-size}rem;
}
}

View file

@ -66,7 +66,8 @@ const headers = { 'User-Agent': 'p5js-web-editor/0.0.1' };
const mongoConnectionString = process.env.MONGO_URL; const mongoConnectionString = process.env.MONGO_URL;
mongoose.connect(mongoConnectionString, { useMongoClient: true }); mongoose.connect(mongoConnectionString, { useNewUrlParser: true, useUnifiedTopology: true });
mongoose.set('useCreateIndex', true);
mongoose.connection.on('error', () => { mongoose.connection.on('error', () => {
console.error('MongoDB Connection Error. Please make sure that MongoDB is running.'); console.error('MongoDB Connection Error. Please make sure that MongoDB is running.');
process.exit(1); process.exit(1);

View file

@ -40,7 +40,8 @@ const headers = { 'User-Agent': 'p5js-web-editor/0.0.1' };
const mongoConnectionString = process.env.MONGO_URL; const mongoConnectionString = process.env.MONGO_URL;
mongoose.connect(mongoConnectionString, { useMongoClient: true }); mongoose.connect(mongoConnectionString, { useNewUrlParser: true, useUnifiedTopology: true });
mongoose.set('useCreateIndex', true);
mongoose.connection.on('error', () => { mongoose.connection.on('error', () => {
console.error('MongoDB Connection Error. Please make sure that MongoDB is running.'); console.error('MongoDB Connection Error. Please make sure that MongoDB is running.');
process.exit(1); process.exit(1);