[mobile] Added About

apps/common/mobile/lib/view/About.jsx

@@ -0,0 +1,115 @@
+import React, { Fragment } from 'react';
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, Link } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageAbout = props => {
+    const { t } = useTranslation();
+    const _t = t("About", { returnObjects: true });
+    const store = props.storeAppOptions;
+    const isCanBranding = store.canBranding;
+    const licInfo = isCanBranding ? store.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;
+
+    const publisherUrl = __PUBLISHER_URL__,
+        publisherPrintUrl = publisherUrl.replace(/https?:\/{2}|\/$/,"");
+
+    return (
+        <Page className="about">
+            <Navbar title={_t.textAbout} backLink={_t.textBack} />
+            {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? (
+                <Fragment>
+                    <div className="content-block">
+                        {logoCustomer && logoCustomer.length ? (
+                            <div id="settings-about-logo" className="settings-about-logo">
+                                <img src={logoCustomer} alt="" />
+                            </div>
+                        ) : null}
+                    </div>
+                    <div className="content-block">
+                        <h3>{_t.textNameEditor}</h3>
+                        <h3>{_t.textVersion} {__PRODUCT_VERSION__}</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}
+                        {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">{__PUBLISHER_NAME__}</h3>
+                        <p>
+                            <Link className="external" target="_blank" href={publisherUrl}>{publisherPrintUrl}</Link>
+                        </p>
+                    </div>
+                </Fragment>
+            ) : (
+                <Fragment>
+                    <div className="content-block">
+                        <div className="logo"></div>
+                    </div>
+                    <div className="content-block">
+                        <h3>{_t.textNameEditor}</h3>
+                        <h3>{_t.textVersion} {__PRODUCT_VERSION__}</h3>
+                    </div>
+                    <div className="content-block">
+                        <h3 id="settings-about-name" className="vendor">{__PUBLISHER_NAME__}</h3>
+                        <p>
+                            <label>{_t.textAddress}:</label>
+                            <a id="settings-about-address" className="external">{__PUBLISHER_ADDRESS__}</a>
+                        </p>
+                        <p>
+                            <label>{_t.textEmail}:</label>
+                            <a id="settings-about-email" className="external" href={`mailto:${__SUPPORT_EMAIL__}`}>{__SUPPORT_EMAIL__}</a>
+                        </p>
+                        <p>
+                            <label>{_t.textTel}:</label>
+                            <a id="settings-about-tel" className="external" href={`tel:${__PUBLISHER_PHONE__}`}>{__PUBLISHER_PHONE__}</a>
+                        </p>
+                        <p>
+                            <a id="settings-about-url" className="external" target="_blank" href={publisherUrl}>{publisherPrintUrl}</a>
+                        </p>
+                    </div>
+                </Fragment>
+            )}
+        </Page>
+    );
+};
+
+const About = inject("storeAppOptions")(observer(PageAbout));
+
+export default About;

apps/common/mobile/resources/less/common-ios.less

@@ -385,6 +385,10 @@
         }
     }
 
+    .content-block {
+        color: @blockTitleColor;
+    }
+
     .dataview, #add-table, #add-shape, #add-slide, #add-chart {
         &.page-content, .page-content {
             background-color: @white;

apps/common/mobile/resources/less/common.less

@@ -84,6 +84,15 @@
     }
 }
 
+.about {
+    .content-block {
+        margin: 0 auto 15px;
+        a {
+            color: @black;
+        }
+    }
+}
+
 .content-block {
     margin: 32px 0;
     padding: 0 16px;

apps/documenteditor/mobile/locale/en.json

@@ -384,5 +384,15 @@
     "textStartAt": "Start At",
     "textLocation": "Location",
     "textFormat": "Format"
+  },
+  "About": {
+    "textNameEditor": "DOCUMENT EDITOR",
+    "textAbout": "About",
+    "textVersion": "Version",
+    "textEmail": "Email",
+    "textAddress": "Address",
+    "textTel": "Tel",
+    "textPoweredBy": "Powered By",
+    "textBack": "Back"
   }
 }

apps/documenteditor/mobile/src/view/settings/Settings.jsx

@@ -11,6 +11,7 @@ import { DownloadController } from "../../controller/settings/Download";
 import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
 import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./DocumentSettings";
 import { MacrosSettings } from "./ApplicationSettings";
+import About from '../../../../../common/mobile/lib/view/About';
 
 const routes = [
     {
@@ -48,6 +49,10 @@ const routes = [
     {
         path: '/color-schemes/',
         component: DocumentColorSchemes
+    },
+    {
+        path: '/about/',
+        component: About
     }
 ];
 
@@ -151,7 +156,7 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
                         </ListItem>
                     }
                     {_canAbout &&
-                        <ListItem title={_t.textAbout} link="#">
+                        <ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/about/")}>
                             <Icon slot="media" icon="icon-about"></Icon>
                         </ListItem>
                     }

apps/presentationeditor/mobile/locale/en.json

@@ -268,5 +268,15 @@
       "textStandartColors": "Standard Colors",
       "textCustomColors": "Custom Colors"
     }
+  },
+  "About": {
+    "textNameEditor": "PRESENTATION EDITOR",
+    "textAbout": "About",
+    "textVersion": "Version",
+    "textEmail": "Email",
+    "textAddress": "Address",
+    "textTel": "Tel",
+    "textPoweredBy": "Powered By",
+    "textBack": "Back"
   }
 }

apps/presentationeditor/mobile/src/view/settings/Settings.jsx

@@ -9,7 +9,8 @@ import DownloadController from "../../controller/settings/Download";
 import PresentationInfoController from "../../controller/settings/PresentationInfo";
 import PresentationSettingsController from "../../controller/settings/PresentationSettings";
 import { PresentationColorSchemes } from "./PresentationSettings";
-import PresentationAboutController from '../../controller/settings/PresentationAbout';
+// import PresentationAboutController from '../../controller/settings/PresentationAbout';
+import About from '../../../../../common/mobile/lib/view/About';
 
 const routes = [
     {
@@ -42,7 +43,7 @@ const routes = [
     },
     {
         path: '/about/',
-        component: PresentationAboutController
+        component: About
     }
     /*{
         path: '/presentation-settings/',

apps/spreadsheeteditor/mobile/locale/en.json

@@ -323,5 +323,15 @@
             "textEditUser": "Users who are editing the file:",
             "textComments": "Comments"
         }
+    },
+    "About": {
+        "textNameEditor": "SPREADSHEET EDITOR",
+        "textAbout": "About",
+        "textVersion": "Version",
+        "textEmail": "Email",
+        "textAddress": "Address",
+        "textTel": "Tel",
+        "textPoweredBy": "Powered By",
+        "textBack": "Back"
     }
 }

apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx

@@ -9,7 +9,8 @@ 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';
+// import SpreadsheetAbout from './SpreadsheetAbout.jsx';
+import About from '../../../../../common/mobile/lib/view/About';
 
 const routes = [
     {
@@ -57,8 +58,8 @@ const routes = [
         component: SpreadsheetInfoController
     },
     {
-        path: '/spreadsheet-about/',
+        path: '/about/',
-        component: SpreadsheetAbout
+        component: About
     }
 ];
 
@@ -137,7 +138,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="#" onClick={onoptionclick.bind(this, "/spreadsheet-about/")}>
+                    <ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/about/")}>
                         <Icon slot="media" icon="icon-about"></Icon>
                     </ListItem>
                 </List>