Merge pull request #1426 from ONLYOFFICE/feature/add-move-sheet

[SSE] Add context menu for move-sheet

apps/spreadsheeteditor/mobile/locale/en.json

@@ -290,6 +290,9 @@
     "textSheet": "Sheet",
     "textSheetName": "Sheet Name",
     "textUnhide": "Unhide",
+    "textMove": "Move",
+    "textMoveBack": "Move back",
+    "textMoveForward": "Move forward",
     "textWarnDeleteSheet": "The worksheet maybe has data. Proceed operation?"
   },
   "Toolbar": {

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

@@ -1,5 +1,5 @@
 
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import {StatusbarView} from '../view/Statusbar';
 import { inject, observer } from 'mobx-react';
 import { f7 } from 'framework7-react';
@@ -134,6 +134,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
     const isDisconnected = users.isDisconnected;
     const isProtectedWorkbook = sheets.isProtectedWorkbook;
     const isDisabledEditSheet = sheets.isDisabledEditSheet;
+    const targetRef = useRef();
 
     useEffect(() => {
         const on_main_view_click = e => {
@@ -183,6 +184,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
     const onTabClick = (i, target) => {
         const api = Common.EditorApi.get();
         const model = sheets.at(i);
+        targetRef.current = target;
 
         let opened = $$('.document-menu.modal-in').length;
         let index = model.index;
@@ -332,6 +334,9 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
                 api.asc_copyWorksheet(index, name);
                 break;
             case 'ren': renameWorksheet(); break;
+            case 'move': 
+                Device.phone ? f7.sheet.open('.move-sheet') : f7.popover.open('#idx-move-sheet-popover', targetRef.current); 
+                break;
             case 'unhide':
                 f7.popover.open('#idx-hidden-sheets-popover', '.active');
                 break;
@@ -346,12 +351,27 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
         }
     };
 
+    const onMenuMoveClick = (action) => {
+        const api = Common.EditorApi.get();
+        const visibleSheets = sheets.visibleWorksheets();
+        let activeIndex;
+
+        visibleSheets.forEach((item, index) => {
+            if(item.index === api.asc_getActiveWorksheetIndex()) {
+                activeIndex = visibleSheets[action === "forward" ? index+2 : index-1 ]?.index;  
+            }
+        });
+
+        api.asc_moveWorksheet(activeIndex === undefined ? api.asc_getWorksheetsCount() : activeIndex, [api.asc_getActiveWorksheetIndex()]);
+    }
+
     return (
         <StatusbarView 
             onTabClick={onTabClick}
             onTabClicked={onTabClicked}
             onAddTabClicked={onAddTabClicked}
             onTabMenu={onTabMenu}
+            onMenuMoveClick = {onMenuMoveClick}
         />
     )
 }));

apps/spreadsheeteditor/mobile/src/less/app-ios.less

@@ -12,4 +12,8 @@
             display: none;
         }
     }
+
+    .actions-move-sheet .actions-button-text{
+        color: @brandColor;
+    }
 }

apps/spreadsheeteditor/mobile/src/less/app.less

@@ -111,3 +111,26 @@
         -moz-appearance: textfield;
     }
 }
+
+.move-sheet {
+    .swipe-container {
+      display: flex;
+      justify-content: center;
+      height: 40px;
+      background-color: @background-primary;
+        .icon-swipe {
+        margin-top: 8px;
+        width: 40px;
+        height: 4px;
+        background: @background-menu-divider;
+        border-radius: 2px;
+        }
+    }
+    .page{
+        top: 30px;
+    }
+}
+
+.actions-move-sheet {
+    background-color: @background-secondary;
+}

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

