[SSE mobile] Added more in Context Menu, make touch events for sheets list in Statusbar

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

@@ -45,7 +45,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
     }, []);
 
     const onWorkbookLocked = locked => {
-        $$('.idx-btn-addtab').toggleClass('disabled', locked);
+        locked ? $$('.idx-btn-addtab').addClass('disabled') : $$('.idx-btn-addtab').removeClass('disabled');
     };
 
     const onWorksheetLocked = (index, locked) => {
@@ -116,9 +116,9 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
                     color = '0px 4px 0 ' + color + ' inset';
                 }
                 
-                $('.tab:eq(' + tab.index + ')').find('a').css('box-shadow', color);
+                $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', color);
             } else {
-                $('.tab:eq(' + tab.index + ')').find('a').css('box-shadow', '');
+                $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', '');
             }
         }
     };
@@ -361,25 +361,9 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
             case 'unhide':
                 f7.popover.open('#idx-hidden-sheets-popover', '.active');
                 break;
-            // case 'showMore':
+            case 'showMore':
-            //     if (me._moreAction.length > 0) {
+                f7.actions.open('#idx-tab-menu-actions');
-            //         _.delay(function () {
+                break;
-            //             _.each(me._moreAction, function (action) {
-            //                 action.text = action.caption;
-            //                 action.onClick = function () {
-            //                     me.onTabMenu(null, action.event, model)
-            //                 }
-            //             });
-
-            //             uiApp.actions([me._moreAction, [
-            //                 {
-            //                     text: me.cancelButtonText,
-            //                     bold: true
-            //                 }
-            //             ]]);
-            //         }, 100);
-            //     }
-            //     break;
             default:
                 let _re = /reveal\:(\d+)/.exec(event);
                 if (_re && !!_re[1]) {

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

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react';
-import { View, Toolbar, Link, Icon, Popover, List, ListButton } from 'framework7-react';
+import { View, Toolbar, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
 import { observer, inject } from "mobx-react";
 import { useTranslation } from 'react-i18next';
-import { f7 } from 'framework7-react';
+import { Device } from '../../../../common/mobile/utils/device';
 
 const viewStyle = {
     height: 30
@@ -11,9 +11,81 @@ const viewStyle = {
 const StatusbarView = inject('sheets')(observer(props => {
     const { t } = useTranslation();
     const _t = t('Statusbar', {returnObjects: true});
+    const isAndroid = Device.android;
+    const isPhone = Device.isPhone;
     const { sheets } = props;
     const hiddenSheets = sheets.hiddensheets;
     const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
+    const $boxTabs = $$('.sheet-tabs');
+    // $boxTabs.css('position', 'absolute');
+
+    $boxTabs.on('touchstart', onTouchStart);
+    $boxTabs.on('touchmove', onTouchMove);
+    $boxTabs.on('touchend', onTouchEnd);
+
+    let touch = {};
+
+    function hasInvisible() {
+        let _left_bound_ = $boxTabs.offset().left,
+            _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 > _right_bound_))
+                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>
@@ -43,13 +115,31 @@ const StatusbarView = inject('sheets')(observer(props => {
                 <List className="list-block">
                     <ListButton title={_t.textDuplicate} onClick={() => props.onTabMenu('copy')} />
                     <ListButton title={_t.textDelete} onClick={() => props.onTabMenu('del')} />
-                    <ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} />
+                    {isPhone || isAndroid ? (
-                    <ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
+                        <ListButton title={_t.textMore} onClick={() => props.onTabMenu('showMore')} /> 
-                    {hiddenSheets.length ? (
+                    ) : (
-                        <ListButton title={_t.textUnhide} onClick={() => props.onTabMenu('unhide')} />
+                        <Fragment>
-                    ): null}
+                            <ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} />
+                            <ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
+                            {hiddenSheets.length ? (
+                                <ListButton title={_t.textUnhide} onClick={() => props.onTabMenu('unhide')} />
+                            ): null}
+                        </Fragment>
+                    )}
                 </List>
             </Popover>
+            {isPhone || isAndroid ? (
+                <Actions id="idx-tab-menu-actions" backdrop={true} closeByBackdropClick={true}>
+                    <ActionsGroup>
+                        <ActionsButton onClick={() => props.onTabMenu('ren')}>{_t.textRename}</ActionsButton>
+                        <ActionsButton onClick={() => props.onTabMenu('hide')}>{_t.textHide}</ActionsButton>
+                        <ActionsButton onClick={() => props.onTabMenu('unhide')}>{_t.textUnhide}</ActionsButton>
+                    </ActionsGroup>
+                    <ActionsGroup>
+                        <ActionsButton>{_t.textCancel}</ActionsButton>
+                    </ActionsGroup>
+                </Actions>
+            ) : null}
             {hiddenSheets.length ? (
                 <Popover id="idx-hidden-sheets-popover"
                     className="document-menu"