From f8920bd84a9af4e191a7dea9de5f3fc813aa92a5 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sun, 14 Mar 2021 00:20:01 +0300 Subject: [PATCH 1/2] [common] refactoring --- apps/common/main/lib/controller/Themes.js | 38 +++++++++++++---------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index 863594e41..0c6610f14 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -8,21 +8,35 @@ define([ 'use strict'; Common.UI.Themes = new (function() { - var sdk_themes_relation = { + var sdk_themes_alias = { 'theme-light': 'flat', 'theme-dark': 'flatDark' }; - sdk_themes_relation.contains = function (name) { + sdk_themes_alias.contains = function (name) { return !!this[name]; } + var refresh_sdk_colors = function () { + var style = getComputedStyle(document.body); + if ( !!window.DE ) { + var color_background_normal = style.getPropertyValue('--background-normal'); + this.api.asc_setSkin({ + "RulerOutline": style.getPropertyValue('--border-toolbar') + , "RulerMarkersFillColor": color_background_normal + , "RulerMarkersFillColorOld": color_background_normal + , "RulerTableColor1": color_background_normal + }); + } + } return { THEME_LIGHT_ID: 'theme-light', THEME_DARK_ID: 'theme-dark', init: function (api) { var me = this; + refresh_sdk_colors = refresh_sdk_colors.bind(this); + $(window).on('storage', function (e) { if ( e.key == 'ui-theme' ) { me.setTheme(e.originalEvent.newValue); @@ -31,12 +45,14 @@ define([ this.api = api; var theme_name = Common.localStorage.getItem('ui-theme', 'theme-light'); - api.asc_setSkin(sdk_themes_relation[theme_name]); + api.asc_setSkin(sdk_themes_alias[theme_name]); if ( !$('body').hasClass(theme_name) ) { $('body').addClass(theme_name); } + refresh_sdk_colors(); + // app.eventbus.addListeners({ // 'FileMenu': { // 'settings:apply': function (menu) { @@ -60,23 +76,13 @@ define([ }, setTheme: function (name) { - if ( sdk_themes_relation.contains(name) ) { + if ( sdk_themes_alias.contains(name) ) { var classname = document.documentElement.className.replace(/theme-\w+\s?/, ''); document.body.className = classname; $('body').addClass(name); - this.api.asc_setSkin(sdk_themes_relation[name]); - - var style = getComputedStyle(document.body); - if ( !!window.DE ) { - var color_background_normal = style.getPropertyValue('--background-normal'); - this.api.asc_setSkin({ - "RulerOutline": style.getPropertyValue('--border-toolbar') - , "RulerMarkersFillColor": color_background_normal - , "RulerMarkersFillColorOld": color_background_normal - , "RulerTableColor1": color_background_normal - }); - } + this.api.asc_setSkin(sdk_themes_alias[name]); + refresh_sdk_colors(); Common.localStorage.setItem('ui-theme', name); Common.NotificationCenter.trigger('uitheme:changed', name); From 54f496f25014421fe905207be0b62c0c7f964b13 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sun, 14 Mar 2021 00:21:18 +0300 Subject: [PATCH 2/2] [all] fixed some components according to theme --- apps/common/main/resources/less/colors-table-dark.less | 1 + apps/common/main/resources/less/colors-table-ie-fix.less | 1 + apps/common/main/resources/less/colors-table.less | 2 ++ apps/common/main/resources/less/combo-dataview.less | 8 ++++---- apps/common/main/resources/less/scroller.less | 6 ++++++ 5 files changed, 14 insertions(+), 4 deletions(-) diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less index 3a4d63ae5..f17d2bece 100644 --- a/apps/common/main/resources/less/colors-table-dark.less +++ b/apps/common/main/resources/less/colors-table-dark.less @@ -28,6 +28,7 @@ --border-divider: #505050; --border-regular-control: #666666; --border-toolbar-button-hover: #5a5a5a; + --border-preview-hover: #e0e0e0; --border-preview-select: #666666; --border-control-focus: #ccc; --border-color-shading: fade(#fff, 5%); diff --git a/apps/common/main/resources/less/colors-table-ie-fix.less b/apps/common/main/resources/less/colors-table-ie-fix.less index a4a941270..0dd726c2e 100644 --- a/apps/common/main/resources/less/colors-table-ie-fix.less +++ b/apps/common/main/resources/less/colors-table-ie-fix.less @@ -26,6 +26,7 @@ @border-divider-ie: #dfdfdf; @border-regular-control-ie: #c0c0c0; @border-toolbar-button-hover-ie: #e0e0e0; +@border-preview-hover-ie: #cfcfcf; @border-preview-select-ie: #aaa; @border-control-focus-ie: #848484; @border-color-shading-ie: fade(#000, 10%); diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index 5bff0dfd2..5ccf210a9 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -38,6 +38,7 @@ --border-divider: #dfdfdf; --border-regular-control: #c0c0c0; --border-toolbar-button-hover: #e0e0e0; + --border-preview-hover: #cfcfcf; --border-preview-select: #aaa; --border-control-focus: #848484; --border-color-shading: fade(#000, 10%); @@ -153,6 +154,7 @@ @border-divider: var(--border-divider); @border-regular-control: var(--border-regular-control); @border-toolbar-button-hover: var(--border-toolbar-button-hover); +@border-preview-hover: var(--border-preview-hover); @border-preview-select: var(--border-preview-select); @border-control-focus: var(--border-control-focus); @border-color-shading: var(--border-color-shading); diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index 3bc08d1db..f23fafc5e 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -106,8 +106,8 @@ &:hover { - .box-inner-shadow(0 0 0 2px @border-regular-control-ie); - .box-inner-shadow(0 0 0 @scaled-two-px-value @border-regular-control); + .box-inner-shadow(0 0 0 2px @border-preview-hover-ie); + .box-inner-shadow(0 0 0 @scaled-two-px-value @border-preview-hover); } &.selected { @@ -268,8 +268,8 @@ .item { &:hover { - .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie); - .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control); + .box-shadow(0 0 0 @scaled-one-px-value-ie @border-preview-hover-ie); + .box-shadow(0 0 0 @scaled-one-px-value @border-preview-hover); } } diff --git a/apps/common/main/resources/less/scroller.less b/apps/common/main/resources/less/scroller.less index 8f345eef8..0929d2cf5 100644 --- a/apps/common/main/resources/less/scroller.less +++ b/apps/common/main/resources/less/scroller.less @@ -104,6 +104,9 @@ &:hover, .hover { + background-color: @background-toolbar-additional-ie; + background-color: @background-toolbar-additional; + .ps-scrollbar-y { &.always-visible-y { background-color: @border-regular-control-ie; @@ -114,6 +117,9 @@ } &.in-scrolling { + background-color: @background-toolbar-additional-ie; + background-color: @background-toolbar-additional; + .ps-scrollbar-y { &.always-visible-y { background-color: @border-regular-control-ie;