Applied last changes in Mail/Calendar ComingSoon pages
This commit is contained in:
parent
1516fe0249
commit
3782ea4bc3
@ -2,5 +2,6 @@
|
||||
"ComingSoon": "Coming soon",
|
||||
"ViewWeb": "View web version",
|
||||
"OpenApp": "Open your {{title}} app",
|
||||
"LearnMore": "Learn more"
|
||||
"LearnMore": "Learn more",
|
||||
"ModuleDescription": "Schedule meetings and events"
|
||||
}
|
||||
|
@ -2,5 +2,6 @@
|
||||
"ComingSoon": "Скоро появится",
|
||||
"ViewWeb": "Просмотреть веб-версию",
|
||||
"OpenApp": "Откройте {{title}}",
|
||||
"LearnMore": "Узнать больше"
|
||||
"LearnMore": "Узнать больше",
|
||||
"ModuleDescription": "Планируйте встречи и мероприятия"
|
||||
}
|
||||
|
@ -11,9 +11,9 @@ import ExternalLinkIcon from "../../../../../../public/images/external.link.reac
|
||||
import Loaders from "@appserver/common/components/Loaders";
|
||||
import toastr from "studio/toastr";
|
||||
import PageLayout from "@appserver/common/components/PageLayout";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import { isMobile, isIOS } from "react-device-detect";
|
||||
import { isMobile, isTablet, isIOS } from "react-device-detect";
|
||||
|
||||
import { setDocumentTitle } from "../../helpers/utils";
|
||||
import { inject } from "mobx-react";
|
||||
@ -34,14 +34,19 @@ const commonStyles = `
|
||||
`;
|
||||
|
||||
const ComingSoonPage = styled.div`
|
||||
padding: ${isMobile ? "62px 0 0 0" : "0"};
|
||||
width: 336px;
|
||||
padding: ${isTablet ? "106px 0 0 0" : isMobile ? "62px 0 0 0" : "0"};
|
||||
width: ${isTablet ? "500px" : "336px"};
|
||||
margin: 0 auto;
|
||||
|
||||
.module-logo-icon {
|
||||
float: left;
|
||||
margin-top: 8px;
|
||||
margin-right: 16px;
|
||||
|
||||
svg {
|
||||
width: ${isTablet ? "192px" : "96px"};
|
||||
height: ${isTablet ? "192px" : "96px"};
|
||||
}
|
||||
}
|
||||
|
||||
.module-title {
|
||||
@ -93,7 +98,10 @@ const StyledDesktopContainer = styled(EmptyScreenContainer)`
|
||||
|
||||
const ExternalLink = ({ label, href, onClick }) => (
|
||||
<Box className="link-box">
|
||||
<ExternalLinkIcon color="#333333" size={isMobile ? "small" : "medium"} />
|
||||
<ExternalLinkIcon
|
||||
color="#333333"
|
||||
size={isMobile || isTablet ? "small" : "medium"}
|
||||
/>
|
||||
<Link
|
||||
as="a"
|
||||
href={href}
|
||||
@ -109,20 +117,11 @@ const ExternalLink = ({ label, href, onClick }) => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
|
||||
const { t } = useTranslation("ComingSoon");
|
||||
const Body = ({ modules, match, isLoaded, setCurrentProductId, t, tReady }) => {
|
||||
const { error } = match.params;
|
||||
const { pathname, protocol, hostname } = window.location;
|
||||
const currentModule = modules.find((m) => m.link === pathname);
|
||||
const {
|
||||
id,
|
||||
title,
|
||||
description,
|
||||
imageUrl,
|
||||
link,
|
||||
originUrl,
|
||||
helpUrl,
|
||||
} = currentModule;
|
||||
const { id, title, imageUrl, link, originUrl, helpUrl } = currentModule;
|
||||
const url = originUrl ? originUrl : link;
|
||||
const webLink = combineUrl(
|
||||
protocol + "//" + hostname,
|
||||
@ -172,8 +171,8 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
|
||||
|
||||
const moduleDescription = (
|
||||
<Text className="module-info">
|
||||
{description}{" "}
|
||||
{helpUrl && (
|
||||
{t("ModuleDescription")}{" "}
|
||||
{helpUrl && false && (
|
||||
<Link
|
||||
as="a"
|
||||
href={helpUrl}
|
||||
@ -189,9 +188,9 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
|
||||
</Text>
|
||||
);
|
||||
|
||||
return !isLoaded ? (
|
||||
return !isLoaded || !tReady ? (
|
||||
<></>
|
||||
) : isMobile ? (
|
||||
) : isMobile || isTablet ? (
|
||||
<ComingSoonPage>
|
||||
<ReactSVG
|
||||
className="module-logo-icon"
|
||||
@ -208,7 +207,11 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
|
||||
src={imageUrl}
|
||||
/>
|
||||
<Box displayProp="flex" flexDirection="column" widthProp="220px">
|
||||
<Text fontWeight="600" fontSize="19px" className="module-title">
|
||||
<Text
|
||||
fontWeight="600"
|
||||
fontSize={isTablet ? "24px" : "19px"}
|
||||
className="module-title"
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
{moduleDescription}
|
||||
@ -245,7 +248,7 @@ const ComingSoonWrapper = inject(({ auth }) => ({
|
||||
modules: auth.moduleStore.modules,
|
||||
isLoaded: auth.isLoaded,
|
||||
setCurrentProductId: auth.settingsStore.setCurrentProductId,
|
||||
}))(withRouter(ComingSoon));
|
||||
}))(withRouter(withTranslation("ComingSoon")(ComingSoon)));
|
||||
|
||||
export default (props) => (
|
||||
<I18nextProvider i18n={i18n}>
|
||||
|
@ -2,5 +2,6 @@
|
||||
"ComingSoon": "Coming soon",
|
||||
"ViewWeb": "View web version",
|
||||
"OpenApp": "Open your {{title}} app",
|
||||
"LearnMore": "Learn more"
|
||||
"LearnMore": "Learn more",
|
||||
"ModuleDescription": "Manage your emails"
|
||||
}
|
||||
|
@ -2,5 +2,6 @@
|
||||
"ComingSoon": "Скоро появится",
|
||||
"ViewWeb": "Просмотреть веб-версию",
|
||||
"OpenApp": "Откройте {{title}}",
|
||||
"LearnMore": "Узнать больше"
|
||||
"LearnMore": "Узнать больше",
|
||||
"ModuleDescription": "Управляйте своей электронной почтой"
|
||||
}
|
||||
|
@ -11,9 +11,9 @@ import ExternalLinkIcon from "../../../../../../public/images/external.link.reac
|
||||
import Loaders from "@appserver/common/components/Loaders";
|
||||
import toastr from "studio/toastr";
|
||||
import PageLayout from "@appserver/common/components/PageLayout";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import { isMobile, isIOS } from "react-device-detect";
|
||||
import { isMobile, isTablet, isIOS } from "react-device-detect";
|
||||
|
||||
import { setDocumentTitle } from "../../helpers/utils";
|
||||
import { inject } from "mobx-react";
|
||||
@ -34,14 +34,19 @@ const commonStyles = `
|
||||
`;
|
||||
|
||||
const ComingSoonPage = styled.div`
|
||||
padding: ${isMobile ? "62px 0 0 0" : "0"};
|
||||
width: 336px;
|
||||
padding: ${isTablet ? "106px 0 0 0" : isMobile ? "62px 0 0 0" : "0"};
|
||||
width: ${isTablet ? "500px" : "336px"};
|
||||
margin: 0 auto;
|
||||
|
||||
.module-logo-icon {
|
||||
float: left;
|
||||
margin-top: 8px;
|
||||
margin-right: 16px;
|
||||
|
||||
svg {
|
||||
width: ${isTablet ? "192px" : "96px"};
|
||||
height: ${isTablet ? "192px" : "96px"};
|
||||
}
|
||||
}
|
||||
|
||||
.module-title {
|
||||
@ -93,7 +98,10 @@ const StyledDesktopContainer = styled(EmptyScreenContainer)`
|
||||
|
||||
const ExternalLink = ({ label, href, onClick }) => (
|
||||
<Box className="link-box">
|
||||
<ExternalLinkIcon color="#333333" size={isMobile ? "small" : "medium"} />
|
||||
<ExternalLinkIcon
|
||||
color="#333333"
|
||||
size={isMobile || isTablet ? "small" : "medium"}
|
||||
/>
|
||||
<Link
|
||||
as="a"
|
||||
href={href}
|
||||
@ -109,20 +117,11 @@ const ExternalLink = ({ label, href, onClick }) => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
|
||||
const { t } = useTranslation("ComingSoon");
|
||||
const Body = ({ modules, match, isLoaded, setCurrentProductId, t, tReady }) => {
|
||||
const { error } = match.params;
|
||||
const { pathname, protocol, hostname } = window.location;
|
||||
const currentModule = modules.find((m) => m.link === pathname);
|
||||
const {
|
||||
id,
|
||||
title,
|
||||
description,
|
||||
imageUrl,
|
||||
link,
|
||||
originUrl,
|
||||
helpUrl,
|
||||
} = currentModule;
|
||||
const { id, title, imageUrl, link, originUrl, helpUrl } = currentModule;
|
||||
const url = originUrl ? originUrl : link;
|
||||
const webLink = combineUrl(
|
||||
protocol + "//" + hostname,
|
||||
@ -172,8 +171,8 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
|
||||
|
||||
const moduleDescription = (
|
||||
<Text className="module-info">
|
||||
{description}{" "}
|
||||
{helpUrl && (
|
||||
{t("ModuleDescription")}{" "}
|
||||
{helpUrl && false && (
|
||||
<Link
|
||||
as="a"
|
||||
href={helpUrl}
|
||||
@ -189,9 +188,9 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
|
||||
</Text>
|
||||
);
|
||||
|
||||
return !isLoaded ? (
|
||||
return !isLoaded || !tReady ? (
|
||||
<></>
|
||||
) : isMobile ? (
|
||||
) : isMobile || isTablet ? (
|
||||
<ComingSoonPage>
|
||||
<ReactSVG
|
||||
className="module-logo-icon"
|
||||
@ -208,7 +207,11 @@ const Body = ({ modules, match, isLoaded, setCurrentProductId }) => {
|
||||
src={imageUrl}
|
||||
/>
|
||||
<Box displayProp="flex" flexDirection="column" widthProp="220px">
|
||||
<Text fontWeight="600" fontSize="19px" className="module-title">
|
||||
<Text
|
||||
fontWeight="600"
|
||||
fontSize={isTablet ? "24px" : "19px"}
|
||||
className="module-title"
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
{moduleDescription}
|
||||
@ -245,7 +248,7 @@ const ComingSoonWrapper = inject(({ auth }) => ({
|
||||
modules: auth.moduleStore.modules,
|
||||
isLoaded: auth.isLoaded,
|
||||
setCurrentProductId: auth.settingsStore.setCurrentProductId,
|
||||
}))(withRouter(ComingSoon));
|
||||
}))(withRouter(withTranslation("ComingSoon")(ComingSoon)));
|
||||
|
||||
export default (props) => (
|
||||
<I18nextProvider i18n={i18n}>
|
||||
|
Loading…
Reference in New Issue
Block a user