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

Merge pull request #1223 from ONLYOFFICE/fix/logo-dark

Browse source 
Fix/logo dark
This commit is contained in:
Julia Radzhabova 2021-10-05 23:42:03 +03:00 committed by GitHub
parent d1522af5e6 87a608d0af
commit 4538b6dcb1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 56 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/api/documents/api.js
View file

@ -105,6 +105,7 @@
customization: { customization: {
logo: { logo: {
image: url, image: url,
imageDark: url, // logo for dark theme
imageEmbedded: url, // deprecated, use image instead imageEmbedded: url, // deprecated, use image instead
url: http://... url: http://...
}, },
@ -920,8 +921,10 @@
} else if ( (typeof(config.editorConfig.customization) == 'object') && config.editorConfig.customization.logo) { } else if ( (typeof(config.editorConfig.customization) == 'object') && config.editorConfig.customization.logo) {
if (config.type=='embedded' && (config.editorConfig.customization.logo.image || config.editorConfig.customization.logo.imageEmbedded)) if (config.type=='embedded' && (config.editorConfig.customization.logo.image || config.editorConfig.customization.logo.imageEmbedded))
params += "&headerlogo=" + encodeURIComponent(config.editorConfig.customization.logo.image || config.editorConfig.customization.logo.imageEmbedded); params += "&headerlogo=" + encodeURIComponent(config.editorConfig.customization.logo.image || config.editorConfig.customization.logo.imageEmbedded);
else if (config.type!='embedded' && config.editorConfig.customization.logo.image) else if (config.type!='embedded' && (config.editorConfig.customization.logo.image || config.editorConfig.customization.logo.imageDark)) {
params += "&headerlogo=" + encodeURIComponent(config.editorConfig.customization.logo.image); config.editorConfig.customization.logo.image && (params += "&headerlogo=" + encodeURIComponent(config.editorConfig.customization.logo.image));
config.editorConfig.customization.logo.imageDark && (params += "&headerlogodark=" + encodeURIComponent(config.editorConfig.customization.logo.imageDark));
}
} }
} }

19
apps/common/main/lib/view/Header.js
View file

