[SSE mobile] Changed encoding options

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

@@ -2,44 +2,104 @@ import React, { Component } from 'react';
 import { Device } from '../../../../common/mobile/utils/device';
 import { f7 } from "framework7-react";
 import { Encoding } from "../view/Encoding";
-import { observer, inject } from "mobx-react";
+import { withTranslation } from 'react-i18next';
 
 class EncodingController extends Component {
     constructor(props) {
         super(props);
+
+        const { t } = this.props;
+        const _t = t("View.Settings", { returnObjects: true });
+
+        this.valuesDelimeter = [4, 2, 3, 1, 5];
+        this.namesDelimeter = [_t.txtComma, _t.txtSemicolon, _t.txtColon, _t.txtTab, _t.txtSpace];
         this.onSaveFormat = this.onSaveFormat.bind(this);
+        this.closeModal = this.closeModal.bind(this);
+        this.state = {
+            isOpen: false
+        };
+
+        Common.Notifications.on('engineCreated', api => {
+            api.asc_registerCallback('asc_onAdvancedOptions', (type, advOptions, mode, formatOptions) => {
+                this.initEncoding(type, advOptions, mode, formatOptions);
+            });
+        });
+
+        Common.Notifications.on('openEncoding', (type, advOptions, mode, formatOptions) => {
+            this.initEncoding(type, advOptions, mode, formatOptions);
+        });
+    }
+
+    initEncoding(type, advOptions, mode, formatOptions) {
+        if(type === Asc.c_oAscAdvancedOptionsID.CSV) {
+            Common.Notifications.trigger('preloader:close');
+            Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
+
+            this.mode = mode;
+            this.advOptions = advOptions;
+            this.formatOptions = formatOptions;
+            this.pages = [];
+            this.pagesName = [];
+        
+            const recommendedSettings = this.advOptions.asc_getRecommendedSettings();
+
+            this.initPages();
+            this.valueEncoding = recommendedSettings.asc_getCodePage();
+            this.valueDelimeter = recommendedSettings && recommendedSettings.asc_getDelimiter() ? recommendedSettings.asc_getDelimiter() : 4;
+        
+            this.setState({
+                isOpen: true
+            });
+        }
+    }
+
+    initPages() {
+        for (let page of this.advOptions.asc_getCodePages()) {
+            this.pages.push(page.asc_getCodePage());
+            this.pagesName.push(page.asc_getCodePageName());
+        }
     }
 
     closeModal() {
         if (Device.phone) {
-            f7.sheet.close('.encoding-popup', false);
+            f7.sheet.close('.encoding-popup', true);
         } else {
             f7.popover.close('#encoding-popover');
         }
+
+        this.setState({isOpen: false});
     }
 
-    async onSaveFormat(mode, valueEncoding, valueDelimeter) {
+    onSaveFormat(valueEncoding, valueDelimeter) {
         const api = Common.EditorApi.get();
-        const storeEncoding = this.props.storeEncoding;
 
-        await this.closeModal();
+        this.closeModal();
 
-        if(mode === 2) {
+        if(this.mode === 2) {
-            const formatOptions = storeEncoding.formatOptions;
+            this.formatOptions && this.formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
-            formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
+            api.asc_DownloadAs(this.formatOptions);
-            api.asc_DownloadAs(formatOptions);
         } else {
-            storeEncoding.setMode(1);
+            api.asc_setAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
-            const type = storeEncoding.type;
-            api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
         }
     }
 
     render() {
         return (
-            <Encoding routes={this.props.routes} onSaveFormat={this.onSaveFormat} />
+            this.state.isOpen &&
+                <Encoding 
+                    closeModal={this.closeModal}
+                    mode={this.mode}  
+                    formatOptions={this.formatOptions} 
+                    onSaveFormat={this.onSaveFormat} 
+                    pages={this.pages}
+                    pagesName={this.pagesName}
+                    namesDelimeter={this.namesDelimeter}
+                    valueEncoding={this.valueEncoding}
+                    valueDelimeter={this.valueDelimeter}
+                    valuesDelimeter={this.valuesDelimeter}
+                /> 
         );
     }
 }
 
-export default inject("storeEncoding")(observer(EncodingController));
+export default withTranslation()(EncodingController);

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

@@ -18,6 +18,7 @@ import ErrorController from "./Error";
 import app from "../page/app";
 import About from "../../../../common/mobile/lib/view/About";
 import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
+import EncodingController from "./Encoding";
 
 @inject(
     "storeAppOptions",
@@ -27,8 +28,7 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins.
     "storeChartSettings",
     "storeSpreadsheetSettings",
     "storeSpreadsheetInfo",
-    "storeApplicationSettings",
+    "storeApplicationSettings"
-    "storeEncoding"
 )
 class MainController extends Component {
     constructor(props) {
@@ -319,15 +319,15 @@ class MainController extends Component {
             this.props.storeSpreadsheetSettings.addSchemes(schemes);
         });
 
-        const storeEncoding = this.props.storeEncoding;
-
         // Downloaded Advanced Options
         
         this.api.asc_registerCallback('asc_onAdvancedOptions', (type, advOptions, mode, formatOptions) => {
             const {t} = this.props;
             const _t = t("View.Settings", { returnObjects: true });
-            onAdvancedOptions(type, advOptions, mode, formatOptions, _t, this._isDocReady, this.props.storeAppOptions.canRequestClose, this.isDRM, storeEncoding);
+            if(type == Asc.c_oAscAdvancedOptionsID.DRM) {
-            if(type == Asc.c_oAscAdvancedOptionsID.DRM) this.isDRM = true;
+                onAdvancedOptions(type, _t, this._isDocReady, this.props.storeAppOptions.canRequestClose, this.isDRM);
+                this.isDRM = true;
+            }
         });
 
     }
@@ -776,6 +776,7 @@ class MainController extends Component {
                 <EditCommentController />
                 <ViewCommentsController />
                 <PluginsController />
+                <EncodingController />
             </Fragment>
         )
     }

apps/spreadsheeteditor/mobile/src/controller/settings/Download.jsx

@@ -4,7 +4,6 @@ import { Device } from '../../../../../common/mobile/utils/device';
 import { withTranslation, useTranslation } from 'react-i18next';
 import { f7 } from 'framework7-react';
 import { observer, inject } from "mobx-react";
-// import MainPage from '../../page/main';
 
 class DownloadController extends Component {
     constructor(props) {
@@ -27,17 +26,13 @@ class DownloadController extends Component {
 
         if (format) {
             if (format == Asc.c_oAscFileType.CSV) {
-                const advOptions = api.asc_getAdvancedOptions();
-                const storeEncoding = this.props.storeEncoding;
-
                 f7.dialog.confirm(
                     _t.warnDownloadAs,
                     _t.notcriticalErrorTitle,
-                    async () => {
+                    () => {
-                        const canRequestClose = this.props.storeAppOptions.canRequestClose;
+                        const advOptions = api.asc_getAdvancedOptions();
-                        await this.closeModal();
+                        this.closeModal();
-                        onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, advOptions, 2, new Asc.asc_CDownloadOptions(format), _t, true, canRequestClose, false, storeEncoding);
+                        Common.Notifications.trigger('openEncoding', Asc.c_oAscAdvancedOptionsID.CSV, advOptions, 2, new Asc.asc_CDownloadOptions(format));
-                        this.props.openOptions('encoding');
                     }
                 )
             } else {
@@ -54,109 +49,11 @@ class DownloadController extends Component {
     }
 }
 
-const DownloadWithTranslation = inject("storeAppOptions", "storeEncoding")(observer(withTranslation()(DownloadController)));
+const DownloadWithTranslation = inject("storeAppOptions")(observer(withTranslation()(DownloadController)));
 
-const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady, canRequestClose, isDRM, storeEncoding) => {
+const onAdvancedOptions = (type, _t, isDocReady, canRequestClose, isDRM) => {
     const api = Common.EditorApi.get();
 
-    if (type == Asc.c_oAscAdvancedOptionsID.CSV) {
-        Common.Notifications.trigger('preloader:close');
-        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
-
-        const recommendedSettings = advOptions.asc_getRecommendedSettings();
-
-        storeEncoding.initOptions({type, advOptions, formatOptions});
-        storeEncoding.initPages();
-        storeEncoding.setMode(mode);
-        storeEncoding.initNamesDelimeter([_t.txtComma, _t.txtSemicolon, _t.txtColon, _t.txtTab, _t.txtSpace]);
-        storeEncoding.changeEncoding(recommendedSettings.asc_getCodePage());
-        storeEncoding.changeDelimeter(recommendedSettings && recommendedSettings.asc_getDelimiter() ? recommendedSettings.asc_getDelimiter() : 4);
-
-        // if(mode === 2) {
-        // f7.views.current.router.navigate('/encoding/');
-        // }   
-    }
-    //     let picker;
-    //     const pages = [];
-    //     const pagesName = [];
-
-    //     for (let page of advOptions.asc_getCodePages()) {
-    //         pages.push(page.asc_getCodePage());
-    //         pagesName.push(page.asc_getCodePageName());
-    //     }
-
-    //     Common.Notifications.trigger('preloader:close');
-    //     Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
-
-    //     const buttons = [];
-
-    //     if (mode === 2) {
-    //         buttons.push({
-    //             text: _t.textCancel
-    //         });
-    //     }
-
-    //     buttons.push({
-    //         text: 'OK',
-    //         bold: true,
-    //         onClick: function() {
-    //             let encoding = picker.cols[0].value,
-    //                 delimiter = picker.cols[1].value;
-
-    //             if (mode == 2) {
-    //                 formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(encoding, delimiter));
-    //                 api.asc_DownloadAs(formatOptions);
-    //             } else {
-    //                 api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(encoding, delimiter));
-    //             }
-
-    //             if (!isDocReady) {
-    //                 Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256);
-    //             }
-    //         }
-    //     });
-
-    //     const dialog = f7.dialog.create({
-    //         title: _t.advCSVOptions,
-    //         text: '',
-    //         content:
-    //         '<div class="content-block small-picker" style="padding: 0; margin: 20px 0 0;">' +
-    //             '<div class="row">' +
-    //                 '<div class="col-50" style="text-align: left;">' + _t.txtEncoding + '</div>' +
-    //                 '<div class="col-50" style="text-align: right;">' + _t.txtDelimiter + '</div>' +
-    //             '</div>' +
-    //             '<div id="txt-encoding" class="small"></div>' +
-    //         '</div>',
-    //         buttons: buttons,
-    //         cssClass: 'dlg-adv-options'
-    //     }).open();
-
-    //     const recommendedSettings = advOptions.asc_getRecommendedSettings();
-
-    //     dialog.on('opened', () => {
-    //         picker = f7.picker.create({
-    //             containerEl: document.getElementById('txt-encoding'),
-    //             cols: [{
-    //                 textAlign: 'left',
-    //                 values: pages,
-    //                 displayValues: pagesName
-    //             },{
-    //                 textAlign: 'right',
-    //                 width: 120,
-    //                 values: [4, 2, 3, 1, 5],
-    //                 displayValues: [',', ';', ':', _t.txtTab, _t.txtSpace]
-    //             }],
-    //             toolbar: false,
-    //             rotateEffect: true,
-    //             value: [
-    //                 recommendedSettings && recommendedSettings.asc_getCodePage(),
-    //                 (recommendedSettings && recommendedSettings.asc_getDelimiter()) ? recommendedSettings.asc_getDelimiter() : 4
-    //             ],
-    //         });
-    //     });
-
-    // } else 
-    else if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
     Common.Notifications.trigger('preloader:close');
     Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
     const buttons = [{
@@ -196,7 +93,7 @@ const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady
             '<div class="input-field"><input type="password" class="modal-text-input" name="modal-password" placeholder="' + _t.advDRMPassword + '" id="modal-password"></div>' : '<div class="input-field"><div class="inputs-list list inline-labels"><ul><li><div class="item-content item-input"><div class="item-inner"><div class="item-input-wrap"><input type="password" name="modal-password" id="modal-password" placeholder=' + _t.advDRMPassword + '></div></div></div></li></ul></div></div>',
         buttons: buttons
     }).open();
-    }
+    
 };
 
 export {

apps/spreadsheeteditor/mobile/src/controller/settings/Encoding.jsx

@@ -1,44 +0,0 @@
-import React, { Component } from 'react';
-import { Device } from '../../../../../common/mobile/utils/device';
-import { f7 } from "framework7-react";
-import { Encoding } from "../../view/settings/Encoding";
-import { observer, inject } from "mobx-react";
-
-class EncodingController extends Component {
-    constructor(props) {
-        super(props);
-        this.onSaveFormat = this.onSaveFormat.bind(this);
-    }
-
-    closeModal() {
-        if (Device.phone) {
-            f7.sheet.close('.settings-popup', false);
-        } else {
-            f7.popover.close('#settings-popover');
-        }
-    }
-
-    onSaveFormat(mode, valueEncoding, valueDelimeter) {
-        const api = Common.EditorApi.get();
-        const storeEncoding = this.props.storeEncoding;
-
-        if(mode === 2) {
-            this.closeModal();
-            const formatOptions = storeEncoding.formatOptions;
-            formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
-            api.asc_DownloadAs(formatOptions);
-        } else {
-            storeEncoding.setMode(1);
-            const type = storeEncoding.type;
-            api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
-        }
-    }
-
-    render() {
-        return (
-            <Encoding onSaveFormat={this.onSaveFormat} />
-        );
-    }
-}
-
-export default inject("storeEncoding")(observer(EncodingController));

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

@@ -16,20 +16,6 @@ import { f7 } from 'framework7-react';
 import {FunctionGroups} from "../controller/add/AddFunction";
 import ContextMenu from '../controller/ContextMenu';
 import { Toolbar } from "../controller/Toolbar";
-import EncodingController from "../controller/Encoding";
-import {PageEncodingList, PageDelimeterList} from '../view/Encoding';
-
-
-const routes = [
-    {
-        path: '/encoding-list/',
-        component: PageEncodingList
-    },
-    {
-        path: '/delimeter-list/',
-        component: PageDelimeterList
-    }
-];
 
 class MainPage extends Component {
     constructor(props) {
@@ -39,8 +25,7 @@ class MainPage extends Component {
             addOptionsVisible: false,
             addShowOptions: null,
             settingsVisible: false,
-            collaborationVisible: false,
+            collaborationVisible: false
-            encodingVisible: false
         };
     }
 
@@ -57,8 +42,6 @@ class MainPage extends Component {
                 };
             else if ( opts == 'settings' )
                 return {settingsVisible: true};
-            else if ( opts == 'encoding' )
-                return {encodingVisible: true};
             else if ( opts == 'coauth' )
                 return {collaborationVisible: true};
         });
@@ -77,8 +60,6 @@ class MainPage extends Component {
                     return {addOptionsVisible: false};
                 else if ( opts == 'settings' )
                     return {settingsVisible: false};
-                else if ( opts == 'encoding' )
-                    return {encodingVisible: false};
                 else if ( opts == 'coauth' )
                     return {collaborationVisible: false};
             });
@@ -132,11 +113,6 @@ class MainPage extends Component {
                     !this.state.collaborationVisible ? null :
                         <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
                 }
-                {
-                    !this.state.encodingVisible && this.props.storeEncoding.mode ? null : 
-                        <EncodingController routes={routes} openOptions={this.handleClickToOpenOeptions} 
-                            onclosed={this.handleOptionsViewClosed.bind(this, 'encoding')} />
-                }
 
                 <FilterOptionsController />
                 
@@ -149,4 +125,4 @@ class MainPage extends Component {
   }
 }
 
-export default inject("storeAppOptions", "storeEncoding")(observer(MainPage));
+export default inject("storeAppOptions")(observer(MainPage));

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

@@ -1,51 +1,69 @@
-import React, {Component, useEffect} from 'react';
+import React, {Component, useEffect, useState} from 'react';
-import { observer, inject } from "mobx-react";
 import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton, Popover, Popup, View, Link } from "framework7-react";
 import { useTranslation } from "react-i18next";
 import { Device } from '../../../../common/mobile/utils/device';
 
-const PageEncoding = inject("storeEncoding")(observer(props => {
+const PageEncoding = props => {
     const { t } = useTranslation();
     const _t = t("View.Settings", { returnObjects: true });
-    const storeEncoding = props.storeEncoding;
+    const pagesName = props.pagesName;
-    const valueEncoding = storeEncoding.valueEncoding;
+    const pages = props.pages;
-    const nameDelimeter = storeEncoding.nameDelimeter;
+    const valuesDelimeter = props.valuesDelimeter;
-    const valueDelimeter = storeEncoding.valueDelimeter;
+    const namesDelimeter = props.namesDelimeter;
-    const nameEncoding = storeEncoding.nameEncoding;
+    const [stateEncoding, setStateEncoding] = useState(props.valueEncoding);
-    const mode = storeEncoding.mode;
+    const [stateDelimeter, setStateDelimeter] = useState(props.valueDelimeter);
-    const routes = props.routes;
+    const nameEncoding = pagesName[pages.indexOf(stateEncoding)];
+    const nameDelimeter = namesDelimeter[valuesDelimeter.indexOf(stateDelimeter)];
+    const mode = props.mode;
+
+    const changeStateEncoding = value => {
+        setStateEncoding(value);
+    }
+
+    const changeStateDelimeter = value => {
+        setStateDelimeter(value);
+    }
 
     return (
-        <View routes={routes}>
+        <View style={props.style} routes={routes}>
             <Page>
                 <Navbar title={_t.textChooseCsvOptions} />
                 <BlockTitle>{_t.textDelimeter}</BlockTitle>
                 <List>
-                    <ListItem title={nameDelimeter} link="/delimeter-list/"></ListItem>
+                    <ListItem title={nameDelimeter} link="/delimeter-list/" routeProps={{
+                        stateDelimeter,
+                        namesDelimeter: props.namesDelimeter,
+                        valuesDelimeter: props.valuesDelimeter,
+                        changeStateDelimeter
+                    }}></ListItem>
                 </List>
                 <BlockTitle>{_t.textEncoding}</BlockTitle>
                 <List>
-                    <ListItem title={nameEncoding} link="/encoding-list/"></ListItem>
+                    <ListItem title={nameEncoding} link="/encoding-list/" routeProps={{
+                        stateEncoding,
+                        pages: props.pages,
+                        pagesName: props.pagesName,
+                        changeStateEncoding
+                    }}></ListItem>
                 </List>
                 <List className="buttons-list">
                     {mode === 2 ? 
-                        <ListButton className='button-fill button-raised' title={_t.textCancel}></ListButton>
+                        <ListButton className='button-fill button-raised' title={_t.textCancel} onClick={() => props.closeModal()}></ListButton>
                     : null}
-                    <ListButton className='button-fill button-raised' title={mode === 2 ?_t.textDownload : _t.txtOk} onClick={() => props.onSaveFormat(mode, valueEncoding, valueDelimeter)}></ListButton>
+                    <ListButton className='button-fill button-raised' title={mode === 2 ?_t.textDownload : _t.txtOk} onClick={() => props.onSaveFormat(stateEncoding, stateDelimeter)}></ListButton>
                 </List>
             </Page>
         </View>
         
     )
-}));
+};
 
-const PageEncodingList = inject("storeEncoding")(observer(props => {
+const PageEncodingList = props => {
     const { t } = useTranslation();
     const _t = t("View.Settings", { returnObjects: true });
-    const storeEncoding = props.storeEncoding;
+    const [currentEncoding, changeCurrentEncoding] = useState(props.stateEncoding);
-    const valueEncoding = storeEncoding.valueEncoding;
+    const pages = props.pages;
-    const pages = storeEncoding.pages;
+    const pagesName = props.pagesName;
-    const pagesName = storeEncoding.pagesName;
     
     return (
         <Page>
@@ -54,8 +72,9 @@ const PageEncodingList = inject("storeEncoding")(observer(props => {
             <List>
                 {pagesName.map((name, index) => {
                     return (
-                        <ListItem radio checked={valueEncoding === pages[index]} title={name} key={index} value={pages[index]} onChange={() => {
+                        <ListItem radio checked={currentEncoding === pages[index]} title={name} key={index} value={pages[index]} onChange={() => {
-                            storeEncoding.changeEncoding(pages[index]);
+                            changeCurrentEncoding(pages[index]);
+                            props.changeStateEncoding(pages[index]);
                             f7.views.current.router.back();
                         }}></ListItem>
                     )
@@ -63,15 +82,14 @@ const PageEncodingList = inject("storeEncoding")(observer(props => {
             </List>
         </Page>
     )
-}));
+};
 
-const PageDelimeterList = inject("storeEncoding")(observer(props => {
+const PageDelimeterList = props => {
     const { t } = useTranslation();
     const _t = t("View.Settings", { returnObjects: true });
-    const storeEncoding = props.storeEncoding;
+    const [currentDelimeter, changeCurrentDelimeter] = useState(props.stateDelimeter);
-    const valueDelimeter = storeEncoding.valueDelimeter;
+    const namesDelimeter = props.namesDelimeter;
-    const namesDelimeter = storeEncoding.namesDelimeter;
+    const valuesDelimeter = props.valuesDelimeter;
-    const valuesDelimeter = storeEncoding.valuesDelimeter;
     
     return (
         <Page>
@@ -80,8 +98,9 @@ const PageDelimeterList = inject("storeEncoding")(observer(props => {
             <List>
                 {namesDelimeter.map((name, index) => {
                     return (
-                        <ListItem radio checked={valueDelimeter === valuesDelimeter[index]} title={name} key={index} value={valuesDelimeter[index]} onChange={() => {
+                        <ListItem radio checked={currentDelimeter === valuesDelimeter[index]} title={name} key={index} value={valuesDelimeter[index]} onChange={() => {
-                            storeEncoding.changeDelimeter(valuesDelimeter[index]);
+                            changeCurrentDelimeter(valuesDelimeter[index]);
+                            props.changeStateDelimeter(valuesDelimeter[index]);
                             f7.views.current.router.back();
                         }}></ListItem>
                     )
@@ -89,51 +108,88 @@ const PageDelimeterList = inject("storeEncoding")(observer(props => {
             </List>
         </Page>
     )
-}));
+};
 
 class EncodingView extends Component {
     constructor(props) {
         super(props);
-        this.onoptionclick = this.onoptionclick.bind(this);
-    }
-
-    onoptionclick(page){
-        f7.views.current.router.navigate(page);
     }
 
     render() {
         const show_popover = this.props.usePopover;
+
         return (
             show_popover ?
-                <Popover id="encoding-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
+                <Popover id="encoding-popover" className="popover__titled" closeByBackdropClick={false} closeByOutsideClick={false}>
-                    <PageEncoding inPopover={true} openOptions={this.props.openOptions} onOptionClick={this.onoptionclick} routes={this.props.routes} 
+                    <PageEncoding 
-                        onSaveFormat={this.props.onSaveFormat} />
+                        inPopover={true} 
+                        onSaveFormat={this.props.onSaveFormat}
+                        closeModal={this.props.closeModal}
+                        mode={this.props.mode}  
+                        formatOptions={this.props.formatOptions} 
+                        pages={this.props.pages}
+                        pagesName={this.props.pagesName}
+                        namesDelimeter={this.props.namesDelimeter}
+                        valueEncoding={this.props.valueEncoding}
+                        valueDelimeter={this.props.valueDelimeter}
+                        valuesDelimeter={this.props.valuesDelimeter}
+                        style={{height: '410px'}}
+                    />
                 </Popover> :
-                <Popup className="encoding-popup" onPopupClosed={() => this.props.onclosed()}>
+                <Popup className="encoding-popup">
-                    <PageEncoding onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} routes={this.props.routes} 
+                    <PageEncoding 
-                        onSaveFormat={this.props.onSaveFormat} />
+                        onSaveFormat={this.props.onSaveFormat} 
+                        closeModal={this.props.closeModal}
+                        mode={this.props.mode}  
+                        formatOptions={this.props.formatOptions} 
+                        pages={this.props.pages}
+                        pagesName={this.props.pagesName}
+                        namesDelimeter={this.props.namesDelimeter}
+                        valueEncoding={this.props.valueEncoding}
+                        valueDelimeter={this.props.valueDelimeter}
+                        valuesDelimeter={this.props.valuesDelimeter}
+                    />
                 </Popup>
         )
     }
 }
 
+const routes = [
+    {
+        path: '/encoding-list/',
+        component: PageEncodingList
+    },
+    {
+        path: '/delimeter-list/',
+        component: PageDelimeterList
+    }
+];
+
 const Encoding = props => {
     useEffect(() => {
         if ( Device.phone )
             f7.popup.open('.encoding-popup');
-        else f7.popover.open('#encoding-popover');
+        else f7.popover.open('#encoding-popover', "#btn-settings");
 
         return () => {
         }
     });
 
-
+    return (
-    const onviewclosed = () => {
+        <EncodingView 
-        if ( props.onclosed )
+            usePopover={!Device.phone} 
-            props.onclosed();
+            closeModal={props.closeModal}
-    };
+            onSaveFormat={props.onSaveFormat} 
-
+            mode={props.mode}  
-    return <EncodingView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} onSaveFormat={props.onSaveFormat} routes={props.routes} />
+            formatOptions={props.formatOptions} 
+            pages={props.pages}
+            pagesName={props.pagesName}
+            namesDelimeter={props.namesDelimeter}
+            valueEncoding={props.valueEncoding}
+            valueDelimeter={props.valueDelimeter}
+            valuesDelimeter={props.valuesDelimeter}
+        />
+    )
 };
 
 export {Encoding, PageEncodingList, PageDelimeterList}

apps/spreadsheeteditor/mobile/src/view/settings/Encoding.jsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { observer, inject } from "mobx-react";
-import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton } from "framework7-react";
-import { useTranslation } from "react-i18next";
-
-const PageEncoding = props => {
-    const { t } = useTranslation();
-    const _t = t("View.Settings", { returnObjects: true });
-    const storeEncoding = props.storeEncoding;
-    const valueEncoding = storeEncoding.valueEncoding;
-    const nameDelimeter = storeEncoding.nameDelimeter;
-    const valueDelimeter = storeEncoding.valueDelimeter;
-    const nameEncoding = storeEncoding.nameEncoding;
-    const mode = storeEncoding.mode;
-
-    return (
-        <Page>
-            <Navbar title={_t.textChooseCsvOptions} backLink={mode === 2 ? _t.textBack : ''} />
-            <BlockTitle>{_t.textDelimeter}</BlockTitle>
-            <List>
-                <ListItem title={nameDelimeter} href="/delimeter-list/"></ListItem>
-            </List>
-            <BlockTitle>{_t.textEncoding}</BlockTitle>
-            <List>
-                <ListItem title={nameEncoding} href="/encoding-list/"></ListItem>
-            </List>
-            <List className="buttons-list">
-                <ListButton className='button-fill button-raised' title={mode === 2 ?_t.textDownload : _t.txtOk} onClick={() => props.onSaveFormat(mode, valueEncoding, valueDelimeter)}></ListButton>
-            </List>
-        </Page>
-    )
-}
-
-const PageEncodingList = props => {
-    const { t } = useTranslation();
-    const _t = t("View.Settings", { returnObjects: true });
-    const storeEncoding = props.storeEncoding;
-    const valueEncoding = storeEncoding.valueEncoding;
-    const pages = storeEncoding.pages;
-    const pagesName = storeEncoding.pagesName;
-    
-    return (
-        <Page>
-            <Navbar title={_t.txtDownloadCsv} backLink={_t.textBack} />
-            <BlockTitle>{_t.textChooseEncoding}</BlockTitle>
-            <List>
-                {pagesName.map((name, index) => {
-                    return (
-                        <ListItem radio checked={valueEncoding === pages[index]} title={name} key={index} value={pages[index]} onChange={() => {
-                            storeEncoding.changeEncoding(pages[index]);
-                            f7.views.current.router.back();
-                        }}></ListItem>
-                    )
-                })}
-            </List>
-        </Page>
-    )
-}
-
-const PageDelimeterList = props => {
-    const { t } = useTranslation();
-    const _t = t("View.Settings", { returnObjects: true });
-    const storeEncoding = props.storeEncoding;
-    const valueDelimeter = storeEncoding.valueDelimeter;
-    const namesDelimeter = storeEncoding.namesDelimeter;
-    const valuesDelimeter = storeEncoding.valuesDelimeter;
-    
-    return (
-        <Page>
-            <Navbar title={_t.txtDownloadCsv} backLink={_t.textBack} />
-            <BlockTitle>{_t.textChooseDelimeter}</BlockTitle>
-            <List>
-                {namesDelimeter.map((name, index) => {
-                    return (
-                        <ListItem radio checked={valueDelimeter === valuesDelimeter[index]} title={name} key={index} value={valuesDelimeter[index]} onChange={() => {
-                            storeEncoding.changeDelimeter(valuesDelimeter[index]);
-                            f7.views.current.router.back();
-                        }}></ListItem>
-                    )
-                })}
-            </List>
-        </Page>
-    )
-}
-
-const Encoding = inject("storeEncoding")(observer(PageEncoding));
-const EncodingList = inject("storeEncoding")(observer(PageEncodingList));
-const DelimeterList = inject("storeEncoding")(observer(PageDelimeterList));
-
-export {EncodingList, Encoding, DelimeterList}

apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx

@@ -12,8 +12,6 @@ import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from '.
 import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx';
 // import SpreadsheetAbout from './SpreadsheetAbout.jsx';
 import About from '../../../../../common/mobile/lib/view/About';
-import EncodingController from '../../controller/settings/Encoding';
-import { EncodingList, DelimeterList } from '../../view/settings/Encoding';
 
 const routes = [
     {
@@ -63,19 +61,7 @@ const routes = [
     {
         path: '/about/',
         component: About
-    },
+    }
-    // {
-    //     path: '/encoding/',
-    //     component: EncodingController
-    // },
-    // {
-    //     path: '/encoding-list/',
-    //     component: EncodingList
-    // },
-    // {
-    //     path: '/delimeter-list/',
-    //     component: DelimeterList
-    // }
 ];
 
 
@@ -138,7 +124,6 @@ const SettingsList = inject("storeAppOptions", "storeEncoding")(observer(props =
     } 
     
     return (
-        // onClick={onoptionclick.bind(this, "/download/")}
         <View style={props.style} stackPages={true} routes={routes}>
             <Page>
                 {navbar}
@@ -161,7 +146,7 @@ const SettingsList = inject("storeAppOptions", "storeEncoding")(observer(props =
                     <ListItem title={_t.textApplicationSettings} link="#" onClick={onoptionclick.bind(this, '/application-settings/')}>
                         <Icon slot="media" icon="icon-app-settings"></Icon>
                     </ListItem>
-                    <ListItem title={_t.textDownload} link="/download/" routeProps={{openOptions: props.openOptions}}>
+                    <ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, '/download/')}>
                         <Icon slot="media" icon="icon-download"></Icon>
                     </ListItem>
                     <ListItem title={_t.textPrint} onClick={onPrint}>