Merge pull request #1525 from ONLYOFFICE/feature/add-all-list

[SSE] Add tab 'All-list'

apps/spreadsheeteditor/mobile/locale/en.json

@@ -288,6 +288,7 @@
     "textErrorLastSheet": "The workbook must have at least one visible worksheet.",
     "textErrorRemoveSheet": "Can't delete the worksheet.",
     "textHide": "Hide",
+    "textHidden": "Hidden",
     "textMore": "More",
     "textMove": "Move",
     "textMoveBack": "Move back",

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

@@ -365,12 +365,21 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
         api.asc_moveWorksheet(activeIndex === undefined ? api.asc_getWorksheetsCount() : activeIndex, [api.asc_getActiveWorksheetIndex()]);
     }
 
+    const onTabListClick = (sheetIndex) => {
+        const api = Common.EditorApi.get();
+        if(api && api.asc_getActiveWorksheetIndex() !== sheetIndex) {
+            api.asc_showWorksheet(sheetIndex);
+            f7.popover.close('#idx-all-list');
+        }
+    }
+
     return (
         <StatusbarView 
             onTabClick={onTabClick}
             onTabClicked={onTabClicked}
             onAddTabClicked={onAddTabClicked}
             onTabMenu={onTabMenu}
+            onTabListClick={onTabListClick}
             onMenuMoveClick = {onMenuMoveClick}
         />
     )

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

@@ -141,4 +141,27 @@
 
 .actions-move-sheet {
     background-color: @background-secondary;
+}
+
+// All-list sheet
+.all-list {
+    --f7-popover-width: 190px;
+    .item-checkbox{
+        padding-left: 8px;
+        .icon-checkbox{
+            border-color: transparent;
+            margin-right: 8px;
+            &::after{
+                color: @brandColor;
+            }
+        }
+        .item-after div {
+            color: @text-secondary;
+            font-style: italic;
+        }
+        input[type='checkbox']:checked ~ .icon-checkbox {
+            background-color: unset;
+            border-color: transparent;
+        }
+    }
 }

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

@@ -47,6 +47,11 @@
             height: 22px;
             .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
         }
+        &.icon-list {
+            width: 22px;
+            height: 22px;
+            .encoded-svg-mask('<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M2 4H16M2 14H16M2 9H16" stroke="black"/></svg>')
+        }
         &.icon-settings {
             width: 24px;
             height: 24px;

apps/spreadsheeteditor/mobile/src/less/statusbar.less

@@ -8,6 +8,10 @@
     background-color: @background-tertiary;
     display: flex;
 
+    .box-tab {
+        display: flex;
+    }
+
     .tab {
         border: 0 none;
         border-radius: 0;
@@ -70,7 +74,11 @@
                 // @source: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>';
                 // .encoded-svg-mask(@source, @fontColor);
                 // background-image: none;
-                .encoded-svg-mask('<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 9.98658H9.98658V16H8.01342V9.98658H2V8.01342H8.01342V2H9.98658V8.01342H16V9.98658Z" fill="black"/></svg>')
+                .encoded-svg-mask('<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M16 9.98658H9.98658V16H8.01342V9.98658H2V8.01342H8.01342V2H9.98658V8.01342H16V9.98658Z" fill="black"/></svg>')
+            }
+
+            &.icon-list.bold {
+                .encoded-svg-mask('<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M2 4H16V6H2V4ZM2 8.01562H16V10.0312H2V8.01562ZM2 12H16V14H2V12Z" fill="black"/></svg>')
             }
         }
     }

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

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react';
-import { View, Link, Icon, Popover, List, ListItem, ListButton, Actions, ActionsGroup, ActionsButton, Sheet, Page } from 'framework7-react';
+import {f7, 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';
@@ -53,6 +53,28 @@ const PageListMove = props => {
     )
 };
 
+const PageAllList = (props) => {
+    const { t } = useTranslation();
+    const { sheets, onTabListClick } = props;
+    const allSheets = sheets.sheets;
+
+    return (
+        <Page>
+            <List>
+                { allSheets.map( (model,sheetIndex) => 
+                    <ListItem className='item-list' key={model.name} title={model.name} checkbox checked={model.active} onClick={() => onTabListClick(sheetIndex)}>
+                        {model.hidden ?     
+                            <div slot='after'>
+                                {t('Statusbar.textHidden')}
+                            </div>
+                        : null}
+                    </ListItem>)
+                }
+            </List>
+        </Page>
+    )
+};
+
 const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(props => {
     const { t } = useTranslation();
     const _t = t('Statusbar', {returnObjects: true});
@@ -71,10 +93,13 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
         <Fragment>
             <View id="idx-statusbar" className="statusbar" style={viewStyle}>
                 {isEdit &&
-                    <div id="idx-box-add-tab" className={`${isDisconnected || isWorkbookLocked || isProtectedWorkbook ? 'disabled' : ''}`}>
+                    <div id="idx-box-add-tab" className={`${isDisconnected || isWorkbookLocked || isProtectedWorkbook ? 'disabled box-tab' : 'box-tab'}`}>
                         <Link href={false} id="idx-btn-addtab" className={`tab${isDisabledEditSheet || isDisconnected || isWorkbookLocked || isProtectedWorkbook  ? ' disabled' : ''}`} onClick={props.onAddTabClicked}>
                             <Icon className={`icon icon-plus ${isAndroid ? 'bold' : ''}`}/>
                         </Link>
+                        <Link href={false} id="idx-btn-all-list-tab" className={`tab${isDisabledEditSheet || isDisconnected || isWorkbookLocked || isProtectedWorkbook  ? ' disabled' : ''}`} onClick={(e) => f7.popover.open('#idx-all-list', e.target)}>
+                            <Icon className={`icon icon-list ${isAndroid ? 'bold' : ''}`}/>
+                        </Link>
                     </div>
                 }
                 <div className="statusbar--box-tabs">
@@ -131,6 +156,11 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
                     </ActionsGroup> 
                 </Actions>
             ) : null}
+            {
+                <Popover style={{height: '240px'}} id="idx-all-list" className="all-list">
+                    <PageAllList sheets={sheets} onTabListClick={props.onTabListClick}/>
+                </Popover>
+            }
             {isPhone ? 
                 <Sheet style={{height: '48%'}} className='move-sheet' swipeToClose={true} backdrop={false}>
                     <div className='swipe-container'>