[SSE mobile] Add styles, corrected unhide and hiding

apps/common/mobile/resources/less/common-ios.less

@@ -490,4 +490,17 @@
             }
         } 
     }
+
+    .actions-button {
+        background: rgba(255,255,255,.95);
+    }
+    
+    .actions-button-text {
+        height: 57px;
+        line-height: 57px;
+        font-size: 20px;
+        color: @themeColor;
+        white-space: normal;
+        text-overflow: ellipsis;
+    }
 }

apps/common/mobile/resources/less/common-material.less

@@ -431,4 +431,19 @@
             }
         }
     }
+
+    .actions-button-text {
+        cursor: pointer;
+        line-height: 48px;
+        font-size: 16px;
+        color: rgba(0,0,0,.87);
+    }
+
+    @media (min-width: 496px) {
+        .actions-modal {
+            width: 100%;
+            left: auto;
+            margin-left: 0;
+        }
+    }
 }

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

@@ -23,10 +23,13 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
             api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked);
             api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked);
             api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged);
+            api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
         };
 
         const on_main_view_click = e => {
-            // f7.popover.close('.document-menu.modal-in');
+            if(!e.target.closest('.tab.active')) {
+                f7.popover.close('.document-menu.modal-in', false);
+            }
         };
 
         Common.Notifications.on('api:disconnect', onApiDisconnect);
@@ -44,6 +47,10 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
         };
     }, []);
 
+    const onApiHideTabContextMenu = () => {
+        f7.popover.close('.document-menu.modal-in', false);
+    }
+
     const onWorkbookLocked = locked => {
         locked ? $$('.idx-btn-addtab').addClass('disabled') : $$('.idx-btn-addtab').removeClass('disabled');
     };
@@ -79,7 +86,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
 
         sheets.resetSheets(items);
         sheets.resetHiddenSheets(hiddentems);
-        // this.hiddensheets.reset(hiddentems);
+    
         updateTabsColors();
     };
 
@@ -164,71 +171,25 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
         api.asc_addWorksheet(createSheetName());
     };
 
-    // const _getTabMenuItems = model => {
-    //     const api = Common.EditorApi.get();
-    //     let wbLocked = api.asc_isWorkbookLocked();
-    //     let shLocked = api.asc_isWorksheetLockedOrDeleted(model.index);
-
-    //     let items = [{
-    //             caption: _t.textDuplicate,
-    //             event: 'copy',
-    //             locked: wbLocked || shLocked
-    //         },{
-    //             caption: _t.textDelete,
-    //             event: 'del',
-    //             locked: wbLocked || shLocked
-    //         },{
-    //             caption: _t.textRename,
-    //             event: 'ren',
-    //             locked: wbLocked || shLocked
-    //         },{
-    //             caption: _t.textHide,
-    //             event: 'hide',
-    //             locked: wbLocked || shLocked
-    //         }];
-
-
-    //     if (!wbLocked && !shLocked && this.hiddensheets.length) {
-    //         items.push({
-    //             caption: _t.textUnhide,
-    //             event: 'unhide'
-    //         });
-    //     }
-
-    //     if (Common.SharedSettings.get('phone') && items.length > 3) {
-    //         this._moreAction = items.slice(2);
-
-    //         items = items.slice(0, 2);
-    //         items.push({
-    //             caption: this.menuMore,
-    //             event: 'showMore'
-    //         });
-    //     }
-
-    //     return items;
-    // };
-
     const onTabClick = (i, target) => {
         const api = Common.EditorApi.get();
         const model = sheets.at(i);
         console.log(model);
 
         let opened = $$('.document-menu.modal-in').length;
-        f7.popover.close('.document-menu.modal-in');
-
         let index = model.index;
 
+        f7.popover.close('.document-menu.modal-in', false);
+
         if (index == api.asc_getActiveWorksheetIndex()) {
             if (!opened) {
                 if (!isDisconnected) {
                     api.asc_closeCellEditor();
-                    // const items = _getTabMenuItems(model);
-                    // this.statusbar.showTabContextMenu(this._getTabMenuItems(model), model);
                     f7.popover.open('#idx-tab-context-menu-popover', target);
                 }
             }
         } else {
-            f7.popover.close('#idx-tab-context-menu-popover');
+            f7.popover.close('#idx-tab-context-menu-popover', false);
             onTabClicked(i);
             Common.Notifications.trigger('sheet:active', index);
         }
@@ -339,7 +300,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
         } else {
             f7.popover.close('#idx-hidden-sheets-popover');
             api['asc_showWorksheet'](index);
-            // loadTabColor(index);
+            loadTabColor(index);
         }
     };
 
@@ -347,7 +308,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
         const api = Common.EditorApi.get();
         let index = sheets.sheets.find(sheet => sheet.active).index;
 
-        f7.popover.close('#idx-tab-context-menu-popover');
+        f7.popover.close('.document-menu.modal-in', false);
 
         switch (event) {
             case 'del': deleteWorksheet(); break;

apps/spreadsheeteditor/mobile/src/page/main.jsx

@@ -10,6 +10,7 @@ import AddOptions from "../view/add/Add";
 import EditOptions from "../view/edit/Edit";
 import { Device } from '../../../../common/mobile/utils/device';
 import { Search, SearchSettings } from '../controller/Search';
+import { f7 } from 'framework7-react';
 
 import {FunctionGroups} from "../controller/add/AddFunction";
 
@@ -26,6 +27,8 @@ export default class MainPage extends Component {
     }
 
     handleClickToOpenOptions = (opts, showOpts) => {
+        f7.popover.close('.document-menu.modal-in', false);
+
         this.setState(state => {
             if ( opts == 'edit' )
                 return {editOptionsVisible: true};

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

@@ -112,31 +112,35 @@ const StatusbarView = inject('sheets')(observer(props => {
                 closeByBackdropClick={false}
                 closeByOutsideClick={false}
             >
+                {isPhone || isAndroid ? ( 
                     <List className="list-block">
                         <ListButton title={_t.textDuplicate} onClick={() => props.onTabMenu('copy')} />
                         <ListButton title={_t.textDelete} onClick={() => props.onTabMenu('del')} />
-                    {isPhone || isAndroid ? (
                         <ListButton title={_t.textMore} onClick={() => props.onTabMenu('showMore')} /> 
+                    </List>
                 ) : (
-                        <Fragment>
+                    <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')} />
                         <ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
                         {hiddenSheets.length ? (
                             <ListButton title={_t.textUnhide} onClick={() => props.onTabMenu('unhide')} />
-                            ): null}
+                        ) : 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>
+                        {hiddenSheets.length ? (
                             <ActionsButton onClick={() => props.onTabMenu('unhide')}>{_t.textUnhide}</ActionsButton>
+                        ) : null}
                     </ActionsGroup>
                     <ActionsGroup>
-                        <ActionsButton>{_t.textCancel}</ActionsButton>
+                        <ActionsButton bold={true}>{_t.textCancel}</ActionsButton>
                     </ActionsGroup> 
                 </Actions>
             ) : null}