From 25508b932e860109f594bca6f3fda27fc97848ec Mon Sep 17 00:00:00 2001 From: Yuri Kuznetsov Date: Fri, 24 Dec 2021 15:29:26 +0200 Subject: [PATCH] ace dark mode --- .../Espo/Resources/metadata/app/jsLibs.json | 6 ++++ .../Espo/Resources/metadata/themes/Dark.json | 3 +- .../metadata/themes/DarkVertical.json | 3 +- client/src/views/fields/complex-expression.js | 35 ++++++++++-------- client/src/views/fields/formula.js | 36 +++++++++++-------- frontend/libs.json | 4 +++ 6 files changed, 57 insertions(+), 30 deletions(-) diff --git a/application/Espo/Resources/metadata/app/jsLibs.json b/application/Espo/Resources/metadata/app/jsLibs.json index 52d51909f5..56a03af914 100644 --- a/application/Espo/Resources/metadata/app/jsLibs.json +++ b/application/Espo/Resources/metadata/app/jsLibs.json @@ -84,5 +84,11 @@ "devPath": "node_modules/ace-builds/src-noconflict/ext-language_tools.js", "exportsTo": "ace.require.define.modules", "exportsAs": "ace/ext/language_tools" + }, + "ace-theme-pastel_on_dark": { + "path": "client/lib/ace-theme-pastel_on_dark.js", + "devPath": "node_modules/ace-builds/src-noconflict/theme-pastel_on_dark.js", + "exportsTo": "ace.require.define.modules", + "exportsAs": "ace/theme/pastel_on_dark" } } diff --git a/application/Espo/Resources/metadata/themes/Dark.json b/application/Espo/Resources/metadata/themes/Dark.json index 17cd303530..77916ef51d 100644 --- a/application/Espo/Resources/metadata/themes/Dark.json +++ b/application/Espo/Resources/metadata/themes/Dark.json @@ -17,5 +17,6 @@ "Meeting": "#6680b3", "Call": "#a1404a", "Task": "#5d8a55" - } + }, + "isDark": true } diff --git a/application/Espo/Resources/metadata/themes/DarkVertical.json b/application/Espo/Resources/metadata/themes/DarkVertical.json index 6960481174..1af58efe85 100644 --- a/application/Espo/Resources/metadata/themes/DarkVertical.json +++ b/application/Espo/Resources/metadata/themes/DarkVertical.json @@ -21,5 +21,6 @@ "Meeting": "#6680b3", "Call": "#a1404a", "Task": "#5d8a55" - } + }, + "isDark": true } diff --git a/client/src/views/fields/complex-expression.js b/client/src/views/fields/complex-expression.js index b178e53fda..55b44baf64 100644 --- a/client/src/views/fields/complex-expression.js +++ b/client/src/views/fields/complex-expression.js @@ -85,20 +85,21 @@ define('views/fields/complex-expression', 'views/fields/text', function (Dep) { }, requireAce: function () { - return new Promise(resolve => - Espo.loader.require('lib!ace', () => - Promise - .all([ - /*new Promise(resolve => - Espo.loader.require('lib!ace-mode-javascript', () => resolve()) - ),*/ - new Promise(resolve => - Espo.loader.require('lib!ace-ext-language_tools', () => resolve()) - ), - ]) - .then(() => resolve()) - ) - ); + return Espo.loader + .requirePromise('lib!ace') + .then(() => { + let list = [ + Espo.loader.requirePromise('lib!ace-ext-language_tools'), + ]; + + if (this.getThemeManager().getParam('isDark')) { + list.push( + Espo.loader.requirePromise('lib!ace-theme-pastel_on_dark') + ); + } + + return Promise.all(list); + }); }, data: function () { @@ -133,6 +134,12 @@ define('views/fields/complex-expression', 'views/fields/text', function (Dep) { maxLines: this.mode === 'edit' ? this.maxLineEditCount : this.maxLineDetailCount, }); + if (this.getThemeManager().getParam('isDark')) { + editor.setOptions({ + theme: 'ace/theme/pastel_on_dark', + }); + } + if (this.isEditMode()) { editor.getSession().on('change', () => { this.trigger('change', {ui: true}); diff --git a/client/src/views/fields/formula.js b/client/src/views/fields/formula.js index 07d6333626..5c47f38a83 100644 --- a/client/src/views/fields/formula.js +++ b/client/src/views/fields/formula.js @@ -87,20 +87,22 @@ define('views/fields/formula', 'views/fields/text', function (Dep) { }, requireAce: function () { - return new Promise(resolve => - Espo.loader.require('lib!ace', () => - Promise - .all([ - new Promise(resolve => - Espo.loader.require('lib!ace-mode-javascript', () => resolve()) - ), - new Promise(resolve => - Espo.loader.require('lib!ace-ext-language_tools', () => resolve()) - ), - ]) - .then(() => resolve()) - ) - ); + return Espo.loader + .requirePromise('lib!ace') + .then(() => { + let list = [ + Espo.loader.requirePromise('lib!ace-mode-javascript'), + Espo.loader.requirePromise('lib!ace-ext-language_tools'), + ]; + + if (this.getThemeManager().getParam('isDark')) { + list.push( + Espo.loader.requirePromise('lib!ace-theme-pastel_on_dark') + ); + } + + return Promise.all(list); + }); }, data: function () { @@ -134,6 +136,12 @@ define('views/fields/formula', 'views/fields/text', function (Dep) { maxLines: this.mode === 'edit' ? this.maxLineEditCount : this.maxLineDetailCount, }); + if (this.getThemeManager().getParam('isDark')) { + editor.setOptions({ + theme: 'ace/theme/pastel_on_dark', + }); + } + if (this.isEditMode()) { editor.getSession().on('change', () => { this.trigger('change', {ui: true}); diff --git a/frontend/libs.json b/frontend/libs.json index c5a01c4b50..c9444e05fe 100644 --- a/frontend/libs.json +++ b/frontend/libs.json @@ -141,6 +141,10 @@ { "src": "node_modules/ace-builds/src-noconflict/ext-language_tools.js", "dest": "client/lib/ace-ext-language_tools.js" + }, + { + "src": "node_modules/ace-builds/src-noconflict/theme-pastel_on_dark.js", + "dest": "client/lib/ace-theme-pastel_on_dark.js" } ] },