@@ -1,5 +1,5 @@
-import React, { Fragment } from 'react';
-import { View, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
+import React, { Fragment, useState } from 'react';
+import { View, Link, Icon, Popover, List, ListItem, ListButton, Actions, ActionsGroup, ActionsButton, Sheet, Page } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
 import { inject, observer } from 'mobx-react';
@@ -8,6 +8,51 @@ const viewStyle = {
     height: 30
 };
 
+const MoveMenuActions = (props) => {
+    const { t } = useTranslation();
+    let { opened, setOpenActions, onMenuMoveClick, visibleSheets } = props;
+
+    return (
+        <Actions className="actions-move-sheet" opened={opened} onActionsClosed={() => setOpenActions(false)}>
+            <ActionsGroup>
+                <ActionsButton className={visibleSheets[0]?.active ? 'disabled' : ''} onClick={() => onMenuMoveClick("back")}>
+                    {t('Statusbar.textMoveBack')}
+                </ActionsButton>
+                <ActionsButton className={visibleSheets[visibleSheets.length - 1]?.active ? 'disabled' : ''} onClick={() => onMenuMoveClick("forward")}> 
+                    {t('Statusbar.textMoveForward')}
+                </ActionsButton>
+            </ActionsGroup>
+            <ActionsGroup>
+                <ActionsButton>{t('Statusbar.textCancel')}</ActionsButton>
+            </ActionsGroup>
+        </Actions>
+    )
+}
+
+const PageListMove = props => {
+    const { sheets, onMenuMoveClick } = props;
+    const allSheets = sheets.sheets;
+    const visibleSheets = sheets.visibleWorksheets();
+    const [stateActionsOpened, setOpenActions] = useState(false);
+
+    return (
+        <Page>
+            <List>
+                { allSheets.map(model => 
+                    model.hidden ? null : 
+                    <ListItem className={model.active ? '' : 'disabled'} key={model.name} title={model.name}>
+                        <div slot='after'
+                        onClick={() => setOpenActions(true) }>
+                            <Icon icon='icon-menu-comment'/>
+                        </div>
+                    </ListItem>)
+                }
+            </List>
+            <MoveMenuActions opened={stateActionsOpened} setOpenActions={setOpenActions} onMenuMoveClick={onMenuMoveClick} visibleSheets={visibleSheets}/>
+        </Page>
+    )
+};
+
 const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(props => {
     const { t } = useTranslation();
     const _t = t('Statusbar', {returnObjects: true});
@@ -63,6 +108,7 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
                             <ListButton title={_t.textDelete} onClick={() => props.onTabMenu('del')} />
                             <ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} />
                             <ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
+                            <ListButton title={_t.textMove} onClick={() => props.onTabMenu('move')} />
                             {hiddenSheets.length ? (
                                 <ListButton title={_t.textUnhide} onClick={() => props.onTabMenu('unhide')} />
                             ) : null}
@@ -75,6 +121,7 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
                     <ActionsGroup>
                         <ActionsButton onClick={() => props.onTabMenu('ren')}>{_t.textRename}</ActionsButton>
                         <ActionsButton onClick={() => props.onTabMenu('hide')}>{_t.textHide}</ActionsButton>
+                        <ActionsButton onClick={() => props.onTabMenu('move')}>{_t.textMove}</ActionsButton>
                         {hiddenSheets.length ? (
                             <ActionsButton onClick={() => props.onTabMenu('unhide')}>{_t.textUnhide}</ActionsButton>
                         ) : null}
@@ -84,6 +131,18 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
                     </ActionsGroup> 
                 </Actions>
             ) : null}
+            {isPhone ? 
+                <Sheet style={{height: '48%'}} className='move-sheet' swipeToClose={true} backdrop={false}>
+                    <div className='swipe-container'>
+                        <Icon icon='icon-swipe'/>
+                    </div>
+                    <PageListMove sheets={sheets} onMenuMoveClick={props.onMenuMoveClick}/>
+                </Sheet>
+                :
+                <Popover style={{height: '420px'}} id="idx-move-sheet-popover" closeByOutsideClick={false}>
+                    <PageListMove sheets={sheets} onMenuMoveClick={props.onMenuMoveClick}/>
+                </Popover>
+            }
             {hiddenSheets.length ? (
                 <Popover id="idx-hidden-sheets-popover"
                     className="document-menu"