Merge pull request #743 from ONLYOFFICE/feature/pr3-dark-theme-fixed-elements

Feature/pr3 dark theme fixed elements

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]);
+                    this.api.asc_setSkin(sdk_themes_alias[name]);
-
+                    refresh_sdk_colors();
-                    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
-                        });
-                    }
 
                     Common.localStorage.setItem('ui-theme', name);
                     Common.NotificationCenter.trigger('uitheme:changed', name);

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%);

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%);

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);

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 2px @border-preview-hover-ie);
-            .box-inner-shadow(0 0 0 @scaled-two-px-value @border-regular-control);
+            .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-ie @border-preview-hover-ie);
-            .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
+            .box-shadow(0 0 0 @scaled-one-px-value @border-preview-hover);
         }
     }
 

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;