From 437fed37c064648e639cffd941ab9c2372f2871d Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Tue, 13 Apr 2021 17:41:24 +0300
Subject: [PATCH] [DE mobile] Add reader mode and print handlers in settings

---
 .../mobile/src/controller/Toolbar.jsx         |  2 +
 .../src/controller/settings/Settings.jsx      | 58 +++++++++++++++++++
 apps/documenteditor/mobile/src/page/main.jsx  |  2 +-
 .../mobile/src/store/appOptions.js            | 10 +++-
 .../mobile/src/view/Toolbar.jsx               |  2 +-
 .../mobile/src/view/settings/Settings.jsx     | 46 ++++-----------
 6 files changed, 82 insertions(+), 38 deletions(-)
 create mode 100644 apps/documenteditor/mobile/src/controller/settings/Settings.jsx

diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx
index b6f32e31f..9ff6ce8e8 100644
--- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx
+++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx
@@ -13,6 +13,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
     const displayMode = props.storeReview.displayMode;
     const stateDisplayMode = displayMode == "final" || displayMode == "original" ? true : false;
     const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments || appOptions.canReview || appOptions.canViewReview;
+    const readerMode = appOptions.readerMode;
 
     useEffect(() => {
         const onDocumentReady = () => {
@@ -188,6 +189,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
                      disabledEditControls={disabledEditControls}
                      disabledSettings={disabledSettings}
                      displayCollaboration={displayCollaboration}
+                     readerMode={readerMode}
         />
     )
 });
diff --git a/apps/documenteditor/mobile/src/controller/settings/Settings.jsx b/apps/documenteditor/mobile/src/controller/settings/Settings.jsx
new file mode 100644
index 000000000..4eab56d95
--- /dev/null
+++ b/apps/documenteditor/mobile/src/controller/settings/Settings.jsx
@@ -0,0 +1,58 @@
+import React, {useEffect} from 'react';
+import { useTranslation } from 'react-i18next';
+import {f7} from 'framework7-react';
+import { observer, inject } from "mobx-react";
+import {Device} from '../../../../../common/mobile/utils/device';
+
+import SettingsView from "../../view/settings/Settings";
+
+const Settings = props => {
+    useEffect(() => {
+        if ( Device.phone ) {
+            f7.popup.open('.settings-popup');
+        } else {
+            f7.popover.open('#settings-popover', '#btn-settings');
+        }
+
+        return () => {
+            // component will unmount
+        }
+    });
+
+    const onviewclosed = () => {
+        if ( props.onclosed )
+            props.onclosed();
+    };
+
+    const closeModal = () => {
+        if (Device.phone) {
+            f7.sheet.close('.settings-popup');
+        } else {
+            f7.popover.close('#settings-popover');
+        }
+    };
+
+    const onReaderMode = () => {
+        const appOptions = props.storeAppOptions;
+        appOptions.changeReaderMode();
+
+        Common.EditorApi.get().ChangeReaderMode();
+
+        if (Device.phone) {
+            setTimeout(() => {
+                closeModal();
+            }, 1);
+        }
+    }
+
+    const onPrint = () => {
+        setTimeout(() => {
+            Common.EditorApi.get().asc_Print();
+        }, 1);
+        closeModal();
+    }
+
+    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} onReaderMode={onReaderMode} onPrint={onPrint}/>
+};
+
+export default inject("storeAppOptions")(observer(Settings));
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index 43a94710f..6c4586868 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@@ -6,7 +6,7 @@ import { inject } from "mobx-react";
 
 import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
-import Settings from '../view/settings/Settings';
+import Settings from '../controller/settings/Settings';
 import Collaboration from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
 import { Device } from '../../../../common/mobile/utils/device'
 import { Search, SearchSettings } from '../controller/Search';
diff --git a/apps/documenteditor/mobile/src/store/appOptions.js b/apps/documenteditor/mobile/src/store/appOptions.js
index 13f521bba..f3bb99b12 100644
--- a/apps/documenteditor/mobile/src/store/appOptions.js
+++ b/apps/documenteditor/mobile/src/store/appOptions.js
@@ -11,7 +11,10 @@ export class storeAppOptions {
             setCanViewReview: action,
 
             lostEditingRights: observable,
-            changeEditingRights: action
+            changeEditingRights: action,
+
+            readerMode: observable,
+            changeReaderMode: action
         });
     }
 
