Merge branch 'feature/mobile-apps-on-reactjs-fixes' into feature/mobile-apps-on-reactjs

apps/common/mobile/resources/less/common.less

@@ -25,6 +25,13 @@
     }
 }
 
+.navbar {
+    .title {
+        text-overflow: initial;
+        white-space: normal;
+    }
+}
+
 .subnavbar {
     .subnavbar-inner {
         padding: 0;
@@ -65,6 +72,16 @@
     padding: 14px 10px 0 10px;
 }
 
+.list {
+    .item-text {
+        text-overflow: initial;
+        white-space: normal;
+        height: auto;
+        max-height: initial;
+        -webkit-line-clamp: initial;
+    }
+}
+
 .shapes {
     li {
         width: 70px;
@@ -226,8 +243,8 @@
         position: relative;
         margin: 0;
         box-shadow: 0 0 0 1px rgba(0,0,0,.15);
-        width: 85px;
+        width: 88px;
-        height: 38px;
+        height: 40px;
         margin-top: 14px;
         background-image: url(../img/themes/themes.png);
         display: block;

apps/documenteditor/mobile/locale/en.json

@@ -334,7 +334,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

@@ -29,8 +29,8 @@ class DocumentSettingsController extends Component {
         if (api) {
             this.localSectionProps = api.asc_GetSectionProps();
             if (this.localSectionProps) {
-                this.maxMarginsH = this.localSectionProps.get_H() - 26;
+                this.maxMarginsH = this.localSectionProps.get_H() - 2.6;
-                this.maxMarginsW = this.localSectionProps.get_W() - 127;
+                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,

apps/presentationeditor/mobile/src/controller/edit/EditText.jsx

@@ -100,6 +100,8 @@ class EditTextController extends Component {
             newDistance = (distance < 0) ? 0 : Math.min(maxValue, distance + step);
         }
 
+        newDistance = parseFloat(newDistance.toFixed(2));
+
         api.put_LineSpacingBeforeAfter(0, (newDistance < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(newDistance));
     };
 
@@ -122,6 +124,8 @@ class EditTextController extends Component {
             newDistance = (distance < 0) ? 0 : Math.min(maxValue, distance + step);
         }
 
+        newDistance = parseFloat(newDistance.toFixed(2));
+
         api.put_LineSpacingBeforeAfter(1, (newDistance < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(newDistance));
     };
 

apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx

@@ -18,8 +18,8 @@ class PresentationSettingsController extends Component {
                 [12192000, 6858000, Asc.c_oAscSlideSZType.SzCustom]
             ];
 
-            this.props.storePresentationSettings.changeSizeIndex(api.get_PresentationWidth(), api.get_PresentationHeight());
             this.props.storePresentationSettings.initSlideSizes(slideSizes);
+            this.props.storePresentationSettings.changeSizeIndex(api.get_PresentationWidth(), api.get_PresentationHeight());
             this.init = true;
         }
     }
@@ -30,7 +30,7 @@ class PresentationSettingsController extends Component {
         let ratio = slideSizeArr[1] / slideSizeArr[0];
         let currentHeight = this.props.storePresentationSettings.currentPageSize.height;
         let currentPageSize = {
-            width: (currentHeight || slideSizeArr[1]) / ratio,
+            width: ((currentHeight || slideSizeArr[1]) / ratio),
             height: currentHeight
         };
         // api.changeSlideSize(slideSizeArr[0], slideSizeArr[1], slideSizeArr[2]);

apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx

@@ -48,6 +48,8 @@ const PageTheme = props => {
     const defaultThemes = arrayThemes[0];
     const docThemes = arrayThemes[1];
 
+    console.log(arrayThemes);
+   
     // console.log(slideThemeIndex);
     // console.log(arrayThemes);
   
@@ -63,7 +65,7 @@ const PageTheme = props => {
                     {defaultThemes.map((elem, index) => {
                         return (
                             <ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"} 
-                                style={{backgroundPosition: "0 " + index * -38 + "px"}} 
+                                style={{backgroundPosition: "0 " + index * -40 + "px"}} 
                                 onClick={() => {
                                     storeSlideSettings.changeSlideThemeIndex(elem.Index);
                                     props.onThemeClick(elem.Index);

apps/presentationeditor/mobile/src/view/edit/EditText.jsx

@@ -33,8 +33,8 @@ const EditText = props => {
         spaceAfter  = paragraphObj.get_Spacing().get_After() < 0 ? paragraphObj.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_After());
     }
 
-    const displayBefore = spaceBefore && spaceBefore < 0 ? _t.textAuto : spaceBefore + ' ' + metricText;
+    const displayBefore = spaceBefore && spaceBefore < 0 ? _t.textAuto : parseFloat(spaceBefore.toFixed(2)) + ' ' + metricText;
-    const displayAfter = spaceAfter && spaceAfter < 0 ? _t.textAuto : spaceAfter + ' ' + metricText;
+    const displayAfter = spaceAfter && spaceAfter < 0 ? _t.textAuto : parseFloat(spaceAfter.toFixed(2)) + ' ' + metricText;
 
     const fontColorPreview = fontColor !== 'auto' ?
         <span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :

apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx

@@ -6,10 +6,10 @@ import { useTranslation } from "react-i18next";
 const PagePresentationSettings = props => {
     const { t } = useTranslation();
     const _t = t("View.Settings", { returnObjects: true });
-    // props.initSlideSize();
     const storePresentationSettings = props.storePresentationSettings;
     const slideSizeArr = storePresentationSettings.slideSizes;
     const slideSizeIndex = storePresentationSettings.slideSizeIndex;
+    // console.log(slideSizeIndex);
 
     return (
         <Page>