[DE mobile] Add reader mode and print handlers in settings

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}
         />
     )
 });

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));

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';

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;

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>

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 {View, Page, Navbar, NavRight, Link, Popup, Popover, Icon,ListItem, List, Toggle} from 'framework7-react';
-import { withTranslation } from 'react-i18next';
+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 SettingsList = inject("storeAppOptions")(observer(props => {
-    const {t} = 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 => {
+export default SettingsView;
-    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;