[DE mobile] Add review, review change handler in context menu

apps/common/mobile/lib/controller/collaboration/Review.jsx

@@ -120,6 +120,7 @@ class Review extends Component {
                         onAcceptAll={this.onAcceptAll}
                         onRejectAll={this.onRejectAll}
                         onDisplayMode={this.onDisplayMode}
+                        noBack={this.props.noBack}
             />
         )
     }
@@ -520,6 +521,7 @@ class ReviewChange extends Component {
                               onRejectCurrentChange={this.onRejectCurrentChange}
                               onGotoNextChange={this.onGotoNextChange}
                               onDeleteChange={this.onDeleteChange}
+                              noBack={this.props.noBack}
             />
         )
     }

apps/common/mobile/lib/view/collaboration/Collaboration.jsx

@@ -16,7 +16,15 @@ const PageUsers = inject("users")(observer(props => {
     const storeUsers = props.users;
     return (
         <Page name="collab__users">
-            <Navbar title={_t.textUsers} backLink={_t.textBack}></Navbar>
+            <Navbar title={_t.textUsers} backLink={_t.textBack}>
+                {Device.phone &&
+                <NavRight>
+                    <Link sheetClose=".coauth__sheet">
+                        <Icon icon='icon-expand-down'/>
+                    </Link>
+                </NavRight>
+                }
+            </Navbar>
             <BlockTitle>{_t.textEditUser}</BlockTitle>
             <List className="coauth__list">
                 {storeUsers.users.map((model, i) => (
@@ -39,6 +47,15 @@ const routes = [
         path: '/review/',
         component: ReviewController
     },
+    {
+        path: '/cm-review/',
+        component: ReviewController,
+        options: {
+            props: {
+                noBack: true
+            }
+        }
+    },
     {
         path: '/display-mode/',
         component: PageDisplayMode
@@ -47,6 +64,15 @@ const routes = [
         path: '/review-change/',
         component: ReviewChangeController
     },
+    {
+        path: '/cm-review-change/',
+        component: ReviewChangeController,
+        options: {
+            props: {
+                noBack: true
+            }
+        }
+    },
     {
         path: '/comments/',
         component: ViewCommentsController,
@@ -62,10 +88,10 @@ const PageCollaboration = inject('storeAppOptions')(observer(props => {
     const { t } = useTranslation();
     const _t = t('Common.Collaboration', {returnObjects: true});
     return (
-        <View style={props.style} stackPages={true} routes={routes}>
+        <View style={props.style} stackPages={true} routes={routes} url={props.page && `/${props.page}/`}>
             <Page name="collab__main">
                 <Navbar title={_t.textCollaboration}>
-                    {props.isSheet &&
+                    {Device.phone &&
                         <NavRight>
                             <Link sheetClose=".coauth__sheet">
                                 <Icon icon='icon-expand-down'/>
@@ -108,10 +134,10 @@ class CollaborationView extends Component {
         return (
             show_popover ?
                 <Popover id="coauth-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
-                    <PageCollaboration style={{height: '410px'}}/>
+                    <PageCollaboration style={{height: '410px'}} page={this.props.page}/>
                 </Popover> :
                 <Sheet className="coauth__sheet" push onSheetClosed={() => this.props.onclosed()}>
-                    <PageCollaboration isSheet={true}/>
+                    <PageCollaboration page={this.props.page}/>
                 </Sheet>
         )
     }
@@ -135,7 +161,7 @@ const Collaboration = props => {
     };
 
     return (
-        <CollaborationView usePopover={!Device.phone} onclosed={onviewclosed} />
+        <CollaborationView usePopover={!Device.phone} onclosed={onviewclosed} page={props.page}/>
     )
 };
 

apps/common/mobile/lib/view/collaboration/Review.jsx

@@ -1,6 +1,6 @@
 import React, { Component, useEffect } from 'react';
 import { observer, inject } from "mobx-react";
-import { Page, Navbar, List, ListItem, Icon, Toggle, Toolbar, Link } from 'framework7-react';
+import { Page, Navbar, NavRight, List, ListItem, Icon, Toggle, Toolbar, Link } from 'framework7-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from "../../../utils/device";
@@ -14,7 +14,15 @@ const PageReview = props => {
 
     return (
        <Page>
-           <Navbar title={_t.textReview} backLink={_t.textBack}/>
+           <Navbar title={_t.textReview} backLink={!props.noBack && _t.textBack}>
+               {Device.phone &&
+               <NavRight>
+                   <Link sheetClose=".coauth__sheet">
+                       <Icon icon='icon-expand-down'/>
+                   </Link>
+               </NavRight>
+               }
+           </Navbar>
            <List>
                {canReview &&
                     <ListItem title={_t.textTrackChanges} className={isDisableAllSettings ? 'disabled' : ''}>
@@ -58,7 +66,15 @@ const DisplayMode = props => {
     const mode = props.storeReview.displayMode;
     return (
         <Page>
-            <Navbar title={_t.textDisplayMode} backLink={_t.textBack}/>
+            <Navbar title={_t.textDisplayMode} backLink={_t.textBack}>
+                {Device.phone &&
+                <NavRight>
+                    <Link sheetClose=".coauth__sheet">
+                        <Icon icon='icon-expand-down'/>
+                    </Link>
+                </NavRight>
+                }
+            </Navbar>
             <List mediaList>
                 <ListItem title={_t.textMarkup}
                           subtitle={_t.textAllChangesEditing}
@@ -99,7 +115,15 @@ const PageReviewChange = props => {
     const isLockPrevNext = (displayMode === "final" || displayMode === "original");
     return (
         <Page className='page-review'>
-            <Navbar title={_t.textReviewChange} backLink={_t.textBack}/>
+            <Navbar title={_t.textReviewChange} backLink={!props.noBack && _t.textBack}>
+                {Device.phone &&
+                <NavRight>
+                    <Link sheetClose=".coauth__sheet">
+                        <Icon icon='icon-expand-down'/>
+                    </Link>
+                </NavRight>
+                }
+            </Navbar>
             <Toolbar position='bottom'>
                 <span className='change-buttons row'>
                     {!props.isReviewOnly &&

apps/common/mobile/resources/less/common-ios.less

@@ -38,6 +38,12 @@
         .navbar-inner {
             z-index: auto;
         }
+        .sheet-close {
+            width: 44px;
+            height: 44px;
+            display: flex;
+            justify-content: center;
+        }
     }
 
     .popover__titled {

apps/common/mobile/resources/less/common-material.less

@@ -21,6 +21,14 @@
 
     --f7-dialog-button-text-color: @themeColor;
 
+    .navbar {
+        .sheet-close {
+            width: 56px;
+            height: 56px;
+            display: flex;
+            justify-content: center;
+        }
+    }
     // Buttons
     .segmented {
         .decrement, .increment {

apps/documenteditor/mobile/src/controller/ContextMenu.jsx

@@ -20,6 +20,7 @@ class ContextMenu extends ContextMenuController {
         // console.log('context menu controller created');
         this.onApiShowComment = this.onApiShowComment.bind(this);
         this.onApiHideComment = this.onApiHideComment.bind(this);
+        this.onApiShowChange = this.onApiShowChange.bind(this);
     }
 
     static closeContextMenu() {
@@ -32,6 +33,7 @@ class ContextMenu extends ContextMenuController {
         const api = Common.EditorApi.get();
         api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
         api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
+        api.asc_unregisterCallback('asc_onShowRevisionsChange', this.onApiShowChange);
     }
 
 
@@ -43,6 +45,10 @@ class ContextMenu extends ContextMenuController {
         this.isComments = false;
     }
 
+    onApiShowChange(sdkchange) {
+        this.inRevisionChange = sdkchange && sdkchange.length>0;
+    }
+
     // onMenuClosed() {
     //     super.onMenuClosed();
     // }
@@ -73,6 +79,16 @@ class ContextMenu extends ContextMenuController {
             case 'viewcomment':
                 Common.Notifications.trigger('viewcomment');
                 break;
+            case 'review':
+                setTimeout(() => {
+                    this.props.openOptions('coauth', 'cm-review');
+                }, 400);
+                break;
+            case 'reviewchange':
+                setTimeout(() => {
+                    this.props.openOptions('coauth', 'cm-review-change');
+                }, 400);
+                break;
         }
 
         console.log("click context menu item: " + action);
@@ -107,6 +123,7 @@ class ContextMenu extends ContextMenuController {
         const api = Common.EditorApi.get();
         api.asc_registerCallback('asc_onShowComment', this.onApiShowComment);
         api.asc_registerCallback('asc_onHideComment', this.onApiHideComment);
+        api.asc_registerCallback('asc_onShowRevisionsChange', this.onApiShowChange);
     }
 
     initMenuItems() {
@@ -246,7 +263,7 @@ class ContextMenu extends ContextMenuController {
                 // }
 
                 if ( canReview ) {
-                    if (false /*_inRevisionChange*/) {
+                    if (this.inRevisionChange) {
                         itemsText.push({
                             caption: _t.menuReviewChange,
                             event: 'reviewchange'

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

@@ -23,7 +23,7 @@ export default class MainPage extends Component {
         };
     }
 
-    handleClickToOpenOptions = opts => {
+    handleClickToOpenOptions = (opts, page) => {
         ContextMenu.closeContextMenu();
 
         this.setState(state => {
@@ -34,7 +34,10 @@ export default class MainPage extends Component {
             else if ( opts == 'settings' )
                 return {settingsVisible: true};
             else if ( opts == 'coauth' )
-                return {collaborationVisible: true};
+                return {
+                    collaborationVisible: true,
+                    collaborationPage: page
+                };
         });
     };
 
@@ -95,9 +98,9 @@ export default class MainPage extends Component {
               }
               {
                   !this.state.collaborationVisible ? null :
-                      <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
+                      <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
               }
-              <ContextMenu />
+              <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
           </Page>
       )
   }