From a500279036bf1b6b8d2ef18800ba0af265a8d12a Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Tue, 8 Sep 2020 19:50:38 +0300 Subject: [PATCH] fix: editor resize (#39542) --- client/src/components/layouts/variables.css | 4 + .../templates/Challenges/classic/Editor.js | 22 ++--- .../Challenges/classic/MultifileEditor.js | 80 ++++++++----------- .../templates/Challenges/classic/editor.css | 4 + 4 files changed, 53 insertions(+), 57 deletions(-) diff --git a/client/src/components/layouts/variables.css b/client/src/components/layouts/variables.css index 4917ab8b0f..1430081504 100644 --- a/client/src/components/layouts/variables.css +++ b/client/src/components/layouts/variables.css @@ -22,6 +22,8 @@ --red-dark: #850000; --love-light: #f8577c; --love-dark: #f82153; + --editor-background-light: #fffffe; + --editor-background-dark: #2a2b40; } .dark-palette { @@ -40,6 +42,7 @@ --danger-color: var(--red-light); --danger-background: var(--red-dark); --love-color: var(--love-light); + --editor-background: var(--editor-background-dark); } .light-palette { @@ -58,4 +61,5 @@ --danger-color: var(--red-dark); --danger-background: var(--red-light); --love-color: var(--love-dark); + --editor-background: var(--editor-background-light); } diff --git a/client/src/templates/Challenges/classic/Editor.js b/client/src/templates/Challenges/classic/Editor.js index 31f122d693..7582cf42d8 100644 --- a/client/src/templates/Challenges/classic/Editor.js +++ b/client/src/templates/Challenges/classic/Editor.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, Suspense } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; @@ -15,6 +15,7 @@ import { updateFile } from '../redux'; import { userSelector, isDonationModalOpenSelector } from '../../../redux'; +import { Loader } from '../../../components/helpers'; import './editor.css'; @@ -949,15 +950,18 @@ class Editor extends Component { render() { const { theme } = this.props; const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom'; - return ( - + }> + + + + ); } } diff --git a/client/src/templates/Challenges/classic/MultifileEditor.js b/client/src/templates/Challenges/classic/MultifileEditor.js index 884429590c..da1ead12b9 100644 --- a/client/src/templates/Challenges/classic/MultifileEditor.js +++ b/client/src/templates/Challenges/classic/MultifileEditor.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, { Component, Suspense } from 'react'; +import React, { Component } from 'react'; import { connect } from 'react-redux'; import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex'; import { createSelector } from 'reselect'; @@ -17,7 +17,6 @@ import { updateFile } from '../redux'; import './editor.css'; -import { Loader } from '../../../components/helpers'; import Editor from './Editor'; const propTypes = { @@ -201,68 +200,53 @@ class MultifileEditor extends Component { orientation='horizontal' {...reflexProps} {...resizeProps} + className='editor-container' > {visibleEditors.indexhtml && ( - }> - - - - + )} {splitCSS && } {visibleEditors.indexcss && ( - }> - - - - + )} {splitJS && } {visibleEditors.indexjs && ( - }> - - - - + )} diff --git a/client/src/templates/Challenges/classic/editor.css b/client/src/templates/Challenges/classic/editor.css index 2ffa083f19..10a8281be6 100644 --- a/client/src/templates/Challenges/classic/editor.css +++ b/client/src/templates/Challenges/classic/editor.css @@ -13,3 +13,7 @@ .vs .monaco-scrollable-element > .scrollbar > .slider { z-index: 11; } + +.editor-container { + background: var(--editor-background); +}