[common] send theme's colors array to sdk
This commit is contained in:
parent
a1100cfa8d
commit
ae201c5b0b
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue