Skip to content

Commit

Permalink
Merge pull request #2867 from ONLYOFFICE/feature/custom-image-logo
Browse files Browse the repository at this point in the history 
Feature/custom image logo
  • Loading branch information
@maxkadushkin
maxkadushkin authored Mar 6, 2024
2 parents 8315a67 + 6e488f4 commit 9e3b3ad
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 38 deletions.
16 changes: 15 additions & 1 deletion apps/common/mobile/resources/less/common.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
.navbar-inner {
display: flex;
justify-content: center;
padding-top: 8px;
padding-top: 7px;
}
.navbar-bg {
&:before, &:after {
Expand All @@ -49,6 +49,20 @@
transition: padding-top .3s ease-in;
}

.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 {
.subnavbar-inner {
padding: 0;
Expand Down
38 changes: 28 additions & 10 deletions apps/documenteditor/mobile/src/page/main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import VersionHistoryController from '../../../../common/mobile/lib/controller/V

export const MainContext = createContext();

const MainPage = inject('storeDocumentInfo', 'users', 'storeAppOptions', 'storeVersionHistory', 'storeToolbarSettings')(observer(props => {
const MainPage = inject('storeDocumentInfo', 'users', 'storeAppOptions', 'storeVersionHistory', 'storeToolbarSettings', 'storeThemes')(observer(props => {
const { t } = useTranslation();
const [state, setState] = useState({
editOptionsVisible: false,
Expand All @@ -36,6 +36,8 @@ const MainPage = inject('storeDocumentInfo', 'users', 'storeAppOptions', 'storeV
isOpenModal: false
});
const appOptions = props.storeAppOptions;
const storeThemes = props.storeThemes;
const colorTheme = storeThemes.colorTheme;
const storeVersionHistory = props.storeVersionHistory;
const isVersionHistoryMode = storeVersionHistory.isVersionHistoryMode;
const storeDocumentInfo = props.storeDocumentInfo;
Expand All @@ -52,16 +54,28 @@ const MainPage = inject('storeDocumentInfo', 'users', 'storeAppOptions', 'storeV
const typeProtection = appOptions.typeProtection;
const isFabShow = isViewer && !disabledSettings && !disabledControls && !isDisconnected && isAvailableExt && isEdit && (!isProtected || typeProtection === Asc.c_oAscEDocProtect.TrackedChanges);
const config = appOptions.config;
const isShowPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
const { customization = {} } = config;
const isShowPlaceholder = !appOptions.isDocReady && (!customization || !(customization.loaderName || customization.loaderLogo));

let isHideLogo = true,
isCustomization = true,
isBranding = true;
let isBranding = true,
isHideLogo = true,
customLogoImage = '',
customLogoUrl = '';

if(!appOptions.isDisconnected && config?.customization) {
isCustomization = !!(config.customization.loaderName || config.customization.loaderLogo);
if(!appOptions.isDisconnected && appOptions.isDocReady) {
const { logo } = customization;
isBranding = appOptions.canBranding || appOptions.canBrandingExt;
isHideLogo = isCustomization && isBranding;

if(logo && isBranding) {
isHideLogo = logo.visible === false;

if(logo.image || logo.imageDark) {
customLogoImage = colorTheme.type === 'dark' ? logo.imageDark ?? logo.image : logo.image ?? logo.imageDark;
customLogoUrl = logo.url;
}
} else {
isHideLogo = false;
}
}

useEffect(() => {
Expand Down Expand Up @@ -225,9 +239,13 @@ const MainPage = inject('storeDocumentInfo', 'users', 'storeAppOptions', 'storeV
<Navbar id='editor-navbar' className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
{!isHideLogo &&
<div className="main-logo" onClick={() => {
window.open(`${__PUBLISHER_URL__}`, "_blank");
window.open(`${customLogoImage && customLogoUrl ? customLogoUrl : __PUBLISHER_URL__}`, "_blank");
}}>
<Icon icon="icon-logo"></Icon>
{customLogoImage ?
<img className='custom-logo-image' src={customLogoImage} />
:
<Icon icon="icon-logo"></Icon>
}
</div>
}
<Subnavbar>
Expand Down
44 changes: 31 additions & 13 deletions apps/presentationeditor/mobile/src/page/main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,17 +122,31 @@ class MainPage extends Component {

render() {
const appOptions = this.props.storeAppOptions;
const storeThemes = this.props.storeThemes;
const colorTheme = storeThemes.colorTheme;
const config = appOptions.config;
const isShowPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));

let isHideLogo = true,
isCustomization = true,
isBranding = true;

if (!appOptions.isDisconnected && config?.customization) {
isCustomization = !!(config.customization.loaderName || config.customization.loaderLogo);
const { customization = {} } = config;
const isShowPlaceholder = !appOptions.isDocReady && (!customization || !(customization.loaderName || customization.loaderLogo));

let isBranding = true,
isHideLogo = true,
customLogoImage = '',
customLogoUrl = '';

if(!appOptions.isDisconnected && appOptions.isDocReady) {
const { logo } = customization;
isBranding = appOptions.canBranding || appOptions.canBrandingExt;
isHideLogo = isCustomization && isBranding;

if(logo && isBranding) {
isHideLogo = logo.visible === false;

if(logo.image || logo.imageDark) {
customLogoImage = colorTheme.type === 'dark' ? logo.imageDark ?? logo.image : logo.image ?? logo.imageDark;
customLogoUrl = logo.url;
}
} else {
isHideLogo = false;
}
}

return (
Expand All @@ -149,11 +163,15 @@ class MainPage extends Component {
<Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar' className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
{!isHideLogo &&
{!isHideLogo &&
<div className="main-logo" onClick={() => {
window.open(`${__PUBLISHER_URL__}`, "_blank");
window.open(`${customLogoImage && customLogoUrl ? customLogoUrl : __PUBLISHER_URL__}`, "_blank");
}}>
<Icon icon="icon-logo"></Icon>
{customLogoImage ?
<img className='custom-logo-image' src={customLogoImage} />
:
<Icon icon="icon-logo"></Icon>
}
</div>
}
<Subnavbar>
Expand Down Expand Up @@ -218,4 +236,4 @@ class MainPage extends Component {
}
}

export default inject("storeAppOptions")(observer(MainPage));
export default inject('storeAppOptions', 'storeThemes')(observer(MainPage));
47 changes: 33 additions & 14 deletions apps/spreadsheeteditor/mobile/src/page/main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,26 +108,41 @@ class MainPage extends Component {
}
};

componentDidMount () {
if($$('.skl-container').length)
$$('.skl-container').remove();
}

render() {
const appOptions = this.props.storeAppOptions;
const storeWorksheets = this.props.storeWorksheets;
const storeThemes = this.props.storeThemes;
const colorTheme = storeThemes.colorTheme;
const wsProps = storeWorksheets.wsProps;
const wsLock = storeWorksheets.wsLock;
const config = appOptions.config;
const isShowPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
const { customization = {} } = config;
const isShowPlaceholder = !appOptions.isDocReady && (!customization || !(customization.loaderName || customization.loaderLogo));

let isHideLogo = true,
isCustomization = true,
isBranding = true;
let isBranding = true,
isHideLogo = true,
customLogoImage = '',
customLogoUrl = '';

if (!appOptions.isDisconnected && config?.customization) {
isCustomization = !!(config.customization.loaderName || config.customization.loaderLogo);
if(!appOptions.isDisconnected && appOptions.isDocReady) {
const { logo } = customization;
isBranding = appOptions.canBranding || appOptions.canBrandingExt;
isHideLogo = isCustomization && isBranding;
}

if(logo && isBranding) {
isHideLogo = logo.visible === false;

if ($$('.skl-container').length) {
$$('.skl-container').remove();
if(logo.image || logo.imageDark) {
customLogoImage = colorTheme.type === 'dark' ? logo.imageDark ?? logo.image : logo.image ?? logo.imageDark;
customLogoUrl = logo.url;
}
} else {
isHideLogo = false;
}
}

return (
Expand All @@ -143,11 +158,15 @@ class MainPage extends Component {
<Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar' className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
{!isHideLogo &&
{!isHideLogo &&
<div className="main-logo" onClick={() => {
window.open(`${__PUBLISHER_URL__}`, "_blank");
window.open(`${customLogoImage && customLogoUrl ? customLogoUrl : __PUBLISHER_URL__}`, "_blank");
}}>
<Icon icon="icon-logo"></Icon>
{customLogoImage ?
<img className='custom-logo-image' src={customLogoImage} />
:
<Icon icon="icon-logo"></Icon>
}
</div>
}
<Subnavbar>
Expand Down Expand Up @@ -213,4 +232,4 @@ class MainPage extends Component {
}
}

export default inject("storeAppOptions", "storeWorksheets")(observer(MainPage));
export default inject('storeAppOptions', 'storeWorksheets', 'storeThemes')(observer(MainPage));

0 comments on commit 9e3b3ad

Please sign in to comment.