mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-27 18:43:30 +08:00
[DE] handle skin based sprites
This commit is contained in:
@ -82,6 +82,7 @@ define([
|
||||
text: locale.txtThemeWhite || 'White',
|
||||
type: 'light',
|
||||
source: 'static',
|
||||
icons: './resources/img/v2',
|
||||
},
|
||||
}
|
||||
|
||||
@ -293,17 +294,19 @@ define([
|
||||
if ( inobj ) {
|
||||
if ( inobj['sprite-buttons-base-url'] ) {
|
||||
let base_url = inobj['sprite-buttons-base-url'];
|
||||
!base_url.endsWith('/') && (base_url += '/');
|
||||
// outobj = prepare_icons_from_url(base_url);
|
||||
|
||||
const sp_names = ['small', 'big', 'huge'];
|
||||
const sp_scale = {'100':'', '125':'@1.25x','150':'@1.5x','175':'@1.75x','200':'@2x'};
|
||||
sp_names.forEach(n => {
|
||||
for (const [key, value] of Object.entries(sp_scale))
|
||||
outobj[`sprite-button-small-' + key`] = `url(${base_url}icons${n}${value}.png)`;
|
||||
});
|
||||
|
||||
window.Common.Utils.injectSvgIcons([base_url+'iconssmall@2.5x.svg',
|
||||
base_url + 'iconsbig@2.5x.svg', base_url + 'iconshuge@2.5x.svg'], true)
|
||||
// !base_url.endsWith('/') && (base_url += '/');
|
||||
//
|
||||
// const sp_names = ['small', 'big', 'huge'];
|
||||
// const sp_scale = {'100':'', '125':'@1.25x','150':'@1.5x','175':'@1.75x','200':'@2x'};
|
||||
// sp_names.forEach(n => {
|
||||
// for (const [key, value] of Object.entries(sp_scale))
|
||||
// outobj[`sprite-button-small-' + key`] = `url(${base_url}icons${n}${value}.png)`;
|
||||
// });
|
||||
//
|
||||
// window.Common.Utils.injectSvgIcons([base_url+'iconssmall@2.5x.svg',
|
||||
// base_url + 'iconsbig@2.5x.svg', base_url + 'iconshuge@2.5x.svg'], true)
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(inobj))
|
||||
@ -448,6 +451,11 @@ define([
|
||||
document.body.className = document.body.className.replace(/theme-[\w-]+\s?/gi, '').trim();
|
||||
document.body.classList.add(theme_id, 'theme-type-' + themes_map[theme_id].type);
|
||||
|
||||
if ( !!themes_map[theme_id].icons ) {
|
||||
const base_url = themes_map[theme_id].icons;
|
||||
window.uitheme.apply_icons_from_url(theme_id, base_url);
|
||||
}
|
||||
|
||||
if ( this.api.asc_setContentDarkMode )
|
||||
if ( themes_map[theme_id].type == 'dark' ) {
|
||||
this.api.asc_setContentDarkMode(this.isContentThemeDark());
|
||||
@ -470,6 +478,9 @@ define([
|
||||
colors: colors_obj,
|
||||
};
|
||||
|
||||
if ( themes_map[id].icons )
|
||||
theme_obj.icons = themes_map[id].icons;
|
||||
|
||||
Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
|
||||
// }
|
||||
}
|
||||
|
||||
@ -100,8 +100,8 @@ function checkScaling() {
|
||||
}
|
||||
}
|
||||
|
||||
let svg_icons = ['./resources/img/iconssmall@2.5x.svg',
|
||||
'./resources/img/iconsbig@2.5x.svg', './resources/img/iconshuge@2.5x.svg'];
|
||||
let svg_icons = window.uitheme.svg_icons || ['./resources/img/iconssmall@2.5x.svg',
|
||||
'./resources/img/iconsbig@2.5x.svg', './resources/img/iconshuge@2.5x.svg'];
|
||||
|
||||
window.Common = {
|
||||
Utils: {
|
||||
|
||||
@ -76,13 +76,38 @@
|
||||
!window.uitheme.id && window.uitheme.set_id(localstorage.getItem("ui-theme-id"));
|
||||
window.uitheme.iscontentdark = localstorage.getItem("content-theme") == 'dark';
|
||||
|
||||
function inject_style_tag(content) {
|
||||
function inject_style_tag(content, id) {
|
||||
if ( id && !!document.getElementById(id) )
|
||||
return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.innerHTML = content;
|
||||
if (id) style.id = id;
|
||||
document.getElementsByTagName('head')[0].appendChild(style);
|
||||
}
|
||||
|
||||
window.uitheme.apply_icons_from_url = function (themeid, url) {
|
||||
const base_url = !url.endsWith('/') ? url + '/' : url;
|
||||
const sp_names = ['small', 'big', 'huge'];
|
||||
const sp_scale = {'100':'', '125':'@1.25x','150':'@1.5x','175':'@1.75x','200':'@2x'};
|
||||
let icons = [];
|
||||
sp_names.forEach(function (n) {
|
||||
for (const [key, value] of Object.entries(sp_scale)) {
|
||||
icons.push('--sprite-button-'+n+'-'+key+':url('+ base_url +'icons' + n + value + '.png)');
|
||||
}
|
||||
});
|
||||
|
||||
inject_style_tag('.' + objtheme.id + '{' + icons.join(';') + ';}', objtheme.id);
|
||||
|
||||
const svg_icons_array = [base_url+'iconssmall@2.5x.svg', base_url + 'iconsbig@2.5x.svg', base_url + 'iconshuge@2.5x.svg'];
|
||||
if ( window.Common && window.Common.Utils )
|
||||
window.Common.Utils.injectSvgIcons(svg_icons_array, true);
|
||||
else {
|
||||
window.uitheme.svg_icons = [base_url+'iconssmall@2.5x.svg', base_url + 'iconsbig@2.5x.svg', base_url + 'iconshuge@2.5x.svg'];
|
||||
}
|
||||
}
|
||||
|
||||
inject_style_tag(':root .theme-dark {' +
|
||||
'--toolbar-header-document: #2a2a2a; --toolbar-header-spreadsheet: #2a2a2a;' +
|
||||
'--toolbar-header-presentation: #2a2a2a; --toolbar-header-pdf: #2a2a2a; --toolbar-header-visio: #2a2a2a;}' +
|
||||
@ -121,6 +146,10 @@
|
||||
|
||||
inject_style_tag('.' + objtheme.id + '{' + colors.join(';') + ';}');
|
||||
}
|
||||
|
||||
if ( objtheme.icons ) {
|
||||
window.uitheme.apply_icons_from_url(objtheme.id, objtheme.icons);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user