[DE mobile] Add format settings (size, margins) into document settings

apps/documenteditor/mobile/locale/en.json

@@ -1,5 +1,5 @@
 {
-  "ViewSettings": {
+  "Settings": {
     "textSettings": "Settings",
     "textDone": "Done",
     "textFindAndReplace": "Find and Replace",
@@ -15,7 +15,12 @@
     "textLandscape": "Landscape",
     "textFormat": "Format",
     "textMargins": "Margins",
-    "textBack": "Back"
+    "textBack": "Back",
+    "textCustomSize": "Custom Size",
+    "textTop": "Top",
+    "textBottom": "Bottom",
+    "textLeft": "Left",
+    "textRight": "Right"
   },
   "Collaboration": {
     "textEditUser": "Users who are editing the file:"

apps/documenteditor/mobile/src/components/settings/Settings.jsx

@@ -4,9 +4,8 @@ import { withTranslation } from 'react-i18next';
 import {f7} from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device'
 
-import DocumentSettingsController from "../settings/controller/DocumentSettings.jsx";
+import DocumentSettingsController from "../settings/controller/DocumentSettings";
-import Margins from "../settings/document-settings/Margins.jsx";
+import { DocumentFormats, DocumentMargins } from "../settings/document-settings/DocumentSettings";
-import DocumentFormats from "../settings/document-settings/DocumentFormats.jsx";
 
 const routes = [
     {
@@ -19,7 +18,7 @@ const routes = [
     },
     {
         path: '/margins/',
-        component: Margins,
+        component: DocumentMargins,
     },
     {
         path: '/document-formats/',
@@ -30,9 +29,9 @@ const routes = [
 
 const SettingsList = withTranslation()(props => {
     const {t} = props;
-    const _t = t('ViewSettings', {returnObjects: true});
+    const _t = t('Settings', {returnObjects: true});
-    const navbar = <Navbar title={t('ViewSettings.textSettings')}>
+    const navbar = <Navbar title={_t.textSettings}>
-                    {!props.inPopover  && <NavRight><Link popupClose=".settings-popup">{t('ViewSettings.textDone')}</Link></NavRight>}
+                    {!props.inPopover  && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
                     </Navbar>;
 
     const onoptionclick = page => {
@@ -62,16 +61,16 @@ const SettingsList = withTranslation()(props => {
                     <ListItem title={_t.textDownload} link="#">
                         <Icon slot="media" icon="icon-download"></Icon>
                     </ListItem>
-                    <ListItem title={t('ViewSettings.textPrint')}>
+                    <ListItem title={_t.textPrint}>
                         <Icon slot="media" icon="icon-print"></Icon>
                     </ListItem>
-                    <ListItem title={t('ViewSettings.textDocumentInfo')} link="#">
+                    <ListItem title={_t.textDocumentInfo} link="#">
                         <Icon slot="media" icon="icon-info"></Icon>
                     </ListItem>
-                    <ListItem title={t('ViewSettings.textHelp')} link="#">
+                    <ListItem title={_t.textHelp} link="#">
                         <Icon slot="media" icon="icon-help"></Icon>
                     </ListItem>
-                    <ListItem title={t('ViewSettings.textAbout')} link="#">
+                    <ListItem title={_t.textAbout} link="#">
                         <Icon slot="media" icon="icon-about"></Icon>
                     </ListItem>
                 </List>

apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx

@@ -1,21 +1,82 @@
 
 import React, {Component} from 'react';
-import DocumentSettings from '../document-settings/DocumentSettings'
+import {DocumentSettings} from '../document-settings/DocumentSettings';
 
 
 class DocumentSettingsController extends Component {
-    constructor(props) {
+    constructor (props) {
-        super(props);
+        super (props);
+        this.getMargins = this.getMargins.bind(this);
+        this.applyMargins = this.applyMargins.bind(this);
     }
 
-    onPageOrientation(value){
+    onPageOrientation (value){
         const api = Common.EditorApi.get();
-        api.change_PageOrient(value=='portrait');
+        if (api) {
+            api.change_PageOrient(value == 'portrait');
+        }
     }
 
-    render() {
+    onFormatChange (value) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.change_DocSize(value[0], value[1]);
+        }
+    }
+
+    getMargins () {
+        const api = Common.EditorApi.get();
+        if (api) {
+            this.localSectionProps = api.asc_GetSectionProps();
+            if (this.localSectionProps) {
+                this.maxMarginsH = this.localSectionProps.get_H() - 26;
+                this.maxMarginsW = this.localSectionProps.get_W() - 127;
+
+                const top = this.localSectionProps.get_TopMargin();
+                const bottom = this.localSectionProps.get_BottomMargin();
+                const left = this.localSectionProps.get_LeftMargin();
+                const right = this.localSectionProps.get_RightMargin();
+
+                return {
+                    top,
+                    bottom,
+                    left,
+                    right,
+                    maxMarginsW: this.maxMarginsW,
+                    maxMarginsH: this.maxMarginsH
+                }
+            }
+        }
+    }
+
+    applyMargins (align, value) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            switch (align) {
+                case 'left':
+                    this.localSectionProps.put_LeftMargin(value);
+                    break;
+                case 'top':
+                    this.localSectionProps.put_TopMargin(value);
+                    break;
+                case 'right':
+                    this.localSectionProps.put_RightMargin(value);
+                    break;
+                case 'bottom':
+                    this.localSectionProps.put_BottomMargin(value);
+                    break;
+            }
+            api.asc_SetSectionProps(this.localSectionProps);
+        }
+    }
+
+    render () {
         return (
-            <DocumentSettings onPageOrientation={this.onPageOrientation} />
+            <DocumentSettings onPageOrientation={this.onPageOrientation}
+                              onFormatChange={this.onFormatChange}
+                              getMargins={this.getMargins}
+                              applyMargins={this.applyMargins}
+            />
         )
     }
 }

apps/documenteditor/mobile/src/components/settings/document-settings/DocumentFormats.jsx

@@ -1,22 +0,0 @@
-import React, {Component} from 'react';
-import {
-    Page,
-    Navbar
-} from 'framework7-react';
-
-export default class DocumentFormats extends Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const textDocumentFormats = "Document Formats";
-        const textBack = "Back";
-
-        return (
-            <Page>
-                <Navbar title={textDocumentFormats} backLink={textBack} />
-                <div>{textDocumentFormats}</div>
-            </Page>
-        )
-    }
-};

apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx

@@ -1,35 +1,163 @@
-import React, {Component} from 'react';
+import React, {useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {Page,Navbar,List,ListItem,BlockTitle} from 'framework7-react';
+import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button} from 'framework7-react';
-
+import { useTranslation } from 'react-i18next';
-const DocumentSettings = props => {
-    const textDocumentSettings = "Document Settings";
-    const textBack = "Back";
-    const textOrientation = "Orientation";
-    const textPortrait = "Portrait";
-    const textLandscape = "Landscape";
-    const textFormat = "Format";
-    const textMargins = "Margins";
-
-    const format = "A4";
-    const formatSize = "21 cm x 29.7 cm";
 
+const PageDocumentFormats = props => {
+    const { t } = useTranslation();
+    const _t = t('Settings', {returnObjects: true});
     const storeSettings = props.storeDocumentSettings;
+    const pageSizesIndex = storeSettings.pageSizesIndex;
+    const pageSizes = storeSettings.getPageSizesList();
+    const textMetric = Common.Utils.Metric.getCurrentMetricName();
     return (
         <Page>
-            <Navbar title={textDocumentSettings} backLink={textBack} />
+            <Navbar title={_t.textDocumentSettings} backLink={_t.textBack} />
-            <BlockTitle>{textOrientation}</BlockTitle>
-            <List>
-                <ListItem radio title={textPortrait} name="orientation-checkbox" checked={storeSettings.isPortrait} onClick={e => props.onPageOrientation('portrait')}></ListItem>
-                <ListItem radio title={textLandscape} name="orientation-checkbox" checked={!storeSettings.isPortrait} onClick={e => props.onPageOrientation('landscape')}></ListItem>
-            </List>
-            <BlockTitle>{textFormat}</BlockTitle>
             <List mediaList>
-                <ListItem title={format} subtitle={formatSize} link="/document-formats/"></ListItem>
+                {pageSizes.map((item, index) => <ListItem key={index}
-                <ListItem checkbox title={textMargins} link="/margins/"></ListItem>
+                                                          radio
+                                                          title={item.caption}
+                                                          subtitle={parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[0]).toFixed(2)) + ' ' + textMetric + ' x ' + parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[1]).toFixed(2)) + ' ' + textMetric}
+                                                          name="format-size-checkbox"
+                                                          checked={pageSizesIndex === index}
+                                                          onClick={e => {props.onFormatChange(item.value)}}
+                ></ListItem>)}
+            </List>
+        </Page>
+    )
+};
+
+const PageDocumentMargins = props => {
+    const { t } = useTranslation();
+    const _t = t('Settings', {returnObjects: true});
+    const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
+    const margins = props.getMargins();
+    const [stateTop, setTop] = useState(margins.top);
+    const [stateBottom, setBottom] = useState(margins.bottom);
+    const [stateLeft, setLeft] = useState(margins.left);
+    const [stateRight, setRight] = useState(margins.right);
+    const onChangeMargins = (align, isDecrement) => {
+        const step = Common.Utils.Metric.fnRecalcToMM(Common.Utils.Metric.getCurrentMetric() === Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
+        let marginValue;
+        switch (align) {
+            case 'left': marginValue = stateLeft; break;
+            case 'top': marginValue = stateTop; break;
+            case 'right': marginValue = stateRight; break;
+            case 'bottom': marginValue = stateBottom; break;
+        }
+        if (isDecrement) {
+            marginValue = Math.max(0, marginValue - step);
+        } else {
+            marginValue = Math.min((align == 'left' || align == 'right') ? margins.maxMarginsW : margins.maxMarginsH, marginValue + step);
+        }
+        switch (align) {
+            case 'left': setLeft(marginValue); break;
+            case 'top': setTop(marginValue); break;
+            case 'right': setRight(marginValue); break;
+            case 'bottom': setBottom(marginValue); break;
+        }
+        props.applyMargins(align, marginValue);
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textMargins} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textTop}>
+                    <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</div>
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement' onClick={() => {onChangeMargins('top', true)}}> - </Button>
+                            <Button outline className='increment' onClick={() => {onChangeMargins('top', false)}}> + </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+                <ListItem title={_t.textBottom}>
+                    <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2))+ ' ' + metricText}</div>
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement' onClick={() => {onChangeMargins('bottom', true)}}> - </Button>
+                            <Button outline className='increment' onClick={() => {onChangeMargins('bottom', false)}}> + </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+                <ListItem title={_t.textLeft}>
+                    <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2))+ ' ' + metricText}</div>
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement' onClick={() => {onChangeMargins('left', true)}}> - </Button>
+                            <Button outline className='increment' onClick={() => {onChangeMargins('left', false)}}> + </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+                <ListItem title={_t.textRight}>
+                    <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2))+ ' ' + metricText}</div>
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement' onClick={() => {onChangeMargins('right', true)}}> - </Button>
+                            <Button outline className='increment' onClick={() => {onChangeMargins('right', false)}}> + </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const PageDocumentSettings = props => {
+    const { t } = useTranslation();
+    const _t = t('Settings', {returnObjects: true});
+
+    const storeSettings = props.storeDocumentSettings;
+
+    //Init Format
+    const curMetricName = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
+    const pageSizesIndex = storeSettings.pageSizesIndex;
+    const widthDoc = storeSettings.widthDocument;
+    const heightDoc = storeSettings.heightDocument;
+    let textFormat;
+    let sizeW;
+    let sizeH;
+    if (pageSizesIndex === -1) {
+        textFormat = _t.textCustomSize;
+        sizeW = parseFloat(Common.Utils.Metric.fnRecalcFromMM(widthDoc).toFixed(2));
+        sizeH = parseFloat(Common.Utils.Metric.fnRecalcFromMM(heightDoc).toFixed(2));
+    } else {
+        const pageSizes = storeSettings.getPageSizesList();
+        textFormat = pageSizes[pageSizesIndex]['caption'];
+        sizeW = parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageSizes[pageSizesIndex]['value'][0]).toFixed(2));
+        sizeH = parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageSizes[pageSizesIndex]['value'][1]).toFixed(2));
+    }
+    const pageSizeTxt = sizeW + ' ' + curMetricName + ' x ' + sizeH + ' ' + curMetricName;
+
+    return (
+        <Page>
+            <Navbar title={_t.textDocumentSettings} backLink={_t.textBack} />
+            <BlockTitle>{_t.textOrientation}</BlockTitle>
+            <List>
+                <ListItem radio title={_t.textPortrait} name="orientation-checkbox" checked={storeSettings.isPortrait} onClick={e => props.onPageOrientation('portrait')}></ListItem>
+                <ListItem radio title={_t.textLandscape} name="orientation-checkbox" checked={!storeSettings.isPortrait} onClick={e => props.onPageOrientation('landscape')}></ListItem>
+            </List>
+            <BlockTitle>{_t.textFormat}</BlockTitle>
+            <List mediaList>
+                <ListItem title={textFormat} subtitle={pageSizeTxt} link="/document-formats/" routeProps={{
+                    onFormatChange: props.onFormatChange
+                }}></ListItem>
+                <ListItem title={_t.textMargins} link="/margins/" routeProps={{
+                    getMargins: props.getMargins,
+                    applyMargins: props.applyMargins
+                }}></ListItem>
             </List>
         </Page>
      )
 };
 
