[PE mobile] Added the ability to insert tables

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

@@ -367,7 +367,7 @@
     }
 
     .dataview, #add-table, #add-shape, #add-slide {
-        &.page-content {
+        &.page-content, .page-content {
             background-color: @white;
         }
     }

apps/presentationeditor/mobile/locale/en.json

@@ -87,7 +87,13 @@
       "notcriticalErrorTitle": "Warning",
       "textAddress": "Address",
       "textImageURL": "Image URL",
-      "textInsertImage": "Insert Image"
+      "textInsertImage": "Insert Image",
+      "textTable": "Table",
+      "textComment": "Comment",
+      "textTableSize": "Table Size",
+      "textColumns": "Columns",
+      "textRows": "Rows",
+      "textCancel": "Cancel"
     },
     "Edit": {
       "textText": "Text",

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

@@ -5,7 +5,7 @@ import { f7 } from "framework7-react";
 import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
 
-@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings")
+@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -298,6 +298,12 @@ class MainController extends Component {
         this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => {
             storeTextSettings.resetLineSpacing(vc);
         });
+
+        //table settings
+        const storeTableSettings = this.props.storeTableSettings;
+        this.api.asc_registerCallback('asc_onInitTableTemplates', (templates) => {
+            storeTableSettings.initTableTemplates(templates);
+        });
     }
 
     _onDocumentContentReady() {

apps/presentationeditor/mobile/src/controller/add/AddOther.jsx

@@ -0,0 +1,102 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import { withTranslation} from 'react-i18next';
+
+import {AddOther} from '../../view/add/AddOther';
+
+class AddOtherController extends Component {
+    constructor (props) {
+        super(props);
+        this.onStyleClick = this.onStyleClick.bind(this);
+        this.initStyleTable = this.initStyleTable.bind(this);
+
+        this.initTable = false;
+    }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('.add-popup', true);
+        } else {
+            f7.popover.close('#add-popover');
+        }
+    }
+
+    initStyleTable () {
+        if (!this.initTable) {
+            const api = Common.EditorApi.get();
+            api.asc_GetDefaultTableStyles();
+            this.initTable = true;
+        }
+    }
+
+    onStyleClick (type) {
+        const api = Common.EditorApi.get();
+
+        this.closeModal();
+
+        const { t } = this.props;
+        const _t = t("View.Add", { returnObjects: true });
+
+        let picker;
+
+        const dialog = f7.dialog.create({
+            title: _t.textTableSize,
+            text: '',
+            content:
+                '<div class="content-block">' +
+                '<div class="row">' +
+                '<div class="col-50">' + _t.textColumns + '</div>' +
+                '<div class="col-50">' + _t.textRows + '</div>' +
+                '</div>' +
+                '<div id="picker-table-size"></div>' +
+                '</div>',
+            buttons: [
+                {
+                    text: _t.textCancel
+                },
+                {
+                    text: 'OK',
+                    bold: true,
+                    onClick: function () {
+                        const size = picker.value;
+
+                        api.put_Table(parseInt(size[0]), parseInt(size[1]), undefined, type.toString());
+                    }
+                }
+            ]
+        }).open();
+        dialog.on('opened', () => {
+            picker = f7.picker.create({
+                containerEl: document.getElementById('picker-table-size'),
+                cols: [
+                    {
+                        textAlign: 'center',
+                        width: '100%',
+                        values: [1,2,3,4,5,6,7,8,9,10]
+                    },
+                    {
+                        textAlign: 'center',
+                        width: '100%',
+                        values: [1,2,3,4,5,6,7,8,9,10]
+                    }
+                ],
+                toolbar: false,
+                rotateEffect: true,
+                value: [3, 3]
+            });
+        });
+    }
+
+    render () {
+        return (
+            <AddOther onStyleClick={this.onStyleClick}
+                      initStyleTable={this.initStyleTable}
+            />
+        )
+    }
+}
+
+const AddOtherWithTranslation = withTranslation()(AddOtherController);
+
+export {AddOtherWithTranslation as AddOtherController};

apps/presentationeditor/mobile/src/store/mainStore.js

