Merge pull request #963 from ONLYOFFICE/feature/whitelabel
Feature/whitelabel
This commit is contained in:
commit
d7abe3b9da
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.5 KiB |
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 9.4 KiB |
@ -28,6 +28,7 @@ import { getLink, checkIfModuleOld, onItemClick } from "SRC_DIR/helpers/utils";
|
|||||||
import StyledExternalLinkIcon from "@docspace/client/src/components/StyledExternalLinkIcon";
|
import StyledExternalLinkIcon from "@docspace/client/src/components/StyledExternalLinkIcon";
|
||||||
import HeaderCatalogBurger from "./header-catalog-burger";
|
import HeaderCatalogBurger from "./header-catalog-burger";
|
||||||
import { Base } from "@docspace/components/themes";
|
import { Base } from "@docspace/components/themes";
|
||||||
|
import { ReactSVG } from "react-svg";
|
||||||
|
|
||||||
const { proxyURL } = AppServerConfig;
|
const { proxyURL } = AppServerConfig;
|
||||||
|
|
||||||
@ -57,6 +58,12 @@ const Header = styled.header`
|
|||||||
transform: translateX(50%);
|
transform: translateX(50%);
|
||||||
height: 24px;
|
height: 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
path:last-child {
|
||||||
|
fill: ${(props) => props.theme.client.home.logoColor};
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.mobile-short-logo {
|
.mobile-short-logo {
|
||||||
width: 146px;
|
width: 146px;
|
||||||
@ -225,7 +232,15 @@ const HeaderComponent = ({
|
|||||||
!isFormGallery && <HeaderCatalogBurger onClick={toggleArticleOpen} />}
|
!isFormGallery && <HeaderCatalogBurger onClick={toggleArticleOpen} />}
|
||||||
<LinkWithoutRedirect className="header-logo-wrapper" to={defaultPage}>
|
<LinkWithoutRedirect className="header-logo-wrapper" to={defaultPage}>
|
||||||
{!isPersonal ? (
|
{!isPersonal ? (
|
||||||
<img alt="logo" src={props.logoUrl} className="header-logo-icon" />
|
props.logoUrl.includes(".svg") ? (
|
||||||
|
<ReactSVG src={props.logoUrl} className="header-logo-icon" />
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
alt="logo"
|
||||||
|
src={props.logoUrl}
|
||||||
|
className="header-logo-icon"
|
||||||
|
/>
|
||||||
|
)
|
||||||
) : (
|
) : (
|
||||||
<img
|
<img
|
||||||
alt="logo"
|
alt="logo"
|
||||||
|
@ -57,6 +57,9 @@ const StyledAboutBody = styled.div`
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logo-docspace-theme {
|
.logo-docspace-theme {
|
||||||
|
height: 24px;
|
||||||
|
width: 211px;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
path:nth-child(4) {
|
path:nth-child(4) {
|
||||||
fill: ${(props) => props.theme.client.about.logoColor};
|
fill: ${(props) => props.theme.client.about.logoColor};
|
||||||
@ -107,7 +110,7 @@ const AboutContent = (props) => {
|
|||||||
className="logo-theme no-select"
|
className="logo-theme no-select"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<ReactSVG
|
<img
|
||||||
src={docSpaceLogo}
|
src={docSpaceLogo}
|
||||||
alt="Logo"
|
alt="Logo"
|
||||||
className="logo-docspace-theme no-select"
|
className="logo-docspace-theme no-select"
|
||||||
|
@ -11,6 +11,7 @@ import TextInput from "@docspace/components/text-input";
|
|||||||
import HelpButton from "@docspace/components/help-button";
|
import HelpButton from "@docspace/components/help-button";
|
||||||
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
|
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
|
||||||
import Badge from "@docspace/components/badge";
|
import Badge from "@docspace/components/badge";
|
||||||
|
import toastr from "@docspace/components/toast/toastr";
|
||||||
|
|
||||||
import { Base } from "@docspace/components/themes";
|
import { Base } from "@docspace/components/themes";
|
||||||
import LoaderWhiteLabel from "../sub-components/loaderWhiteLabel";
|
import LoaderWhiteLabel from "../sub-components/loaderWhiteLabel";
|
||||||
@ -67,9 +68,9 @@ const StyledComponent = styled.div`
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logo-header {
|
.logo-header {
|
||||||
width: 142px;
|
width: 211px;
|
||||||
height: 23px;
|
height: 24px;
|
||||||
padding: 10px;
|
padding: 12px 20px;
|
||||||
background-color: ${(props) =>
|
background-color: ${(props) =>
|
||||||
props.theme.client.settings.common.whiteLabel.backgroundColor};
|
props.theme.client.settings.common.whiteLabel.backgroundColor};
|
||||||
}
|
}
|
||||||
@ -163,6 +164,8 @@ const WhiteLabel = (props) => {
|
|||||||
const [editorsHeaderLabel, setEditorsHeaderLabel] = useState();
|
const [editorsHeaderLabel, setEditorsHeaderLabel] = useState();
|
||||||
const [logoEditorsEmbeddedLabel, setLogoEditorsEmbeddedLabel] = useState();
|
const [logoEditorsEmbeddedLabel, setLogoEditorsEmbeddedLabel] = useState();
|
||||||
|
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (logoText) {
|
if (logoText) {
|
||||||
setLogoTextWhiteLabel(logoText);
|
setLogoTextWhiteLabel(logoText);
|
||||||
@ -175,6 +178,10 @@ const WhiteLabel = (props) => {
|
|||||||
}
|
}
|
||||||
}, [logoUrls]);
|
}, [logoUrls]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setLogoSizes(mapSizesToArray(logoSizes));
|
||||||
|
}, [logoSizes]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (
|
if (
|
||||||
logoTextWhiteLabel &&
|
logoTextWhiteLabel &&
|
||||||
@ -285,6 +292,26 @@ const WhiteLabel = (props) => {
|
|||||||
setIsUseTextAsLogo(false);
|
setIsUseTextAsLogo(false);
|
||||||
}, [isCanvasProcessing, isUseTextAsLogo]);
|
}, [isCanvasProcessing, isUseTextAsLogo]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isCanvasProcessing) {
|
||||||
|
let logosArr = [];
|
||||||
|
for (let i = 0; i < 7; i++) {
|
||||||
|
const id = String(i + 1);
|
||||||
|
const canvas =
|
||||||
|
id === "4"
|
||||||
|
? document.getElementById(`canvas_logo_${id}_1`)
|
||||||
|
: document.getElementById(`canvas_logo_${id}`);
|
||||||
|
|
||||||
|
const changeImg = {
|
||||||
|
id,
|
||||||
|
src: canvas.toDataURL(),
|
||||||
|
};
|
||||||
|
logosArr.push(changeImg);
|
||||||
|
}
|
||||||
|
setLogoUrlsChange(logosArr);
|
||||||
|
}
|
||||||
|
}, [isCanvasProcessing]);
|
||||||
|
|
||||||
const onUseTextAsLogo = () => {
|
const onUseTextAsLogo = () => {
|
||||||
setIsCanvasProcessing(true);
|
setIsCanvasProcessing(true);
|
||||||
setIsUseTextAsLogo(true);
|
setIsUseTextAsLogo(true);
|
||||||
@ -297,27 +324,43 @@ const WhiteLabel = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onRestoreLogo = () => {
|
const onRestoreLogo = () => {
|
||||||
|
try {
|
||||||
restoreWhiteLabelSettings(true);
|
restoreWhiteLabelSettings(true);
|
||||||
setIsCanvasProcessing(false);
|
setIsCanvasProcessing(false);
|
||||||
|
setLogoUrlsChange([]);
|
||||||
|
getWhiteLabelLogoUrls();
|
||||||
|
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
|
||||||
|
} catch (error) {
|
||||||
|
toastr.error(error);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onSave = () => {
|
const onSave = async () => {
|
||||||
let fd = new FormData();
|
let logoArr = [];
|
||||||
fd.append("logoText", logoTextWhiteLabel);
|
|
||||||
|
|
||||||
for (let i = 0; i < 7; i++) {
|
logoUrlsChange.map((item) => {
|
||||||
fd.append(`logo[${i}][key]`, i + 1);
|
logoArr.push({ key: item.id, value: item.src });
|
||||||
fd.append(`logo[${i}][value]`, logoUrlsWhiteLabel[i]);
|
});
|
||||||
}
|
|
||||||
|
|
||||||
const data = new URLSearchParams(fd);
|
const data = {
|
||||||
console.log(data);
|
logoText: logoTextWhiteLabel,
|
||||||
|
logo: logoArr,
|
||||||
|
};
|
||||||
|
|
||||||
setWhiteLabelSettings(data).finally(() => {
|
setIsSaving(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await setWhiteLabelSettings(data);
|
||||||
|
setLogoUrlsChange([]);
|
||||||
getWhiteLabelLogoText();
|
getWhiteLabelLogoText();
|
||||||
getWhiteLabelLogoSizes();
|
getWhiteLabelLogoSizes();
|
||||||
getWhiteLabelLogoUrls();
|
getWhiteLabelLogoUrls();
|
||||||
});
|
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
|
||||||
|
} catch (error) {
|
||||||
|
toastr.error(error);
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onChangeLogo = (e) => {
|
const onChangeLogo = (e) => {
|
||||||
@ -414,19 +457,19 @@ const WhiteLabel = (props) => {
|
|||||||
!logoUrlsChange.some((obj) => obj.id === "1") ? (
|
!logoUrlsChange.some((obj) => obj.id === "1") ? (
|
||||||
<canvas
|
<canvas
|
||||||
id="canvas_logo_1"
|
id="canvas_logo_1"
|
||||||
className="border-img logo-header"
|
className="logo-header"
|
||||||
width="251"
|
width="251"
|
||||||
height="48"
|
height="48"
|
||||||
data-fontsize="36"
|
data-fontsize="36"
|
||||||
data-fontcolor={
|
data-fontcolor={
|
||||||
theme.client.settings.common.whiteLabel.dataFontColor
|
theme.client.settings.common.whiteLabel.dataFontColorBlack
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{t("BrowserNoCanvasSupport")}
|
{t("BrowserNoCanvasSupport")}
|
||||||
</canvas>
|
</canvas>
|
||||||
) : (
|
) : (
|
||||||
<img
|
<img
|
||||||
className="border-img logo-header"
|
className="logo-header"
|
||||||
src={
|
src={
|
||||||
logoUrlsChange &&
|
logoUrlsChange &&
|
||||||
logoUrlsChange.some((obj) => obj.id === "1")
|
logoUrlsChange.some((obj) => obj.id === "1")
|
||||||
@ -474,7 +517,7 @@ const WhiteLabel = (props) => {
|
|||||||
height="56"
|
height="56"
|
||||||
data-fontsize="36"
|
data-fontsize="36"
|
||||||
data-fontcolor={
|
data-fontcolor={
|
||||||
theme.client.settings.common.whiteLabel.dataFontColor
|
theme.client.settings.common.whiteLabel.dataFontColorBlack
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{t("BrowserNoCanvasSupport")}
|
{t("BrowserNoCanvasSupport")}
|
||||||
@ -838,7 +881,6 @@ const WhiteLabel = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isSettingPaid && (
|
|
||||||
<SaveCancelButtons
|
<SaveCancelButtons
|
||||||
tabIndex={3}
|
tabIndex={3}
|
||||||
className="save-cancel-buttons"
|
className="save-cancel-buttons"
|
||||||
@ -847,25 +889,28 @@ const WhiteLabel = (props) => {
|
|||||||
saveButtonLabel={t("Common:SaveButton")}
|
saveButtonLabel={t("Common:SaveButton")}
|
||||||
cancelButtonLabel={t("RestoreDefaultButton")}
|
cancelButtonLabel={t("RestoreDefaultButton")}
|
||||||
displaySettings={true}
|
displaySettings={true}
|
||||||
showReminder={true}
|
showReminder={isSettingPaid}
|
||||||
|
saveButtonDisabled={logoUrlsChange.length === 0}
|
||||||
|
isSaving={isSaving}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</StyledComponent>
|
</StyledComponent>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default inject(({ setup, auth, common }) => {
|
export default inject(({ setup, auth, common }) => {
|
||||||
const { setWhiteLabelSettings, restoreWhiteLabelSettings } = setup;
|
const { setWhiteLabelSettings } = setup;
|
||||||
|
|
||||||
const { whiteLabelLogoSizes, whiteLabelLogoText } = common;
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
whiteLabelLogoUrls,
|
whiteLabelLogoSizes,
|
||||||
|
whiteLabelLogoText,
|
||||||
getWhiteLabelLogoText,
|
getWhiteLabelLogoText,
|
||||||
getWhiteLabelLogoSizes,
|
getWhiteLabelLogoSizes,
|
||||||
getWhiteLabelLogoUrls,
|
whiteLabelLogoUrls,
|
||||||
} = auth.settingsStore;
|
restoreWhiteLabelSettings,
|
||||||
|
} = common;
|
||||||
|
|
||||||
|
const { getWhiteLabelLogoUrls } = auth.settingsStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
theme: auth.settingsStore.theme,
|
theme: auth.settingsStore.theme,
|
||||||
|
@ -3,6 +3,7 @@ import authStore from "@docspace/common/store/AuthStore";
|
|||||||
import api from "@docspace/common/api";
|
import api from "@docspace/common/api";
|
||||||
|
|
||||||
class CommonStore {
|
class CommonStore {
|
||||||
|
whiteLabelLogoUrls = [];
|
||||||
whiteLabelLogoSizes = [];
|
whiteLabelLogoSizes = [];
|
||||||
whiteLabelLogoText = null;
|
whiteLabelLogoText = null;
|
||||||
|
|
||||||
@ -35,6 +36,7 @@ class CommonStore {
|
|||||||
requests.push(
|
requests.push(
|
||||||
authStore.settingsStore.getPortalTimezones(),
|
authStore.settingsStore.getPortalTimezones(),
|
||||||
authStore.settingsStore.getPortalCultures(),
|
authStore.settingsStore.getPortalCultures(),
|
||||||
|
this.getWhiteLabelLogoUrls(),
|
||||||
this.getWhiteLabelLogoText(),
|
this.getWhiteLabelLogoText(),
|
||||||
this.getWhiteLabelLogoSizes(),
|
this.getWhiteLabelLogoSizes(),
|
||||||
this.getGreetingSettingsIsDefault()
|
this.getGreetingSettingsIsDefault()
|
||||||
@ -43,6 +45,10 @@ class CommonStore {
|
|||||||
return Promise.all(requests).finally(() => this.setIsLoaded(true));
|
return Promise.all(requests).finally(() => this.setIsLoaded(true));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
setLogoUrls = (urls) => {
|
||||||
|
this.whiteLabelLogoUrls = urls;
|
||||||
|
};
|
||||||
|
|
||||||
setLogoText = (text) => {
|
setLogoText = (text) => {
|
||||||
this.whiteLabelLogoText = text;
|
this.whiteLabelLogoText = text;
|
||||||
};
|
};
|
||||||
@ -51,10 +57,20 @@ class CommonStore {
|
|||||||
this.whiteLabelLogoSizes = sizes;
|
this.whiteLabelLogoSizes = sizes;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
restoreWhiteLabelSettings = async (isDefault) => {
|
||||||
|
const res = await api.settings.restoreWhiteLabelSettings(isDefault);
|
||||||
|
this.getWhiteLabelLogoUrls();
|
||||||
|
};
|
||||||
|
|
||||||
getGreetingSettingsIsDefault = async () => {
|
getGreetingSettingsIsDefault = async () => {
|
||||||
this.greetingSettingsIsDefault = await api.settings.getGreetingSettingsIsDefault();
|
this.greetingSettingsIsDefault = await api.settings.getGreetingSettingsIsDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
getWhiteLabelLogoUrls = async () => {
|
||||||
|
const res = await api.settings.getLogoUrls();
|
||||||
|
this.setLogoUrls(Object.values(res));
|
||||||
|
};
|
||||||
|
|
||||||
getWhiteLabelLogoText = async () => {
|
getWhiteLabelLogoText = async () => {
|
||||||
const res = await api.settings.getLogoText();
|
const res = await api.settings.getLogoText();
|
||||||
this.setLogoText(res);
|
this.setLogoText(res);
|
||||||
|
@ -218,10 +218,6 @@ class SettingsSetupStore {
|
|||||||
return Promise.resolve(response);
|
return Promise.resolve(response);
|
||||||
};
|
};
|
||||||
|
|
||||||
restoreWhiteLabelSettings = async (isDefault) => {
|
|
||||||
const res = await api.settings.restoreWhiteLabelSettings(isDefault);
|
|
||||||
};
|
|
||||||
|
|
||||||
setLanguageAndTime = async (lng, timeZoneID) => {
|
setLanguageAndTime = async (lng, timeZoneID) => {
|
||||||
return api.settings.setLanguageAndTime(lng, timeZoneID);
|
return api.settings.setLanguageAndTime(lng, timeZoneID);
|
||||||
};
|
};
|
||||||
|
@ -164,6 +164,11 @@ const StyledHeading = styled.div`
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
img.logo-icon_svg {
|
||||||
|
height: 24px;
|
||||||
|
width: 211px;
|
||||||
|
}
|
||||||
|
|
||||||
.logo-icon_svg {
|
.logo-icon_svg {
|
||||||
svg {
|
svg {
|
||||||
path:last-child {
|
path:last-child {
|
||||||
@ -199,6 +204,10 @@ const StyledIconBox = styled.div`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
@media ${tablet} {
|
@media ${tablet} {
|
||||||
display: ${(props) => (props.showText ? "none" : "flex")};
|
display: ${(props) => (props.showText ? "none" : "flex")};
|
||||||
}
|
}
|
||||||
|
@ -18,6 +18,7 @@ const ArticleHeader = ({
|
|||||||
children,
|
children,
|
||||||
onClick,
|
onClick,
|
||||||
isBurgerLoading,
|
isBurgerLoading,
|
||||||
|
whiteLabelLogoUrls,
|
||||||
...rest
|
...rest
|
||||||
}) => {
|
}) => {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
@ -25,6 +26,8 @@ const ArticleHeader = ({
|
|||||||
const isTabletView = (isTabletUtils() || isTablet) && !isMobileOnly;
|
const isTabletView = (isTabletUtils() || isTablet) && !isMobileOnly;
|
||||||
const onLogoClick = () => history.push("/");
|
const onLogoClick = () => history.push("/");
|
||||||
|
|
||||||
|
const isSvgLogo = whiteLabelLogoUrls[0].includes(".svg");
|
||||||
|
|
||||||
if (isMobileOnly) return <></>;
|
if (isMobileOnly) return <></>;
|
||||||
return (
|
return (
|
||||||
<StyledArticleHeader showText={showText} {...rest}>
|
<StyledArticleHeader showText={showText} {...rest}>
|
||||||
@ -32,7 +35,7 @@ const ArticleHeader = ({
|
|||||||
<Loaders.ArticleHeader height="28px" width="28px" />
|
<Loaders.ArticleHeader height="28px" width="28px" />
|
||||||
) : (
|
) : (
|
||||||
<StyledIconBox name="article-burger" showText={showText}>
|
<StyledIconBox name="article-burger" showText={showText}>
|
||||||
<img src="/static/images/logo.icon.react.svg" onClick={onLogoClick} />
|
<img src={whiteLabelLogoUrls[5]} onClick={onLogoClick} />
|
||||||
</StyledIconBox>
|
</StyledIconBox>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@ -41,17 +44,30 @@ const ArticleHeader = ({
|
|||||||
) : (
|
) : (
|
||||||
<StyledHeading showText={showText} size="large">
|
<StyledHeading showText={showText} size="large">
|
||||||
{isTabletView ? (
|
{isTabletView ? (
|
||||||
|
isSvgLogo ? (
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
className="logo-icon_svg"
|
className="logo-icon_svg"
|
||||||
src="/static/images/logo.docspace.react.svg"
|
src={whiteLabelLogoUrls[0]}
|
||||||
onClick={onLogoClick}
|
onClick={onLogoClick}
|
||||||
/>
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
className="logo-icon_svg"
|
||||||
|
src={whiteLabelLogoUrls[0]}
|
||||||
|
onClick={onLogoClick}
|
||||||
|
/>
|
||||||
|
)
|
||||||
) : (
|
) : (
|
||||||
<Link to="/">
|
<Link to="/">
|
||||||
|
{isSvgLogo ? (
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
className="logo-icon_svg"
|
className="logo-icon_svg"
|
||||||
src="/static/images/logo.docspace.react.svg"
|
src={whiteLabelLogoUrls[0]}
|
||||||
|
onClick={onLogoClick}
|
||||||
/>
|
/>
|
||||||
|
) : (
|
||||||
|
<img className="logo-icon_svg" src={whiteLabelLogoUrls[0]} />
|
||||||
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</StyledHeading>
|
</StyledHeading>
|
||||||
@ -70,8 +86,9 @@ ArticleHeader.displayName = "Header";
|
|||||||
|
|
||||||
export default inject(({ auth }) => {
|
export default inject(({ auth }) => {
|
||||||
const { settingsStore } = auth;
|
const { settingsStore } = auth;
|
||||||
const { isBurgerLoading } = settingsStore;
|
const { isBurgerLoading, whiteLabelLogoUrls } = settingsStore;
|
||||||
return {
|
return {
|
||||||
isBurgerLoading,
|
isBurgerLoading,
|
||||||
|
whiteLabelLogoUrls,
|
||||||
};
|
};
|
||||||
})(observer(ArticleHeader));
|
})(observer(ArticleHeader));
|
||||||
|
@ -70,7 +70,7 @@ class SettingsStore {
|
|||||||
urlSupport = "https://helpdesk.onlyoffice.com/";
|
urlSupport = "https://helpdesk.onlyoffice.com/";
|
||||||
urlOforms = "https://cmsoforms.onlyoffice.com/api/oforms";
|
urlOforms = "https://cmsoforms.onlyoffice.com/api/oforms";
|
||||||
|
|
||||||
logoUrl = combineUrl(proxyURL, "/static/images/logo.docspace.react.svg");
|
logoUrl = "";
|
||||||
customNames = {
|
customNames = {
|
||||||
id: "Common",
|
id: "Common",
|
||||||
userCaption: "User",
|
userCaption: "User",
|
||||||
@ -388,7 +388,11 @@ class SettingsStore {
|
|||||||
};
|
};
|
||||||
|
|
||||||
setDocSpaceLogo = (urls) => {
|
setDocSpaceLogo = (urls) => {
|
||||||
this.docSpaceLogo = urls[1];
|
this.docSpaceLogo = urls[6];
|
||||||
|
};
|
||||||
|
|
||||||
|
setLogoUrl = (url) => {
|
||||||
|
this.logoUrl = url[0];
|
||||||
};
|
};
|
||||||
|
|
||||||
setLogoUrls = (urls) => {
|
setLogoUrls = (urls) => {
|
||||||
@ -407,6 +411,7 @@ class SettingsStore {
|
|||||||
|
|
||||||
this.setLogoUrls(Object.values(res));
|
this.setLogoUrls(Object.values(res));
|
||||||
this.setDocSpaceLogo(Object.values(res));
|
this.setDocSpaceLogo(Object.values(res));
|
||||||
|
this.setLogoUrl(Object.values(res));
|
||||||
};
|
};
|
||||||
|
|
||||||
restoreCompanyInfoSettings = async () => {
|
restoreCompanyInfoSettings = async () => {
|
||||||
|
@ -23,10 +23,10 @@ const StyledWrapper = styled.div`
|
|||||||
@media ${hugeMobile} {
|
@media ${hugeMobile} {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none;
|
box-shadow: none !important;
|
||||||
max-width: 343px;
|
max-width: 343px;
|
||||||
min-width: 343px;
|
min-width: 343px;
|
||||||
background: transparent;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -52,6 +52,7 @@ class SaveCancelButtons extends React.Component {
|
|||||||
isSaving,
|
isSaving,
|
||||||
cancelEnable,
|
cancelEnable,
|
||||||
tabIndex,
|
tabIndex,
|
||||||
|
saveButtonDisabled,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const cancelButtonDisabled = cancelEnable
|
const cancelButtonDisabled = cancelEnable
|
||||||
@ -76,7 +77,7 @@ class SaveCancelButtons extends React.Component {
|
|||||||
tabIndex={tabIndexSaveButton}
|
tabIndex={tabIndexSaveButton}
|
||||||
className="save-button"
|
className="save-button"
|
||||||
size="normal"
|
size="normal"
|
||||||
isDisabled={!showReminder}
|
isDisabled={!showReminder || saveButtonDisabled}
|
||||||
primary
|
primary
|
||||||
onClick={onSaveClick}
|
onClick={onSaveClick}
|
||||||
label={saveButtonLabel}
|
label={saveButtonLabel}
|
||||||
|
@ -2879,7 +2879,7 @@ const Base = {
|
|||||||
whiteLabel: {
|
whiteLabel: {
|
||||||
borderImg: "1px solid #d1d1d1",
|
borderImg: "1px solid #d1d1d1",
|
||||||
|
|
||||||
backgroundColor: "#0f4071",
|
backgroundColor: "#ECEEF1",
|
||||||
greenBackgroundColor: "#7e983f",
|
greenBackgroundColor: "#7e983f",
|
||||||
blueBackgroundColor: "#5170b5",
|
blueBackgroundColor: "#5170b5",
|
||||||
orangeBackgroundColor: "#e86e2e",
|
orangeBackgroundColor: "#e86e2e",
|
||||||
|
@ -2885,13 +2885,13 @@ const Dark = {
|
|||||||
whiteLabel: {
|
whiteLabel: {
|
||||||
borderImg: "1px solid #d1d1d1",
|
borderImg: "1px solid #d1d1d1",
|
||||||
|
|
||||||
backgroundColor: "#0f4071",
|
backgroundColor: "#282828",
|
||||||
greenBackgroundColor: "#7e983f",
|
greenBackgroundColor: "#7e983f",
|
||||||
blueBackgroundColor: "#5170b5",
|
blueBackgroundColor: "#5170b5",
|
||||||
orangeBackgroundColor: "#e86e2e",
|
orangeBackgroundColor: "#e86e2e",
|
||||||
|
|
||||||
dataFontColor: white,
|
dataFontColor: white,
|
||||||
dataFontColorBlack: black,
|
dataFontColorBlack: white,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
1
packages/login/index.d.ts
vendored
1
packages/login/index.d.ts
vendored
@ -97,6 +97,7 @@ declare global {
|
|||||||
match: MatchType;
|
match: MatchType;
|
||||||
currentColorScheme: ITheme;
|
currentColorScheme: ITheme;
|
||||||
isAuth: boolean;
|
isAuth: boolean;
|
||||||
|
logoUrls: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface DevRequest {
|
interface DevRequest {
|
||||||
|
@ -2,7 +2,6 @@ import React, { useEffect, useState, useCallback } from "react";
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { ButtonsWrapper, LoginFormWrapper } from "./StyledLogin";
|
import { ButtonsWrapper, LoginFormWrapper } from "./StyledLogin";
|
||||||
import Logo from "../../../../../public/images/docspace.big.react.svg";
|
|
||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
import SocialButton from "@docspace/components/social-button";
|
import SocialButton from "@docspace/components/social-button";
|
||||||
import {
|
import {
|
||||||
@ -24,6 +23,7 @@ import SSOIcon from "../../../../../public/images/sso.react.svg";
|
|||||||
import { Dark, Base } from "@docspace/components/themes";
|
import { Dark, Base } from "@docspace/components/themes";
|
||||||
import { useMounted } from "../helpers/useMounted";
|
import { useMounted } from "../helpers/useMounted";
|
||||||
import { getBgPattern } from "@docspace/common/utils";
|
import { getBgPattern } from "@docspace/common/utils";
|
||||||
|
import { ReactSVG } from "react-svg";
|
||||||
|
|
||||||
interface ILoginProps extends IInitialState {
|
interface ILoginProps extends IInitialState {
|
||||||
isDesktopEditor?: boolean;
|
isDesktopEditor?: boolean;
|
||||||
@ -38,6 +38,7 @@ const Login: React.FC<ILoginProps> = ({
|
|||||||
currentColorScheme,
|
currentColorScheme,
|
||||||
theme,
|
theme,
|
||||||
setTheme,
|
setTheme,
|
||||||
|
logoUrls,
|
||||||
}) => {
|
}) => {
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [moreAuthVisible, setMoreAuthVisible] = useState(false);
|
const [moreAuthVisible, setMoreAuthVisible] = useState(false);
|
||||||
@ -174,6 +175,9 @@ const Login: React.FC<ILoginProps> = ({
|
|||||||
|
|
||||||
const bgPattern = getBgPattern(currentColorScheme.id);
|
const bgPattern = getBgPattern(currentColorScheme.id);
|
||||||
|
|
||||||
|
const loginLogo = Object.values(logoUrls)[1];
|
||||||
|
const isSvgLogo = loginLogo.includes(".svg");
|
||||||
|
|
||||||
if (!mounted) return <></>;
|
if (!mounted) return <></>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -185,7 +189,11 @@ const Login: React.FC<ILoginProps> = ({
|
|||||||
bgPattern={bgPattern}
|
bgPattern={bgPattern}
|
||||||
>
|
>
|
||||||
<ColorTheme themeId={ThemeType.LinkForgotPassword} theme={theme}>
|
<ColorTheme themeId={ThemeType.LinkForgotPassword} theme={theme}>
|
||||||
<Logo className="logo-wrapper" />
|
{isSvgLogo ? (
|
||||||
|
<ReactSVG src={loginLogo} className="logo-wrapper" />
|
||||||
|
) : (
|
||||||
|
<img src={loginLogo} className="logo-wrapper" />
|
||||||
|
)}
|
||||||
<Text
|
<Text
|
||||||
fontSize="23px"
|
fontSize="23px"
|
||||||
fontWeight={700}
|
fontWeight={700}
|
||||||
|
@ -238,9 +238,11 @@ export const LoginContainer = styled.div`
|
|||||||
height: 46px;
|
height: 46px;
|
||||||
padding-bottom: 64px;
|
padding-bottom: 64px;
|
||||||
|
|
||||||
|
svg {
|
||||||
path:last-child {
|
path:last-child {
|
||||||
fill: ${(props) => props.theme.client.home.logoColor};
|
fill: ${(props) => props.theme.client.home.logoColor};
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media ${hugeMobile} {
|
@media ${hugeMobile} {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -6,6 +6,7 @@ import {
|
|||||||
getAuthProviders,
|
getAuthProviders,
|
||||||
getCapabilities,
|
getCapabilities,
|
||||||
getAppearanceTheme,
|
getAppearanceTheme,
|
||||||
|
getLogoUrls
|
||||||
} from "@docspace/common/api/settings";
|
} from "@docspace/common/api/settings";
|
||||||
import { checkIsAuthenticated } from "@docspace/common/api/user";
|
import { checkIsAuthenticated } from "@docspace/common/api/user";
|
||||||
|
|
||||||
@ -57,7 +58,8 @@ export const getInitialState = async (
|
|||||||
providers: ProvidersType,
|
providers: ProvidersType,
|
||||||
capabilities: ICapabilities,
|
capabilities: ICapabilities,
|
||||||
availableThemes: IThemes,
|
availableThemes: IThemes,
|
||||||
isAuth: any;
|
isAuth: any,
|
||||||
|
logoUrls: any;
|
||||||
|
|
||||||
[
|
[
|
||||||
portalSettings,
|
portalSettings,
|
||||||
@ -66,13 +68,15 @@ export const getInitialState = async (
|
|||||||
capabilities,
|
capabilities,
|
||||||
availableThemes,
|
availableThemes,
|
||||||
isAuth,
|
isAuth,
|
||||||
|
logoUrls
|
||||||
] = await Promise.all([
|
] = await Promise.all([
|
||||||
getSettings(),
|
getSettings(),
|
||||||
getBuildVersion(),
|
getBuildVersion(),
|
||||||
getAuthProviders(),
|
getAuthProviders(),
|
||||||
getCapabilities(),
|
getCapabilities(),
|
||||||
getAppearanceTheme(),
|
getAppearanceTheme(),
|
||||||
checkIsAuthenticated()
|
checkIsAuthenticated(),
|
||||||
|
getLogoUrls()
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const currentColorScheme = availableThemes.themes.find((theme) => {
|
const currentColorScheme = availableThemes.themes.find((theme) => {
|
||||||
@ -86,7 +90,8 @@ export const getInitialState = async (
|
|||||||
capabilities,
|
capabilities,
|
||||||
match: query,
|
match: query,
|
||||||
currentColorScheme,
|
currentColorScheme,
|
||||||
isAuth
|
isAuth,
|
||||||
|
logoUrls
|
||||||
};
|
};
|
||||||
|
|
||||||
return initialState;
|
return initialState;
|
||||||
|
Loading…
Reference in New Issue
Block a user