[SSE mobile] Another try
This commit is contained in:
SergeyEzhin
parent
7bd27c3416
commit
09a494e245
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
// <Fragment>
|
||||
// <StatusbarView onTabClick={this.onTabClick} onTabClicked={this.onTabClicked} onAddTabClicked={this.onAddTabClicked} />
|
||||
// <TabContextMenu />
|
||||
// </Fragment>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
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 (
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const StatusbarView = inject('sheets')(observer(props => {
|
|||
|
||||
const TabContextMenu = props => {
|
||||
return (
|
||||
<Popover id="idx-statusbar-context-menu-popover"
|
||||
<Popover id="idx-tab-context-menu-popover"
|
||||
className="document-menu"
|
||||
backdrop={false}
|
||||
closeByBackdropClick={false}
|
||||
|
|
@ -41,10 +41,10 @@ const TabContextMenu = props => {
|
|||
// onPopoverClosed={e => this.props.onMenuClosed()}
|
||||
>
|
||||
<List className="list-block">
|
||||
<ListButton title="Duplicate" onClick={() => this.props.onTabMenu('copy')} />
|
||||
<ListButton title="Delete" onClick={() => this.props.onTabMenu('del')} />
|
||||
<ListButton title="Rename" onClick={() => this.props.onTabMenu('ren')} />
|
||||
<ListButton title="Hide" onClick={() => this.props.onTabMenu('hide')} />
|
||||
<ListButton title="Duplicate" onClick={() => props.onTabMenu('copy')} />
|
||||
<ListButton title="Delete" onClick={() => props.onTabMenu('del')} />
|
||||
<ListButton title="Rename" onClick={() => props.onTabMenu('ren')} />
|
||||
<ListButton title="Hide" onClick={() => props.onTabMenu('hide')} />
|
||||
</List>
|
||||
</Popover>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in a new issue