[PE mobile] Make Presentation About

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/less/app-ios.less

@@ -27,3 +27,64 @@
         color: #212121;
     }
 }
+
+// About 
+
+.content-block {
+    margin: 35px 0;
+    padding: 0 15px;
+    color: #6d6d72;
+    box-sizing: border-box;
+}
+
+.about .page-content {
+    text-align: center;
+}
+
+.about .content-block {
+    margin: 0 auto 15px;
+}
+
+.about .content-block:first-child {
+    margin: 15px 0;
+}
+
+.about .logo {
+    margin-top: 20px;
+    display: inline-block; 
+    width: 100%;
+    height: 55px;
+}
+
+.about h3 {
+    font-weight: 400;
+    margin: 0;
+}
+
+.about h3.vendor {
+    color: #000;
+    font-weight: 700;
+    margin-top: 15px;
+}
+
+.about p > label {
+    margin-right: 5px;
+}
+
+.about .content-block a {
+    color: #000;
+}
+
+.content-block-inner {
+    background: #fff;
+    padding: 10px 15px;
+    margin-left: -15px;
+    width: 100%;
+    position: relative;
+    color: #000;
+}
+
+
+
+
+

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

@@ -45,4 +45,61 @@
         margin-left: 20px;
         color: #212121;
     }
-}
+}
+
+// About 
+
+.content-block {
+    margin: 35px 0;
+    padding: 0 15px;
+    color: #6d6d72;
+    box-sizing: border-box;
+}
+
+.about .page-content {
+    text-align: center;
+}
+
+.about .content-block {
+    margin: 0 auto 15px;
+}
+
+.about .content-block:first-child {
+    margin: 15px 0;
+}
+
+.about .logo {
+    margin-top: 20px;
+    display: inline-block; 
+    width: 100%;
+    height: 55px;
+}
+
+.about h3 {
+    font-weight: 400;
+    margin: 0;
+}
+
+.about h3.vendor {
+    color: #000;
+    font-weight: 700;
+    margin-top: 15px;
+}
+
+.about p > label {
+    margin-right: 5px;
+}
+
+.about .content-block a {
+    color: #000;
+}
+
+.content-block-inner {
+    background: #fff;
+    padding: 10px 15px;
+    margin-left: -15px;
+    width: 100%;
+    position: relative;
+    color: #000;
+}
+

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

@@ -0,0 +1,104 @@
+import React, { Fragment } from 'react';
+import { observer, inject } from "mobx-react";
+import { Page, Navbar } 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;
+    let customer;
+    let nameCustomer;
+    let addressCustomer;
+    let mailCustomer;
+    let urlCustomer;
+    let infoCustomer;
+    let logoCustomer;
+
+    if(licInfo) {
+        customer = licInfo.customer;
+        nameCustomer = customer.name;
+        addressCustomer = customer.address;
+        mailCustomer = customer.mail;
+        urlCustomer = customer.www;
+        infoCustomer = customer.info;
+        logoCustomer = customer.logo;
+    }
+
+    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(licInfo.customer)=='object' ? null : (
+                    <div className="logo"></div>
+                )}
+                {logoCustomer && logoCustomer.length ? (
+                    <div id="settings-about-logo" style={{marginTop: "20px"}}>
+                        <img src={logoCustomer} style={{maxWidth: "216px", maxHeight: "35px"}} />
+                    </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>
+                        <a id="settings-about-address" className="external" href="#">{addressCustomer}</a>
+                    </p>
+                ) : null}
+                {mailCustomer && mailCustomer.length ? (
+                    <p>
+                        <label>{_t.textEmail}</label>
+                        <a id="settings-about-email" className="external" target="_blank" href={"mailto:"+mailCustomer}>{mailCustomer}</a>
+                    </p>
+                ) : null}
+                {licInfo && typeof licInfo == 'object' && typeof(licInfo.customer)=='object' ? null : (
+                    <p>
+                        <label>{_t.textTel}</label>
+                        <a id="settings-about-tel" className="external" target="_blank" href="tel:+37163399867>">+371 633-99867</a>
+                    </p>
+                )}
+                {urlCustomer && urlCustomer.length ? (
+                    <p>
+                        <a id="settings-about-url" className="external" target="_blank" 
+                            href={!/^https?:\/{2}/i.test(urlCustomer) ? "http:\/\/" : '' + urlCustomer}>
+                            {urlCustomer}
+                        </a>
+                    </p>
+                ) : null} 
+                {infoCustomer && infoCustomer.length ? (
+                    <p>
+                        <label id="settings-about-info">{infoCustomer}</label>
+                    </p>
+                ) : null}
+            </div>
+            {licInfo && typeof licInfo == 'object' && typeof(licInfo.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>
+                        <a className="external" target="_blank" href="www.onlyoffice.com">www.onlyoffice.com</a>
+                    </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/',
@@ -105,7 +110,7 @@ const SettingsList = withTranslation()(props => {
                     <ListItem title={_t.textHelp} link="#">
                         <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>