-export default inject("storeDocumentSettings")(observer(DocumentSettings));
+const DocumentFormats = inject("storeDocumentSettings")(observer(PageDocumentFormats));
+const DocumentMargins = inject("storeDocumentSettings")(observer(PageDocumentMargins));
+const DocumentSettings = inject("storeDocumentSettings")(observer(PageDocumentSettings));
+
+export {
+    DocumentSettings,
+    DocumentFormats,
+    DocumentMargins
+}

apps/documenteditor/mobile/src/components/settings/document-settings/Margins.jsx

@@ -1,22 +0,0 @@
-import React, {Component} from 'react';
-import {
-    Page,
-    Navbar
-} from 'framework7-react';
-
-export default class Margins extends Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const textMargins = "Margins";
-        const textBack = "Back";
-
-        return (
-            <Page>
-                <Navbar title={textMargins} backLink={textBack} />
-                <div>{textMargins}</div>
-            </Page>
-        )
-    }
-};

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

@@ -158,9 +158,12 @@ class MainController extends Component {
     }
 
     bindEvents() {
-        const storeSettings = this.props.storeDocumentSettings;
+        const storeDocumentSettings = this.props.storeDocumentSettings;
         this.api.asc_registerCallback('asc_onPageOrient', isPortrait => {
-            storeSettings.isPortrait = isPortrait === true;
+            storeDocumentSettings.resetPortrait(isPortrait);
+        });
+        this.api.asc_registerCallback('asc_onDocSize', (w, h) => {
+            storeDocumentSettings.changeDocSize(w, h);
         });
         const storeFocusObjects = this.props.storeFocusObjects;
         this.api.asc_registerCallback('asc_onFocusObject', objects => {

apps/documenteditor/mobile/src/controllers/Settings.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { changePageOrient } from '../store/actions/actions';
-import DocumentSettingsView from '../components/settings/document-settings/DocumentSettings';
-
-const DocumentSettingsController = connect(
-    state => ({
-        isPortrait: state.settings.isPortrait
-    }),
-    dispatch => bindActionCreators({
-        changePageOrient
-    }, dispatch)
-)(DocumentSettingsView);
-
-export { DocumentSettingsController as DocumentSettings};

apps/documenteditor/mobile/src/store/documentSettings.js

@@ -1,6 +1,62 @@
-
+import {action, observable, computed} from 'mobx';
-import {action, observable} from 'mobx';
 
 export class storeDocumentSettings {
-    @observable isPortrait = true
+    @observable isPortrait = true;
+    @action resetPortrait (isPortrait) {
+        this.isPortrait = isPortrait === true;
+    }
+
+    //Document Formats
+    @observable widthDocument;
+    @observable heightDocument;
+    @action changeDocSize (width, height) {
+        let w = width;
+        let h = height;
+        if (!this.isPortrait) {
+            const tempW = w;
+            w = h;
+            h = tempW;
+        }
+        this.widthDocument = w;
+        this.heightDocument = h;
+    }
+    getPageSizesList () {
+        const txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm);
+        const pageSizes = [
+                { caption: 'US Letter',             subtitle: '21,59 ' + txtCm + ' x 27,94 ' + txtCm,  value: [215.9, 279.4] },
+                { caption: 'US Legal',              subtitle: '21,59 ' + txtCm + ' x 35,56 ' + txtCm,  value: [215.9, 355.6] },
+                { caption: 'A4',                    subtitle: '21 ' + txtCm + ' x 29,7 ' +  txtCm,     value: [210, 297] },
+                { caption: 'A5',                    subtitle: '14,8 ' + txtCm + ' x 21 ' + txtCm,      value: [148, 210] },
+                { caption: 'B5',                    subtitle: '17,6 ' + txtCm + ' x 25 ' + txtCm,      value: [176, 250] },
+                { caption: 'Envelope #10',          subtitle: '10,48 ' + txtCm + ' x 24,13 ' + txtCm,  value: [104.8, 241.3] },
+                { caption: 'Envelope DL',           subtitle: '11 ' + txtCm + ' x 22 ' + txtCm,        value: [110, 220] },
+                { caption: 'Tabloid',               subtitle: '27,94 ' + txtCm + ' x 43,18 ' + txtCm,  value: [279.4, 431.8] },
+                { caption: 'A3',                    subtitle: '29,7 ' + txtCm + ' x 42 ' + txtCm,      value: [297, 420] },
+                { caption: 'Tabloid Oversize',      subtitle: '30,48 ' + txtCm + ' x 45,71 ' + txtCm,  value: [304.8, 457.1] },
+                { caption: 'ROC 16K',               subtitle: '19,68 ' + txtCm + ' x 27,3 ' + txtCm,   value: [196.8, 273] },
+                { caption: 'Envelope Choukei 3',    subtitle: '11,99 ' + txtCm + ' x 23,49 ' + txtCm,  value: [119.9, 234.9] },
+                { caption: 'Super B/A3',            subtitle: '33,02 ' + txtCm + ' x 48,25 ' + txtCm,  value: [330.2, 482.5] },
+                { caption: 'A0',                    subtitle: '84,1 ' + txtCm + ' x 118,9 ' + txtCm,   value: [841, 1189] },
+                { caption: 'A1',                    subtitle: '59,4 ' + txtCm + ' x 84,1 ' + txtCm,    value: [594, 841] },
+                { caption: 'A2',                    subtitle: '42 ' + txtCm + ' x 59,4 ' + txtCm,      value: [420, 594] },
+                { caption: 'A6',                    subtitle: '10,5 ' + txtCm + ' x 14,8 ' + txtCm,    value: [105, 148] }
+            ];
+        return pageSizes;
+    }
+    @computed get pageSizesIndex () {
+        let w = this.widthDocument;
+        let h = this.heightDocument;
+        let ind = -1;
+        const pageSizes = this.getPageSizesList();
+        pageSizes.forEach(function callback(size, index) {
+            if (Math.abs(size.value[0] - w) < 0.1 && Math.abs(size.value[1] - h) < 0.1) {
+                ind = index;
+            }
+        }, this);
+        if (ind === -1) {
+            ind = -1;
+        }
+        return ind;
+    }
+
 }