Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #1007 from ONLYOFFICE/fix/fix-bugs-on-mobiles

Browse source 
Fix/fix bugs on mobiles
This commit is contained in:
Julia Radzhabova 2021-07-22 23:16:59 +03:00 committed by GitHub
parent f06ee2f5db 0f8d9d4c1a
commit 340f1b110a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 325 additions and 269 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/documenteditor/mobile/src/controller/Main.jsx
View file

@ -18,6 +18,7 @@ import LongActionsController from "./LongActions";
import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
@inject(
"users",
"storeAppOptions",
"storeDocumentSettings",
"storeFocusObjects",
@ -27,7 +28,8 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins.
"storeDocumentInfo",
"storeChartSettings",
"storeApplicationSettings",
"storeLinkSettings"
"storeLinkSettings",
"storeToolbarSettings"
)
class MainController extends Component {
constructor(props) {
@ -620,6 +622,18 @@ class MainController extends Component {
onAdvancedOptions(type, advOptions, mode, formatOptions, _t, this._isDocReady, this.props.storeAppOptions.canRequestClose, this.isDRM);
if(type == Asc.c_oAscAdvancedOptionsID.DRM) this.isDRM = true;
});
// Toolbar settings
const storeToolbarSettings = this.props.storeToolbarSettings;
this.api.asc_registerCallback('asc_onCanUndo', (can) => {
if (this.props.users.isDisconnected) return;
storeToolbarSettings.setCanUndo(can);
});
this.api.asc_registerCallback('asc_onCanRedo', (can) => {
if (this.props.users.isDisconnected) return;
storeToolbarSettings.setCanRedo(can);
});
}
onProcessSaveResult (data) {

72
apps/documenteditor/mobile/src/controller/Toolbar.jsx
View file

@ -4,7 +4,7 @@ import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import ToolbarView from "../view/Toolbar";
const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(observer(props => {
const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'storeFocusObjects', 'storeToolbarSettings')(observer(props => {
const {t} = useTranslation();
const _t = t("Toolbar", { returnObjects: true });
@ -15,25 +15,20 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(obse
const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments || appOptions.canReview || appOptions.canViewReview;
const readerMode = appOptions.readerMode;
const objectLocked = props.storeFocusObjects.objectLocked;
const storeToolbarSettings = props.storeToolbarSettings;
const isCanUndo = storeToolbarSettings.isCanUndo;
const isCanRedo = storeToolbarSettings.isCanRedo;
const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights;
useEffect(() => {
const onDocumentReady = () => {
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onCanUndo', onApiCanUndo);
api.asc_registerCallback('asc_onCanRedo', onApiCanRedo);
api.asc_registerCallback('asc_onFocusObject', onApiFocusObject);
Common.Notifications.on('toolbar:activatecontrols', activateControls);
Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
Common.Notifications.on('goback', goBack);
};
if ( !Common.EditorApi ) {
Common.Notifications.on('document:ready', onDocumentReady);
Common.Notifications.on('setdoctitle', setDocTitle);
Common.Gateway.on('init', loadConfig);
} else {
onDocumentReady();
}
Common.Notifications.on('setdoctitle', setDocTitle);
Common.Gateway.on('init', loadConfig);
Common.Notifications.on('toolbar:activatecontrols', activateControls);
Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
Common.Notifications.on('goback', goBack);
if (isDisconnected) {
f7.popover.close();
@ -42,16 +37,10 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(obse
}
return () => {
Common.Notifications.off('document:ready', onDocumentReady);
Common.Notifications.off('setdoctitle', setDocTitle);
Common.Notifications.off('toolbar:activatecontrols', activateControls);
Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
Common.Notifications.off('goback', goBack);
const api = Common.EditorApi.get();
api.asc_unregisterCallback('asc_onCanUndo', onApiCanUndo);
api.asc_unregisterCallback('asc_onCanRedo', onApiCanRedo);
api.asc_unregisterCallback('asc_onFocusObject', onApiFocusObject);
}
});
@ -106,17 +95,6 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(obse
}
}
// Undo and Redo
const [isCanUndo, setCanUndo] = useState(true);
const [isCanRedo, setCanRedo] = useState(true);
const onApiCanUndo = (can) => {
if (isDisconnected) return;
setCanUndo(can);
};
const onApiCanRedo = (can) => {
if (isDisconnected) return;
setCanRedo(can);
};
const onUndo = () => {
const api = Common.EditorApi.get();
if (api) {
@ -130,30 +108,6 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(obse
}
}
const [isObjectLocked, setObjectLocked] = useState(false);
const onApiFocusObject = (objects) => {
if (isDisconnected) return;
if (objects.length > 0) {
const getTopObject = (objects) => {
const arrObj = objects.reverse();
let obj;
for (let i=0; i<arrObj.length; i++) {
if (arrObj[i].get_ObjectType() != Asc.c_oAscTypeSelectElement.SpellCheck) {
obj = arrObj[i];
break;
}
}
return obj;
};
const topObject = getTopObject(objects);
const topObjectValue = topObject.get_ObjectValue();
const objectLocked = (typeof topObjectValue.get_Locked === 'function') ? topObjectValue.get_Locked() : false;
setObjectLocked(objectLocked);
}
};
const [disabledEditControls, setDisabledEditControls] = useState(false);
const [disabledSettings, setDisabledSettings] = useState(false);
const deactivateEditControls = (enableDownload) => {
@ -184,7 +138,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(obse
isCanRedo={isCanRedo}
onUndo={onUndo}
onRedo={onRedo}
isObjectLocked={isObjectLocked}
isObjectLocked={objectLocked}
stateDisplayMode={stateDisplayMode}
disabledControls={disabledControls}
disabledEditControls={disabledEditControls}

24
apps/documenteditor/mobile/src/store/focusObjects.js
View file

@ -16,7 +16,8 @@ export class storeFocusObjects {
tableObject: computed,
isTableInStack: computed,
chartObject: computed,
linkObject: computed
linkObject: computed,
objectLocked: computed
});
}
@ -77,4 +78,25 @@ export class storeFocusObjects {
get linkObject() {
return !!this.intf ? this.intf.getLinkObject() : null;
}
get objectLocked() {
if (this._focusObjects && this._focusObjects.length > 0) {
const getTopObject = (objects) => {
const arrObj = objects;
let obj;
for (let i=arrObj.length-1; i>=0; i--) {
if (arrObj[i].get_ObjectType() != Asc.c_oAscTypeSelectElement.SpellCheck) {
obj = arrObj[i];
break;
}
}
return obj;
};
const topObject = getTopObject(this._focusObjects);
const topObjectValue = topObject.get_ObjectValue();
const objectLocked = (typeof topObjectValue.get_Locked === 'function') ? topObjectValue.get_Locked() : false;
return objectLocked;
}
}
}

4
apps/documenteditor/mobile/src/store/mainStore.js
View file

@ -15,6 +15,7 @@ import {storeAppOptions} from "./appOptions";
import {storePalette} from "./palette";
import {storeReview} from "./review";
import {storeComments} from "../../../../common/mobile/lib/store/comments";
import {storeToolbarSettings} from "./toolbar";
export const stores = {
storeAppOptions: new storeAppOptions(),
@ -32,6 +33,7 @@ export const stores = {
storeApplicationSettings: new storeApplicationSettings(),
storePalette: new storePalette(),
storeReview: new storeReview(),
storeComments: new storeComments()
storeComments: new storeComments(),
storeToolbarSettings: new storeToolbarSettings()
};

24
apps/documenteditor/mobile/src/store/toolbar.js Normal file
View file

@ -0,0 +1,24 @@
import {action, observable, makeObservable} from 'mobx';
export class storeToolbarSettings {
constructor() {
makeObservable(this, {
isCanUndo: observable,
setCanUndo: action,
isCanRedo: observable,
setCanRedo: action
})
}
isCanUndo = false;
setCanUndo(can) {
this.isCanUndo = can;
}
isCanRedo = false;
setCanRedo(can) {
this.isCanRedo = can;
}
}

19
apps/presentationeditor/mobile/src/controller/Main.jsx
View file

@ -17,6 +17,7 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins.
import { Device } from '../../../../common/mobile/utils/device';
@inject(
"users",
"storeFocusObjects",
"storeAppOptions",
"storePresentationInfo",
@ -26,7 +27,8 @@ import { Device } from '../../../../common/mobile/utils/device';
"storeTableSettings",
"storeChartSettings",
"storeLinkSettings",
"storeApplicationSettings"
"storeApplicationSettings",
"storeToolbarSettings"
)
class MainController extends Component {
constructor (props) {
@ -388,6 +390,21 @@ class MainController extends Component {
// Chart settings
EditorUIController.updateChartStyles && EditorUIController.updateChartStyles(this.props.storeChartSettings, this.props.storeFocusObjects);
// Toolbar settings
const storeToolbarSettings = this.props.storeToolbarSettings;
this.api.asc_registerCallback('asc_onCanUndo', (can) => {
if (this.props.users.isDisconnected) return;
storeToolbarSettings.setCanUndo(can);
});
this.api.asc_registerCallback('asc_onCanRedo', (can) => {
if (this.props.users.isDisconnected) return;
storeToolbarSettings.setCanRedo(can);
});
this.api.asc_registerCallback('asc_onCountPages', (count) => {
storeToolbarSettings.setCountPages(count);
});
}
onDocumentContentReady () {

81
apps/presentationeditor/mobile/src/controller/Toolbar.jsx
View file

@ -4,7 +4,7 @@ import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import ToolbarView from "../view/Toolbar";
const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
const ToolbarController = inject('storeAppOptions', 'users', 'storeFocusObjects', 'storeToolbarSettings')(observer(props => {
const {t} = useTranslation();
const _t = t("Toolbar", { returnObjects: true });
@ -14,24 +14,19 @@ const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights;
const isEditLocked = props.storeFocusObjects.isEditLocked;
const storeToolbarSettings = props.storeToolbarSettings;
const isCanUndo = storeToolbarSettings.isCanUndo;
const isCanRedo = storeToolbarSettings.isCanRedo;
const disabledPreview = storeToolbarSettings.countPages <= 0;
useEffect(() => {
const onDocumentReady = () => {
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onCanUndo', onApiCanUndo);
api.asc_registerCallback('asc_onCanRedo', onApiCanRedo);
api.asc_registerCallback('asc_onFocusObject', onApiFocusObject);
api.asc_registerCallback('asc_onCountPages', onApiCountPages);
Common.Notifications.on('toolbar:activatecontrols', activateControls);
Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
Common.Notifications.on('goback', goBack);
};
if ( !Common.EditorApi ) {
Common.Notifications.on('document:ready', onDocumentReady);
Common.Notifications.on('setdoctitle', setDocTitle);
Common.Gateway.on('init', loadConfig);
} else {
onDocumentReady();
}
Common.Notifications.on('setdoctitle', setDocTitle);
Common.Gateway.on('init', loadConfig);
Common.Notifications.on('toolbar:activatecontrols', activateControls);
Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
Common.Notifications.on('goback', goBack);
if (isDisconnected) {
f7.popover.close();
@ -40,17 +35,10 @@ const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
}
return () => {
Common.Notifications.off('document:ready', onDocumentReady);
Common.Notifications.off('setdoctitle', setDocTitle);
Common.Notifications.off('toolbar:activatecontrols', activateControls);
Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
Common.Notifications.off('goback', goBack);
const api = Common.EditorApi.get();
api.asc_unregisterCallback('asc_onCanUndo', onApiCanUndo);
api.asc_unregisterCallback('asc_onCanRedo', onApiCanRedo);
api.asc_unregisterCallback('asc_onFocusObject', onApiFocusObject);
api.asc_unregisterCallback('asc_onCountPages', onApiCountPages);
}
});
@ -107,17 +95,6 @@ const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
//}
}
// Undo and Redo
const [isCanUndo, setCanUndo] = useState(true);
const [isCanRedo, setCanRedo] = useState(true);
const onApiCanUndo = (can) => {
if (isDisconnected) return;
setCanUndo(can);
};
const onApiCanRedo = (can) => {
if (isDisconnected) return;
setCanRedo(can);
};
const onUndo = () => {
const api = Common.EditorApi.get();
if (api) {
@ -131,36 +108,6 @@ const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
}
}
const [disabledEdit, setDisabledEdit] = useState(false);
const onApiFocusObject = (objects) => {
if (isDisconnected) return;
if (objects.length > 0) {
let slide_deleted = false,
slide_lock = false,
no_object = true,
objectLocked = false;
objects.forEach((object) => {
const type = object.get_ObjectType();
const objectValue = object.get_ObjectValue();
if (type === Asc.c_oAscTypeSelectElement.Slide) {
slide_deleted = objectValue.get_LockDelete();
slide_lock = objectValue.get_LockLayout() || objectValue.get_LockBackground() || objectValue.get_LockTransition() || objectValue.get_LockTiming();
} else if (objectValue && typeof objectValue.get_Locked === 'function') {
no_object = false;
objectLocked = objectLocked || objectValue.get_Locked();
}
});
setDisabledEdit(slide_deleted || (objectLocked || no_object) && slide_lock);
}
};
const [disabledPreview, setDisabledPreview] = useState(false);
const onApiCountPages = (count) => {
setDisabledPreview(count <= 0);
};
const [disabledEditControls, setDisabledEditControls] = useState(false);
const [disabledSettings, setDisabledSettings] = useState(false);
const deactivateEditControls = (enableDownload) => {
@ -192,7 +139,7 @@ const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
isCanRedo={isCanRedo}
onUndo={onUndo}
onRedo={onRedo}
disabledEdit={disabledEdit}
disabledEdit={isEditLocked}
disabledPreview={disabledPreview}
disabledControls={disabledControls}
disabledEditControls={disabledEditControls}

25
apps/presentationeditor/mobile/src/store/focusObjects.js
View file

@ -14,7 +14,8 @@ export class storeFocusObjects {
tableObject: computed,
isTableInStack: computed,
chartObject: computed,
linkObject: computed
linkObject: computed,
isEditLocked: computed
});
}
@ -74,4 +75,26 @@ export class storeFocusObjects {
get linkObject() {
return !!this.intf ? this.intf.getLinkObject() : null;
}
get isEditLocked() {
if (this._focusObjects.length > 0) {
let slide_deleted = false,
slide_lock = false,
no_object = true,
objectLocked = false;
this._focusObjects.forEach((object) => {
const type = object.get_ObjectType();
const objectValue = object.get_ObjectValue();
if (type === Asc.c_oAscTypeSelectElement.Slide) {
slide_deleted = objectValue.get_LockDelete();
slide_lock = objectValue.get_LockLayout() || objectValue.get_LockBackground() || objectValue.get_LockTransition() || objectValue.get_LockTiming();
} else if (objectValue && typeof objectValue.get_Locked === 'function') {
no_object = false;
objectLocked = objectLocked || objectValue.get_Locked();
}
});
return (slide_deleted || (objectLocked || no_object) && slide_lock);
}
}
}

4
apps/presentationeditor/mobile/src/store/mainStore.js
View file

@ -17,6 +17,7 @@ import { storeLinkSettings } from "./linkSettings";
// import {storeShapeSettings} from "./shapeSettings";
// import {storeImageSettings} from "./imageSettings";
import {storeComments} from "../../../../common/mobile/lib/store/comments";
import {storeToolbarSettings} from "./toolbar";
export const stores = {
storeAppOptions: new storeAppOptions(),
@ -37,6 +38,7 @@ export const stores = {
// storeParagraphSettings: new storeParagraphSettings(),
// storeShapeSettings: new storeShapeSettings(),
// storeChartSettings: new storeChartSettings(),
storeComments: new storeComments()
storeComments: new storeComments(),
storeToolbarSettings: new storeToolbarSettings()
};

32
apps/presentationeditor/mobile/src/store/toolbar.js Normal file
View file

@ -0,0 +1,32 @@
import {action, observable, makeObservable} from 'mobx';
export class storeToolbarSettings {
constructor() {
makeObservable(this, {
isCanUndo: observable,
setCanUndo: action,
isCanRedo: observable,
setCanRedo: action,
countPages: observable,
setCountPages: action
})
}
isCanUndo = false;
setCanUndo(can) {
this.isCanUndo = can;
}
isCanRedo = false;
setCanRedo(can) {
this.isCanRedo = can;
}
countPages = 0;
setCountPages(count) {
this.countPages = count;
}
}

18
apps/spreadsheeteditor/mobile/src/controller/Main.jsx
View file

@ -18,8 +18,10 @@ import ErrorController from "./Error";
import app from "../page/app";
import About from "../../../../common/mobile/lib/view/About";
import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
import { StatusbarController } from "./Statusbar";
@inject(
"users",
"storeAppOptions",
"storeFocusObjects",
"storeCellSettings",
@ -27,7 +29,8 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins.
"storeChartSettings",
"storeSpreadsheetSettings",
"storeSpreadsheetInfo",
"storeApplicationSettings"
"storeApplicationSettings",
"storeToolbarSettings"
)
class MainController extends Component {
constructor(props) {
@ -359,6 +362,18 @@ class MainController extends Component {
if(type == Asc.c_oAscAdvancedOptionsID.DRM) this.isDRM = true;
});
// Toolbar settings
const storeToolbarSettings = this.props.storeToolbarSettings;
this.api.asc_registerCallback('asc_onCanUndoChanged', (can) => {
if (this.props.users.isDisconnected) return;
storeToolbarSettings.setCanUndo(can);
});
this.api.asc_registerCallback('asc_onCanRedoChanged', (can) => {
if (this.props.users.isDisconnected) return;
storeToolbarSettings.setCanRedo(can);
});
}
_onLongActionEnd(type, id) {
@ -799,6 +814,7 @@ class MainController extends Component {
<Fragment>
<LongActionsController />
<ErrorController LoadingDocument={this.LoadingDocument}/>
<StatusbarController />
<CollaborationController />
<CommentsController />
<AddCommentController />

142
apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx
View file

@ -1,85 +1,34 @@
import React, { Fragment, useEffect, useState } from 'react';
import {StatusbarView} from '../view/Statusbar';
import { inject } from 'mobx-react';
import { inject, observer } from 'mobx-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { Device } from '../../../../common/mobile/utils/device';
const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
const {sheets, storeAppOptions, users} = props;
const {t} = useTranslation();
const _t = t('Statusbar', {returnObjects: true});
let isEdit = storeAppOptions.isEdit;
let isDisconnected = users.isDisconnected;
const StatusbarController = inject('sheets', 'storeFocusObjects')(observer(props => {
const sheets = props.sheets;
const storeFocusObjects = props.storeFocusObjects;
useEffect(() => {
const onDocumentReady = () => {
const api = Common.EditorApi.get();
// api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked);
api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked);
Common.Notifications.on('engineCreated', api => {
api.asc_registerCallback('asc_onWorkbookLocked', (locked) => {
sheets.setWorkbookLocked(locked);
storeFocusObjects.setIsLocked(api.asc_getCellInfo());
});
api.asc_registerCallback('asc_onWorksheetLocked', (index, locked) => {
sheets.setWorksheetLocked(index, locked);
storeFocusObjects.setIsLocked(api.asc_getCellInfo());
});
api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged);
api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
};
if ( !Common.EditorApi ) {
Common.Notifications.on('document:ready', onDocumentReady);
Common.Notifications.on('document:ready', onApiSheetsChanged);
} else {
onDocumentReady();
}
const on_main_view_click = e => {
if(!e.target.closest('.tab.active')) {
f7.popover.close('.document-menu.modal-in', false);
}
};
$$('.view-main').on('click', on_main_view_click);
return () => {
Common.Notifications.off('document:ready', onDocumentReady);
Common.Notifications.off('document:ready', onApiSheetsChanged);
const api = Common.EditorApi.get();
// api.asc_unregisterCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
api.asc_unregisterCallback('asc_onWorkbookLocked', onWorkbookLocked);
api.asc_unregisterCallback('asc_onWorksheetLocked', onWorksheetLocked);
api.asc_unregisterCallback('asc_onSheetsChanged', onApiSheetsChanged);
api.asc_unregisterCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
api.asc_unregisterCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
$$('.view-main').off('click', on_main_view_click);
};
}, []);
const onApiActiveSheetChanged = (index) => {
if (index < sheets.sheets.length) {
sheets.setActiveWorksheet(index);
Common.Notifications.trigger('sheet:active', index);
}
}
const onApiHideTabContextMenu = () => {
f7.popover.close('.document-menu.modal-in', false);
}
const onWorkbookLocked = locked => {
locked ? $$('.idx-btn-addtab').addClass('disabled') : $$('.idx-btn-addtab').removeClass('disabled');
};
const onWorksheetLocked = (index, locked) => {
// let model = sheets.sheets.find(sheet => sheet.index === index);
let model = sheets.at(index);
if(model && model.locked != locked)
model.locked = locked;
};
api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
// api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
});
Common.Notifications.on('document:ready', onApiSheetsChanged);
});
const onApiSheetsChanged = () => {
// console.log('on api sheets changed');
const api = Common.EditorApi.get();
const sheets_count = api.asc_getWorksheetsCount();
const active_index = api.asc_getActiveWorksheetIndex();
@ -100,9 +49,42 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
}
sheets.resetSheets(items);
// updateTabsColors();
};
const onApiActiveSheetChanged = (index) => {
if (index < sheets.sheets.length) {
sheets.setActiveWorksheet(index);
Common.Notifications.trigger('sheet:active', index);
}
};
const onApiHideTabContextMenu = () => {
f7.popover.close('.document-menu.modal-in', false);
}
return null;
}));
const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props => {
const {sheets, storeAppOptions, users} = props;
const {t} = useTranslation();
const _t = t('Statusbar', {returnObjects: true});
const isEdit = storeAppOptions.isEdit;
const isDisconnected = users.isDisconnected;
useEffect(() => {
const on_main_view_click = e => {
if(!e.target.closest('.tab.active')) {
f7.popover.close('.document-menu.modal-in', false);
}
};
$$('.view-main').on('click', on_main_view_click);
return () => {
$$('.view-main').off('click', on_main_view_click);
};
}, []);
// const loadTabColor = sheetindex => {
// const api = Common.EditorApi.get();
// let tab = sheets.sheets.find(sheet => sheet.index === sheetindex);
@ -178,15 +160,12 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
const onAddTabClicked = () => {
const api = Common.EditorApi.get();
api.asc_closeCellEditor();
createSheetName();
api.asc_addWorksheet(createSheetName());
};
const onTabClick = (i, target) => {
const api = Common.EditorApi.get();
const model = sheets.at(i);
// console.log(model);
let opened = $$('.document-menu.modal-in').length;
let index = model.index;
@ -204,7 +183,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
else {
f7.popover.close('#idx-tab-context-menu-popover', false);
onTabClicked(i);
// Common.Notifications.trigger('sheet:active', index);
}
};
@ -314,7 +292,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
} else {
f7.popover.close('#idx-hidden-sheets-popover');
api['asc_showWorksheet'](index);
// loadTabColor(index);
}
};
@ -348,8 +325,17 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
};
return (
<StatusbarView onTabClick={onTabClick} onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} onTabMenu={onTabMenu} />
<StatusbarView isEdit={isEdit}
allSheets={sheets.sheets}
activeSheet={sheets.activeWorksheet}
hiddenSheets={sheets.hiddenWorksheets()}
isWorkbookLocked={sheets.isWorkbookLocked}
onTabClick={onTabClick}
onTabClicked={onTabClicked}
onAddTabClicked={onAddTabClicked}
onTabMenu={onTabMenu}
/>
)
});
}));
export default Statusbar;
export {Statusbar, StatusbarController};

54
apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx
View file

@ -4,7 +4,7 @@ import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import ToolbarView from "../view/Toolbar";
const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo', 'storeFocusObjects')(observer(props => {
const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo', 'storeFocusObjects', 'storeToolbarSettings')(observer(props => {
const {t} = useTranslation();
const _t = t("Toolbar", { returnObjects: true });
@ -16,26 +16,17 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights;
useEffect(() => {
const onDocumentReady = () => {
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onCanUndoChanged', onApiCanUndo);
api.asc_registerCallback('asc_onCanRedoChanged', onApiCanRedo);
api.asc_registerCallback('asc_onWorkbookLocked', onApiLocked);
api.asc_registerCallback('asc_onWorksheetLocked', onApiLocked);
api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
const storeToolbarSettings = props.storeToolbarSettings;
const isCanUndo = storeToolbarSettings.isCanUndo;
const isCanRedo = storeToolbarSettings.isCanRedo;
Common.Notifications.on('toolbar:activatecontrols', activateControls);
Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
Common.Notifications.on('goback', goBack);
Common.Notifications.on('sheet:active', onApiActiveSheetChanged);
};
if ( !Common.EditorApi ) {
Common.Notifications.on('document:ready', onDocumentReady);
Common.Gateway.on('init', loadConfig);
} else {
onDocumentReady();
}
useEffect(() => {
Common.Gateway.on('init', loadConfig);
Common.Notifications.on('toolbar:activatecontrols', activateControls);
Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
Common.Notifications.on('goback', goBack);
Common.Notifications.on('sheet:active', onApiActiveSheetChanged);
if (isDisconnected) {
f7.popover.close();
@ -44,18 +35,10 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
}
return () => {
Common.Notifications.off('document:ready', onDocumentReady);
Common.Notifications.off('toolbar:activatecontrols', activateControls);
Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
Common.Notifications.off('goback', goBack);
Common.Notifications.off('sheet:active', onApiActiveSheetChanged);
const api = Common.EditorApi.get();
api.asc_unregisterCallback('asc_onCanUndoChanged', onApiCanUndo);
api.asc_unregisterCallback('asc_onCanRedoChanged', onApiCanRedo);
api.asc_unregisterCallback('asc_onWorkbookLocked', onApiLocked);
api.asc_unregisterCallback('asc_onWorksheetLocked', onApiLocked);
api.asc_unregisterCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
}
});
@ -107,17 +90,6 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
//}
}
// Undo and Redo
const [isCanUndo, setCanUndo] = useState(false);
const [isCanRedo, setCanRedo] = useState(false);
const onApiCanUndo = (can) => {
if (isDisconnected) return;
setCanUndo(can);
};
const onApiCanRedo = (can) => {
if (isDisconnected) return;
setCanRedo(can);
};
const onUndo = () => {
const api = Common.EditorApi.get();
if (api) {
@ -132,10 +104,6 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
}
const [disabledEditControls, setDisabledEditControls] = useState(false);
const onApiLocked = () => {
if (isDisconnected) return;
props.storeFocusObjects.setIsLocked(Common.EditorApi.get().asc_getCellInfo());
};
const onApiActiveSheetChanged = (index) => {
Common.Notifications.trigger('comments:filterchange', ['doc', 'sheet' + Common.EditorApi.get().asc_getWorksheetId(index)], false );

2
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

@ -6,7 +6,7 @@ import { Device } from '../../../../common/mobile/utils/device';
import Settings from '../view/settings/Settings';
import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
import CellEditor from '../controller/CellEditor';
import Statusbar from '../controller/Statusbar';
import { Statusbar } from '../controller/Statusbar';
import FilterOptionsController from '../controller/FilterOptions.jsx'
import AddOptions from "../view/add/Add";
import EditOptions from "../view/edit/Edit";

4
apps/spreadsheeteditor/mobile/src/store/mainStore.js
View file

@ -16,6 +16,7 @@ import {storeAppOptions} from "./appOptions";
import {storeChartSettings} from "./chartSettings";
import {storeSpreadsheetSettings} from "./spreadsheetSettings";
import {storeComments} from "../../../../common/mobile/lib/store/comments";
import {storeToolbarSettings} from "./toolbar";
export const stores = {
storeFocusObjects: new storeFocusObjects(),
@ -34,6 +35,7 @@ export const stores = {
storeCellSettings: new storeCellSettings(),
// storeImageSettings: new storeImageSettings(),
// storeTableSettings: new storeTableSettings()
storeComments: new storeComments()
storeComments: new storeComments(),
storeToolbarSettings: new storeToolbarSettings()
};

32
apps/spreadsheeteditor/mobile/src/store/sheets.js
View file

@ -1,5 +1,5 @@
import {observable, action, makeObservable} from 'mobx';
import {observable, action, makeObservable, computed} from 'mobx';
class Worksheet {
sheet = {
@ -26,7 +26,14 @@ export class storeWorksheets {
makeObservable(this, {
sheets: observable,
resetSheets: action,
setActiveWorksheet: action
setActiveWorksheet: action,
activeWorksheet: computed,
isWorkbookLocked: observable,
setWorkbookLocked: action,
isWorksheetLocked: observable,
setWorksheetLocked: action
});
this.sheets = [];
}
@ -46,6 +53,14 @@ export class storeWorksheets {
}
}
get activeWorksheet() {
for (let i = 0; i < this.sheets.length; i++) {
if (this.sheets[i].active)
return i;
}
return -1;
}
at(i) {
return this.sheets[i]
}
@ -61,4 +76,17 @@ export class storeWorksheets {
visibleWorksheets() {
return this.sheets.filter(model => !model.hidden);
}
isWorkbookLocked = false;
setWorkbookLocked(locked) {
this.isWorkbookLocked = locked;
}
isWorksheetLocked = false;
setWorksheetLocked(index, locked) {
let model = this.sheets[index];
if(model && model.locked !== locked)
model.locked = locked;
this.isWorkbookLocked = locked;
}
}

24
apps/spreadsheeteditor/mobile/src/store/toolbar.js Normal file
View file

@ -0,0 +1,24 @@
import {action, observable, makeObservable} from 'mobx';
export class storeToolbarSettings {
constructor() {
makeObservable(this, {
isCanUndo: observable,
setCanUndo: action,
isCanRedo: observable,
setCanRedo: action
})
}
isCanUndo = false;
setCanUndo(can) {
this.isCanUndo = can;
}
isCanRedo = false;
setCanRedo(can) {
this.isCanRedo = can;
}
}

17
apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx
View file

@ -1,6 +1,5 @@
import React, { Fragment } from 'react';
import { View, Toolbar, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
import { observer, inject } from "mobx-react";
import { View, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { Device } from '../../../../common/mobile/utils/device';
@ -8,16 +7,12 @@ const viewStyle = {
height: 30
};
const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
const StatusbarView = props => {
const { t } = useTranslation();
const _t = t('Statusbar', {returnObjects: true});
const isAndroid = Device.android;
const isPhone = Device.isPhone;
const { sheets, storeAppOptions } = props;
const isEdit = storeAppOptions.isEdit;
const hiddenSheets = sheets.hiddenWorksheets();
const allSheets = sheets.sheets;
const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
const { isEdit, allSheets, hiddenSheets, isWorkbookLocked } = props;
const getTabColor = model => {
let color = model.color;
@ -119,7 +114,7 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
<Fragment>
<View id="idx-statusbar" className="statusbar" style={viewStyle}>
<div id="idx-box-add-tab">
<Link href="false" id="idx-btn-addtab" className="tab" onClick={e => props.onAddTabClicked()}>
<Link href={false} id="idx-btn-addtab" className={`tab${isWorkbookLocked ? ' disabled' : ''}`} onClick={props.onAddTabClicked}>
<Icon className="icon icon-plus" />
</Link>
</div>
@ -127,7 +122,7 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
<ul className="sheet-tabs bottom">
{allSheets.map((model,i) =>
model.hidden ? null :
<li className={getTabClassList(model)} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
<li className={`tab${model.active ? ' active' : ''} ${model.locked ? ' locked' : ''}`} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
<a style={{boxShadow: getTabColor(model)}}>{model.name}</a>
</li>
@ -194,6 +189,6 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
) : null}
</Fragment>
)
}));
};
export {StatusbarView};