From e1bda08c59fb602dfebf415bcfd6a87dc18047a4 Mon Sep 17 00:00:00 2001 From: huyenltnguyen <25715018+huyenltnguyen@users.noreply.github.com> Date: Mon, 15 Jan 2018 13:01:49 +0700 Subject: [PATCH] fix(challenges): Add logic to toggle editor theme Closes #16284 --- common/app/routes/Challenges/Output.jsx | 3 +-- common/app/routes/Challenges/challenges.less | 4 ++++ .../routes/Challenges/views/Modern/Editor.jsx | 19 +++++++++++++----- .../Challenges/views/classic/Editor.jsx | 19 +++++++++++++----- .../Challenges/views/classic/classic.less | 20 ------------------- server/views/partials/react-stylesheets.jade | 1 + 6 files changed, 34 insertions(+), 32 deletions(-) diff --git a/common/app/routes/Challenges/Output.jsx b/common/app/routes/Challenges/Output.jsx index 93b2a680db..b63b6f1b6b 100644 --- a/common/app/routes/Challenges/Output.jsx +++ b/common/app/routes/Challenges/Output.jsx @@ -10,8 +10,7 @@ const defaultOptions = { lineNumbers: false, lineWrapping: true, mode: 'javascript', - readOnly: 'nocursor', - theme: 'monokai' + readOnly: 'nocursor' }; const propTypes = { diff --git a/common/app/routes/Challenges/challenges.less b/common/app/routes/Challenges/challenges.less index d42415689a..6ba8744913 100644 --- a/common/app/routes/Challenges/challenges.less +++ b/common/app/routes/Challenges/challenges.less @@ -117,6 +117,10 @@ caret-color:#ABABAB; } } + .@{ns}-log .CodeMirror { + background-color: #282a36; + color: #f8f8f2; + } .refresh-icon { color: @icon-light-gray; } diff --git a/common/app/routes/Challenges/views/Modern/Editor.jsx b/common/app/routes/Challenges/views/Modern/Editor.jsx index a22adf61eb..59cf7795dd 100644 --- a/common/app/routes/Challenges/views/Modern/Editor.jsx +++ b/common/app/routes/Challenges/views/Modern/Editor.jsx @@ -15,6 +15,8 @@ import { challengeMetaSelector } from '../../redux'; +import { themeSelector } from '../../../../redux'; + import { createFileSelector } from '../../../../files'; const envProps = typeof window !== 'undefined' ? Object.keys(window) : []; @@ -36,13 +38,16 @@ const options = { const mapStateToProps = createSelector( createFileSelector((_, { fileKey }) => fileKey || ''), challengeMetaSelector, + themeSelector, ( file, - { mode } + { mode }, + theme ) => ({ content: file.contents || '// Happy Coding!', file: file, - mode: file.ext || mode || 'javascript' + mode: file.ext || mode || 'javascript', + theme }) ); @@ -56,15 +61,18 @@ const propTypes = { executeChallenge: PropTypes.func.isRequired, fileKey: PropTypes.string, mode: PropTypes.string, - modernEditorUpdated: PropTypes.func.isRequired + modernEditorUpdated: PropTypes.func.isRequired, + theme: PropTypes.string }; export class Editor extends PureComponent { createOptions = createSelector( state => state.executeChallenge, state => state.mode, - (executeChallenge, mode) => ({ + state => state.cmTheme, + (executeChallenge, mode, cmTheme) => ({ ...options, + theme: cmTheme, mode, // JSHint only works with javascript // we will need to switch to eslint to make this work with jsx @@ -119,6 +127,7 @@ export class Editor extends PureComponent { fileKey, mode } = this.props; + const cmTheme = this.props.theme === 'default' ? 'default' : 'dracula'; return (
}> modernEditorUpdated(fileKey, content) } - options={ this.createOptions({ executeChallenge, mode }) } + options={ this.createOptions({ executeChallenge, mode, cmTheme }) } ref='editor' value={ content } /> diff --git a/common/app/routes/Challenges/views/classic/Editor.jsx b/common/app/routes/Challenges/views/classic/Editor.jsx index 8ab61b2f93..eae182be6f 100644 --- a/common/app/routes/Challenges/views/classic/Editor.jsx +++ b/common/app/routes/Challenges/views/classic/Editor.jsx @@ -16,6 +16,8 @@ import { keySelector } from '../../redux'; +import { themeSelector } from '../../../../redux'; + import { filesSelector } from '../../../../files'; const envProps = typeof window !== 'undefined' ? Object.keys(window) : []; @@ -38,15 +40,18 @@ const mapStateToProps = createSelector( filesSelector, challengeMetaSelector, keySelector, + themeSelector, ( files = {}, { mode = 'javascript'}, - key + key, + theme ) => ({ content: files[key] && files[key].contents || '// Happy Coding!', file: files[key], fileKey: key, - mode + mode, + theme }) ); @@ -60,15 +65,18 @@ const propTypes = { content: PropTypes.string, executeChallenge: PropTypes.func.isRequired, fileKey: PropTypes.string.isRequired, - mode: PropTypes.string + mode: PropTypes.string, + theme: PropTypes.string }; export class Editor extends PureComponent { createOptions = createSelector( state => state.executeChallenge, state => state.mode, - (executeChallenge, mode) => ({ + state => state.cmTheme, + (executeChallenge, mode, cmTheme) => ({ ...options, + theme: cmTheme, mode, extraKeys: { Esc() { @@ -120,6 +128,7 @@ export class Editor extends PureComponent { classicEditorUpdated, mode } = this.props; + const cmTheme = this.props.theme === 'default' ? 'default' : 'dracula'; return (
}> classicEditorUpdated(fileKey, change) } - options={ this.createOptions({ executeChallenge, mode }) } + options={ this.createOptions({ executeChallenge, mode, cmTheme }) } ref='editor' value={ content } /> diff --git a/common/app/routes/Challenges/views/classic/classic.less b/common/app/routes/Challenges/views/classic/classic.less index 03c5ca1e48..37f7ed5543 100644 --- a/common/app/routes/Challenges/views/classic/classic.less +++ b/common/app/routes/Challenges/views/classic/classic.less @@ -16,26 +16,6 @@ padding-right: 5px; } -.night { - .@{ns}-editor .CodeMirror { - background-color:#242424; - color:#ABABAB; - &-gutters { - background-color:#242424; - color:#ABABAB; - } - .cm-bracket, .cm-tag { - color:#5CAFD6; - } - .cm-property, .cm-string { - color:#B5753A; - } - .cm-keyword, .cm-attribute { - color:#9BBBDC; - } - } -} - .@{ns}-editor { .max-element-height(); width: 100%; diff --git a/server/views/partials/react-stylesheets.jade b/server/views/partials/react-stylesheets.jade index 7c80fa6896..f6079cdd9f 100644 --- a/server/views/partials/react-stylesheets.jade +++ b/server/views/partials/react-stylesheets.jade @@ -2,6 +2,7 @@ link(rel='stylesheet', type='text/css' href='/css/lato.css') link(rel='stylesheet', type='text/css' href='/css/ubuntu.css') link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css') link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/codemirror.min.css') +link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/dracula.min.css') link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/addon/lint/lint.min.css') link(rel='stylesheet', href=rev('/css', 'main.css'))