@@ -24,6 +27,11 @@ export class storeAppOptions {
         this.lostEditingRights = value;
     }
 
+    readerMode = false;
+    changeReaderMode () {
+        this.readerMode = !this.readerMode;
+    }
+
     config = {};
     setConfigOptions (config) {
         this.config = config;
diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx
index 76804db1a..d73db145c 100644
--- a/apps/documenteditor/mobile/src/view/Toolbar.jsx
+++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx
@@ -23,7 +23,7 @@ const ToolbarView = props => {
                         onEditClick: e => props.openOptions('edit'),
                         onAddClick: e => props.openOptions('add')
                 })}
-                { Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
+                { Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && '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={e => props.openOptions('coauth')}></Link>}
                 <Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>
             </NavRight>
diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
index afe8b68e0..920df80ca 100644
--- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
@@ -1,6 +1,6 @@
 import React, {Component, useEffect} from 'react';
-import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'framework7-react';
-import { withTranslation } from 'react-i18next';
+import {View, Page, Navbar, NavRight, Link, Popup, Popover, Icon,ListItem, List, Toggle} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
 import {f7} from 'framework7-react';
 import { observer, inject } from "mobx-react";
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -57,8 +57,8 @@ const routes = [
 ];
 
 
-const SettingsList = inject("storeAppOptions")( observer( withTranslation()( props => {
-    const {t} = props;
+const SettingsList = inject("storeAppOptions")(observer(props => {
+    const { t } = useTranslation();
     const _t = t('Settings', {returnObjects: true});
     const navbar = <Navbar title={_t.textSettings}>
                     {!props.inPopover  && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
@@ -113,14 +113,14 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
                 {navbar}
                 <List>
                     {!props.inPopover &&
-                        <ListItem title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal}>
+                        <ListItem title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link='#' searchbarEnable='.searchbar' onClick={closeModal} className='no-indicator'>
                             <Icon slot="media" icon="icon-search"></Icon>
                         </ListItem>
                     }
                     {_canReader &&
                         <ListItem title={_t.textReaderMode}> {/*ToDo*/}
                             <Icon slot="media" icon="icon-reader"></Icon>
-                            <Toggle checked={false} onToggleChange={() => {}}/>
+                            <Toggle checked={appOptions.readerMode} onChange={() => {props.onReaderMode()}}/>
                         </ListItem>
                     }
                     {/*ToDo: settings-orthography*/}
@@ -143,7 +143,7 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
                     </ListItem>
                     }
                     {_canPrint &&
-                        <ListItem title={_t.textPrint}>
+                        <ListItem title={_t.textPrint} onClick={props.onPrint} link='#' className='no-indicator'>
                             <Icon slot="media" icon="icon-print"></Icon>
                         </ListItem>
                     }
@@ -164,7 +164,7 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
             </Page>
         </View>
     )
-})));
+}));
 
 class SettingsView extends Component {
     constructor(props) {
@@ -182,37 +182,13 @@ class SettingsView extends Component {
         return (
             show_popover ?
                 <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
-                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
+                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint}/>
                 </Popover> :
                 <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <SettingsList onOptionClick={this.onoptionclick} />
+                    <SettingsList onOptionClick={this.onoptionclick} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint}/>
                 </Popup>
         )
     }
 }
 
-const Settings = props => {
-    useEffect(() => {
-        if ( Device.phone )
-            f7.popup.open('.settings-popup');
-        else f7.popover.open('#settings-popover', '#btn-settings');
-
-        return () => {
-            // component will unmount
-        }
-    });
-
-
-    const onviewclosed = () => {
-        if ( props.onclosed )
-            props.onclosed();
-    };
-
-    // if ( Device.phone ) {
-    //     return <SettingsPopup onclosed={onviewclosed} />
-    // }
-
-    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} />
-};
-
-export default Settings;
+export default SettingsView;