[DE mobile] Bug 47403

apps/documenteditor/mobile/locale/en.json

@@ -333,7 +333,9 @@
     "textReplaceAll": "Replace All",
     "textCaseSensitive": "Case Sensitive",
     "textHighlightResults": "Highlight Results",
-    "textSearch": "Search"
+    "textSearch": "Search",
+    "textMarginsW": "Left and right margins are too high for a given page width",
+    "textMarginsH": "Top and bottom margins are too high for a given page height"
   },
   "Edit": {
     "textClose": "Close",

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

@@ -24,13 +24,13 @@ class DocumentSettingsController extends Component {
         }
     }
 
-    getMargins () {
+    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;
+                this.maxMarginsH = this.localSectionProps.get_H() - 2.6;
+                this.maxMarginsW = this.localSectionProps.get_W() - 12.7;
 
                 const top = this.localSectionProps.get_TopMargin();
                 const bottom = this.localSectionProps.get_BottomMargin();
@@ -51,6 +51,7 @@ class DocumentSettingsController extends Component {
 
     applyMargins (align, value) {
         const api = Common.EditorApi.get();
+
         if (api) {
             switch (align) {
                 case 'left':

apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx

@@ -3,6 +3,7 @@ import {observer, inject} from "mobx-react";
 import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button, Icon} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
+import { f7 } from 'framework7-react';
 
 const PageDocumentFormats = props => {
     const { t } = useTranslation();
@@ -11,6 +12,29 @@ const PageDocumentFormats = props => {
     const pageSizesIndex = storeSettings.pageSizesIndex;
     const pageSizes = storeSettings.getPageSizesList();
     const textMetric = Common.Utils.Metric.getCurrentMetricName();
+    const margins = props.getMargins();
+    const maxMarginsW = margins.maxMarginsW;
+    const maxMarginsH = margins.maxMarginsH;
+
+    // console.log(margins.left, margins.right, margins.top, margins.bottom);
+    // console.log(maxMarginsW, maxMarginsH);
+
+    const onFormatChange = (value) => {
+        let errorMsg;
+
+        if (margins.left + margins.right > maxMarginsW) {
+            errorMsg = _t.textMarginsW;
+        } else if (margins.top + margins.bottom > maxMarginsH) {
+            errorMsg = _t.textMarginsH;
+        }
+
+        if(errorMsg) {
+            f7.dialog.alert(errorMsg, _t.notcriticalErrorTitle);
+        } else {
+            props.onFormatChange(value);
+        }
+    }
+
     return (
         <Page>
             <Navbar title={_t.textDocumentSettings} backLink={_t.textBack} />
@@ -21,7 +45,7 @@ const PageDocumentFormats = props => {
                                                           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)}}
+                                                          onClick={e => onFormatChange(item.value)}
                 ></ListItem>)}
             </List>
         </Page>
@@ -38,26 +62,31 @@ const PageDocumentMargins = props => {
     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);
     };
 
@@ -210,7 +239,8 @@ const PageDocumentSettings = props => {
             <BlockTitle>{_t.textFormat}</BlockTitle>
             <List mediaList>
                 <ListItem title={textFormat} subtitle={pageSizeTxt} link="/document-formats/" routeProps={{
-                    onFormatChange: props.onFormatChange
+                    onFormatChange: props.onFormatChange,
+                    getMargins: props.getMargins
                 }}></ListItem>
                 <ListItem title={_t.textMargins} link="/margins/" routeProps={{
                     getMargins: props.getMargins,