From 90243eb7182d4622a1f20d482871bbfa50ff6028 Mon Sep 17 00:00:00 2001 From: maxkadushkin Date: Wed, 12 Mar 2025 14:56:33 +0300 Subject: [PATCH] [DE] handle skin based sprites --- apps/common/main/lib/controller/Themes.js | 31 +++++++++++++++-------- apps/common/main/lib/util/htmlutils.js | 4 +-- apps/common/main/lib/util/themeinit.js | 31 ++++++++++++++++++++++- 3 files changed, 53 insertions(+), 13 deletions(-) diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index 4f1f582f15..c3abdbe2e7 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -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)); // } } diff --git a/apps/common/main/lib/util/htmlutils.js b/apps/common/main/lib/util/htmlutils.js index 6a76cd112c..3d506c8a5f 100644 --- a/apps/common/main/lib/util/htmlutils.js +++ b/apps/common/main/lib/util/htmlutils.js @@ -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: { diff --git a/apps/common/main/lib/util/themeinit.js b/apps/common/main/lib/util/themeinit.js index 1bb852167b..a602fd59e5 100644 --- a/apps/common/main/lib/util/themeinit.js +++ b/apps/common/main/lib/util/themeinit.js @@ -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 {