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

[mobile] fix bug 58272

Browse source
This commit is contained in:
Maxim Kadushkin 2022-09-16 21:38:38 +03:00
parent eacf21a118
commit 26efff7397
3 changed files with 148 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
apps/common/mobile/lib/controller/Themes.js
View file

@ -12,6 +12,51 @@ class ThemesController {
id: 'theme-light',
type: 'light'
}};
this.name_colors = [
"canvas-background",
"canvas-content-background",
"canvas-page-border",
"canvas-ruler-background",
"canvas-ruler-border",
"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-dark-content-background",
"canvas-dark-page-border",
"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",
];
}
init() {
@ -41,6 +86,16 @@ class ThemesController {
return !!obj ? JSON.parse(obj).type === 'dark' : false;
}
get_current_theme_colors(colors) {
let out_object = {};
const style = getComputedStyle(document.body);
colors.forEach((item, index) => {
out_object[item] = style.getPropertyValue('--' + item).trim()
})
return out_object;
}
switchDarkTheme(dark) {
const theme = typeof dark == 'object' ? dark : this.themes_map[dark ? 'dark' : 'light'];
const refresh_only = !!arguments[1];
@ -53,7 +108,11 @@ class ThemesController {
$body.addClass(`theme-type-${theme.type}`);
const on_engine_created = api => {
api.asc_setSkin(theme.id);
let obj = this.get_current_theme_colors(this.name_colors);
obj.type = theme.type;
obj.name = theme.id;
api.asc_setSkin(obj);
};
const api = Common.EditorApi ? Common.EditorApi.get() : undefined;

45
apps/common/mobile/resources/less/colors-table-dark.less
View file

@ -33,12 +33,53 @@
--image-border-types-filter: invert(100%) brightness(4);
--canvas-content-background: #fff;
--active-opacity-word: fade(#446995, 20%);
--active-opacity-slide: fade(#AA5252, 20%);
--active-opacity-cell: fade(#40865C, 20%);
--image-border-types-filter: invert(100%) brightness(4);
// Canvas
--canvas-background: #555;
--canvas-content-background: #fff;
--canvas-page-border: #555;
--canvas-ruler-background: #555;
--canvas-ruler-border: #2A2A2A;
--canvas-ruler-margins-background: #444;
--canvas-ruler-mark: #b6b6b6;
--canvas-ruler-handle-border: #b6b6b6;
--canvas-ruler-handle-border-disabled: #808080;
--canvas-high-contrast: #fff;
--canvas-high-contrast-disabled: #ccc;
--canvas-cell-border: fade(#000, 10%);
--canvas-cell-title-border: #757575;
--canvas-cell-title-border-hover: #858585;
--canvas-cell-title-border-selected: #9e9e9e;
--canvas-cell-title-hover: #787878;
--canvas-cell-title-selected: #939393;
--canvas-dark-cell-title: #111;
--canvas-dark-cell-title-hover: #000;
--canvas-dark-cell-title-selected: #333;
--canvas-dark-cell-title-border: #282828;
--canvas-dark-cell-title-border-hover: #191919;
--canvas-dark-cell-title-border-selected: #474747;
--canvas-scroll-thumb: #404040;
--canvas-scroll-thumb-hover: #999;
--canvas-scroll-thumb-pressed: #adadad;
--canvas-scroll-thumb-border: #2a2a2a;
--canvas-scroll-thumb-border-hover: #999;
--canvas-scroll-thumb-border-pressed: #adadad;
--canvas-scroll-arrow: #999;
--canvas-scroll-arrow-hover: #404040;
--canvas-scroll-arrow-pressed: #404040;
--canvas-scroll-thumb-target: #999;
--canvas-scroll-thumb-target-hover: #404040;
--canvas-scroll-thumb-target-pressed: #404040;
}
}

47
apps/common/mobile/resources/less/colors-table.less
View file

@ -29,13 +29,56 @@
--component-disabled-opacity: .4;
--canvas-content-background: #fff;
--active-opacity-word: fade(#446995, 30%);
--active-opacity-slide: fade(#AA5252, 30%);
--active-opacity-cell: fade(#40865C, 30%);
--image-border-types-filter: none;
// Canvas
--canvas-background: #eee;
--canvas-content-background: #fff;
--canvas-page-border: #ccc;
--canvas-ruler-background: #fff;
--canvas-ruler-border: #cbcbcb;
--canvas-ruler-margins-background: #d9d9d9;
--canvas-ruler-mark: #555;
--canvas-ruler-handle-border: #555;
--canvas-ruler-handle-border-disabled: #aaa;
--canvas-high-contrast: #000;
--canvas-high-contrast-disabled: #666;
--canvas-cell-border: fade(#000, 10%);
--canvas-cell-title-hover: #dfdfdf;
--canvas-cell-title-selected: #cfcfcf;
--canvas-cell-title-border: #d8d8d8;
--canvas-cell-title-border-hover: #c9c9c9;
--canvas-cell-title-border-selected: #bbb;
--canvas-dark-cell-title: #444;
--canvas-dark-cell-title-hover: #666 ;
--canvas-dark-cell-title-selected: #111;
--canvas-dark-cell-title-border: #3d3d3d;
--canvas-dark-cell-title-border-hover: #5c5c5c;
--canvas-dark-cell-title-border-selected: #0f0f0f;
--canvas-dark-content-background: #3a3a3a;
--canvas-dark-page-border: #2a2a2a;
--canvas-scroll-thumb: #f7f7f7;
--canvas-scroll-thumb-hover: #c0c0c0;
--canvas-scroll-thumb-pressed: #adadad;
--canvas-scroll-thumb-border: #cbcbcb;
--canvas-scroll-thumb-border-hover: #cbcbcb;
--canvas-scroll-thumb-border-pressed: #adadad;
--canvas-scroll-arrow: #adadad;
--canvas-scroll-arrow-hover: #f7f7f7;
--canvas-scroll-arrow-pressed: #f7f7f7;
--canvas-scroll-thumb-target: #c0c0c0;
--canvas-scroll-thumb-target-hover: #f7f7f7;
--canvas-scroll-thumb-target-pressed: #f7f7f7;
}
@brand-word: var(--brand-word);