From 9c0312f6b7bc7502956cee2364d2bb5376c3189c Mon Sep 17 00:00:00 2001 From: LianaHus Date: Fri, 12 Jun 2020 17:15:01 +0200 Subject: [PATCH 1/3] editor color themes: renamed chaos to remixDark and brought back chaos for external dark themes. --- assets/js/editor/darkTheme.js | 102 +++++++++++++++++----------------- src/app/editor/editor.js | 6 +- 2 files changed, 55 insertions(+), 53 deletions(-) diff --git a/assets/js/editor/darkTheme.js b/assets/js/editor/darkTheme.js index 41a1750600..2b1334cf2e 100644 --- a/assets/js/editor/darkTheme.js +++ b/assets/js/editor/darkTheme.js @@ -1,21 +1,21 @@ /* eslint-disable */ -ace.define("ace/theme/chaos",["require","exports","module","ace/lib/dom"], function(acequire, exports, module) { +ace.define("ace/theme/remixDark",["require","exports","module","ace/lib/dom"], function(acequire, exports, module) { exports.isDark = true; - exports.cssClass = "ace-chaos"; - exports.cssText = ".ace-chaos .ace_gutter {\ + exports.cssClass = "ace-remixDark"; + exports.cssText = ".ace-remixDark .ace_gutter {\ background: #2a2c3f;\ color: #8789a1;\ border-right: 1px solid #282828;\ }\ - .ace-chaos .ace_gutter-cell.ace_warning {\ + .ace-remixDark .ace_gutter-cell.ace_warning {\ background-image: none;\ background: #FC0;\ border-left: none;\ padding-left: 0;\ color: #000;\ }\ - .ace-chaos .ace_gutter-cell.ace_error {\ + .ace-remixDark .ace_gutter-cell.ace_error {\ background-position: -6px center;\ background-image: none;\ background: #F10;\ @@ -23,153 +23,153 @@ ace.define("ace/theme/chaos",["require","exports","module","ace/lib/dom"], funct padding-left: 0;\ color: #000;\ }\ - .ace-chaos .ace_print-margin {\ + .ace-remixDark .ace_print-margin {\ border-left: 1px solid #555;\ right: 0;\ background: #1D1D1D;\ }\ - .ace-chaos {\ + .ace-remixDark {\ background-color: #222336;\ color: #a2a3bd;\ }\ - .ace-chaos .ace_cursor {\ + .ace-remixDark .ace_cursor {\ border-left: 2px solid #FFFFFF;\ }\ - .ace-chaos .ace_cursor.ace_overwrite {\ + .ace-remixDark .ace_cursor.ace_overwrite {\ border-left: 0px;\ border-bottom: 1px solid #FFFFFF;\ }\ - .ace-chaos .ace_marker-layer .ace_selection {\ + .ace-remixDark .ace_marker-layer .ace_selection {\ background: #494836;\ }\ - .ace-chaos .ace_marker-layer .ace_step {\ + .ace-remixDark .ace_marker-layer .ace_step {\ background: rgb(198, 219, 174);\ }\ - .ace-chaos .ace_marker-layer .ace_bracket {\ + .ace-remixDark .ace_marker-layer .ace_bracket {\ margin: -1px 0 0 -1px;\ border: 1px solid #FCE94F;\ }\ - .ace-chaos .ace_marker-layer .ace_active-line {\ + .ace-remixDark .ace_marker-layer .ace_active-line {\ background: #363950;\ }\ - .ace-chaos .ace_gutter-active-line {\ + .ace-remixDark .ace_gutter-active-line {\ background-color: #363950;\ }\ - .ace-chaos .ace_invisible {\ + .ace-remixDark .ace_invisible {\ color: #404040;\ }\ - .ace-chaos .ace_rparen {\ + .ace-remixDark .ace_rparen {\ color: #d4d7ed;\ }\ - .ace-chaos .ace_lparen {\ + .ace-remixDark .ace_lparen {\ color: #d4d7ed;\ }\ - .ace-chaos .ace_keyword {\ + .ace-remixDark .ace_keyword {\ color:#ffa76d;\ }\ - .ace-chaos .ace_keyword.ace_operator {\ + .ace-remixDark .ace_keyword.ace_operator {\ color:#eceeff;\ }\ - .ace-chaos .ace_constant {\ + .ace-remixDark .ace_constant {\ color:#1EDAFB;\ }\ - .ace-chaos .ace_constant.ace_language {\ + .ace-remixDark .ace_constant.ace_language {\ color:#FDC251;\ }\ - .ace-chaos .ace_constant.ace_library {\ + .ace-remixDark .ace_constant.ace_library {\ color:#8DFF0A;\ }\ - .ace-chaos .ace_constant.ace_numeric {\ + .ace-remixDark .ace_constant.ace_numeric {\ color:#eceeff;\ }\ - .ace-chaos .ace_invalid {\ + .ace-remixDark .ace_invalid {\ color:#FFFFFF;\ background-color:#990000;\ }\ - .ace-chaos .ace_invalid.ace_deprecated {\ + .ace-remixDark .ace_invalid.ace_deprecated {\ color:#FFFFFF;\ background-color:#990000;\ }\ - .ace-chaos .ace_support {\ + .ace-remixDark .ace_support {\ color: #999;\ }\ - .ace-chaos .ace_support.ace_function {\ + .ace-remixDark .ace_support.ace_function {\ color:#3fe2a7;\ }\ - .ace-chaos .ace_function {\ + .ace-remixDark .ace_function {\ color:#3fe2a7;\ }\ - .ace-chaos .ace_string {\ + .ace-remixDark .ace_string {\ color:#eceeff;\ }\ - .ace-chaos .ace_comment {\ + .ace-remixDark .ace_comment {\ color:#a7a7a7;\ font-style:italic;\ padding-bottom: 0px;\ }\ - .ace-chaos .ace_type {\ + .ace-remixDark .ace_type {\ color:#75ceef;\ }]\ - .ace-chaos .ace_visibility (\ + .ace-remixDark .ace_visibility (\ color:#f7d777;\ )\ - .ace-chaos .ace_identifier {\ + .ace-remixDark .ace_identifier {\ color:#bec1dd;\ }\ - .ace-chaos .ace_modifier {\ + .ace-remixDark .ace_modifier {\ color:#efff2f;\ }\ - .ace-chaos .ace-boolean {\ + .ace-remixDark .ace-boolean {\ color:#ff86ac;\ }\ - .ace-chaos .ace_statemutability {\ + .ace-remixDark .ace_statemutability {\ color:#FFCC00;\ }\ - .ace-chaos .ace_variable {\ + .ace-remixDark .ace_variable {\ color:#e0bb83;\ }\ - .ace-chaos .ace_meta.ace_tag {\ + .ace-remixDark .ace_meta.ace_tag {\ color:#BE53E6;\ }\ - .ace-chaos .ace_entity.ace_other.ace_attribute-name {\ + .ace-remixDark .ace_entity.ace_other.ace_attribute-name {\ color:#4aa8fd;\ }\ - .ace-chaos .ace_markup.ace_underline {\ + .ace-remixDark .ace_markup.ace_underline {\ text-decoration: underline;\ }\ - .ace-chaos .ace_fold-widget {\ + .ace-remixDark .ace_fold-widget {\ text-align: center;\ }\ - .ace-chaos .ace_fold-widget:hover {\ + .ace-remixDark .ace_fold-widget:hover {\ color: #777;\ }\ - .ace-chaos .ace_fold-widget.ace_start,\ - .ace-chaos .ace_fold-widget.ace_end,\ - .ace-chaos .ace_fold-widget.ace_closed{\ + .ace-remixDark .ace_fold-widget.ace_start,\ + .ace-remixDark .ace_fold-widget.ace_end,\ + .ace-remixDark .ace_fold-widget.ace_closed{\ background: none;\ border: none;\ box-shadow: none;\ }\ - .ace-chaos .ace_fold-widget.ace_start:after {\ + .ace-remixDark .ace_fold-widget.ace_start:after {\ content: '▾'\ }\ - .ace-chaos .ace_fold-widget.ace_end:after {\ + .ace-remixDark .ace_fold-widget.ace_end:after {\ content: '▴'\ }\ - .ace-chaos .ace_fold-widget.ace_closed:after {\ + .ace-remixDark .ace_fold-widget.ace_closed:after {\ content: '‣'\ }\ - .ace-chaos .ace_indent-guide {\ + .ace-remixDark .ace_indent-guide {\ border-right:1px dotted #333;\ margin-right:-1px;\ }\ - .ace-chaos .ace_fold { \ + .ace-remixDark .ace_fold { \ background: #222; \ border-radius: 3px; \ color: #7AF; \ border: none; \ }\ - .ace-chaos .ace_fold:hover {\ + .ace-remixDark .ace_fold:hover {\ background: #CCC; \ color: #000;\ }\ diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js index 7319033074..76b90fa6e5 100644 --- a/src/app/editor/editor.js +++ b/src/app/editor/editor.js @@ -21,6 +21,7 @@ require('brace/mode/python') require('brace/mode/json') require('brace/mode/rust') require('brace/theme/chrome') +require('brace/theme/chaos') require('../../../assets/js/editor/darkTheme') const css = csjs` @@ -62,10 +63,11 @@ class Editor extends Plugin { this._themes = { 'light': 'chrome', - 'dark': 'chaos' + 'dark': 'chaos', + 'remixDark': 'remixDark' } themeModule.events.on('themeChanged', (theme) => { - this.setTheme(theme.quality) + this.setTheme(theme.name === 'Dark' ? 'remixDark' : theme.quality) }) // Init From 27b170457a6787861df901f215ac5e06f206c423 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Fri, 12 Jun 2020 17:47:58 +0200 Subject: [PATCH 2/3] removed 'State' theme --- src/app/editor/editor.js | 6 +++--- src/app/tabs/theme-module.js | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js index 76b90fa6e5..301d6ef4e0 100644 --- a/src/app/editor/editor.js +++ b/src/app/editor/editor.js @@ -20,9 +20,9 @@ require('brace/mode/javascript') require('brace/mode/python') require('brace/mode/json') require('brace/mode/rust') -require('brace/theme/chrome') -require('brace/theme/chaos') -require('../../../assets/js/editor/darkTheme') +require('brace/theme/chrome') // for all light themes +require('brace/theme/chaos') // for all dark themes +require('../../../assets/js/editor/darkTheme') // a custom one for remix 'Dark' theme const css = csjs` .ace-editor { diff --git a/src/app/tabs/theme-module.js b/src/app/tabs/theme-module.js index 4073b68c56..4ab44d1764 100644 --- a/src/app/tabs/theme-module.js +++ b/src/app/tabs/theme-module.js @@ -18,7 +18,6 @@ const themes = [ {name: 'Yeti', quality: 'light', url: 'https://bootswatch.com/4/yeti/bootstrap.min.css'}, {name: 'Cyborg', quality: 'dark', url: 'https://bootswatch.com/4/cyborg/bootstrap.min.css'}, {name: 'Darkly', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'}, - {name: 'Slate', quality: 'light', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'}, {name: 'Superhero', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/superhero/bootstrap.min.css'} ] From 18a1818d563ce24632c275a0007d66fdfd0cefe1 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Fri, 12 Jun 2020 18:11:34 +0200 Subject: [PATCH 3/3] removed tests for 'State' theme --- test-browser/tests/generalSettings.test.js | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/test-browser/tests/generalSettings.test.js b/test-browser/tests/generalSettings.test.js index 2e43472769..ea9ab48c87 100644 --- a/test-browser/tests/generalSettings.test.js +++ b/test-browser/tests/generalSettings.test.js @@ -212,18 +212,6 @@ module.exports = { .checkElementStyle(':root', '--danger', remixIdeThemes.darkly.danger) }, - 'Should load Slate theme': function (browser) { - browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) - .click('*[data-id="settingsTabThemeSlate"]') - .pause(2000) - .checkElementStyle(':root', '--primary', remixIdeThemes.slate.primary) - .checkElementStyle(':root', '--secondary', remixIdeThemes.slate.secondary) - .checkElementStyle(':root', '--success', remixIdeThemes.slate.success) - .checkElementStyle(':root', '--info', remixIdeThemes.slate.info) - .checkElementStyle(':root', '--warning', remixIdeThemes.slate.warning) - .checkElementStyle(':root', '--danger', remixIdeThemes.slate.danger) - }, - 'Should load Superhero theme': function (browser) { browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000) .click('*[data-id="settingsTabThemeSuperhero"]') @@ -337,14 +325,6 @@ var remixIdeThemes = { warning: '#F39C12', danger: '#E74C3C' }, - slate: { - primary: '#3A3F44', - secondary: '#7A8288', - success: '#62c462', - info: '#5bc0de', - warning: '#f89406', - danger: '#ee5f5b' - }, superhero: { primary: '#DF691A', secondary: '#4E5D6C',