diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 6a19b5450..038517442 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -55,6 +55,15 @@ "textShape": "Shape", "textImage": "Image", "textOther": "Other" + }, + "Edit": { + "textText": "Text", + "textSlide": "Slide", + "textTable": "Table", + "textShape": "Shape", + "textImage": "Image", + "textChart": "Chart", + "textHyperlink": "Hyperlink" } } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index 06c2b87c1..f01785a89 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/mobile/src/controller/Main.jsx @@ -4,6 +4,7 @@ import { inject } from "mobx-react"; import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' +@inject("storeFocusObjects") class MainController extends Component { constructor(props) { super(props) @@ -170,6 +171,11 @@ class MainController extends Component { // me.api.asc_registerCallback('asc_onPrintUrl', _.bind(me.onPrintUrl, me)); // me.api.asc_registerCallback('asc_onThumbnailsShow', _.bind(me.onThumbnailsShow, me)); // me.api.asc_registerCallback('asc_onMeta', _.bind(me.onMeta, me)); + + const storeFocusObjects = this.props.storeFocusObjects; + this.api.asc_registerCallback('asc_onFocusObject', objects => { + storeFocusObjects.resetFocusObjects(objects); + }); } _onDocumentContentReady() { diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx new file mode 100644 index 000000000..67aae4433 --- /dev/null +++ b/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx @@ -0,0 +1,20 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {observer, inject} from "mobx-react"; + +import { EditSlide } from '../../view/edit/EditSlide'; + +class EditSlideController extends Component { + constructor (props) { + super(props); + } + render () { + return ( + + ) + } +} + +export default EditSlideController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx new file mode 100644 index 000000000..62bd4ae93 --- /dev/null +++ b/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx @@ -0,0 +1,20 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {observer, inject} from "mobx-react"; + +import { EditText } from '../../view/edit/EditText'; + +class EditTextController extends Component { + constructor (props) { + super(props); + } + render () { + return ( + + ) + } +} + +export default EditTextController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx index 35e780a6f..dbdddc29c 100644 --- a/apps/presentationeditor/mobile/src/page/main.jsx +++ b/apps/presentationeditor/mobile/src/page/main.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react'; -// import EditOptions from '../view/edit/Edit'; +import EditOptions from '../view/edit/Edit'; import AddOptions from '../view/add/Add'; import Settings from '../view/settings/Settings'; import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx' @@ -64,10 +64,10 @@ export default class MainPage extends Component { {/* Page content */} - {/*{*/} - {/*!this.state.editOptionsVisible ? null :*/} - {/**/} - {/*}*/} + { + !this.state.editOptionsVisible ? null : + + } { !this.state.addOptionsVisible ? null : diff --git a/apps/presentationeditor/mobile/src/store/focusObjects.js b/apps/presentationeditor/mobile/src/store/focusObjects.js new file mode 100644 index 000000000..c3be75a17 --- /dev/null +++ b/apps/presentationeditor/mobile/src/store/focusObjects.js @@ -0,0 +1,55 @@ +import {action, observable, computed} from 'mobx'; + +export class storeFocusObjects { + @observable _focusObjects = []; + + @action resetFocusObjects(objects) { + this._focusObjects = objects; + } + + @computed get settings() { + const _settings = []; + let no_text = true; + for (let object of this._focusObjects) { + const type = object.get_ObjectType(), + objectValue = object.get_ObjectValue(); + if (Asc.c_oAscTypeSelectElement.Paragraph == type) { + if ( !objectValue.get_Locked() ) + no_text = false; + } else if (Asc.c_oAscTypeSelectElement.Table == type) { + if ( !objectValue.get_Locked() ) { + _settings.push('table'); + no_text = false; + } + } else if (Asc.c_oAscTypeSelectElement.Slide == type) { + if ( !(objectValue.get_LockLayout() || objectValue.get_LockBackground() || objectValue.get_LockTransition() || objectValue.get_LockTiming() )) + _settings.push('slide'); + } else if (Asc.c_oAscTypeSelectElement.Image == type) { + if ( !objectValue.get_Locked() ) + _settings.push('image'); + } else if (Asc.c_oAscTypeSelectElement.Chart == type) { + if ( !objectValue.get_Locked() ) + _settings.push('chart'); + } else if (Asc.c_oAscTypeSelectElement.Shape == type && !objectValue.get_FromChart()) { + if ( !objectValue.get_Locked() ) { + _settings.push('shape'); + no_text = false; + } + } else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) { + _settings.push('hyperlink'); + } + } + if (!no_text && _settings.indexOf('image') < 0) + _settings.unshift('text'); + const resultArr = _settings.filter((value, index, self) => self.indexOf(value) === index); //get uniq array + // Exclude hyperlink if text is locked + if (resultArr.indexOf('hyperlink') > -1 && resultArr.indexOf('text') < 0) { + resultArr.splice(resultArr.indexOf('hyperlink'), 1); + } + // Exclude shapes if chart exist + if (resultArr.indexOf('chart') > -1) { + resultArr.splice(resultArr.indexOf('shape'), 1); + } + return resultArr; + } +} \ 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 3a22172b7..6743216f6 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -1,6 +1,6 @@ // import {storeDocumentSettings} from './documentSettings'; -// import {storeFocusObjects} from "./focusObjects"; +import {storeFocusObjects} from "./focusObjects"; import {storeUsers} from '../../../../common/mobile/lib/store/users'; import {storeApplicationSettings} from './applicationSettings'; // import {storeTextSettings} from "./textSettings"; @@ -11,7 +11,7 @@ import {storeApplicationSettings} from './applicationSettings'; // import {storeChartSettings} from "./chartSettings"; export const stores = { - // storeFocusObjects: new storeFocusObjects(), + storeFocusObjects: new storeFocusObjects(), // storeDocumentSettings: new storeDocumentSettings(), users: new storeUsers(), storeApplicationSettings: new storeApplicationSettings() diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx new file mode 100644 index 000000000..8c9ccd45c --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -0,0 +1,183 @@ +import React, {useState, useEffect} from 'react'; +import {observer, inject} from "mobx-react"; +import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react'; +import { f7 } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; + +import EditSlideController from "../../controller/edit/EditSlide"; +import EditTextController from "../../controller/edit/EditText"; +//import EditShapeController from "../../controller/edit/EditShape"; +//import EditImageController from "../../controller/edit/EditImage"; +//import EditTableController from "../../controller/edit/EditTable"; +//import EditChartController from "../../controller/edit/EditChart"; +//import EditLinkController from "../../controller/edit/EditLink"; + +const routes = [ + +]; + +const EmptyEditLayout = () => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + return ( + + + + {_t.textSelectObjectToEdit} + + + + ) +}; + +const EditLayoutNavbar = ({ editors, inPopover }) => { + const isAndroid = Device.android; + return ( + + { + editors.length > 1 ? + + {editors.map((item, index) => {item.caption})} + {isAndroid && } + : + { editors[0].caption } + } + { !inPopover && } + + ) +}; + +const EditLayoutContent = ({ editors }) => { + if (editors.length > 1) { + return ( + + {editors.map((item, index) => + + {item.component} + + )} + + ) + } else { + return ( + + {editors[0].component} + + ) + } +}; + +const EditTabs = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + const settings = props.storeFocusObjects.settings; + let editors = []; + if (settings.length < 1) { + editors.push({ + caption: _t.textSettings, + component: + }); + } else { + if (settings.indexOf('slide') > -1) { + editors.push({ + caption: _t.textSlide, + id: 'edit-slide', + component: + }) + } + if (settings.indexOf('text') > -1) { + editors.push({ + caption: _t.textText, + id: 'edit-text', + component: + }) + } + /*if (settings.indexOf('table') > -1) { + editors.push({ + caption: _t.textTable, + id: 'edit-table', + component: + }) + } + if (settings.indexOf('shape') > -1) { + editors.push({ + caption: _t.textShape, + id: 'edit-shape', + component: + }) + } + if (settings.indexOf('image') > -1) { + editors.push({ + caption: _t.textImage, + id: 'edit-image', + component: + }) + } + if (settings.indexOf('chart') > -1) { + editors.push({ + caption: _t.textChart, + id: 'edit-chart', + component: + }) + } + if (settings.indexOf('hyperlink') > -1) { + editors.push({ + caption: _t.textHyperlink, + id: 'edit-link', + component: + }) + }*/ + } + + return ( + + + + + + + ) +}; + +const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs)); + +const EditView = props => { + const onOptionClick = (page) => { + $f7.views.current.router.navigate(page); + }; + const show_popover = props.usePopover; + return ( + show_popover ? + props.onClosed()}> + + : + props.onClosed()}> + + + ) +}; + +const EditOptions = props => { + useEffect(() => { + if ( Device.phone ) + f7.sheet.open('#edit-sheet'); + else f7.popover.open('#edit-popover', '#btn-edit'); + + return () => { + // component will unmount + } + }); + + const onviewclosed = () => { + if ( props.onclosed ) + props.onclosed(); + }; + + return ( + + ) +}; + +export default EditOptions; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx new file mode 100644 index 000000000..d9b7009b1 --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx @@ -0,0 +1,15 @@ +import React, {Fragment, useState} from 'react'; +import {observer, inject} from "mobx-react"; +import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; + +const EditSlide = props => { + return ( + + + + ) +}; + +export {EditSlide}; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx new file mode 100644 index 000000000..76cd8df00 --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx @@ -0,0 +1,15 @@ +import React, {Fragment, useState} from 'react'; +import {observer, inject} from "mobx-react"; +import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; + +const EditText = props => { + return ( + + + + ) +}; + +export {EditText}; \ No newline at end of file
{_t.textSelectObjectToEdit}