From 5f1f608b0ac97ee9a3675d490462b07968df89ac Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 24 Mar 2021 01:46:37 +0300 Subject: [PATCH] [SSE mobile] Added unhide in Context Menu --- .../mobile/src/controller/Statusbar.jsx | 128 +++++++++--------- .../mobile/src/store/sheets.js | 12 +- .../mobile/src/view/Statusbar.jsx | 10 +- 3 files changed, 83 insertions(+), 67 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx index e7161d325..76e22b28c 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx @@ -7,19 +7,22 @@ import { Dom7 } from 'framework7'; import { useTranslation } from 'react-i18next'; import { Device } from '../../../../common/mobile/utils/device'; -const Statusbar = inject('sheets', 'storeAppOptions')(props => { - const {sheets, storeAppOptions} = props; - const $$ = Dom7; +const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => { + const {sheets, storeAppOptions, users} = props; const {t} = useTranslation(); const _t = t('Statusbar', {returnObjects: true}); console.log(props); let isEdit = storeAppOptions.isEdit; - let isDisconnected = false; + let isDisconnected = users.isDisconnected; useEffect(() => { const on_api_created = api => { - api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged.bind(api)); + api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect); + api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor); + api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked); + api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked); + api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged); }; const on_main_view_click = e => { @@ -33,6 +36,7 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { $$('.view-main').on('click', on_main_view_click); return () => { + Common.Notifications.off('api:disconnect', onApiDisconnect); Common.Notifications.off('document:ready', onApiSheetsChanged); Common.Notifications.off('engineCreated', on_api_created); @@ -40,16 +44,15 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { }; }, []); -// const onWorkbookLocked = locked => { -// this.statusbar.$btnAddTab.toggleClass('disabled', locked); -// return; -// }; + const onWorkbookLocked = locked => { + $$('.idx-btn-addtab').toggleClass('disabled', locked); + }; -// const onWorksheetLocked = (index, locked) => { -// let model = sheets.findWhere({index: index}); -// if(model && model.get('locked') != locked) -// model.set('locked', locked); -// }; + const onWorksheetLocked = (index, locked) => { + let model = sheets.find(sheet => sheet.index === index); + if(model && model.locked != locked) + model.locked = locked; + }; const onApiSheetsChanged = () => { console.log('on api sheets changed'); @@ -58,9 +61,9 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { const sheets_count = api.asc_getWorksheetsCount(); const active_index = api.asc_getActiveWorksheetIndex(); - let i = -1, items = []; + let i = -1, items = [], hiddentems = []; - while ( ++i < sheets_count ) { + while (++i < sheets_count) { const tab = { index : i, active : active_index == i, @@ -70,12 +73,14 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { color : api.asc_getWorksheetTabColor(i) }; - items.push(tab); + (api.asc_isWorksheetHidden(i) ? hiddentems : items).push(tab); + // items.push(tab); } - sheets.reset(items); + sheets.resetSheets(items); + sheets.resetHiddenSheets(hiddentems); // this.hiddensheets.reset(hiddentems); - // updateTabsColors(); + updateTabsColors(); }; const loadTabColor = sheetindex => { @@ -89,34 +94,34 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { }; const onApiDisconnect = () => { - isDisconnected = true; + users.isDisconnected = true; }; const onApiUpdateTabColor = index => { loadTabColor(index); }; - // const setTabLineColor = (tab, color) => { - // if (tab) { - // if (null !== color) { - // color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); - // } else { - // color = ''; - // } + const setTabLineColor = (tab, color) => { + if (tab) { + if (null !== color) { + color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } else { + color = ''; + } - // if (color.length) { - // if (!tab.active) { - // color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset'; - // } else { - // color = '0px 4px 0 ' + color + ' inset'; - // } + if (color.length) { + if (!tab.active) { + color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset'; + } else { + color = '0px 4px 0 ' + color + ' inset'; + } - // $$('.tab')[tab.index].find('a').css('box-shadow', color); - // } else { - // $$('.tab')[tab.index].find('a').css('box-shadow', ''); - // } - // } - // }; + $('.tab:eq(' + tab.index + ')').find('a').css('box-shadow', color); + } else { + $('.tab:eq(' + tab.index + ')').find('a').css('box-shadow', ''); + } + } + }; const updateTabsColors = () => { const api = Common.EditorApi.get(); @@ -154,7 +159,6 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { const onAddTabClicked = () => { const api = Common.EditorApi.get(); api.asc_closeCellEditor(); - f7.popover.close('#idx-tab-context-menu-popover'); createSheetName(); api.asc_addWorksheet(createSheetName()); @@ -210,10 +214,10 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { console.log(model); let opened = $$('.document-menu.modal-in').length; - let index = model.index; - f7.popover.close('.document-menu.modal-in'); + let index = model.index; + if (index == api.asc_getActiveWorksheetIndex()) { if (!opened) { if (!isDisconnected) { @@ -327,12 +331,13 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { const hideWorksheet = (hide, index) => { const api = Common.EditorApi.get(); const visibleSheets = sheets.visibleWorksheets(); - + if(hide) { visibleSheets.length == 1 ? f7.dialog.alert(_t.textErrorLastSheet, _t.notcriticalErrorTitle) : api['asc_hideWorksheet']([index]); } else { + f7.popover.close('#idx-hidden-sheets-popover'); api['asc_showWorksheet'](index); // loadTabColor(index); } @@ -341,6 +346,7 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { const onTabMenu = (event) => { const api = Common.EditorApi.get(); let index = sheets.sheets.find(sheet => sheet.active).index; + f7.popover.close('#idx-tab-context-menu-popover'); switch (event) { @@ -355,25 +361,25 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { case 'unhide': f7.popover.open('#idx-hidden-sheets-popover', '.active'); break; - case 'showMore': - if (me._moreAction.length > 0) { - _.delay(function () { - _.each(me._moreAction, function (action) { - action.text = action.caption; - action.onClick = function () { - me.onTabMenu(null, action.event, model) - } - }); + // case 'showMore': + // if (me._moreAction.length > 0) { + // _.delay(function () { + // _.each(me._moreAction, function (action) { + // action.text = action.caption; + // action.onClick = function () { + // me.onTabMenu(null, action.event, model) + // } + // }); - uiApp.actions([me._moreAction, [ - { - text: me.cancelButtonText, - bold: true - } - ]]); - }, 100); - } - break; + // uiApp.actions([me._moreAction, [ + // { + // text: me.cancelButtonText, + // bold: true + // } + // ]]); + // }, 100); + // } + // break; default: let _re = /reveal\:(\d+)/.exec(event); if (_re && !!_re[1]) { diff --git a/apps/spreadsheeteditor/mobile/src/store/sheets.js b/apps/spreadsheeteditor/mobile/src/store/sheets.js index e32d53238..b0a592be0 100644 --- a/apps/spreadsheeteditor/mobile/src/store/sheets.js +++ b/apps/spreadsheeteditor/mobile/src/store/sheets.js @@ -21,20 +21,28 @@ class Worksheet { export class storeWorksheets { sheets; + hiddensheets; constructor() { makeObservable(this, { sheets: observable, - reset: action, + hiddensheets: observable, + resetSheets: action, + resetHiddenSheets: action, setActiveWorksheet: action }); this.sheets = []; + this.hiddensheets = []; } - reset(sheets) { + resetSheets(sheets) { this.sheets = Object.values(sheets) } + resetHiddenSheets(hiddensheets) { + this.hiddensheets = Object.values(hiddensheets) + } + setActiveWorksheet(i) { if ( !this.sheets[i].active ) { this.sheets.forEach(model => { diff --git a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx index 94058514b..595ccf345 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx @@ -2,6 +2,7 @@ import React, { Fragment } from 'react'; import { View, Toolbar, Link, Icon, Popover, List, ListButton } from 'framework7-react'; import { observer, inject } from "mobx-react"; import { useTranslation } from 'react-i18next'; +import { f7 } from 'framework7-react'; const viewStyle = { height: 30 @@ -11,7 +12,7 @@ const StatusbarView = inject('sheets')(observer(props => { const { t } = useTranslation(); const _t = t('Statusbar', {returnObjects: true}); const { sheets } = props; - const hiddenSheets = sheets.hiddenWorksheets(); + const hiddenSheets = sheets.hiddensheets; const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`; return ( @@ -27,7 +28,7 @@ const StatusbarView = inject('sheets')(observer(props => { {sheets.sheets.map((model,i) => model.hidden ? null :
  • props.onTabClick(i, e.target)}> - props.onTabClicked(i)} */>{model.name} + props.onTabClicked(i)} */>{model.name}
    • )} @@ -45,7 +46,7 @@ const StatusbarView = inject('sheets')(observer(props => { props.onTabMenu('ren')} /> props.onTabMenu('hide')} /> {hiddenSheets.length ? ( - props.onTabMenu('unhide')} /> + props.onTabMenu('unhide')} /> ): null} @@ -59,7 +60,8 @@ const StatusbarView = inject('sheets')(observer(props => { {hiddenSheets.map(sheet => { return ( - props.onTabMenu(`reveal:${sheet.index}`)} /> + props.onTabMenu(`reveal:${sheet.index}`)} /> ) })}