Logo display edits

This commit is contained in:
SergeyEzhin
2024-02-29 11:44:09 +01:00
parent c78c7be801
commit 1f09a9a04f
4 changed files with 36 additions and 37 deletions

View File

@ -49,10 +49,18 @@
transition: padding-top .3s ease-in;
}
.custom-logo-image {
width: 100px;
height: 14px;
overflow: hidden;
.main-logo {
max-width: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.custom-logo-image {
max-width: 100%;
height: 14px;
overflow: hidden;
}
}
.subnavbar {

View File

@ -58,25 +58,22 @@ const MainPage = inject('storeDocumentInfo', 'users', 'storeAppOptions', 'storeV
const isShowPlaceholder = !appOptions.isDocReady && (!customization || !(customization.loaderName || customization.loaderLogo));
let isBranding = true,
isHideCustomLogo = false,
isHideLogo = true,
customLogoImage = '',
customLogoUrl = '',
isWithLogo = true;
customLogoUrl = '';
if(!appOptions.isDisconnected) {
const { logo } = customization;
isBranding = appOptions.canBranding || appOptions.canBrandingExt;
if(logo && isBranding) {
isHideCustomLogo = logo.visible === false;
isHideLogo = logo.visible === false;
if(logo.image || logo.imageDark) {
customLogoImage = colorTheme.type === 'dark' ? logo.imageDark ?? logo.image : logo.image ?? logo.imageDark;
customLogoUrl = logo.url;
}
}
isWithLogo = customLogoImage && !isHideCustomLogo || !customLogoImage
}
useEffect(() => {
@ -236,14 +233,14 @@ const MainPage = inject('storeDocumentInfo', 'users', 'storeAppOptions', 'storeV
showPanels: state.addShowOptions,
isBranding
}}>
<Page name="home" className={`editor${isWithLogo ? ' page-with-logo' : ''}`}>
<Navbar id='editor-navbar' className={`main-navbar${isWithLogo ? ' navbar-with-logo' : ''}`}>
<Page name="home" className={`editor${!isHideLogo || !isBranding ? ' page-with-logo' : ''}`}>
<Navbar id='editor-navbar' className={`main-navbar${!isHideLogo || !isBranding ? ' navbar-with-logo' : ''}`}>
<div className="main-logo" onClick={() => {
window.open(`${customLogoImage && customLogoUrl && !isHideCustomLogo ? customLogoUrl : __PUBLISHER_URL__}`, "_blank");
window.open(`${customLogoImage && customLogoUrl && !isHideLogo ? customLogoUrl : __PUBLISHER_URL__}`, "_blank");
}}>
{customLogoImage && !isHideCustomLogo ?
{customLogoImage && !isHideLogo ?
<img className='custom-logo-image' src={customLogoImage} />
: isWithLogo ?
: !customLogoImage ?
<Icon icon="icon-logo"></Icon>
: null}
</div>

View File

@ -129,25 +129,22 @@ class MainPage extends Component {
const isShowPlaceholder = !appOptions.isDocReady && (!customization || !(customization.loaderName || customization.loaderLogo));
let isBranding = true,
isHideCustomLogo = false,
isHideLogo = true,
customLogoImage = '',
customLogoUrl = '',
isWithLogo = true;
customLogoUrl = '';
if(!appOptions.isDisconnected) {
const { logo } = customization;
isBranding = appOptions.canBranding || appOptions.canBrandingExt;
if(logo && isBranding) {
isHideCustomLogo = logo.visible === false;
isHideLogo = logo.visible === false;
if(logo.image || logo.imageDark) {
customLogoImage = colorTheme.type === 'dark' ? logo.imageDark ?? logo.image : logo.image ?? logo.imageDark;
customLogoUrl = logo.url;
}
}
isWithLogo = customLogoImage && !isHideCustomLogo || !customLogoImage
}
return (
@ -161,15 +158,15 @@ class MainPage extends Component {
{!this.state.previewVisible ? null :
<Preview closeOptions={this.handleOptionsViewClosed.bind(this)} />
}
<Page name="home" className={`editor${isWithLogo ? ' page-with-logo' : ''}`}>
<Page name="home" className={`editor${!isHideLogo || !isBranding ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar' className={`main-navbar${isWithLogo ? ' navbar-with-logo' : ''}`}>
<Navbar id='editor-navbar' className={`main-navbar${!isHideLogo || !isBranding ? ' navbar-with-logo' : ''}`}>
<div className="main-logo" onClick={() => {
window.open(`${customLogoImage && customLogoUrl && !isHideCustomLogo ? customLogoUrl : __PUBLISHER_URL__}`, "_blank");
window.open(`${customLogoImage && customLogoUrl && !isHideLogo ? customLogoUrl : __PUBLISHER_URL__}`, "_blank");
}}>
{customLogoImage && !isHideCustomLogo ?
{customLogoImage && !isHideLogo ?
<img className='custom-logo-image' src={customLogoImage} />
: isWithLogo ?
: !customLogoImage ?
<Icon icon="icon-logo"></Icon>
: null}
</div>

View File

@ -125,25 +125,22 @@ class MainPage extends Component {
const isShowPlaceholder = !appOptions.isDocReady && (!customization || !(customization.loaderName || customization.loaderLogo));
let isBranding = true,
isHideCustomLogo = false,
isHideLogo = true,
customLogoImage = '',
customLogoUrl = '',
isWithLogo = true;
customLogoUrl = '';
if(!appOptions.isDisconnected) {
const { logo } = customization;
isBranding = appOptions.canBranding || appOptions.canBrandingExt;
if(logo && isBranding) {
isHideCustomLogo = logo.visible === false;
isHideLogo = logo.visible === false;
if(logo.image || logo.imageDark) {
customLogoImage = colorTheme.type === 'dark' ? logo.imageDark ?? logo.image : logo.image ?? logo.imageDark;
customLogoUrl = logo.url;
}
}
isWithLogo = customLogoImage && !isHideCustomLogo || !customLogoImage
}
return (
@ -156,15 +153,15 @@ class MainPage extends Component {
wsProps,
isBranding
}}>
<Page name="home" className={`editor${isWithLogo ? ' page-with-logo' : ''}`}>
<Page name="home" className={`editor${!isHideLogo || !isBranding ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar' className={`main-navbar${isWithLogo ? ' navbar-with-logo' : ''}`}>
<Navbar id='editor-navbar' className={`main-navbar${!isHideLogo || !isBranding ? ' navbar-with-logo' : ''}`}>
<div className="main-logo" onClick={() => {
window.open(`${customLogoImage && customLogoUrl && !isHideCustomLogo ? customLogoUrl : __PUBLISHER_URL__}`, "_blank");
window.open(`${customLogoImage && customLogoUrl && !isHideLogo ? customLogoUrl : __PUBLISHER_URL__}`, "_blank");
}}>
{customLogoImage && !isHideCustomLogo ?
{customLogoImage && !isHideLogo ?
<img className='custom-logo-image' src={customLogoImage} />
: isWithLogo ?
: !customLogoImage ?
<Icon icon="icon-logo"></Icon>
: null}
</div>