[SSE mobile] Correct statusbar

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

@@ -836,6 +836,12 @@ input[type="number"]::-webkit-inner-spin-button {
     overflow: hidden;
 }
 
+// Statusbar
+
+.statusbar .statusbar--box-tabs > ul > .locked a {
+    box-shadow: inset 0 2px red;
+}
+
 
 
 

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

@@ -6,10 +6,9 @@ import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
 
-const StatusbarController = inject('sheets', 'storeFocusObjects')(observer(props => {
+const StatusbarController = inject('sheets', 'storeFocusObjects', 'users')(observer(props => {
-    const sheets = props.sheets;
+    const {sheets, storeFocusObjects, users} = props;
-    const storeFocusObjects = props.storeFocusObjects;
+ 
-
     useEffect(() => {
         Common.Notifications.on('engineCreated', api => {
             api.asc_registerCallback('asc_onWorkbookLocked', (locked) => {
@@ -23,11 +22,17 @@ const StatusbarController = inject('sheets', 'storeFocusObjects')(observer(props
             api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged);
             api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
             api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
-            // api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
+            api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
+            // api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect);
         });
         Common.Notifications.on('document:ready', onApiSheetsChanged);
+        // Common.Notifications.on('api:disconnect', onApiDisconnect);
     });
 
+    const onApiDisconnect = () => {
+        users.resetDisconnected(true);
+    }
+
     const onApiSheetsChanged = () => {
         const api = Common.EditorApi.get();
         const sheets_count = api.asc_getWorksheetsCount();
@@ -49,6 +54,8 @@ const StatusbarController = inject('sheets', 'storeFocusObjects')(observer(props
         }
 
         sheets.resetSheets(items);
+
+        updateTabsColors();
     };
 
     const onApiActiveSheetChanged = (index) => {
@@ -62,6 +69,51 @@ const StatusbarController = inject('sheets', 'storeFocusObjects')(observer(props
         f7.popover.close('.document-menu.modal-in', false);
     }
 
+
+    const loadTabColor = sheetindex => {
+        const api = Common.EditorApi.get();
+        let tab = sheets.sheets.find(sheet => sheet.index === sheetindex);
+
+        if (tab) {
+            setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex));
+        }
+        
+    };
+
+    const onApiUpdateTabColor = index => {
+        loadTabColor(index);
+    };
+
+    const setTabLineColor = (tab, color) => {
+        if (tab) {
+            if (null !== color) {
+                color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+            } else {
+                color = '';
+            }
+
+            if (color.length) {
+                if (!tab.active) {
+                    color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset';
+                } else {
+                    color = '0px 4px 0 ' + color + ' inset';
+                }
+                
+                $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', color);
+            } else {
+                $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', '');
+            }
+        }
+    };
+
+    const updateTabsColors = () => {
+        const api = Common.EditorApi.get();
+
+        sheets.sheets.forEach(model => {
+            setTabLineColor(model, api.asc_getWorksheetTabColor(model.index));
+        });
+    };
+
     return null;
 }));
 
@@ -69,7 +121,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
     const {sheets, storeAppOptions, users} = props;
     const {t} = useTranslation();
     const _t = t('Statusbar', {returnObjects: true});
-
     const isEdit = storeAppOptions.isEdit;
     const isDisconnected = users.isDisconnected;
 
@@ -85,51 +136,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
         };
     }, []);
 
-    // const loadTabColor = sheetindex => {
-    //     const api = Common.EditorApi.get();
-    //     let tab = sheets.sheets.find(sheet => sheet.index === sheetindex);
-
-    //     if (tab) {
-    //         setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex));
-    //     }
-        
-    // };
-
-    // const onApiUpdateTabColor = index => {
-    //     loadTabColor(index);
-    // };
-
-    // const setTabLineColor = (tab, color) => {
-    //     console.log(color);
-    //     if (tab) {
-    //         if (null !== color) {
-    //             color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
-    //         } else {
-    //             color = '';
-    //         }
-
-    //         if (color.length) {
-    //             if (!tab.active) {
-    //                 color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset';
-    //             } else {
-    //                 color = '0px 4px 0 ' + color + ' inset';
-    //             }
-                
-    //             $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', color);
-    //         } else {
-    //             $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', '');
-    //         }
-    //     }
-    // };
-
-    // const updateTabsColors = () => {
-    //     const api = Common.EditorApi.get();
-
-    //     sheets.sheets.forEach(model => {
-    //         setTabLineColor(model, api.asc_getWorksheetTabColor(model.index));
-    //     });
-    // };
-
     const onTabClicked = i => {
         const model = sheets.at(i);
         const api = Common.EditorApi.get();
@@ -150,7 +156,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
 
         let index = 0, name;
         while(++index < 1000) {
-            name = /*this.strSheet*/ 'Sheet' + index;
+            name = _t.textSheet + index;
             if (items.indexOf(name.toLowerCase()) < 0) break;
         }
 
@@ -174,7 +180,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
 
         if (index == api.asc_getActiveWorksheetIndex()) {
             if (!opened) {
-                if (isEdit && !isDisconnected) {
+                if (isEdit && !sheets.isWorkbookLocked) {
                     api.asc_closeCellEditor();
                     f7.popover.open('#idx-tab-context-menu-popover', target);
                 }
@@ -325,15 +331,11 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
     };
 
     return (
-        <StatusbarView isEdit={isEdit}
+        <StatusbarView 
-                       allSheets={sheets.sheets}
+            onTabClick={onTabClick}
-                       activeSheet={sheets.activeWorksheet}
+            onTabClicked={onTabClicked}
-                       hiddenSheets={sheets.hiddenWorksheets()}
+            onAddTabClicked={onAddTabClicked}
-                       isWorkbookLocked={sheets.isWorkbookLocked}
+            onTabMenu={onTabMenu}
-                       onTabClick={onTabClick}
-                       onTabClicked={onTabClicked}
-                       onAddTabClicked={onAddTabClicked}
-                       onTabMenu={onTabMenu}
         />
     )
 }));

apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx

@@ -2,118 +2,27 @@ import React, { Fragment } from 'react';
 import { View, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
+import { inject, observer } from 'mobx-react';
 
 const viewStyle = {
     height: 30
 };
 
-const StatusbarView = props => {
+const StatusbarView = inject('storeAppOptions', 'sheets')(observer(props => {
     const { t } = useTranslation();
     const _t = t('Statusbar', {returnObjects: true});
     const isAndroid = Device.android;
     const isPhone = Device.isPhone;
-    const { isEdit, allSheets, hiddenSheets, isWorkbookLocked } = props;
+    const {sheets, storeAppOptions} = props;
+    const allSheets = sheets.sheets;
+    const hiddenSheets = sheets.hiddenWorksheets();
+    const isWorkbookLocked = sheets.isWorkbookLocked;
+    const isEdit = storeAppOptions.isEdit;
 
-    const getTabColor = model => {
+    return (
-        let color = model.color;
-
-        if (color) {
-            color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
-        } else {
-            color = '';
-        }
-
-        if (color.length) {
-            if (!model.active) {
-                color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset';
-            } else {
-                color = '0px 4px 0 ' + color + ' inset';
-            }
-        } 
-
-        return color;
-    }
-
-    // const $boxTabs = $$('.sheet-tabs');
-    // const $statusBar = $$('.statusbar');
-
-    // $boxTabs.on('touchstart', onTouchStart);
-    // $boxTabs.on('touchmove', onTouchMove);
-    // $boxTabs.on('touchend', onTouchEnd);
-
-    // let touch = {};
-
-    // function hasInvisible() {
-    //     let _left_bound_ = $boxTabs.offset().left,
-    //         _right_bound_ = $boxTabs.width() + _left_bound_ - $statusBar.width();
-    //         // _right_bound_ = _left_bound_ + $boxTabs.width();
-        
-    //     // console.log(_left_bound_);
-    //     console.log(_right_bound_);
-
-    //     let tab = $$('.sheet-tabs li')[0];
-    //     let rect = tab.getBoundingClientRect();
-
-    //     if (!(rect.left < _left_bound_)) {
-    //         // tab = $$('.sheet-tabs li')[$$('.sheet-tabs li').length - 1];
-    //         // rect = tab.getBoundingClientRect();
-       
-    //         // if (!((rect.right).toFixed(2) > _right_bound_))
-    //         //     return false;
-    //         if(_right_bound_ <= 0) {
-    //             return false;
-    //         }
-    //     }
-
-    //     return true;
-    // }
-
-    // function onTouchStart(e) {
-    //     if (hasInvisible()) {
-    //         console.log(e);
-    //         let touches = e.changedTouches;
-    //         touch.startx = touches[0].clientX;
-    //         touch.scrollx = $boxTabs.scrollLeft();
-    //         // console.log(touch.scrollx);
-            
-    //         touch.timer = setTimeout(function () {
-    //             // touch.longtouch = true;
-    //         }, 500);
-    //         // e.preventDefault();
-    //     }
-    // }
-
-    // function onTouchMove(e) {
-    //     if (touch.startx !== undefined) {
-    //         // console.log(e);
-    //         let touches = e.changedTouches;
-
-    //         if (touch.longtouch) {}
-    //         else {
-    //             if (touch.timer) clearTimeout(touch.timer), delete touch.timer;
-    //             let valueLeft = touch.scrollx + (touch.startx - touches[0].clientX);
-    //             console.log(valueLeft);
-    //             // $boxTabs.scrollLeft(valueLeft);
-    //             
-    //         }
-
-    //         // e.preventDefault();
-    //     }
-    // }
-
-    // function onTouchEnd(e) {
-    //     if (touch.startx !== undefined) {
-    //         // console.log(e);
-    //         touch.longtouch = false;
-    //         delete touch.startx;
-    //         // e.preventDefault();
-    //     }
-    // }
-
-    return  (
         <Fragment>
             <View id="idx-statusbar" className="statusbar" style={viewStyle}>
-                <div id="idx-box-add-tab">
+                <div id="idx-box-add-tab" className={`${isWorkbookLocked ? 'disabled' : ''}`}>
                     <Link href={false} id="idx-btn-addtab" className={`tab${isWorkbookLocked ? ' disabled' : ''}`} onClick={props.onAddTabClicked}>
                         <Icon className="icon icon-plus" />
                     </Link>
@@ -122,8 +31,8 @@ const StatusbarView = props => {
                     <ul className="sheet-tabs bottom">
                         {allSheets.map((model,i) => 
                             model.hidden ? null : 
-                                <li className={`tab${model.active ? ' active' : ''} ${model.locked ? ' locked' : ''}`} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
+                                <li className={`tab${model.active ? ' active' : ''} ${model.locked ? 'locked' : ''}`} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
-                                    <a style={{boxShadow: getTabColor(model)}}>{model.name}</a>
+                                    <a>{model.name}</a>
                                 </li>
                             
                         )}
@@ -189,6 +98,6 @@ const StatusbarView = props => {
             ) : null}
         </Fragment>
     )
-};
+}));
 
 export {StatusbarView};