Web: Added dynamic logo images
This commit is contained in:
parent
b4963cecb9
commit
8037e2bf65
@ -1,9 +1,9 @@
|
|||||||
import DocspaceBigReactSvgUrl from "PUBLIC_DIR/images/docspace.big.react.svg?url";
|
import React from "react";
|
||||||
import React from "react";
|
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import { ReactSVG } from "react-svg";
|
import { ReactSVG } from "react-svg";
|
||||||
import { hugeMobile } from "@docspace/components/utils/device";
|
import { hugeMobile } from "@docspace/components/utils/device";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
|
import { getLogoFromPath } from "SRC_DIR/helpers/utils";
|
||||||
|
|
||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
.logo-wrapper {
|
.logo-wrapper {
|
||||||
@ -19,10 +19,11 @@ const StyledWrapper = styled.div`
|
|||||||
const DocspaceLogo = (props) => {
|
const DocspaceLogo = (props) => {
|
||||||
const { className, whiteLabelLogoUrls, userTheme } = props;
|
const { className, whiteLabelLogoUrls, userTheme } = props;
|
||||||
|
|
||||||
const logo =
|
const logo = getLogoFromPath(
|
||||||
userTheme === "Dark"
|
userTheme === "Dark"
|
||||||
? whiteLabelLogoUrls[1]?.path?.dark
|
? whiteLabelLogoUrls[1]?.path?.dark
|
||||||
: whiteLabelLogoUrls[1]?.path?.light;
|
: whiteLabelLogoUrls[1]?.path?.light
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledWrapper>
|
<StyledWrapper>
|
||||||
|
@ -30,6 +30,7 @@ import StyledExternalLinkIcon from "@docspace/client/src/components/StyledExtern
|
|||||||
import HeaderCatalogBurger from "./header-catalog-burger";
|
import HeaderCatalogBurger from "./header-catalog-burger";
|
||||||
import { Base, Dark } from "@docspace/components/themes";
|
import { Base, Dark } from "@docspace/components/themes";
|
||||||
import { ReactSVG } from "react-svg";
|
import { ReactSVG } from "react-svg";
|
||||||
|
import { getLogoFromPath } from "SRC_DIR/helpers/utils";
|
||||||
|
|
||||||
const { proxyURL } = AppServerConfig;
|
const { proxyURL } = AppServerConfig;
|
||||||
|
|
||||||
@ -218,8 +219,9 @@ const HeaderComponent = ({
|
|||||||
});
|
});
|
||||||
}, [history]);
|
}, [history]);
|
||||||
|
|
||||||
const logo =
|
const logo = getLogoFromPath(
|
||||||
userTheme === "Dark" ? logoUrl?.path?.dark : logoUrl?.path?.light;
|
userTheme === "Dark" ? logoUrl?.path?.dark : logoUrl?.path?.light
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -4,6 +4,7 @@ import PropTypes from "prop-types";
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import NoUserSelect from "@docspace/components/utils/commonStyles";
|
import NoUserSelect from "@docspace/components/utils/commonStyles";
|
||||||
|
import { getLogoFromPath } from "SRC_DIR/helpers/utils";
|
||||||
const LogoItem = styled.div`
|
const LogoItem = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 48px;
|
min-width: 48px;
|
||||||
@ -27,7 +28,7 @@ const NavLogoItem = (props) => {
|
|||||||
return (
|
return (
|
||||||
<LogoItem opened={props.opened}>
|
<LogoItem opened={props.opened}>
|
||||||
<Link className="nav-logo-wrapper" to="/" onClick={props.onClick}>
|
<Link className="nav-logo-wrapper" to="/" onClick={props.onClick}>
|
||||||
<img className="nav-logo-icon" src={props.logoUrl} />
|
<img className="nav-logo-icon" src={getLogoFromPath(props.logoUrl)} />
|
||||||
</Link>
|
</Link>
|
||||||
</LogoItem>
|
</LogoItem>
|
||||||
);
|
);
|
||||||
|
@ -5,6 +5,17 @@ import { useEffect, useState } from "react";
|
|||||||
import { CategoryType } from "./constants";
|
import { CategoryType } from "./constants";
|
||||||
import { FolderType } from "@docspace/common/constants";
|
import { FolderType } from "@docspace/common/constants";
|
||||||
|
|
||||||
|
import AboutPageSvgUrl from "ASSETS_DIR/images/logo/aboutpage.svg?url";
|
||||||
|
import DarkLoginPageSvgUrl from "ASSETS_DIR/images/logo/dark_loginpage.svg?url";
|
||||||
|
import LeftMenuSvgUrl from "ASSETS_DIR/images/logo/leftmenu.svg?url";
|
||||||
|
import DarkAboutPageSvgUrl from "ASSETS_DIR/images/logo/dark_aboutpage.svg?url";
|
||||||
|
import DocseditorSvgUrl from "ASSETS_DIR/images/logo/docseditor.svg?url";
|
||||||
|
import LightSmallSvgUrl from "ASSETS_DIR/images/logo/lightsmall.svg?url";
|
||||||
|
import DarkLeftMenuSvgUrl from "ASSETS_DIR/images/logo/dark_leftmenu.svg?url";
|
||||||
|
import DocsEditoRembedSvgUrl from "ASSETS_DIR/images/logo/docseditorembed.svg?url";
|
||||||
|
import LoginPageSvgUrl from "ASSETS_DIR/images/logo/loginpage.svg?url";
|
||||||
|
import DarkLightSmallSvgUrl from "ASSETS_DIR/images/logo/dark_lightsmall.svg?url";
|
||||||
|
|
||||||
export const setDocumentTitle = (subTitle = null) => {
|
export const setDocumentTitle = (subTitle = null) => {
|
||||||
const { isAuthenticated, settingsStore, product: currentModule } = authStore;
|
const { isAuthenticated, settingsStore, product: currentModule } = authStore;
|
||||||
const { organizationName } = settingsStore;
|
const { organizationName } = settingsStore;
|
||||||
@ -193,3 +204,35 @@ export const getCategoryUrl = (categoryType, folderId = null) => {
|
|||||||
throw new Error("Unknown category type");
|
throw new Error("Unknown category type");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getLogoFromPath = (path) => {
|
||||||
|
if (!path || path.indexOf("images/logo/") === -1) return path;
|
||||||
|
|
||||||
|
const name = path.split("/").pop();
|
||||||
|
switch (name) {
|
||||||
|
case "aboutpage.svg":
|
||||||
|
return AboutPageSvgUrl;
|
||||||
|
case "dark_loginpage.svg":
|
||||||
|
return DarkLoginPageSvgUrl;
|
||||||
|
case "leftmenu.svg":
|
||||||
|
return LeftMenuSvgUrl;
|
||||||
|
case "dark_aboutpage.svg":
|
||||||
|
return DarkAboutPageSvgUrl;
|
||||||
|
case "docseditor.svg":
|
||||||
|
return DocseditorSvgUrl;
|
||||||
|
case "lightsmall.svg":
|
||||||
|
return LightSmallSvgUrl;
|
||||||
|
case "dark_leftmenu.svg":
|
||||||
|
return DarkLeftMenuSvgUrl;
|
||||||
|
case "docseditorembed.svg":
|
||||||
|
return DocsEditoRembedSvgUrl;
|
||||||
|
case "loginpage.svg":
|
||||||
|
return LoginPageSvgUrl;
|
||||||
|
case "dark_lightsmall.svg":
|
||||||
|
return DarkLightSmallSvgUrl;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return path;
|
||||||
|
};
|
||||||
|
@ -8,6 +8,7 @@ import { ReactSVG } from "react-svg";
|
|||||||
import { isMobile } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
||||||
import logoPersonalAboutUrl from "ASSETS_DIR/images/logo_personal_about.svg?url";
|
import logoPersonalAboutUrl from "ASSETS_DIR/images/logo_personal_about.svg?url";
|
||||||
|
import { getLogoFromPath } from "SRC_DIR/helpers/utils";
|
||||||
|
|
||||||
const StyledAboutBody = styled.div`
|
const StyledAboutBody = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -101,10 +102,11 @@ const AboutContent = (props) => {
|
|||||||
? previewData.address
|
? previewData.address
|
||||||
: companyInfoSettingsData?.address;
|
: companyInfoSettingsData?.address;
|
||||||
|
|
||||||
const logo =
|
const logo = getLogoFromPath(
|
||||||
userTheme === "Dark"
|
userTheme === "Dark"
|
||||||
? whiteLabelLogoUrls[6]?.path.dark
|
? whiteLabelLogoUrls[6]?.path.dark
|
||||||
: whiteLabelLogoUrls[6]?.path.light;
|
: whiteLabelLogoUrls[6]?.path.light
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
companyInfoSettingsData && (
|
companyInfoSettingsData && (
|
||||||
|
Loading…
Reference in New Issue
Block a user