Merge pull request #971 from ONLYOFFICE/fix/fix-bugs-on-mobiles

Fix/fix bugs on mobiles

apps/common/mobile/resources/less/common-material.less

@@ -29,7 +29,6 @@
     --f7-range-knob-size: 16px;
 
     --f7-link-highlight-color: transparent;
-    --f7-touch-ripple-color: @touchColor;
     --f7-link-touch-ripple-color: @touchColor;
 
     .button {
@@ -42,6 +41,7 @@
     --f7-dialog-button-text-color: @themeColor;
 
     .navbar {
+        --f7-touch-ripple-color: @touchColor;
         .sheet-close {
             width: 56px;
             height: 56px;

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

@@ -4,12 +4,13 @@ import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import ToolbarView from "../view/Toolbar";
 
-const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo')(observer(props => {
+const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo', 'storeFocusObjects')(observer(props => {
     const {t} = useTranslation();
     const _t = t("Toolbar", { returnObjects: true });
 
     const appOptions = props.storeAppOptions;
     const isDisconnected = props.users.isDisconnected;
+    const isObjectLocked = props.storeFocusObjects.isLocked;
     const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments;
     const docTitle = props.storeSpreadsheetInfo.dataDoc ? props.storeSpreadsheetInfo.dataDoc.title : '';
 
@@ -20,9 +21,8 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
             const api = Common.EditorApi.get();
             api.asc_registerCallback('asc_onCanUndoChanged', onApiCanUndo);
             api.asc_registerCallback('asc_onCanRedoChanged', onApiCanRedo);
-            api.asc_registerCallback('asc_onSelectionChanged', onApiSelectionChanged);
+            api.asc_registerCallback('asc_onWorkbookLocked', onApiLocked);
-            api.asc_registerCallback('asc_onWorkbookLocked', onApiSelectionChanged);
+            api.asc_registerCallback('asc_onWorksheetLocked', onApiLocked);
-            api.asc_registerCallback('asc_onWorksheetLocked', onApiSelectionChanged);
             api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
 
             Common.Notifications.on('toolbar:activatecontrols', activateControls);
@@ -53,9 +53,8 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
             const api = Common.EditorApi.get();
             api.asc_unregisterCallback('asc_onCanUndoChanged', onApiCanUndo);
             api.asc_unregisterCallback('asc_onCanRedoChanged', onApiCanRedo);
-            //api.asc_unregisterCallback('asc_onSelectionChanged', onApiSelectionChanged); TO DO
+            api.asc_unregisterCallback('asc_onWorkbookLocked', onApiLocked);
-            api.asc_unregisterCallback('asc_onWorkbookLocked', onApiSelectionChanged);
+            api.asc_unregisterCallback('asc_onWorksheetLocked', onApiLocked);
-            api.asc_unregisterCallback('asc_onWorksheetLocked', onApiSelectionChanged);
             api.asc_unregisterCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
         }
     });
@@ -133,32 +132,9 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
     }
 
     const [disabledEditControls, setDisabledEditControls] = useState(false);
-    const onApiSelectionChanged = (cellInfo) => {
+    const onApiLocked = () => {
         if (isDisconnected) return;
-
+        props.storeFocusObjects.setIsLocked(Common.EditorApi.get().asc_getCellInfo());
-        const api = Common.EditorApi.get();
-        const info = !!cellInfo ? cellInfo : api.asc_getCellInfo();
-        let islocked = false;
-
-        switch (info.asc_getSelectionType()) {
-            case Asc.c_oAscSelectionType.RangeChart:
-            case Asc.c_oAscSelectionType.RangeImage:
-            case Asc.c_oAscSelectionType.RangeShape:
-            case Asc.c_oAscSelectionType.RangeChartText:
-            case Asc.c_oAscSelectionType.RangeShapeText:
-                const objects = api.asc_getGraphicObjectProps();
-                for ( let i in objects ) {
-                    if ( objects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image ) {
-                        if ((islocked = objects[i].asc_getObjectValue().asc_getLocked()))
-                            break;
-                    }
-                }
-                break;
-            default:
-                islocked = info.asc_getLocked();
-        }
-
-        setDisabledEditControls(islocked);
     };
 
     const onApiActiveSheetChanged = (index) => {
@@ -196,7 +172,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
                      onUndo={onUndo}
                      onRedo={onRedo}
                      disabledControls={disabledControls}
-                     disabledEditControls={disabledEditControls}
+                     disabledEditControls={disabledEditControls || isObjectLocked}
                      disabledSettings={disabledSettings}
                      displayCollaboration={displayCollaboration}
                      showEditDocument={showEditDocument}

apps/spreadsheeteditor/mobile/src/store/focusObjects.js

@@ -4,6 +4,7 @@ export class storeFocusObjects {
     constructor() {
         makeObservable(this, {
             focusOn: observable,
+            changeFocus: action,
             _focusObjects: observable,
             _cellInfo: observable,
             resetFocusObjects: action,
@@ -12,15 +13,21 @@ export class storeFocusObjects {
             selections: computed,
             shapeObject: computed,
             imageObject: computed,
-            chartObject: computed
+            chartObject: computed,
+            isLocked: observable,
+            setIsLocked: action
         });
     }
 
     focusOn = undefined;
+
+    changeFocus(isObj) {
+        this.focusOn = isObj ? 'obj' : 'cell';
+    }
+
     _focusObjects = [];
 
     resetFocusObjects(objects) {
-        this.focusOn = 'obj';
         this._focusObjects = objects;
     }
 
@@ -56,7 +63,6 @@ export class storeFocusObjects {
     _cellInfo;
 
     resetCellInfo (cellInfo) {
-        this.focusOn = 'cell';
         this._cellInfo = cellInfo;
     }
 
@@ -76,4 +82,28 @@ export class storeFocusObjects {
         return !!this.intf ? this.intf.getChartObject() : null;
     }
 
+    isLocked = false;
+
+    setIsLocked(info) {
+        let islocked = false;
+        switch (info.asc_getSelectionType()) {
+            case Asc.c_oAscSelectionType.RangeChart:
+            case Asc.c_oAscSelectionType.RangeImage:
+            case Asc.c_oAscSelectionType.RangeShape:
+            case Asc.c_oAscSelectionType.RangeChartText:
+            case Asc.c_oAscSelectionType.RangeShapeText:
+                const objects = Common.EditorApi.get().asc_getGraphicObjectProps();
+                for ( let i in objects ) {
+                    if ( objects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image ) {
+                        if ((islocked = objects[i].asc_getObjectValue().asc_getLocked()))
+                            break;
+                    }
+                }
+                break;
+            default:
+                islocked = info.asc_getLocked();
+        }
+        this.isLocked = islocked;
+    }
+
 }