IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Applied last changes in Mail/Calendar ComingSoon pages

Browse Source
This commit is contained in:
Alexey Safronov 2021-04-21 22:03:49 +03:00
parent 1516fe0249
commit 3782ea4bc3
6 changed files with 58 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
products/ASC.Calendar/Client/public/locales/en/ComingSoon.json
View File

@ -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"
}

3
products/ASC.Calendar/Client/public/locales/ru/ComingSoon.json
View File

@ -2,5 +2,6 @@
"ComingSoon": "Скоро появится",
"ViewWeb": "Просмотреть веб-версию",
"OpenApp": "Откройте {{title}}",
"LearnMore": "Узнать больше"
"LearnMore": "Узнать больше",
"ModuleDescription": "Планируйте встречи и мероприятия"
}

47
products/ASC.Calendar/Client/src/pages/Home/index.js
View File

@ -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}>

3
products/ASC.Mail/Client/public/locales/en/ComingSoon.json
View File

@ -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"
}

3
products/ASC.Mail/Client/public/locales/ru/ComingSoon.json
View File

@ -2,5 +2,6 @@
"ComingSoon": "Скоро появится",
"ViewWeb": "Просмотреть веб-версию",
"OpenApp": "Откройте {{title}}",
"LearnMore": "Узнать больше"
"LearnMore": "Узнать больше",
"ModuleDescription": "Управляйте своей электронной почтой"
}

47
products/ASC.Mail/Client/src/pages/Home/index.js
View File

@ -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}>