[SSE mobile] Added edit popover/sheet

apps/spreadsheeteditor/mobile/locale/en.json

@@ -12,6 +12,11 @@
             "textFormula": "Formula",
             "textShape": "Shape",
             "textOther": "Other"
+        },
+        "Edit" : {
+            "textSelectObjectToEdit": "Select object to edit",
+            "textSettings": "Settings",
+            "textCell": "Cell"
         }
     }
 }

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

@@ -5,6 +5,7 @@ import { f7 } from 'framework7-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)
@@ -202,6 +203,14 @@ class MainController extends Component {
         // me.api.asc_registerCallback('asc_onPrintUrl',                   _.bind(me.onPrintUrl, me));
         // me.api.asc_registerCallback('asc_onDocumentName',               _.bind(me.onDocumentName, me));
         me.api.asc_registerCallback('asc_onEndAction',                  me._onLongActionEnd.bind(me));
+
+        const storeFocusObjects = this.props.storeFocusObjects;
+        this.api.asc_registerCallback('asc_onFocusObject', objects => {
+            storeFocusObjects.resetFocusObjects(objects);
+        });
+        this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => {
+            storeFocusObjects.resetCellInfo(cellInfo);
+        });
     }
 
     _onLongActionEnd(type, id) {

apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+import EditCell from '../../view/edit/EditCell';
+
+class EditCellController extends Component {
+    constructor (props) {
+        super(props);
+    }
+
+    render () {
+        return (
+            <EditCell
+            />
+        )
+    }
+}
+
+export default EditCellController;

apps/spreadsheeteditor/mobile/src/page/main.jsx

@@ -7,6 +7,7 @@ import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.
 import CellEditor from '../controller/CellEditor';
 import Statusbar from '../controller/StatusBar'
 import AddOptions from "../view/add/Add";
+import EditOptions from "../view/edit/Edit";
 
 export default class MainPage extends Component {
     constructor(props) {
@@ -67,10 +68,10 @@ export default class MainPage extends Component {
               <CellEditor />
               {/* Page content */}
               <View id="editor_sdk" />
-            {/*{*/}
-                {/*!this.state.editOptionsVisible ? null :*/}
-                    {/*<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />*/}
-            {/*}*/}
+            {
+                !this.state.editOptionsVisible ? null :
+                    <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
+            }
             {
                 !this.state.addOptionsVisible ? null :
                     <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} />

apps/spreadsheeteditor/mobile/src/store/focusObjects.js

@@ -0,0 +1,138 @@
+import {action, observable, computed} from 'mobx';
+
+export class storeFocusObjects {
+    @observable focusOn = undefined;
+
+    @observable _focusObjects = [];
+
+    @action resetFocusObjects(objects) {
+        this.focusOn = 'obj';
+        this._focusObjects = objects;
+    }
+
+    @computed get objects() {
+        const _objects = [];
+        for (let object of this._focusObjects) {
+            const type = object.get_ObjectType();
+
+            if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
+                _objects.push('text', 'paragraph');
+            } else if (Asc.c_oAscTypeSelectElement.Table == type) {
+                _objects.push('table');
+            } else if (Asc.c_oAscTypeSelectElement.Image == type) {
+                if (object.get_ObjectValue().get_ChartProperties()) {
+                    _objects.push('chart');
+                } else if (object.get_ObjectValue().get_ShapeProperties()) {
+                    _objects.push('shape');
+                } else {
+                    _objects.push('image');
+                }
+            } else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
+                _objects.push('hyperlink');
+            }
+        }
+        const resultArr = _objects.filter((value, index, self) => self.indexOf(value) === index); //get uniq array
+        // Exclude shapes if chart exist
+        if (resultArr.indexOf('chart') > -1) {
+            resultArr.splice(resultArr.indexOf('shape'), 1);
+        }
+        return resultArr;
+    }
+
+    @observable _cellInfo;
+
+    @action resetCellInfo (cellInfo) {
+        this.focusOn = 'cell';
+        this._cellInfo = cellInfo;
+    }
+
+    @computed get selections () {
+        const _selections = [];
+
+        let isCell, isRow, isCol, isAll, isChart, isImage, isTextShape, isShape, isTextChart,
+            selType             = this._cellInfo.asc_getSelectionType(),
+            isObjLocked         = false;
+
+        switch (selType) {
+            case Asc.c_oAscSelectionType.RangeCells:    isCell  = true; break;
+            case Asc.c_oAscSelectionType.RangeRow:      isRow   = true; break;
+            case Asc.c_oAscSelectionType.RangeCol:      isCol   = true; break;
+            case Asc.c_oAscSelectionType.RangeMax:      isAll   = true; break;
+            case Asc.c_oAscSelectionType.RangeImage:    isImage = true; break;
+            case Asc.c_oAscSelectionType.RangeShape:    isShape = true; break;
+            case Asc.c_oAscSelectionType.RangeChart:    isChart = true; break;
+            case Asc.c_oAscSelectionType.RangeChartText:isTextChart = true; break;
+            case Asc.c_oAscSelectionType.RangeShapeText: isTextShape = true; break;
+        }
+
+        if (isImage || isShape || isChart) {
+            isImage = isShape = isChart = false;
+            let has_chartprops = false;
+            let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps();
+
+            for (let i = 0; i < selectedObjects.length; i++) {
+                if (selectedObjects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image) {
+                    const elValue = selectedObjects[i].asc_getObjectValue();
+                    isObjLocked = isObjLocked || elValue.asc_getLocked();
+                    const shapeProps = elValue.asc_getShapeProperties();
+
+                    if (shapeProps) {
+                        if (shapeProps.asc_getFromChart()) {
+                            isChart = true;
+                        } else {
+                            isShape = true;
+                        }
+                    } else if (elValue.asc_getChartProperties()) {
+                        isChart = true;
+                        has_chartprops = true;
+                    } else {
+                        isImage = true;
+                    }
+                }
+            }
+        } else if (isTextShape || isTextChart) {
+            const selectedObjects = this.api.asc_getGraphicObjectProps();
+            let isEquation = false;
+
+            for (var i = 0; i < selectedObjects.length; i++) {
+                const elType = selectedObjects[i].asc_getObjectType();
+                if (elType == Asc.c_oAscTypeSelectElement.Image) {
+                    const value = selectedObjects[i].asc_getObjectValue();
+                    isObjLocked = isObjLocked || value.asc_getLocked();
+                } else if (elType == Asc.c_oAscTypeSelectElement.Paragraph) {
+                } else if (elType == Asc.c_oAscTypeSelectElement.Math) {
+                    isEquation = true;
+                }
+            }
+        }
+        if (isChart || isTextChart) {
+            _selections.push('chart');
+
+            if (isTextChart) {
+                _selections.push('text');
+            }
+        } else if ((isShape || isTextShape) && !isImage) {
+            _selections.push('shape');
+
+            if (isTextShape) {
+                _selections.push('text');
+            }
+        } else if (isImage) {
+            _selections.push('image');
+
+            if (isShape) {
+                _selections.push('shape');
+            }
+        } else {
+            _selections.push('cell');
+
+            if (this._cellInfo.asc_getHyperlink()) {
+                _selections.push('hyperlink');
+            }
+        }
+        return _selections;
+    }
+
+
+
+}

apps/spreadsheeteditor/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 {storeWorksheets} from './sheets';
 // import {storeTextSettings} from "./textSettings";
@@ -11,7 +11,7 @@ import {storeWorksheets} from './sheets';
 // import {storeChartSettings} from "./chartSettings";
 
 export const stores = {
-    // storeFocusObjects: new storeFocusObjects(),
+    storeFocusObjects: new storeFocusObjects(),
     // storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers(),
     sheets: new storeWorksheets()

apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx

@@ -0,0 +1,138 @@
+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 EditCellController from "../../controller/edit/EditCell";
+
+const routes = [
+];
+
+const EmptyEditLayout = () => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    return (
+        <Page>
+            <div className="content-block inset">
+                <div className="content-block-inner">
+                    <p>{_t.textSelectObjectToEdit}</p>
+                </div>
+            </div>
+        </Page>
+    )
+};
+
+const EditLayoutNavbar = ({ editors, inPopover }) => {
+    const isAndroid = Device.android;
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    return (
+        <Navbar>
+            {
+                editors.length > 1 ?
+                    <div className='tab-buttons tabbar'>
+                        {editors.map((item, index) => <Link key={"sse-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
+                        {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.lenght + '%'}}></span>}
+                    </div> :
+                    <NavTitle>{ editors[0].caption }</NavTitle>
+            }
+            { !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
+        </Navbar>
+    )
+};
+
+const EditLayoutContent = ({ editors }) => {
+    if (editors.length > 1) {
+        return (
+            <Tabs animated>
+                {editors.map((item, index) =>
+                    <Tab key={"sse-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
+                        {item.component}
+                    </Tab>
+                )}
+            </Tabs>
+        )
+    } else {
+        return (
+            <Page>
+                {editors[0].component}
+            </Page>
+        )
+    }
+};
+
+const EditTabs = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    const store = props.storeFocusObjects;
+    const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.settings : store.selections);
+    let editors = [];
+    if (settings.length < 1) {
+        editors.push({
+            caption: _t.textSettings,
+            component: <EmptyEditLayout />
+        });
+    } else {
+        if (settings.indexOf('cell') > -1) {
+            editors.push({
+                caption: _t.textCell,
+                id: 'edit-text',
+                component: <EditCellController />
+            })
+        }
+    }
+
+    return (
+        <View style={props.style} stackPages={true} routes={routes}>
+            <Page pageContent={false}>
+                <EditLayoutNavbar editors={editors} inPopover={props.inPopover}/>
+                <EditLayoutContent editors={editors} />
+            </Page>
+        </View>
+
+    )
+};
+
+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 ?
+            <Popover id="edit-popover" className="popover__titled" onPopoverClosed={() => props.onClosed()}>
+                <EditTabsContainer inPopover={true} onOptionClick={onOptionClick} style={{height: '410px'}} />
+            </Popover> :
+            <Sheet id="edit-sheet" push onSheetClosed={() => props.onClosed()}>
+                <EditTabsContainer onOptionClick={onOptionClick} />
+            </Sheet>
+    )
+};
+
+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 (
+        <EditView usePopover={!Device.phone} onClosed={onviewclosed} />
+    )
+};
+
+export default EditOptions;

apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx

@@ -0,0 +1,12 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+
+const EditCell = props => {
+    return (
+        <Fragment>
+
+        </Fragment>
+    )
+};
+
+export default EditCell;