From 4ed2a8a3c42a7724f9a47b609bd53e1db4059757 Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Mon, 1 Mar 2021 21:11:29 +0300
Subject: [PATCH] [SSE mobile] Added Spreadsheet About

---
 apps/common/mobile/resources/less/common.less |  3 +
 apps/spreadsheeteditor/mobile/locale/en.json  |  7 +-
 .../mobile/src/view/settings/Settings.jsx     |  7 +-
 .../src/view/settings/SpreadsheetAbout.jsx    | 98 +++++++++++++++++++
 4 files changed, 113 insertions(+), 2 deletions(-)
 create mode 100644 apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx

diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index 034ffc5d2..8988e12c8 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -1,3 +1,4 @@
+@import './about';
 
 @white: #ffffff;
 @black: #000000;
@@ -662,3 +663,5 @@ input[type="number"]::-webkit-inner-spin-button {
 
 
 
+
+
diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json
index b5fa8b4a1..a3174d952 100644
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@@ -285,7 +285,12 @@
             "textLastModifiedBy": "Last Modified By",
             "textCreated": "Created",
             "textApplication": "Application",
-            "textAuthor": "Author"
+            "textAuthor": "Author",
+            "textVersion": "Version",
+            "textEmail": "Email",
+            "textAddress": "Address",
+            "textTel": "Tel",
+            "textPoweredBy": "Powered By"
         }
     },
     "Common": {
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
index a994ff86c..70a87ae49 100644
--- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
@@ -9,6 +9,7 @@ import SpreadsheetInfoController from '../../controller/settings/SpreadsheetInfo
 import {DownloadWithTranslation} from '../../controller/settings/Download.jsx';
 import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx';
 import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx';
+import SpreadsheetAbout from './SpreadsheetAbout.jsx';
 
 const routes = [
     {
@@ -54,6 +55,10 @@ const routes = [
     {
         path: '/spreadsheet-info/',
         component: SpreadsheetInfoController
+    },
+    {
+        path: '/spreadsheet-about/',
+        component: SpreadsheetAbout
     }
 ];
 
@@ -132,7 +137,7 @@ const SettingsList = withTranslation()(props => {
                     <ListItem title={_t.textHelp} link="#" onClick={showHelp}>
                         <Icon slot="media" icon="icon-help"></Icon>
                     </ListItem>
-                    <ListItem title={_t.textAbout} link="#">
+                    <ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/spreadsheet-about/")}>
                         <Icon slot="media" icon="icon-about"></Icon>
                     </ListItem>
                 </List>
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx
new file mode 100644
index 000000000..532e0435a
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx
@@ -0,0 +1,98 @@
+import React, { Fragment } from 'react';
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, Link } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageSpreadsheetAbout = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const storeAppOptions = props.storeAppOptions;
+    const isCanBranding = storeAppOptions.canBranding;
+    const licInfo = isCanBranding ? storeAppOptions.customization : null;
+    const customer = licInfo ? licInfo.customer : null;
+    const nameCustomer = customer ? customer.name : null;
+    const mailCustomer = customer ? customer.mail : null;
+    const addressCustomer = customer ? customer.address : null;
+    const urlCustomer = customer ? customer.www : null;
+    const infoCustomer = customer ? customer.info : null;
+    const logoCustomer = customer ? customer.logo : null;
+
+    // console.log(storeAppOptions);
+    // console.log(isCanBranding);
+
+    return (
+        <Page className="about">
+            <Navbar title={_t.textAbout} backLink={_t.textBack} />
+            {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? 
+                <Fragment>
+                    <div className="content-block">
+                        {/* {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? null : (
+                            <i className="logo"></i>
+                        )} */}
+                        {logoCustomer && logoCustomer.length ? (
+                            <div id="settings-about-logo" className="settings-about-logo">
+                                <img src={logoCustomer} />
+                            </div>
+                        ) : null}
+                    </div>
+                    <div className="content-block">
+                        <h3>SPREADSHEET EDITOR</h3>
+                        <h3>{_t.textVersion} 6.1.1</h3>
+                    </div>
+                    <div className="content-block">
+                        {nameCustomer && nameCustomer.length ? (
+                            <h3 id="settings-about-name" className="vendor">{nameCustomer}</h3>
+                        ) : null}
+                        {addressCustomer && addressCustomer.length ? (
+                            <p>
+                                <label>{_t.textAddress}</label>
+                                <Link id="settings-about-address" className="external">{addressCustomer}</Link>
+                            </p>
+                        ) : null}
+                        {mailCustomer && mailCustomer.length ? (
+                            <p>
+                                <label>{_t.textEmail}</label>
+                                <Link id="settings-about-email" className="external" target="_blank" href={"mailto:"+mailCustomer}>{mailCustomer}</Link>
+                            </p>
+                        ) : null}
+                        <p>
+                            <label>{_t.textTel}</label>
+                            <Link id="settings-about-tel" className="external" target="_blank" href="tel:+37163399867">+371 633-99867</Link>
+                        </p>
+                        {urlCustomer && urlCustomer.length ? (
+                            <p>
+                                <Link id="settings-about-url" className="external" target="_blank" 
+                                    href={!/^https?:\/{2}/i.test(urlCustomer) ? "http:\/\/" : '' + urlCustomer}>
+                                    {urlCustomer}
+                                </Link>
+                            </p>
+                        ) : null} 
+                        {infoCustomer && infoCustomer.length ? (
+                            <p>
+                                <label id="settings-about-info">{infoCustomer}</label>
+                            </p>
+                        ) : null}
+                    </div>
+                    <div className="content-block" id="settings-about-licensor">
+                        <div className="content-block-inner"></div>
+                        <p>
+                            <label>{_t.textPoweredBy}</label>
+                        </p>
+                        <h3 className="vendor">Ascensio System SIA</h3>
+                        <p>
+                            <Link className="external" target="_blank" href="www.onlyoffice.com">www.onlyoffice.com</Link>
+                        </p>
+                    </div>
+                </Fragment> :
+                <Fragment>
+                    <div className="content-block">
+                        <i className="logo"></i>
+                    </div>
+                </Fragment>}
+        </Page>
+    );
+};
+
+const SpreadsheetAbout = inject("storeAppOptions")(observer(PageSpreadsheetAbout));
+
+export default SpreadsheetAbout;
\ No newline at end of file