From 89eff1f6b81e22aeed2b467b0f3b8fb9c00bb314 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 26 Jan 2021 20:09:40 +0300 Subject: [PATCH] [PE mobile] Added the ability to insert tables --- .../mobile/resources/less/common-ios.less | 2 +- apps/presentationeditor/mobile/locale/en.json | 8 +- .../mobile/src/controller/Main.jsx | 8 +- .../mobile/src/controller/add/AddOther.jsx | 102 ++++++++++++++++++ .../mobile/src/store/mainStore.js | 6 +- .../mobile/src/store/tableSettings.js | 21 ++++ .../mobile/src/view/add/Add.jsx | 12 ++- .../mobile/src/view/add/AddOther.jsx | 54 ++++++++++ 8 files changed, 204 insertions(+), 9 deletions(-) create mode 100644 apps/presentationeditor/mobile/src/controller/add/AddOther.jsx create mode 100644 apps/presentationeditor/mobile/src/store/tableSettings.js create mode 100644 apps/presentationeditor/mobile/src/view/add/AddOther.jsx 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: + '
' + + '
' + + '
' + _t.textColumns + '
' + + '
' + _t.textRows + '
' + + '
' + + '
' + + '
', + 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 ( + + ) + } +} + +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: }); - /*tabs.push({ + tabs.push({ caption: _t.textOther, id: 'add-other', icon: 'icon-add-other', component: - });*/ + }); return ( 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 ( + + +
+
    + {styles.map((style, index) => { + return ( +
  • {props.onStyleClick(style.templateId)}}> + +
    • + ) + })} +
+
+ + ) +}; + + +const AddOther = props => { + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + return ( + + + + + + + + + ) +}; + +const PageAddTable = inject("storeTableSettings")(observer(PageTable)); + +export {AddOther, + PageAddTable}; \ No newline at end of file