merge feature/mobile-apps-on-reactjs-pe-about into feature/mobile-apps-on-reactjs

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

@@ -0,0 +1,41 @@
+@text-normal: #000;
+
+.about {
+    .page-content {
+        text-align: center;
+    }
+
+    .content-block:first-child {
+        margin: 15px 0;
+    }
+
+    .content-block {
+        margin: 0 auto 15px;
+
+        a {
+            color: @text-normal;
+        }
+    }
+
+    h3 {
+        font-weight: normal;
+        margin: 0;
+
+        &.vendor {
+            color: @text-normal;
+            font-weight: bold;
+            margin-top: 15px;
+        }
+    }
+
+    p > label {
+        margin-right: 5px;
+    }
+
+    .logo {
+          display: inline-block;
+          width: 100%;
+          height: 55px;
+          background: url('../../../../common/mobile/resources/img/about/logo.svg') no-repeat center;
+    }
+}

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

@@ -330,4 +330,10 @@
             }
         }
     }
+
+    .about {
+        .logo {
+            margin-top: 20px;
+        }
+    }
 }

apps/presentationeditor/mobile/locale/en.json

@@ -66,7 +66,12 @@
       "textSlideSize": "Slide Size",
       "mniSlideStandard": "Standard (4:3)",
       "mniSlideWide": "Widescreen (16:9)",
-      "textColorSchemes": "Color Schemes"
+      "textColorSchemes": "Color Schemes",
+      "textVersion": "Version",
+      "textAddress": "address:",
+      "textEmail": "email:",
+      "textTel": "tel:",
+      "textPoweredBy": "Powered By"
     },
     "Add": {
       "textSlide": "Slide",

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -43,6 +43,7 @@ class MainController extends Component {
                 this.props.storeAppOptions.setConfigOptions(this.editorConfig);
 
                 this.editorConfig.lang && this.api.asc_setLocale(this.editorConfig.lang);
+                // console.log(this.editorConfig);
             };
 
             const loadDocument = data => {

apps/presentationeditor/mobile/src/controller/settings/PresentationAbout.jsx

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import PresentationAbout from "../../view/settings/PresentationAbout";
+
+class PresentationAboutController extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <PresentationAbout />
+        );
+    }
+}
+
+
+export default PresentationAboutController;

apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'React';
+import React, {Component} from 'react';
 import { observer, inject } from "mobx-react";
 import {PresentationSettings} from '../../view/settings/PresentationSettings';
 

apps/presentationeditor/mobile/src/less/app.less

@@ -5,6 +5,7 @@
 @import '../../../../common/mobile/resources/less/common.less';
 @import '../../../../common/mobile/resources/less/common-ios.less';
 @import '../../../../common/mobile/resources/less/common-material.less';
+@import '../../../../common/mobile/resources/less/about.less';
 @import './app-material.less';
 @import './app-ios.less';
 @import './icons-ios.less';

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

@@ -0,0 +1,94 @@
+import React, { Fragment } from 'react';
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, Link } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PagePresentationAbout = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { 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;
+
+    console.log(store);
+    console.log(isCanBranding);
+
+    return (
+        <Page className="about">
+            <Navbar title={_t.textAbout} backLink={_t.textBack} />
+            <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>PRESENTATION 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}
+                {licInfo && typeof licInfo == 'object' && typeof(customer)=='object' ? 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>
+            {licInfo && typeof licInfo == 'object' && typeof(customer)=='object' ? (
+                <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>
+            ) : null}
+        </Page>
+    );
+};
+
+const PresentationAbout = inject("storeAppOptions")(observer(PagePresentationAbout));
+
+export default PresentationAbout;

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

@@ -9,6 +9,7 @@ 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';
 
 const routes = [
     {
@@ -38,6 +39,10 @@ const routes = [
     {
         path: '/color-schemes/',
         component: PresentationColorSchemes
+    },
+    {
+        path: '/about/',
+        component: PresentationAboutController
     }
     /*{
         path: '/presentation-settings/',
@@ -68,14 +73,32 @@ const SettingsList = withTranslation()(props => {
         } else {
             f7.popover.close('#settings-popover');
         }
-    }
+    };
 
     const onPrint = () => {
         closeModal();
         const api = Common.EditorApi.get();
         api.asc_Print();
+    };
+
+    const showHelp = () => {
+        // let url = '{{HELP_URL}}';
+        let url = 'https://helpcenter.onlyoffice.com';
+
+        if (url.charAt(url.length-1) !== '/') {
+            url += '/';
         }
 
+        if (Device.sailfish || Device.android) {
+            url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
+        } 
+        else {
+            url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx';
+        }
+
+        closeModal();
+        window.open(url, "_blank");
+    };
 
     return (
         <View style={props.style} stackPages={true} routes={routes}>
@@ -102,10 +125,10 @@ const SettingsList = withTranslation()(props => {
                     <ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>
                         <Icon slot="media" icon="icon-info"></Icon>
                     </ListItem>
-                    <ListItem title={_t.textHelp} link="#">
+                    <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, "/about/")}>
                         <Icon slot="media" icon="icon-about"></Icon>
                     </ListItem>
                 </List>