Merge pull request #1563 from ONLYOFFICE/feature/update-movelist

[SSE] For Bug 47328

apps/spreadsheeteditor/mobile/locale/en.json

@@ -291,8 +291,8 @@
     "textHide": "Hide",
     "textMore": "More",
     "textMove": "Move",
-    "textMoveBack": "Move back",
+    "textMoveToEnd": "(Move to end)",
-    "textMoveForward": "Move forward",
+    "textMoveBefore": "Move before sheet",
     "textOk": "Ok",
     "textRename": "Rename",
     "textRenameSheet": "Rename Sheet",

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

@@ -351,19 +351,14 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
         }
     };
 
-    const onMenuMoveClick = (action) => {
+    const onMenuMoveClick = (index) => {
         const api = Common.EditorApi.get();
-        const visibleSheets = sheets.visibleWorksheets();
-        let activeIndex;
 
-        visibleSheets.forEach((item, index) => {
+        let sheetsCount = api.asc_getWorksheetsCount();
-            if(item.index === api.asc_getActiveWorksheetIndex()) {
+        let activeIndex = api.asc_getActiveWorksheetIndex();
-                activeIndex = visibleSheets[action === "forward" ? index+2 : index-1 ]?.index;  
-            }
-        });
 
-        api.asc_moveWorksheet(activeIndex === undefined ? api.asc_getWorksheetsCount() : activeIndex, [api.asc_getActiveWorksheetIndex()]);
+        api.asc_moveWorksheet(index === -255 ? sheetsCount : index , [activeIndex]);
-    }
+    };
 
     const onTabListClick = (sheetIndex) => {
         const api = Common.EditorApi.get();
@@ -371,7 +366,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
             api.asc_showWorksheet(sheetIndex);
             f7.popover.close('#idx-all-list');
         }
-    }
+    };
 
     return (
         <StatusbarView 

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

@@ -49,4 +49,13 @@
             border-radius: 100%;
         }
     }
+
+    .move-sheet {
+        .navbar .navbar-inner {
+            background: @background-primary;
+            .title {
+                color: @text-normal;
+            }
+        }
+    }
 }

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

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react';
-import {f7, View, Link, Icon, Popover, List, ListItem, ListButton, Actions, ActionsGroup, ActionsButton, Sheet, Page } from 'framework7-react';
+import {f7, View, Link, Icon, Navbar, Popover, List, ListGroup, 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,47 +8,28 @@ 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 { t } = useTranslation();
     const { sheets, onMenuMoveClick } = props;
     const allSheets = sheets.sheets;
-    const visibleSheets = sheets.visibleWorksheets();
-    const [stateActionsOpened, setOpenActions] = useState(false);
 
     return (
         <Page>
+            <Navbar title={t('Statusbar.textMoveBefore')}/>
             <List>
-                { allSheets.map(model => 
+                <ListGroup>
+                    { allSheets.map((model, index) => 
                         model.hidden ? null : 
-                    <ListItem className={model.active ? '' : 'disabled'} key={model.name} title={model.name}>
+                        <ListItem 
-                        <div slot='after'
+                        key={model.name} 
-                        onClick={() => setOpenActions(true) }>
+                        title={model.name} 
-                            <Icon icon='icon-menu-comment'/>
+                        onClick={() => onMenuMoveClick(index)} />)
-                        </div>
-                    </ListItem>)
                     }
+                    <ListItem 
+                    title={t('Statusbar.textMoveToEnd')} 
+                    onClick={() => onMenuMoveClick(-255)}/>
+                </ListGroup>
             </List>
-            <MoveMenuActions opened={stateActionsOpened} setOpenActions={setOpenActions} onMenuMoveClick={onMenuMoveClick} visibleSheets={visibleSheets}/>
         </Page>
     )
 };
@@ -162,7 +143,7 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
                 </Popover>
             }
             {isPhone ? 
-                <Sheet style={{height: '48%'}} className='move-sheet' swipeToClose={true} backdrop={false}>
+                <Sheet style={{height: '48%'}} className='move-sheet' swipeToClose={true}>
                     <div className='swipe-container'>
                         <Icon icon='icon-swipe'/>
                     </div>