diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 87898d22f..c1ec9e908 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/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": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx index 3a03a769d..f0edbc676 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx +++ b/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 ( ) })); diff --git a/apps/spreadsheeteditor/mobile/src/less/app-ios.less b/apps/spreadsheeteditor/mobile/src/less/app-ios.less index 38ff8771c..545276e22 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app-ios.less +++ b/apps/spreadsheeteditor/mobile/src/less/app-ios.less @@ -12,4 +12,8 @@ display: none; } } + + .actions-move-sheet .actions-button-text{ + color: @brandColor; + } } diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 322d2a7c7..602a063e5 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/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; +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx index a6ff0835b..bc1ccf646 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx +++ b/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 ( + setOpenActions(false)}> + + onMenuMoveClick("back")}> + {t('Statusbar.textMoveBack')} + + onMenuMoveClick("forward")}> + {t('Statusbar.textMoveForward')} + + + + {t('Statusbar.textCancel')} + + + ) +} + +const PageListMove = props => { + const { sheets, onMenuMoveClick } = props; + const allSheets = sheets.sheets; + const visibleSheets = sheets.visibleWorksheets(); + const [stateActionsOpened, setOpenActions] = useState(false); + + return ( + + + { allSheets.map(model => + model.hidden ? null : + + setOpenActions(true) }> + + + ) + } + + + + ) +}; + 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 props.onTabMenu('del')} /> props.onTabMenu('ren')} /> props.onTabMenu('hide')} /> + props.onTabMenu('move')} /> {hiddenSheets.length ? ( props.onTabMenu('unhide')} /> ) : null} @@ -75,6 +121,7 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop props.onTabMenu('ren')}>{_t.textRename} props.onTabMenu('hide')}>{_t.textHide} + props.onTabMenu('move')}>{_t.textMove} {hiddenSheets.length ? ( props.onTabMenu('unhide')}>{_t.textUnhide} ) : null} @@ -84,6 +131,18 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop ) : null} + {isPhone ? + + + + + + + : + + + + } {hiddenSheets.length ? (