[common] send theme's colors array to sdk

This commit is contained in:
Maxim Kadushkin 2021-04-06 10:30:57 +03:00
parent a1100cfa8d
commit ae201c5b0b

View file

@ -13,10 +13,119 @@ define([
'theme-dark': 'flatDark'
};
var themes_map = {
'theme-light': 'light',
'theme-dark': 'dark'
}
sdk_themes_alias.contains = function (name) {
return !!this[name];
}
themes_map.contains = function (name) {
return !!this[name];
}
var name_colors = [
"background-normal",
"background-toolbar",
"background-toolbar-additional",
"background-primary-dialog-button",
"background-tab-underline",
"background-notification-popover",
"background-notification-badge",
"background-scrim",
"background-loader",
"highlight-button-hover",
"highlight-button-pressed",
"highlight-button-pressed-hover",
"highlight-primary-dialog-button-hover",
"highlight-header-button-hover",
"highlight-header-button-pressed",
"highlight-toolbar-tab-underline",
"highlight-text-select",
"border-toolbar",
"border-divider",
"border-regular-control",
"border-toolbar-button-hover",
"border-preview-hover",
"border-preview-select",
"border-control-focus",
"border-color-shading",
"border-error",
"text-normal",
"text-normal-pressed",
"text-secondary",
"text-tertiary",
"text-link",
"text-inverse",
"text-toolbar-header",
"text-contrast-background",
"icon-normal",
"icon-normal-pressed",
"icon-inverse",
"icon-toolbar-header",
"icon-notification-badge",
"icon-contrast-popover",
"icon-success",
"canvas-background",
"canvas-content-background",
"canvas-page-border",
"canvas-ruler-background",
"canvas-ruler-margins-background",
"canvas-ruler-mark",
"canvas-ruler-handle-border",
"canvas-ruler-handle-border-disabled",
"canvas-high-contrast",
"canvas-high-contrast-disabled",
"canvas-cell-border",
"canvas-cell-title-border",
"canvas-cell-title-border-hover",
"canvas-cell-title-border-selected",
"canvas-cell-title-hover",
"canvas-cell-title-selected",
"canvas-dark-cell-title",
"canvas-dark-cell-title-hover",
"canvas-dark-cell-title-selected",
"canvas-dark-cell-title-border",
"canvas-dark-cell-title-border-hover",
"canvas-dark-cell-title-border-selected",
"canvas-scroll-thumb",
"canvas-scroll-thumb-hover",
"canvas-scroll-thumb-pressed",
"canvas-scroll-thumb-border",
"canvas-scroll-thumb-border-hover",
"canvas-scroll-thumb-border-pressed",
"canvas-scroll-arrow",
"canvas-scroll-arrow-hover",
"canvas-scroll-arrow-pressed",
"canvas-scroll-thumb-target",
"canvas-scroll-thumb-target-hover",
"canvas-scroll-thumb-target-pressed"
];
var get_current_theme_colors = function (colors) {
var out_object = {};
if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
var style = getComputedStyle(document.body);
colors.forEach(function (item, index) {
out_object[item] = style.getPropertyValue('--' + item).trim()
})
}
return out_object;
}
var refresh_sdk_colors = function () {
if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
var style = getComputedStyle(document.body);
@ -54,13 +163,15 @@ define([
this.api = api;
var theme_name = Common.localStorage.getItem('ui-theme', 'theme-light');
api.asc_setSkin(sdk_themes_alias[theme_name]);
if ( !$('body').hasClass(theme_name) ) {
$('body').addClass(theme_name);
}
refresh_sdk_colors();
var obj = get_current_theme_colors(name_colors);
obj.type = themes_map[theme_name];
obj.name = name;
api.asc_setSkin(obj);
// app.eventbus.addListeners({
// 'FileMenu': {
@ -81,17 +192,21 @@ define([
},
isDarkTheme: function () {
return this.current() == 'theme-dark';
return themes_map[this.current()] == 'dark';
},
setTheme: function (name) {
if ( sdk_themes_alias.contains(name) ) {
if ( themes_map.contains(name) ) {
var classname = document.documentElement.className.replace(/theme-\w+\s?/, '');
document.body.className = classname;
$('body').addClass(name);
this.api.asc_setSkin(sdk_themes_alias[name]);
refresh_sdk_colors();
var obj = get_current_theme_colors(name_colors);
obj.type = themes_map[name];
obj.name = name;
this.api.asc_setSkin(obj);
Common.localStorage.setItem('ui-theme', name);
Common.NotificationCenter.trigger('uitheme:changed', name);