[SSE mobile] Add toolbar, add logo

apps/spreadsheeteditor/mobile/locale/en.json

@@ -29,6 +29,12 @@
         "menuEdit": "Edit",
         "menuDelete": "Delete"
     },
+    "Toolbar": {
+        "dlgLeaveTitleText": "You leave the application",
+        "dlgLeaveMsgText": "You have unsaved changes in this document. Click \\'Stay on this Page\\' to await the autosave of the document. Click \\'Leave this Page\\' to discard all the unsaved changes.",
+        "leaveButtonText": "Leave this Page",
+        "stayButtonText": "Stay on this Page"
+    },
     "View" : {
         "Add" : {
             "textChart": "Chart",

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

@@ -278,6 +278,8 @@ class MainController extends Component {
         me.api.asc_getWorksheetsCount();
         me.api.asc_showWorksheet(me.api.asc_getActiveWorksheetIndex());
 
+        this.applyLicense();
+
         Common.Gateway.documentReady();
         f7.emit('resize');
     }
@@ -291,6 +293,10 @@ class MainController extends Component {
         // }
     }
 
+    applyLicense () {
+        Common.Notifications.trigger('toolbar:activatecontrols');
+    }
+
     render() {
         return (
             <Fragment>

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

@@ -0,0 +1,207 @@
+import React, { useEffect, useState } from 'react';
+import { inject } from 'mobx-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import ToolbarView from "../view/Toolbar";
+
+const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo')(props => {
+    const {t} = useTranslation();
+    const _t = t("Toolbar", { returnObjects: true });
+
+    const appOptions = props.storeAppOptions;
+    const isDisconnected = props.users.isDisconnected;
+    const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments;
+    const docTitle = props.storeSpreadsheetInfo.dataDoc ? props.storeSpreadsheetInfo.dataDoc.title : '';
+
+    useEffect(() => {
+        const onDocumentReady = () => {
+            const api = Common.EditorApi.get();
+            api.asc_registerCallback('asc_onCanUndoChanged', onApiCanUndo);
+            api.asc_registerCallback('asc_onCanRedoChanged', onApiCanRedo);
+            api.asc_registerCallback('asc_onSelectionChanged', onApiSelectionChanged);
+            api.asc_registerCallback('asc_onWorkbookLocked', onApiSelectionChanged);
+            api.asc_registerCallback('asc_onWorksheetLocked', onApiSelectionChanged);
+            api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
+            api.asc_registerCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
+
+            Common.Notifications.on('api:disconnect', onCoAuthoringDisconnect);
+            Common.Notifications.on('toolbar:activatecontrols', activateControls);
+            Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
+            Common.Notifications.on('goback', goBack);
+            Common.Notifications.on('sheet:active', onApiActiveSheetChanged);
+        };
+        if ( !Common.EditorApi ) {
+            Common.Notifications.on('document:ready', onDocumentReady);
+            Common.Gateway.on('init', loadConfig);
+        } else {
+            onDocumentReady();
+        }
+
+        return () => {
+            Common.Notifications.off('document:ready', onDocumentReady);
+            Common.Notifications.off('api:disconnect', onCoAuthoringDisconnect);
+            Common.Notifications.off('toolbar:activatecontrols', activateControls);
+            Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
+            Common.Notifications.off('goback', goBack);
+            Common.Notifications.off('sheet:active', onApiActiveSheetChanged);
+
+            const api = Common.EditorApi.get();
+            api.asc_unregisterCallback('asc_onCanUndoChanged', onApiCanUndo);
+            api.asc_unregisterCallback('asc_onCanRedoChanged', onApiCanRedo);
+            //api.asc_unregisterCallback('asc_onSelectionChanged', onApiSelectionChanged); TO DO
+            api.asc_unregisterCallback('asc_onWorkbookLocked', onApiSelectionChanged);
+            api.asc_unregisterCallback('asc_onWorksheetLocked', onApiSelectionChanged);
+            api.asc_unregisterCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
+            api.asc_unregisterCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
+        }
+    });
+
+    // Back button
+    const [isShowBack, setShowBack] = useState(false);
+    const loadConfig = (data) => {
+        if (data && data.config && data.config.canBackToFolder !== false &&
+            data.config.customization && data.config.customization.goback &&
+            (data.config.customization.goback.url || data.config.customization.goback.requestClose && data.config.canRequestClose)) {
+            setShowBack(true);
+        }
+    };
+    const onBack = () => {
+        const api = Common.EditorApi.get();
+        if (api.asc_isDocumentModified()) {
+            f7.dialog.create({
+                title   : _t.dlgLeaveTitleText,
+                text    : _t.dlgLeaveMsgText,
+                verticalButtons: true,
+                buttons : [
+                    {
+                        text: _t.leaveButtonText,
+                        onClick: function() {
+                            goBack();
+                        }
+                    },
+                    {
+                        text: _t.stayButtonText,
+                        bold: true
+                    }
+                ]
+            }).open();
+        } else {
+            goBack();
+        }
+    };
+    const goBack = (current) => {
+        //if ( !Common.Controllers.Desktop.process('goback') ) {
+        if (appOptions.customization.goback.requestClose && appOptions.canRequestClose) {
+            Common.Gateway.requestClose();
+        } else {
+            const href = appOptions.customization.goback.url;
+            if (!current && appOptions.customization.goback.blank !== false) {
+                window.open(href, "_blank");
+            } else {
+                parent.location.href = href;
+            }
+        }
+        //}
+    }
+
+    // Undo and Redo
+    const [isCanUndo, setCanUndo] = useState(false);
+    const [isCanRedo, setCanRedo] = useState(false);
+    const onApiCanUndo = (can) => {
+        if (isDisconnected) return;
+        setCanUndo(can);
+    };
+    const onApiCanRedo = (can) => {
+        if (isDisconnected) return;
+        setCanRedo(can);
+    };
+    const onUndo = () => {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.asc_Undo();
+        }
+    };
+    const onRedo = () => {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.asc_Redo();
+        }
+    }
+
+    const [disabledEditControls, setDisabledEditControls] = useState(false);
+    const onApiSelectionChanged = (cellInfo) => {
+        if (isDisconnected) return;
+
+        const api = Common.EditorApi.get();
+        const info = !!cellInfo ? cellInfo : api.asc_getCellInfo();
+        let islocked = false;
+
+        switch (info.asc_getSelectionType()) {
+            case Asc.c_oAscSelectionType.RangeChart:
+            case Asc.c_oAscSelectionType.RangeImage:
+            case Asc.c_oAscSelectionType.RangeShape:
+            case Asc.c_oAscSelectionType.RangeChartText:
+            case Asc.c_oAscSelectionType.RangeShapeText:
+                const objects = api.asc_getGraphicObjectProps();
+                for ( let i in objects ) {
+                    if ( objects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image ) {
+                        if ((islocked = objects[i].asc_getObjectValue().asc_getLocked()))
+                            break;
+                    }
+                }
+                break;
+            default:
+                islocked = info.asc_getLocked();
+        }
+
+        setDisabledEditControls(islocked);
+    };
+
+    const onApiActiveSheetChanged = (index) => {
+        Common.Notifications.trigger('comments:filterchange', ['doc', 'sheet' + Common.EditorApi.get().asc_getWorksheetId(index)], false );
+    };
+
+    const [disabledSettings, setDisabledSettings] = useState(false);
+    const deactivateEditControls = (enableDownload) => {
+        setDisabledEditControls(true);
+        if (enableDownload) {
+            //DE.getController('Settings').setMode({isDisconnected: true, enableDownload: enableDownload});
+        } else {
+            setDisabledSettings(true);
+        }
+    };
+
+
+    const [disabledControls, setDisabledControls] = useState(true);
+    const activateControls = () => {
+        setDisabledControls(false);
+    };
+
+    const onCoAuthoringDisconnect = (enableDownload) => {
+        deactivateEditControls(enableDownload);
+        setCanUndo(false);
+        setCanRedo(false);
+        f7.popover.close();
+        f7.sheet.close();
+        f7.popup.close();
+    };
+
+    return (
+        <ToolbarView openOptions={props.openOptions}
+                     isEdit={appOptions.isEdit}
+                     docTitle={docTitle}
+                     isShowBack={isShowBack}
+                     onBack={onBack}
+                     isCanUndo={isCanUndo}
+                     isCanRedo={isCanRedo}
+                     onUndo={onUndo}
+                     onRedo={onRedo}
+                     disabledControls={disabledControls}
+                     disabledEditControls={disabledEditControls}
+                     disabledSettings={disabledSettings}
+                     displayCollaboration={displayCollaboration}
+        />
+    )
+});
+
+export {ToolbarController as Toolbar};

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

