diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less
index c4e29da77..ed0a5d46e 100644
--- a/apps/common/mobile/resources/less/common-ios.less
+++ b/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;
}
}
diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json
index f73e3be1c..bae19375c 100644
--- a/apps/presentationeditor/mobile/locale/en.json
+++ b/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",
diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx
index 40c892ac1..5633a9f89 100644
--- a/apps/presentationeditor/mobile/src/controller/Main.jsx
+++ b/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() {
diff --git a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx
new file mode 100644
index 000000000..e2838493e
--- /dev/null
+++ b/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};
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js
index e379be939..078711d47 100644
--- a/apps/presentationeditor/mobile/src/store/mainStore.js
+++ b/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()
};
diff --git a/apps/presentationeditor/mobile/src/store/tableSettings.js b/apps/presentationeditor/mobile/src/store/tableSettings.js
new file mode 100644
index 000000000..3e8f23f30
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/view/add/Add.jsx b/apps/presentationeditor/mobile/src/view/add/Add.jsx
index 7e91fbc50..4adc94947 100644
--- a/apps/presentationeditor/mobile/src/view/add/Add.jsx
+++ b/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}>
diff --git a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
new file mode 100644
index 000000000..f0a016b1e
--- /dev/null
+++ b/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};
\ No newline at end of file