From 09a494e245169cf07b67bdb8cf9d76cc062a7f4e Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Sat, 20 Mar 2021 20:18:14 +0300 Subject: [PATCH] [SSE mobile] Another try --- apps/spreadsheeteditor/mobile/locale/en.json | 19 ++ .../mobile/src/controller/Statusbar.jsx | 317 +++++++++++++++++- .../mobile/src/less/app.less | 1 + .../mobile/src/view/Statusbar.jsx | 10 +- 4 files changed, 332 insertions(+), 15 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 2d9626f50..774924e63 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -310,6 +310,25 @@ "textReplaceAll": "Replace All" } }, + "Statusbar": { + "textDuplicate": "Duplicate", + "textDelete": "textDelete", + "textHide": "Hide", + "textUnhide": "Unhide", + "textErrorLastSheet": "Workbook must have at least one visible worksheet.", + "textErrorRemoveSheet": "Can\"t delete the worksheet.", + "textWarnDeleteSheet": "The worksheet maybe has data. Proceed operation?", + "textSheet": "Sheet", + "textRename": "textRename", + "textErrNameExists": "Worksheet with such name already exist.", + "textErrNameWrongChar": "A sheet name cannot contains characters: \\, \/, *, ?, [, ], :", + "textErrNotEmpty": "Sheet name must not be empty", + "textRenameSheet": "Rename Sheet", + "textSheetName": "Sheet Name", + "textCancel": "Cancel", + "notcriticalErrorTitle": "Warning", + "textMore": "More" + }, "Common": { "ThemeColorPalette": { "textThemeColors": "Theme Colors", diff --git a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx index ab49cc896..e26698702 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx @@ -4,25 +4,277 @@ import {StatusbarView, TabContextMenu} from '../view/Statusbar'; import { inject } from 'mobx-react'; import { f7 } from 'framework7-react'; import { Dom7 } from 'framework7'; +import { useTranslation } from 'react-i18next'; +import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu'; +import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu'; +import { Device } from '../../../../common/mobile/utils/device'; + +// @inject (stores => ({ +// isEdit: stores.storeAppOptions.isEdit, +// sheets: stores.sheets, +// })) +// class Statusbar extends ContextMenuController { +// constructor(props) { +// super(props); + +// this.loadTabColor = this.loadTabColor.bind(this); +// this.onTabClick = this.onTabClick.bind(this); +// this.onTabClicked = this.onTabClicked.bind(this); +// this.onApiUpdateTabColor = this.onApiUpdateTabColor.bind(this); +// this.onApiSheetsChanged = this.onApiSheetsChanged.bind(this); +// this.onApiDisconnect = this.onApiDisconnect.bind(this); +// }; + +// onDocumentReady() { +// super.onDocumentReady(); + +// const api = Common.EditorApi.get(); +// api.asc_registerCallback('asc_onUpdateTabColor', this.onApiUpdateTabColor); +// api.asc_registerCallback('asc_onSheetsChanged', this.onApiSheetsChanged); +// api.asc_registerCallback('asc_onCoAuthoringDisconnect', this.onApiDisconnect); +// }; + +// componentWillUnmount() { +// super.componentWillUnmount(); + +// const api = Common.EditorApi.get(); +// api.asc_registerCallback('asc_onUpdateTabColor', this.onApiUpdateTabColor); +// api.asc_registerCallback('asc_onSheetsChanged', this.onApiSheetsChanged); +// api.asc_registerCallback('asc_onCoAuthoringDisconnect', this.onApiDisconnect); +// }; + +// // const onWorkbookLocked = locked => { +// // this.statusbar.$btnAddTab.toggleClass('disabled', locked); +// // return; + +// // this.statusbar.tabbar[locked?'addClass':'removeClass']('coauth-locked'); +// // this.statusbar.btnAddWorksheet.setDisabled(locked || this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.Chart || +// // this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.FormatTable); +// // var item, i = this.statusbar.tabbar.getCount(); +// // while (i-- > 0) { +// // item = this.statusbar.tabbar.getAt(i); +// // if (item.sheetindex >= 0) { +// // // if (locked) item.reorderable = false; +// // // else item.reorderable = !this.api.asc_isWorksheetLockedOrDeleted(item.sheetindex); +// // } else { +// // item.disable(locked); +// // } +// // } +// // }; + +// // const onWorksheetLocked = (index, locked) => { +// // let model = sheets.findWhere({index: index}); +// // if(model && model.get('locked') != locked) +// // model.set('locked', locked); +// // }; + +// onApiSheetsChanged() { +// console.log('on api sheets changed'); + +// const {sheets} = this.props; +// const api = Common.EditorApi.get(); +// const sheets_count = api.asc_getWorksheetsCount(); +// const active_index = api.asc_getActiveWorksheetIndex(); + +// let i = -1, items = []; + +// while ( ++i < sheets_count ) { +// const tab = { +// index : i, +// active : active_index == i, +// name : api.asc_getWorksheetName(i), +// locked : api.asc_isWorksheetLockedOrDeleted(i), +// hidden : api.asc_isWorksheetHidden(i), +// color : api.asc_getWorksheetTabColor(i) +// }; + +// items.push(tab); +// } + +// sheets.reset(items); +// // this.hiddensheets.reset(hiddentems); +// // updateTabsColors(); +// }; + +// loadTabColor(sheetindex) { +// const api = Common.EditorApi.get(); +// const {sheets} = this.props; +// let tab = sheets.findWhere({index: sheetindex}); + +// if (tab) { +// this.setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex)); +// } + +// }; + +// onApiDisconnect() { +// this.isDisconnected = true; +// }; + +// onApiUpdateTabColor(index) { +// this.loadTabColor(index); +// }; + +// 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.get('active')) { +// color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset'; +// } else { +// color = '0px 4px 0 ' + color + ' inset'; +// } + +// tab.get('el').find('a').css('box-shadow', color); +// } else { +// tab.get('el').find('a').css('box-shadow', ''); +// } +// } +// }; + +// updateTabsColors() { +// const api = Common.EditorApi.get(); +// const {sheets} = this.props; + +// sheets.forEach(model => { +// setTabLineColor(model, api.asc_getWorksheetTabColor(model.get('index'))); +// }); +// }; + +// onTabClicked(i) { +// const {sheets} = this.props; +// const model = sheets.at(i); +// const api = Common.EditorApi.get(); + +// api.asc_showWorksheet(model.index); +// sheets.setActiveWorksheet(i); +// }; + +// onAddTabClicked() { +// const api = Common.EditorApi.get(); +// api.asc_closeCellEditor(); + +// const createSheetName = () => { +// let items = [], wc = api.asc_getWorksheetsCount(); +// while (wc--) { +// items.push(api.asc_getWorksheetName(wc).toLowerCase()); +// } + +// let index = 0, name; +// while(++index < 1000) { +// name = /*this.strSheet*/ 'Sheet' + index; +// if (items.indexOf(name.toLowerCase()) < 0) break; +// } + +// return name; +// }; + +// api.asc_addWorksheet(createSheetName()); +// }; + +// _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; +// }; + +// onTabClick(i) { +// const api = Common.EditorApi.get(); +// const {sheets} = this.props; +// const model = sheets.at(i); +// const $$ = Dom7; + +// let opened = $$('.document-menu.modal-in').length; +// f7.popover.close('.document-menu.modal-in'); + +// if (i == api.asc_getActiveWorksheetIndex()) { +// if (!opened) { +// if (!this.isDisconnected) { +// api.asc_closeCellEditor(); +// // const items = _getTabMenuItems(model); +// // this.statusbar.showTabContextMenu(this._getTabMenuItems(model), model); +// // f7.popover.open('#idx-tab-context-menu-popover'); +// } +// } +// } else { +// this.onTabClicked(i); +// // Common.NotificationCenter.trigger('sheet:active', sdkindex); +// } +// } + +// render() { +// return ( +// +// +// +// +// ); +// } +// } const Statusbar = inject('sheets', 'storeAppOptions')(props => { const {sheets, storeAppOptions} = props; - console.log(sheets); + const {t} = useTranslation(); + const _t = t('Statusbar', {returnObjects: true}); + console.log(props); let isEdit = storeAppOptions.isEdit; - let isDisconnected = undefined; + let isDisconnected = false; useEffect(() => { console.log("status bar did mount"); - Common.Notifications.on('document:ready', onApiSheetsChanged); + // Common.Notifications.on('document:ready', onDocumentReady); Common.Notifications.on('api:disconnect', onApiDisconnect); Common.Notifications.on('engineCreated', api => { api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor); // api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked); // api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked); api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged.bind(api)); - api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect); + // api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect); }); }, []); @@ -156,6 +408,50 @@ const Statusbar = inject('sheets', 'storeAppOptions')(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 => { const api = Common.EditorApi.get(); const model = sheets.at(i); @@ -164,21 +460,22 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => { let opened = $$('.document-menu.modal-in').length; f7.popover.close('.document-menu.modal-in'); + // const $targetEl = $$(idCntextMenuTargetElement); + // console.log($targetEl); + if (i == api.asc_getActiveWorksheetIndex()) { if (!opened) { - if (isEdit && !isDisconnected) { + if (!isDisconnected) { api.asc_closeCellEditor(); + // const items = _getTabMenuItems(model); // this.statusbar.showTabContextMenu(this._getTabMenuItems(model), model); + f7.popover.open('#idx-tab-context-menu-popover'); } } } else { - // this.api.asc_showWorksheet(i); - // this.statusbar.setActiveTab(index); - api.asc_showWorksheet(model.index); - sheets.setActiveWorksheet(i); + onTabClicked(i); // Common.NotificationCenter.trigger('sheet:active', sdkindex); } - } return ( diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 386e8d550..e0aacc6e6 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -12,6 +12,7 @@ @import '../../../../common/mobile/resources/less/icons.less'; @import '../../../../common/mobile/resources/less/dataview.less'; @import '../../../../common/mobile/resources/less/search.less'; +@import '../../../../common/mobile/resources/less/contextmenu.less'; @import './app-material.less'; @import './app-ios.less'; @import './icons-ios.less'; diff --git a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx index c6aa52eca..e988f6ab0 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx @@ -33,7 +33,7 @@ const StatusbarView = inject('sheets')(observer(props => { const TabContextMenu = props => { return ( - { // onPopoverClosed={e => this.props.onMenuClosed()} > - this.props.onTabMenu('copy')} /> - this.props.onTabMenu('del')} /> - this.props.onTabMenu('ren')} /> - this.props.onTabMenu('hide')} /> + props.onTabMenu('copy')} /> + props.onTabMenu('del')} /> + props.onTabMenu('ren')} /> + props.onTabMenu('hide')} /> )