From f938e668ef8fdb4678e05c70490c889cebe43fc1 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sat, 6 Feb 2021 13:03:46 +0300 Subject: [PATCH] [dark theme] added 'Themes' controller --- apps/common/main/lib/controller/Themes.js | 62 +++++++++++++++++++ apps/documenteditor/main/app.js | 1 + .../main/app/controller/Main.js | 16 +---- apps/documenteditor/main/app_dev.js | 1 + apps/presentationeditor/main/app.js | 1 + .../main/app/controller/Main.js | 16 +---- apps/presentationeditor/main/app_dev.js | 1 + apps/spreadsheeteditor/main/app.js | 1 + .../main/app/controller/Main.js | 19 +----- apps/spreadsheeteditor/main/app_dev.js | 1 + 10 files changed, 75 insertions(+), 44 deletions(-) create mode 100644 apps/common/main/lib/controller/Themes.js diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js new file mode 100644 index 000000000..4f55a05a0 --- /dev/null +++ b/apps/common/main/lib/controller/Themes.js @@ -0,0 +1,62 @@ +/** + * Created by Maxim.Kadushkin on 2/5/2021. + */ + +define([ + 'core' +], function () { + 'use strict'; + + Common.UI.Themes = new (function() { + var sdk_themes_relation = { + 'theme-light': 'flat', + 'theme-dark': 'flatDark' + }; + + sdk_themes_relation.contains = function (name) { + return !!this[name]; + } + + return { + init: function (api) { + var me = this; + $(window).on('storage', function (e) { + if ( e.key == 'ui-theme' ) { + me.setTheme(e.originalEvent.newValue); + } + }) + + this.api = api; + api.asc_setSkin(sdk_themes_relation[Common.localStorage.getItem('ui-theme', 'theme-light')]); + + // app.eventbus.addListeners({ + // 'FileMenu': { + // 'settings:apply': function (menu) { + // } + // } + // }, {id: 'Themes'}); + + // getComputedStyle(document.documentElement).getPropertyValue('--background-normal'); + }, + + current: function () { + return Common.localStorage.getItem('ui-theme', 'theme-light'); + }, + + setTheme: function (name) { + if ( sdk_themes_relation.contains(name) ) { + var classname = document.documentElement.className.replace(/theme-\w+\s?/, ''); + document.documentElement.className = classname; + + this.api.asc_setSkin(sdk_themes_relation[name]); + $(':root').addClass(name); + Common.localStorage.setItem('ui-theme', name); + } + }, + + toggleTheme: function () { + this.setTheme(this.current() == 'theme-dark' ? 'theme-light' : 'theme-dark'); + } + } + })(); +}); \ No newline at end of file diff --git a/apps/documenteditor/main/app.js b/apps/documenteditor/main/app.js index 87306dd58..0de0c48a2 100644 --- a/apps/documenteditor/main/app.js +++ b/apps/documenteditor/main/app.js @@ -205,6 +205,7 @@ require([ ,'common/main/lib/controller/ExternalMergeEditor' ,'common/main/lib/controller/ReviewChanges' ,'common/main/lib/controller/Protection' + ,'common/main/lib/controller/Themes' ,'common/main/lib/controller/Desktop' ], function() { app.start(); diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index 0693247d1..cda407f3b 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -171,6 +171,7 @@ define([ this.api = this.getApplication().getController('Viewport').getApi(); Common.UI.FocusManager.init(); + Common.UI.Themes.init(this.api); if (this.api){ this.api.SetDrawingFreeze(true); @@ -189,9 +190,6 @@ define([ case '2': this.api.SetFontRenderingMode(2); break; } - value = Common.localStorage.getItem("uitheme", "theme-light"); - me.api.asc_setSkin(value == "theme-dark" ? 'flatDark' : "flat"); - this.api.asc_registerCallback('asc_onError', _.bind(this.onError, this)); this.api.asc_registerCallback('asc_onDocumentContentReady', _.bind(this.onDocumentContentReady, this)); this.api.asc_registerCallback('asc_onOpenDocumentProgress', _.bind(this.onOpenDocument, this)); @@ -1122,17 +1120,7 @@ define([ $('#header-logo').children(0).click(e => { e.stopImmediatePropagation(); - var value = Common.localStorage.getItem("uitheme", "theme-light"); - var classname = document.documentElement.className.replace(/theme-\w+\s?/, ''); - document.documentElement.className = classname; - if ( value != "theme-dark" ) { - me.api.asc_setSkin('flatDark'); - $(':root').addClass('theme-dark'); - Common.localStorage.setItem("uitheme", "theme-dark"); - } else { - me.api.asc_setSkin("flat"); - Common.localStorage.setItem("uitheme", "theme-light"); - } + Common.UI.Themes.toggleTheme(); // getComputedStyle(document.documentElement).getPropertyValue('--background-normal'); }) diff --git a/apps/documenteditor/main/app_dev.js b/apps/documenteditor/main/app_dev.js index b0333ef3f..935794835 100644 --- a/apps/documenteditor/main/app_dev.js +++ b/apps/documenteditor/main/app_dev.js @@ -195,6 +195,7 @@ require([ ,'common/main/lib/controller/ExternalMergeEditor' ,'common/main/lib/controller/ReviewChanges' ,'common/main/lib/controller/Protection' + ,'common/main/lib/controller/Themes' ,'common/main/lib/controller/Desktop' ], function() { window.compareVersions = true; diff --git a/apps/presentationeditor/main/app.js b/apps/presentationeditor/main/app.js index 99ea4dc01..5fb88c9ff 100644 --- a/apps/presentationeditor/main/app.js +++ b/apps/presentationeditor/main/app.js @@ -189,6 +189,7 @@ require([ 'common/main/lib/controller/ExternalDiagramEditor' ,'common/main/lib/controller/ReviewChanges' ,'common/main/lib/controller/Protection' + ,'common/main/lib/controller/Themes' ,'common/main/lib/controller/Desktop' ], function() { app.start(); diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js index cecfcbde6..0edb5625f 100644 --- a/apps/presentationeditor/main/app/controller/Main.js +++ b/apps/presentationeditor/main/app/controller/Main.js @@ -156,6 +156,7 @@ define([ this.api = this.getApplication().getController('Viewport').getApi(); Common.UI.FocusManager.init(); + Common.UI.Themes.init(this.api); if (this.api){ this.api.SetDrawingFreeze(true); @@ -170,9 +171,6 @@ define([ Common.Utils.InternalSettings.set("pe-settings-fontrender", value); this.api.SetFontRenderingMode(parseInt(value)); - value = Common.localStorage.getItem("uitheme", "theme-light"); - me.api.asc_setSkin(value == "theme-dark" ? 'flatDark' : "flat"); - this.api.asc_registerCallback('asc_onError', _.bind(this.onError, this)); this.api.asc_registerCallback('asc_onDocumentContentReady', _.bind(this.onDocumentContentReady, this)); this.api.asc_registerCallback('asc_onOpenDocumentProgress', _.bind(this.onOpenDocument, this)); @@ -846,17 +844,7 @@ define([ $('#header-logo').children(0).click(e => { e.stopImmediatePropagation(); - var value = Common.localStorage.getItem("uitheme", "theme-light"); - var classname = document.documentElement.className.replace(/theme-\w+\s?/, ''); - document.documentElement.className = classname; - if ( value != "theme-dark" ) { - me.api.asc_setSkin('flatDark'); - $(':root').addClass('theme-dark'); - Common.localStorage.setItem("uitheme", "theme-dark"); - } else { - me.api.asc_setSkin("flat"); - Common.localStorage.setItem("uitheme", "theme-light"); - } + Common.UI.Themes.toggleTheme(); }) }, diff --git a/apps/presentationeditor/main/app_dev.js b/apps/presentationeditor/main/app_dev.js index 278c6bcf0..3b3c7dc3d 100644 --- a/apps/presentationeditor/main/app_dev.js +++ b/apps/presentationeditor/main/app_dev.js @@ -180,6 +180,7 @@ require([ 'common/main/lib/controller/ExternalDiagramEditor' ,'common/main/lib/controller/ReviewChanges' ,'common/main/lib/controller/Protection' + ,'common/main/lib/controller/Themes' ,'common/main/lib/controller/Desktop' ], function() { window.compareVersions = true; diff --git a/apps/spreadsheeteditor/main/app.js b/apps/spreadsheeteditor/main/app.js index 98f81f10a..2057534be 100644 --- a/apps/spreadsheeteditor/main/app.js +++ b/apps/spreadsheeteditor/main/app.js @@ -201,6 +201,7 @@ require([ 'common/main/lib/controller/Plugins' ,'common/main/lib/controller/ReviewChanges' ,'common/main/lib/controller/Protection' + ,'common/main/lib/controller/Themes' ,'common/main/lib/controller/Desktop' ], function() { app.start(); diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index 485c1189e..3ac38d6cb 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -166,7 +166,8 @@ define([ this.api = this.getApplication().getController('Viewport').getApi(); Common.UI.FocusManager.init(); - + Common.UI.Themes.init(this.api); + var value = Common.localStorage.getBool("sse-settings-cachemode", true); Common.Utils.InternalSettings.set("sse-settings-cachemode", value); this.api.asc_setDefaultBlitMode(!!value); @@ -176,9 +177,6 @@ define([ Common.Utils.InternalSettings.set("sse-settings-fontrender", value); this.api.asc_setFontRenderingMode(parseInt(value)); - value = Common.localStorage.getItem("uitheme", "theme-light"); - this.api.asc_setSkin(value == "theme-dark" ? 'flatDark' : "flat"); - this.api.asc_registerCallback('asc_onOpenDocumentProgress', _.bind(this.onOpenDocument, this)); this.api.asc_registerCallback('asc_onEndAction', _.bind(this.onLongActionEnd, this)); this.api.asc_registerCallback('asc_onError', _.bind(this.onError, this)); @@ -910,18 +908,7 @@ define([ $('#header-logo').children(0).click(e => { e.stopImmediatePropagation(); - - document.documentElement.className = document.documentElement.className.replace(/theme-\w+\s?/, ''); - if ( "theme-dark" != Common.localStorage.getItem("uitheme", "theme-light") ) { - me.api.asc_setSkin('flatDark'); - $(':root').addClass('theme-dark'); - Common.localStorage.setItem("uitheme", "theme-dark"); - } else { - me.api.asc_setSkin("flat"); - Common.localStorage.setItem("uitheme", "theme-light"); - } - - // getComputedStyle(document.documentElement).getPropertyValue('--background-normal'); + Common.UI.Themes.toggleTheme(); }) }, diff --git a/apps/spreadsheeteditor/main/app_dev.js b/apps/spreadsheeteditor/main/app_dev.js index 2ca0622ca..86e790254 100644 --- a/apps/spreadsheeteditor/main/app_dev.js +++ b/apps/spreadsheeteditor/main/app_dev.js @@ -191,6 +191,7 @@ require([ 'common/main/lib/controller/Plugins' ,'common/main/lib/controller/ReviewChanges' ,'common/main/lib/controller/Protection' + ,'common/main/lib/controller/Themes' ,'common/main/lib/controller/Desktop' ], function() { window.compareVersions = true;