Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source 
Feature/pr3 dark theme fixed elements
This commit is contained in:
maxkadushkin 2021-03-14 00:25:05 +03:00 committed by GitHub
parent 04119e7fb8 54f496f250
commit dd5d18c59a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 36 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
apps/common/main/lib/controller/Themes.js
View file

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

1
apps/common/main/resources/less/colors-table-dark.less
View file

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

1
apps/common/main/resources/less/colors-table-ie-fix.less
View file

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

2
apps/common/main/resources/less/colors-table.less
View file

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

8
apps/common/main/resources/less/combo-dataview.less
View file

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

6
apps/common/main/resources/less/scroller.less
View file

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