@@ -14,7 +14,7 @@ import { storeShapeSettings } from './shapeSettings';
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
 // import {storeImageSettings} from "./imageSettings";
-// import {storeTableSettings} from "./tableSettings";
+import {storeTableSettings} from "./tableSettings";
 // import {storeChartSettings} from "./chartSettings";
 
 export const stores = {
@@ -28,11 +28,11 @@ export const stores = {
     storeSlideSettings: new storeSlideSettings(),
     storePalette: new storePalette(),
     storeTextSettings: new storeTextSettings(),
-    storeShapeSettings: new storeShapeSettings()
+    storeShapeSettings: new storeShapeSettings(),
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),
     // storeChartSettings: new storeChartSettings(),
-    // storeTableSettings: new storeTableSettings()
+    storeTableSettings: new storeTableSettings()
 };
 

apps/presentationeditor/mobile/src/store/tableSettings.js

@@ -0,0 +1,21 @@
+import {action, observable, computed} from 'mobx';
+import {f7} from 'framework7-react';
+
+export class storeTableSettings {
+    @observable _templates = [];
+
+    @action initTableTemplates(templates) {
+        this._templates = templates;
+    }
+
+    @computed get styles() {
+        let styles = [];
+        for (let template of this._templates) {
+            styles.push({
+                imageUrl: template.asc_getImage(),
+                templateId: template.asc_getId()
+            });
+        }
+        return styles;
+    }
+}

apps/presentationeditor/mobile/src/view/add/Add.jsx

@@ -9,13 +9,19 @@ import AddSlideController from "../../controller/add/AddSlide";
 import AddShapeController from "../../controller/add/AddShape";
 import {AddImageController} from "../../controller/add/AddImage";
 import {PageImageLinkSettings} from "./AddImage";
-//import AddOtherController from "../../controller/add/AddOther";
+import {AddOtherController} from "../../controller/add/AddOther";
+import {PageAddTable} from "./AddOther";
 
 const routes = [
     // Image
     {
         path: '/add-image-from-url/',
         component: PageImageLinkSettings
+    },
+    // Other
+    {
+        path: '/add-table/',
+        component: PageAddTable
     }
 ];
 
@@ -69,12 +75,12 @@ const AddTabs = props => {
         icon: 'icon-add-image',
         component: <AddImageController />
     });
-    /*tabs.push({
+    tabs.push({
         caption: _t.textOther,
         id: 'add-other',
         icon: 'icon-add-other',
         component: <AddOtherController />
-    });*/
+    });
     return (
         <View style={props.style} stackPages={true} routes={routes}>
             <Page pageContent={false}>

apps/presentationeditor/mobile/src/view/add/AddOther.jsx

@@ -0,0 +1,54 @@
+import React, {useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from "../../../../../common/mobile/utils/device";
+
+const PageTable = props => {
+    props.initStyleTable();
+    const { t } = useTranslation();
+    const _t = t('View.Add', {returnObjects: true});
+    const storeTableSettings = props.storeTableSettings;
+    const styles = storeTableSettings.styles;
+    return (
+        <Page id={'add-table'}>
+            <Navbar title={_t.textTable} backLink={_t.textBack}/>
+            <div className={'table-styles dataview'}>
+                <ul className="row">
+                    {styles.map((style, index) => {
+                        return (
+                            <li key={index}
+                                onClick={() => {props.onStyleClick(style.templateId)}}>
+                                <img src={style.imageUrl}/>
+                            </li>
+                        )
+                    })}
+                </ul>
+            </div>
+        </Page>
+    )
+};
+
+
+const AddOther = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Add', {returnObjects: true});
+    return (
+        <List>
+            <ListItem title={_t.textTable} link={'/add-table/'} routeProps={{
+                onStyleClick: props.onStyleClick,
+                initStyleTable: props.initStyleTable
+            }}>
+                <Icon slot="media" icon="icon-add-table"></Icon>
+            </ListItem>
+            <ListItem title={_t.textComment}>
+                <Icon slot="media" icon="icon-insert-comment"></Icon>
+            </ListItem>
+        </List>
+    )
+};
+
+const PageAddTable = inject("storeTableSettings")(observer(PageTable));
+
+export {AddOther,
+        PageAddTable};