Add config parameter customization->logo>imageDark for dark interface theme

This commit is contained in:
Julia Radzhabova 2021-10-04 18:42:14 +03:00
parent 9a5632668f
commit fed051e31a
3 changed files with 28 additions and 8 deletions

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));
}
} }
} }

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 = '');

View file

@ -437,8 +437,9 @@ define([
this.appOptions.customization && this.appOptions.customization.logo ) { this.appOptions.customization && this.appOptions.customization.logo ) {
var logo = $('#header-logo'); var logo = $('#header-logo');
if (this.appOptions.customization.logo.image) { if (this.appOptions.customization.logo.image || this.appOptions.customization.logo.imageDark) {
logo.html('<img src="'+this.appOptions.customization.logo.image+'" style="max-width:100px; max-height:20px;"/>'); var image = Common.UI.Themes.isDarkTheme() ? (this.appOptions.customization.logo.imageDark || this.appOptions.customization.logo.image) : (this.appOptions.customization.logo.image || this.appOptions.customization.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'});
} }
@ -1074,6 +1075,11 @@ 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);
}); });
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() {