@ -465,6 +465,7 @@ define([
}); });
Common.NotificationCenter.on('collaboration:sharingdeny', onLostEditRights); Common.NotificationCenter.on('collaboration:sharingdeny', onLostEditRights);
Common.NotificationCenter.on('contenttheme:dark', onContentThemeChangedToDark.bind(this)); Common.NotificationCenter.on('contenttheme:dark', onContentThemeChangedToDark.bind(this));
Common.NotificationCenter.on('uitheme:changed', this.changeLogo.bind(this));
}, },
render: function (el, role) { render: function (el, role) {
@ -491,8 +492,9 @@ define([
$html = $(templateLeftBox); $html = $(templateLeftBox);
this.logo = $html.find('#header-logo'); this.logo = $html.find('#header-logo');
if (this.branding && this.branding.logo && this.branding.logo.image && this.logo) { if (this.branding && this.branding.logo && (this.branding.logo.image || this.branding.logo.imageDark) && this.logo) {
this.logo.html('<img src="' + this.branding.logo.image + '" style="max-width:100px; max-height:20px; margin: 0;"/>'); var image = Common.UI.Themes.isDarkTheme() ? (this.branding.logo.imageDark || this.branding.logo.image) : (this.branding.logo.image || this.branding.logo.imageDark);
this.logo.html('<img src="' + image + '" style="max-width:100px; max-height:20px; margin: 0;"/>');
this.logo.css({'background-image': 'none', width: 'auto'}); this.logo.css({'background-image': 'none', width: 'auto'});
(this.branding.logo.url || this.branding.logo.url===undefined) && this.logo.addClass('link'); (this.branding.logo.url || this.branding.logo.url===undefined) && this.logo.addClass('link');
} }
@ -615,10 +617,11 @@ define([
this.branding = value; this.branding = value;
if ( value ) { if ( value ) {
if ( value.logo && value.logo.image ) { if ( value.logo &&(value.logo.image || value.logo.imageDark)) {
var image = Common.UI.Themes.isDarkTheme() ? (value.logo.imageDark || value.logo.image) : (value.logo.image || value.logo.imageDark);
element = $('#header-logo'); element = $('#header-logo');
if (element) { if (element) {
element.html('<img src="' + value.logo.image + '" style="max-width:100px; max-height:20px; margin: 0;"/>'); element.html('<img src="' + image + '" style="max-width:100px; max-height:20px; margin: 0;"/>');
element.css({'background-image': 'none', width: 'auto'}); element.css({'background-image': 'none', width: 'auto'});
(value.logo.url || value.logo.url===undefined) && element.addClass('link'); (value.logo.url || value.logo.url===undefined) && element.addClass('link');
} }
@ -626,6 +629,14 @@ define([
} }
}, },
changeLogo: function () {
var value = this.branding;
if ( value && value.logo && (value.logo.image || value.logo.imageDark) && (value.logo.image !== value.logo.imageDark)) {
var image = Common.UI.Themes.isDarkTheme() ? (value.logo.imageDark || value.logo.image) : (value.logo.image || value.logo.imageDark);
$('#header-logo img').attr('src', image);
}
},
setDocumentCaption: function(value) { setDocumentCaption: function(value) {
!value && (value = ''); !value && (value = '');

12
apps/documenteditor/forms/app/controller/ApplicationController.js
View file

@ -572,8 +572,9 @@ define([
setBranding: function (value) { setBranding: function (value) {
if ( value && value.logo) { if ( value && value.logo) {
var logo = $('#header-logo'); var logo = $('#header-logo');
if (value.logo.image) { if (value.logo.image || value.logo.imageDark) {
logo.html('<img src="'+value.logo.image+'" style="max-width:100px; max-height:20px;"/>'); var image = Common.UI.Themes.isDarkTheme() ? (value.logo.imageDark || value.logo.image) : (value.logo.image || value.logo.imageDark);
logo.html('<img src="' + image + '" style="max-width:100px; max-height:20px;"/>');
logo.css({'background-image': 'none', width: 'auto', height: 'auto'}); logo.css({'background-image': 'none', width: 'auto', height: 'auto'});
} }
@ -1077,6 +1078,13 @@ define([
_.each(this.view.mnuThemes.items, function(item){ _.each(this.view.mnuThemes.items, function(item){
item.setChecked(current===item.value, true); item.setChecked(current===item.value, true);
}); });
if (this.appOptions.canBranding) {
var value = this.appOptions.customization;
if ( value && value.logo && (value.logo.image || value.logo.imageDark) && (value.logo.image !== value.logo.imageDark)) {
var image = Common.UI.Themes.isDarkTheme() ? (value.logo.imageDark || value.logo.image) : (value.logo.image || value.logo.imageDark);
$('#header-logo img').attr('src', image);
}
}
}, },
createDelayedElements: function() { createDelayedElements: function() {

7
apps/documenteditor/forms/index.html
View file

@ -189,7 +189,8 @@
var params = getUrlParams(), var params = getUrlParams(),
lang = (params["lang"] || 'en').split(/[\-\_]/)[0], lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null,
logoDark = params["headerlogodark"] ? encodeUrlParam(params["headerlogodark"]) : null;
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
@ -201,12 +202,12 @@
document.body.removeChild(document.getElementById('loading-mask')); document.body.removeChild(document.getElementById('loading-mask'));
} else { } else {
var elem = document.querySelector('.loading-logo'); var elem = document.querySelector('.loading-logo');
if (elem && logo) { if (elem && (logo || logoDark)) {
elem.style.backgroundImage= 'none'; elem.style.backgroundImage= 'none';
elem.style.width = 'auto'; elem.style.width = 'auto';
elem.style.height = 'auto'; elem.style.height = 'auto';
var img = document.querySelector('.loading-logo img'); var img = document.querySelector('.loading-logo img');
img && img.setAttribute('src', logo); img && img.setAttribute('src', /theme-dark/.test(document.body.className) ? logoDark || logo : logo || logoDark);
img.style.opacity = 1; img.style.opacity = 1;
} }
} }

7
apps/documenteditor/forms/index.html.deploy
View file

@ -170,17 +170,18 @@
var params = getUrlParams(), var params = getUrlParams(),
lang = (params["lang"] || 'en').split(/[\-\_]/)[0], lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null,
logoDark = params["headerlogodark"] ? encodeUrlParam(params["headerlogodark"]) : null;
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
var elem = document.querySelector('.loading-logo'); var elem = document.querySelector('.loading-logo');
if (elem && logo) { if (elem && (logo || logoDark)) {
elem.style.backgroundImage= 'none'; elem.style.backgroundImage= 'none';
elem.style.width = 'auto'; elem.style.width = 'auto';
elem.style.height = 'auto'; elem.style.height = 'auto';
var img = document.querySelector('.loading-logo img'); var img = document.querySelector('.loading-logo img');
img && img.setAttribute('src', logo); img && img.setAttribute('src', /theme-dark/.test(document.body.className) ? logoDark || logo : logo || logoDark);
img.style.opacity = 1; img.style.opacity = 1;
} }
</script> </script>

5
apps/documenteditor/main/index.html
View file

@ -233,7 +233,8 @@
var params = getUrlParams(), var params = getUrlParams(),
lang = (params["lang"] || 'en').split(/[\-\_]/)[0], lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null,
logoDark = params["headerlogodark"] ? encodeUrlParam(params["headerlogodark"]) : null;
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
@ -292,7 +293,7 @@
} else { } else {
var elem = document.querySelector('.loading-logo img'); var elem = document.querySelector('.loading-logo img');
if (elem) { if (elem) {
logo && (elem.setAttribute('src', logo)); (logo || logoDark) && elem.setAttribute('src', /theme-dark/.test(document.body.className) ? logoDark || logo : logo || logoDark);
elem.style.opacity = 1; elem.style.opacity = 1;
} }
} }

5
apps/documenteditor/main/index.html.deploy
View file

@ -205,7 +205,8 @@
var params = getUrlParams(), var params = getUrlParams(),
lang = (params["lang"] || 'en').split(/[\-\_]/)[0], lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null,
logoDark = params["headerlogodark"] ? encodeUrlParam(params["headerlogodark"]) : null;
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
@ -264,7 +265,7 @@
} else { } else {
var elem = document.querySelector('.loading-logo img'); var elem = document.querySelector('.loading-logo img');
if (elem) { if (elem) {
logo && (elem.setAttribute('src', logo)); (logo || logoDark) && elem.setAttribute('src', /theme-dark/.test(document.body.className) ? logoDark || logo : logo || logoDark);
elem.style.opacity = 1; elem.style.opacity = 1;
} }
} }

10
apps/presentationeditor/main/index.html
View file

@ -255,16 +255,12 @@
var params = getUrlParams(), var params = getUrlParams(),
lang = (params["lang"] || 'en').split(/[\-\_]/)[0], lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null,
logoDark = params["headerlogodark"] ? encodeUrlParam(params["headerlogodark"]) : null;
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
var ui_theme_name = params.uitheme || localStorage.getItem("ui-theme");
if ( !!ui_theme_name ) {
document.documentElement.classList.add(ui_theme_name);
}
if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>'); document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>');
</script> </script>
@ -318,7 +314,7 @@
} else { } else {
var elem = document.querySelector('.loading-logo img'); var elem = document.querySelector('.loading-logo img');
if (elem) { if (elem) {
logo && (elem.setAttribute('src', logo)); (logo || logoDark) && elem.setAttribute('src', /theme-dark/.test(document.body.className) ? logoDark || logo : logo || logoDark);
elem.style.opacity = 1; elem.style.opacity = 1;
} }
} }

5
apps/presentationeditor/main/index.html.deploy
View file

@ -247,7 +247,8 @@
var params = getUrlParams(), var params = getUrlParams(),
lang = (params["lang"] || 'en').split(/[\-\_]/)[0], lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null,
logoDark = params["headerlogodark"] ? encodeUrlParam(params["headerlogodark"]) : null;
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
@ -315,7 +316,7 @@
} else { } else {
var elem = document.querySelector('.loading-logo img'); var elem = document.querySelector('.loading-logo img');
if (elem) { if (elem) {
logo && (elem.setAttribute('src', logo)); (logo || logoDark) && elem.setAttribute('src', /theme-dark/.test(document.body.className) ? logoDark || logo : logo || logoDark);
elem.style.opacity = 1; elem.style.opacity = 1;
} }
} }

5
apps/spreadsheeteditor/main/index.html
View file

@ -262,7 +262,8 @@
var params = getUrlParams(), var params = getUrlParams(),
lang = (params["lang"] || 'en').split(/[\-\_]/)[0], lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null,
logoDark = params["headerlogodark"] ? encodeUrlParam(params["headerlogodark"]) : null;
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
@ -334,7 +335,7 @@
} else { } else {
var elem = document.querySelector('.loading-logo img'); var elem = document.querySelector('.loading-logo img');
if (elem) { if (elem) {
logo && (elem.setAttribute('src', logo)); (logo || logoDark) && elem.setAttribute('src', /theme-dark/.test(document.body.className) ? logoDark || logo : logo || logoDark);
elem.style.opacity = 1; elem.style.opacity = 1;
} }
} }

5
apps/spreadsheeteditor/main/index.html.deploy
View file

@ -247,7 +247,8 @@
var params = getUrlParams(), var params = getUrlParams(),
lang = (params["lang"] || 'en').split(/[\-\_]/)[0], lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null,
logoDark = params["headerlogodark"] ? encodeUrlParam(params["headerlogodark"]) : null;
window.frameEditorId = params["frameEditorId"]; window.frameEditorId = params["frameEditorId"];
window.parentOrigin = params["parentOrigin"]; window.parentOrigin = params["parentOrigin"];
@ -328,7 +329,7 @@
} else { } else {
var elem = document.querySelector('.loading-logo img'); var elem = document.querySelector('.loading-logo img');
if (elem) { if (elem) {
logo && (elem.setAttribute('src', logo)); (logo || logoDark) && elem.setAttribute('src', /theme-dark/.test(document.body.className) ? logoDark || logo : logo || logoDark);
elem.style.opacity = 1; elem.style.opacity = 1;
} }
} }