@@ -1,21 +1,21 @@
 import React, { Component } from 'react';
-import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
+import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
+import { observer, inject } from "mobx-react";
 
-// import EditOptions from '../view/edit/Edit';
 import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
 import CellEditor from '../controller/CellEditor';
 import Statusbar from '../controller/StatusBar'
 import AddOptions from "../view/add/Add";
 import EditOptions from "../view/edit/Edit";
-import { Device } from '../../../../common/mobile/utils/device';
 import { Search, SearchSettings } from '../controller/Search';
 import { f7 } from 'framework7-react';
 
 import {FunctionGroups} from "../controller/add/AddFunction";
 import ContextMenu from '../controller/ContextMenu';
+import { Toolbar } from "../controller/Toolbar";
 
-export default class MainPage extends Component {
+class MainPage extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -61,23 +61,18 @@ export default class MainPage extends Component {
     };
 
   render() {
+      const appOptions = this.props.storeAppOptions;
+      const config = appOptions.config;
+      const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
       return (
-            <Page name="home">
+            <Page name="home" className={showLogo && 'page-with-logo'}>
               {/* Top Navbar */}
-                <Navbar id='editor-navbar'>
+                <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
-                    {/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
+                    {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
-                    <NavLeft>
+                    <Subnavbar>
-                        <Link icon='icon-undo'></Link>
+                        <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
-                        <Link icon='icon-redo'></Link>
+                        <Search useSuspense={false}/>
-                    </NavLeft>
+                    </Subnavbar>
-                    <NavRight>
-                        <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
-                        <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
-                        { Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
-                        <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
-                        <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
-                    </NavRight>
-                    <Search useSuspense={false} />
                 </Navbar>
                 <CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
                 {/* Page content */}
@@ -106,4 +101,6 @@ export default class MainPage extends Component {
             </Page>
       )
   }
-};
+}
+
+export default inject("storeAppOptions")(observer(MainPage));

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

@@ -12,8 +12,6 @@ export class storeAppOptions {
 
     isEdit = false;
     config = {};
-
-    isEdit = false;
     canViewComments = false;
 
     setConfigOptions (config) {

apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx

@@ -0,0 +1,33 @@
+import React, {Fragment} from 'react';
+import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
+import { Device } from '../../../../common/mobile/utils/device';
+import EditorUIController from '../lib/patch'
+
+const ToolbarView = props => {
+    return (
+        <Fragment>
+            <NavLeft>
+                {props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
+                {props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getUndoRedo({
+                    disabledUndo: !props.isCanUndo,
+                    disabledRedo: !props.isCanRedo,
+                    onUndoClick: props.onUndo,
+                    onRedoClick: props.onRedo
+                })}
+            </NavLeft>
+            {!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
+            <NavRight>
+                {props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({
+                    disabled: props.disabledEditControls || props.disabledControls,
+                    onEditClick: () => props.openOptions('edit'),
+                    onAddClick: () => props.openOptions('add')
+                })}
+                { Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
+                {props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link>}
+                <Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
+            </NavRight>
+        </Fragment>
+    )
+};
+
+export default ToolbarView;