Merge branch 'feature/fix-bug-on-reactjs' into develop

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

@@ -505,6 +505,12 @@
     }
 }
 
+#edit-table-style {
+    .list ul ul {
+        padding-left: 0;
+    }
+}
+
 // Cell styles 
 
 .cell-styles-list {

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

@@ -25,6 +25,7 @@ class ContextMenu extends ContextMenuController {
         this.onApiHideComment = this.onApiHideComment.bind(this);
         this.onApiShowChange = this.onApiShowChange.bind(this);
         this.getUserName = this.getUserName.bind(this);
+        this.ShowModal = this.ShowModal.bind(this);
     }
 
     static closeContextMenu() {
@@ -43,9 +44,13 @@ class ContextMenu extends ContextMenuController {
         api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
         api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
         api.asc_unregisterCallback('asc_onShowRevisionsChange', this.onApiShowChange);
+        Common.Notifications.off('showSplitModal', this.ShowModal);
     }
 
-
+    ShowModal() {
+        this.showSplitModal()
+    }
+    
     onApiShowComment(comments) {
         this.isComments = comments && comments.length > 0;
     }
@@ -199,6 +204,7 @@ class ContextMenu extends ContextMenuController {
         api.asc_registerCallback('asc_onShowComment', this.onApiShowComment);
         api.asc_registerCallback('asc_onHideComment', this.onApiHideComment);
         api.asc_registerCallback('asc_onShowRevisionsChange', this.onApiShowChange);
+        Common.Notifications.on('showSplitModal', this.ShowModal);
     }
 
     initMenuItems() {

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

@@ -199,14 +199,18 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
             Common.Gateway.reportWarning(id, config.msg);
 
             config.title    = _t.notcriticalErrorTitle;
+        
             config.callback = (btn) => {
                 if (id === Asc.c_oAscError.ID.Warning && btn === 'ok' && (storeAppOptions.canDownload || storeAppOptions.canDownloadOrigin)) {
                     api.asc_DownloadOrigin();
+                } else if(id === Asc.c_oAscError.ID.SplitCellMaxRows ||
+                                 Asc.c_oAscError.ID.SplitCellMaxCols ||
+                                 Asc.c_oAscError.ID.SplitCellRowsDivider && btn === 'ok' && (storeAppOptions.canDownload || storeAppOptions.canDownloadOrigin)) {
+                        Common.Notifications.trigger('showSplitModal',true);
                 }
                 storeAppOptions.changeEditingRights(false);
             };
         }
-
         f7.dialog.create({
             cssClass: 'error-dialog',
             title   : config.title,

apps/documenteditor/mobile/src/view/edit/EditShape.jsx

@@ -507,6 +507,9 @@ const EditShape = props => {
     const storeShapeSettings = props.storeShapeSettings;
     const shapeObject = props.storeFocusObjects.shapeObject;
     const wrapType = storeShapeSettings.getWrapType(shapeObject);
+    
+    let disableRemove = !!props.storeFocusObjects.paragraphObject;
+
     return (
         <Fragment>
             <List>
@@ -537,7 +540,7 @@ const EditShape = props => {
                 }}></ListItem>
             </List>
             <List className="buttons-list">
-                <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className='button-red button-fill button-raised'/>
+                <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} />
             </List>
         </Fragment>
     )

apps/documenteditor/mobile/src/view/edit/EditTable.jsx

@@ -173,40 +173,25 @@ const PageWrap = props => {
 
 // Style
 
-const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyleClick, storeFocusObjects}) => {
+const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
     const tableObject = storeFocusObjects.tableObject;
     const styleId = tableObject && tableObject.get_TableStyle();
     const [stateId, setId] = useState(styleId);
-
-    const widthContainer = document.querySelector(".page-content").clientWidth;
-    const columns = parseInt((widthContainer - 47) / 70); // magic
-    const styles = [];
-    let row = -1;
-    templates.forEach((style, index) => {
-        if (0 == index % columns) {
-            styles.push([]);
-            row++
-        }
-        styles[row].push(style);
-    });
+    const styles =  storeTableSettings.styles;
 
     return (
         <div className="dataview table-styles">
-            {styles.map((row, rowIndex) => {
-                return (
-                    <div className="row" key={`row-${rowIndex}`}>
-                        {row.map((style, index)=>{
-                            return(
-                                <div key={`${rowIndex}-${index}`}
-                                     className={style.templateId === stateId ? 'active' : ''}
-                                     onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
-                                    <img src={style.imageUrl} />
-                                </div>
-                            )
-                        })}
-                    </div>
-                )
-            })}
+            <ul className="row">
+                    {styles.map((style, index) => {
+                        return (
+                            <li key={index}
+                                className={style.templateId === stateId ? 'active' : ''}
+                                onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
+                                <img src={style.imageUrl}/>
+                            </li>
+                        )
+                    })}
+            </ul>
         </div>
     )
 }));

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

@@ -12,6 +12,8 @@ const EditShape = props => {
     const shapeObject = storeFocusObjects.shapeObject;
     const canFill = shapeObject && shapeObject.get_CanFill();
 
+    let disableRemove = !!props.storeFocusObjects.paragraphObject;
+
     return (
         <Fragment>
             <List>
@@ -39,7 +41,7 @@ const EditShape = props => {
                 }}></ListItem>
             </List>
             <List className="buttons-list">
-                <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
+                <ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
             </List>
         </Fragment>
     )

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

@@ -7,45 +7,30 @@ import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile
 
 // Style
 
-const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyleClick, storeFocusObjects}) => {
+const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
     const tableObject = storeFocusObjects.tableObject;
     const styleId = tableObject ? tableObject.get_TableStyle() : null;
     const [stateId, setId] = useState(styleId);
-
-    const widthContainer = document.querySelector(".page-content").clientWidth;
-    const columns = parseInt((widthContainer - 47) / 70); // magic
-    const styles = [];
-    let row = -1;
-    templates.forEach((style, index) => {
-        if (0 == index % columns) {
-            styles.push([]);
-            row++
-        }
-        styles[row].push(style);
-    });
+    const styles =  storeTableSettings.styles;
 
     if (!tableObject && Device.phone) {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
         return null;
     }
-
+            
     return (
         <div className="dataview table-styles">
-            {styles.map((row, rowIndex) => {
-                return (
-                    <div className="row" key={`row-${rowIndex}`}>
-                        {row.map((style, index)=>{
-                            return(
-                                <div key={`${rowIndex}-${index}`}
-                                    className={style.templateId === stateId ? 'active' : ''}
-                                    onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
-                                    <img src={style.imageUrl} />
-                                </div>
-                            )
-                        })}
-                    </div>
-                )
-            })}
+            <ul className="row">
+                    {styles.map((style, index) => {
+                        return (
+                            <li key={index}
+                                className={style.templateId === stateId ? 'active' : ''}
+                                onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
+                                <img src={style.imageUrl}/>
+                            </li>
+                        )
+                    })}
+                </ul>
         </div>
     )
 }));

apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx

@@ -12,6 +12,8 @@ const EditShape = props => {
     const shapeObject = storeFocusObjects.shapeObject;
     const canFill = shapeObject && shapeObject.get_ShapeProperties().asc_getCanFill();
 
+    let disableRemove = storeFocusObjects.selections.indexOf('text') > -1;
+
     return (
         <Fragment>
             <List>
@@ -36,7 +38,7 @@ const EditShape = props => {
                 }}></ListItem>
             </List>
             <List className="buttons-list">
-                <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
+                <ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
             </List>
         </Fragment>
     )