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

Web: Client: added about content

Browse Source
This commit is contained in:
Viktor Fomin 2021-08-04 12:06:16 +03:00
parent 36b464a29b
commit a9734f78e1
2 changed files with 117 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
web/ASC.Web.Client/src/components/pages/About/AboutContent.js Normal file
View File

@ -0,0 +1,115 @@
import React from "react";
import Text from "@appserver/components/text";
import Link from "@appserver/components/link";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { ReactSVG } from "react-svg";
const AboutBody = styled.div`
width: 100%;
.avatar {
margin-top: 32px;
margin-bottom: 16px;
}
.row {
display: flex;
flex-direction: row;
}
.copyright {
margin-top: 16px;
}
`;
const AboutContent = ({ personal, versionAppServer }) => {
const { t } = useTranslation("About");
const versionEditor = "6.3.1";
const license = "AGPL-3.0";
const link = "https://github.com/ONLYOFFICE";
const phone = "+371 660-16425";
const email = "support@onlyoffice.com";
const address =
"20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050";
return (
<AboutBody>
<div className="avatar">
{personal ? (
<ReactSVG src="images/logo_personal_about.svg" />
) : (
<img src="images/dark_general.png" alt="Logo" />
)}
</div>
<div className="row">
<Text fontSize="13px">{t("DocumentManagement")}:</Text>
<Link
color="#2DA7DB"
fontSize="13px"
fontWeight="600"
href={link}
target="_blank"
>
ONLYOFFICE App Server
</Link>
<Text fontSize="13px" fontWeight="600">
v.{versionAppServer}
</Text>
</div>
<div className="row">
<Text fontSize="13px">{t("OnlineEditors")}:</Text>
<Link
color="#2DA7DB"
fontSize="13px"
fontWeight="600"
href={link}
target="_blank"
>
ONLYOFFICE Docs
</Link>
<Text fontSize="13px" fontWeight="600">
v.{versionEditor}
</Text>
</div>
<div className="row">
<Text fontSize="13px">{t("SoftwareLicense")}: </Text>
<Text fontSize="13px" fontWeight="600">
{license}
</Text>
</div>
<Text className="copyright" fontSize="14px" fontWeight="600">
© Ascensio System SIA
</Text>
<div className="row">
<Text fontSize="13px">
{t("AboutCompanyAddressTitle")}: {address}
</Text>
</div>
<div className="row">
<Text fontSize="13px">
{t("AboutCompanyTelTitle")}: {phone}
</Text>
</div>
<div className="row">
<Text fontSize="13px">{t("AboutCompanyEmailTitle")}:</Text>
<Link
color="#2DA7DB"
fontSize="13px"
fontWeight="600"
href={`mailto:${email}`}
>
{email}
</Link>
</div>
</AboutBody>
);
};
export default AboutContent;

104
web/ASC.Web.Client/src/components/pages/About/index.js
View File

@ -1,6 +1,5 @@
import React, { useEffect } from "react";
import Text from "@appserver/components/text";
import Link from "@appserver/components/link";
import PageLayout from "@appserver/common/components/PageLayout";
import { I18nextProvider, Trans, withTranslation } from "react-i18next";
import styled from "styled-components";
@ -9,25 +8,10 @@ import { setDocumentTitle } from "../../../helpers/utils";
import i18n from "./i18n";
import withLoader from "../Confirm/withLoader";
import { inject, observer } from "mobx-react";
import { ReactSVG } from "react-svg";
import AboutContent from "./AboutContent";
const BodyStyle = styled.div`
width: 100%;
padding: ${isMobileOnly ? "48px 0 0" : "80px 147px 0"};
.avatar {
margin-top: 32px;
margin-bottom: 16px;
}
.row {
display: flex;
flex-direction: row;
}
.copyright {
margin-top: 16px;
}
`;
const Body = ({ t, personal, versionAppServer }) => {
@ -35,97 +19,13 @@ const Body = ({ t, personal, versionAppServer }) => {
setDocumentTitle(t("Common:About"));
}, [t]);
const versionEditor = "6.3.1";
const license = "AGPL-3.0";
const link = "https://github.com/ONLYOFFICE";
const phone = "+371 660-16425";
const email = "support@onlyoffice.com";
const address =
"20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050";
return (
<BodyStyle>
<Text fontSize="32px" fontWeight="600">
{t("AboutHeader")}
</Text>
<div className="avatar">
{personal ? (
<ReactSVG src="images/logo_personal_about.svg" />
) : (
<img
className="logo-img"
src="images/dark_general.png"
width="320"
height="181"
alt="Logo"
/>
)}
</div>
<div className="row">
<Text fontSize="13px">{t("DocumentManagement")}:</Text>
<Link
color="#2DA7DB"
fontSize="13px"
fontWeight="600"
href={link}
target="_blank"
>
ONLYOFFICE App Server
</Link>
<Text fontSize="13px" fontWeight="600">
v.{versionAppServer}
</Text>
</div>
<div className="row">
<Text fontSize="13px">{t("OnlineEditors")}:</Text>
<Link
color="#2DA7DB"
fontSize="13px"
fontWeight="600"
href={link}
target="_blank"
>
ONLYOFFICE Docs
</Link>
<Text fontSize="13px" fontWeight="600">
v.{versionEditor}
</Text>
</div>
<div className="row">
<Text fontSize="13px">{t("SoftwareLicense")}: </Text>
<Text fontSize="13px" fontWeight="600">
{license}
</Text>
</div>
<Text className="copyright" fontSize="14px" fontWeight="600">
© Ascensio System SIA
</Text>
<div className="row">
<Text fontSize="13px">{t("AboutCompanyAddressTitle")}:</Text>
<Text fontSize="13px">{address}</Text>
</div>
<div className="row">
<Text fontSize="13px">{t("AboutCompanyTelTitle")}:</Text>
<Text fontSize="13px">{phone}</Text>
</div>
<div className="row">
<Text fontSize="13px">{t("AboutCompanyEmailTitle")}:</Text>
<Link
color="#2DA7DB"
fontSize="13px"
fontWeight="600"
href={`mailto:${email}`}
>
{email}
</Link>
</div>
<AboutContent personal={personal} versionAppServer={versionAppServer} />
</BodyStyle>
);
};