[SSE mobile] Add toolbar, add logo
This commit is contained in:
JuliaSvinareva
parent
26523317e7
commit
cfbb8ce795
|
|
@ -29,6 +29,12 @@
|
|||
"menuEdit": "Edit",
|
||||
"menuDelete": "Delete"
|
||||
},
|
||||
"Toolbar": {
|
||||
"dlgLeaveTitleText": "You leave the application",
|
||||
"dlgLeaveMsgText": "You have unsaved changes in this document. Click \\'Stay on this Page\\' to await the autosave of the document. Click \\'Leave this Page\\' to discard all the unsaved changes.",
|
||||
"leaveButtonText": "Leave this Page",
|
||||
"stayButtonText": "Stay on this Page"
|
||||
},
|
||||
"View" : {
|
||||
"Add" : {
|
||||
"textChart": "Chart",
|
||||
|
|
|
|||
|
|
@ -278,6 +278,8 @@ class MainController extends Component {
|
|||
me.api.asc_getWorksheetsCount();
|
||||
me.api.asc_showWorksheet(me.api.asc_getActiveWorksheetIndex());
|
||||
|
||||
this.applyLicense();
|
||||
|
||||
Common.Gateway.documentReady();
|
||||
f7.emit('resize');
|
||||
}
|
||||
|
|
@ -291,6 +293,10 @@ class MainController extends Component {
|
|||
// }
|
||||
}
|
||||
|
||||
applyLicense () {
|
||||
Common.Notifications.trigger('toolbar:activatecontrols');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
|
|
|
|||
207
apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx
Normal file
207
apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { inject } from 'mobx-react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ToolbarView from "../view/Toolbar";
|
||||
|
||||
const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo')(props => {
|
||||
const {t} = useTranslation();
|
||||
const _t = t("Toolbar", { returnObjects: true });
|
||||
|
||||
const appOptions = props.storeAppOptions;
|
||||
const isDisconnected = props.users.isDisconnected;
|
||||
const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments;
|
||||
const docTitle = props.storeSpreadsheetInfo.dataDoc ? props.storeSpreadsheetInfo.dataDoc.title : '';
|
||||
|
||||
useEffect(() => {
|
||||
const onDocumentReady = () => {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_registerCallback('asc_onCanUndoChanged', onApiCanUndo);
|
||||
api.asc_registerCallback('asc_onCanRedoChanged', onApiCanRedo);
|
||||
api.asc_registerCallback('asc_onSelectionChanged', onApiSelectionChanged);
|
||||
api.asc_registerCallback('asc_onWorkbookLocked', onApiSelectionChanged);
|
||||
api.asc_registerCallback('asc_onWorksheetLocked', onApiSelectionChanged);
|
||||
api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
|
||||
api.asc_registerCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
|
||||
|
||||
Common.Notifications.on('api:disconnect', onCoAuthoringDisconnect);
|
||||
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();
|
||||
}
|
||||
|
||||
return () => {
|
||||
Common.Notifications.off('document:ready', onDocumentReady);
|
||||
Common.Notifications.off('api:disconnect', onCoAuthoringDisconnect);
|
||||
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_onSelectionChanged', onApiSelectionChanged); TO DO
|
||||
api.asc_unregisterCallback('asc_onWorkbookLocked', onApiSelectionChanged);
|
||||
api.asc_unregisterCallback('asc_onWorksheetLocked', onApiSelectionChanged);
|
||||
api.asc_unregisterCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
|
||||
api.asc_unregisterCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
|
||||
}
|
||||
});
|
||||
|
||||
// Back button
|
||||
const [isShowBack, setShowBack] = useState(false);
|
||||
const loadConfig = (data) => {
|
||||
if (data && data.config && data.config.canBackToFolder !== false &&
|
||||
data.config.customization && data.config.customization.goback &&
|
||||
(data.config.customization.goback.url || data.config.customization.goback.requestClose && data.config.canRequestClose)) {
|
||||
setShowBack(true);
|
||||
}
|
||||
};
|
||||
const onBack = () => {
|
||||
const api = Common.EditorApi.get();
|
||||
if (api.asc_isDocumentModified()) {
|
||||
f7.dialog.create({
|
||||
title : _t.dlgLeaveTitleText,
|
||||
text : _t.dlgLeaveMsgText,
|
||||
verticalButtons: true,
|
||||
buttons : [
|
||||
{
|
||||
text: _t.leaveButtonText,
|
||||
onClick: function() {
|
||||
goBack();
|
||||
}
|
||||
},
|
||||
{
|
||||
text: _t.stayButtonText,
|
||||
bold: true
|
||||
}
|
||||
]
|
||||
}).open();
|
||||
} else {
|
||||
goBack();
|
||||
}
|
||||
};
|
||||
const goBack = (current) => {
|
||||
//if ( !Common.Controllers.Desktop.process('goback') ) {
|
||||
if (appOptions.customization.goback.requestClose && appOptions.canRequestClose) {
|
||||
Common.Gateway.requestClose();
|
||||
} else {
|
||||
const href = appOptions.customization.goback.url;
|
||||
if (!current && appOptions.customization.goback.blank !== false) {
|
||||
window.open(href, "_blank");
|
||||
} else {
|
||||
parent.location.href = href;
|
||||
}
|
||||
}
|
||||
//}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
api.asc_Undo();
|
||||
}
|
||||
};
|
||||
const onRedo = () => {
|
||||
const api = Common.EditorApi.get();
|
||||
if (api) {
|
||||
api.asc_Redo();
|
||||
}
|
||||
}
|
||||
|
||||
const [disabledEditControls, setDisabledEditControls] = useState(false);
|
||||
const onApiSelectionChanged = (cellInfo) => {
|
||||
if (isDisconnected) return;
|
||||
|
||||
const api = Common.EditorApi.get();
|
||||
const info = !!cellInfo ? cellInfo : api.asc_getCellInfo();
|
||||
let islocked = false;
|
||||
|
||||
switch (info.asc_getSelectionType()) {
|
||||
case Asc.c_oAscSelectionType.RangeChart:
|
||||
case Asc.c_oAscSelectionType.RangeImage:
|
||||
case Asc.c_oAscSelectionType.RangeShape:
|
||||
case Asc.c_oAscSelectionType.RangeChartText:
|
||||
case Asc.c_oAscSelectionType.RangeShapeText:
|
||||
const objects = api.asc_getGraphicObjectProps();
|
||||
for ( let i in objects ) {
|
||||
if ( objects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image ) {
|
||||
if ((islocked = objects[i].asc_getObjectValue().asc_getLocked()))
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
islocked = info.asc_getLocked();
|
||||
}
|
||||
|
||||
setDisabledEditControls(islocked);
|
||||
};
|
||||
|
||||
const onApiActiveSheetChanged = (index) => {
|
||||
Common.Notifications.trigger('comments:filterchange', ['doc', 'sheet' + Common.EditorApi.get().asc_getWorksheetId(index)], false );
|
||||
};
|
||||
|
||||
const [disabledSettings, setDisabledSettings] = useState(false);
|
||||
const deactivateEditControls = (enableDownload) => {
|
||||
setDisabledEditControls(true);
|
||||
if (enableDownload) {
|
||||
//DE.getController('Settings').setMode({isDisconnected: true, enableDownload: enableDownload});
|
||||
} else {
|
||||
setDisabledSettings(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const [disabledControls, setDisabledControls] = useState(true);
|
||||
const activateControls = () => {
|
||||
setDisabledControls(false);
|
||||
};
|
||||
|
||||
const onCoAuthoringDisconnect = (enableDownload) => {
|
||||
deactivateEditControls(enableDownload);
|
||||
setCanUndo(false);
|
||||
setCanRedo(false);
|
||||
f7.popover.close();
|
||||
f7.sheet.close();
|
||||
f7.popup.close();
|
||||
};
|
||||
|
||||
return (
|
||||
<ToolbarView openOptions={props.openOptions}
|
||||
isEdit={appOptions.isEdit}
|
||||
docTitle={docTitle}
|
||||
isShowBack={isShowBack}
|
||||
onBack={onBack}
|
||||
isCanUndo={isCanUndo}
|
||||
isCanRedo={isCanRedo}
|
||||
onUndo={onUndo}
|
||||
onRedo={onRedo}
|
||||
disabledControls={disabledControls}
|
||||
disabledEditControls={disabledEditControls}
|
||||
disabledSettings={disabledSettings}
|
||||
displayCollaboration={displayCollaboration}
|
||||
/>
|
||||
)
|
||||
});
|
||||
|
||||
export {ToolbarController as Toolbar};
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
|
||||
import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
|
||||
import { observer, inject } from "mobx-react";
|
||||
|
||||
// import EditOptions from '../view/edit/Edit';
|
||||
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 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";
|
||||
import ContextMenu from '../controller/ContextMenu';
|
||||
import { Toolbar } from "../controller/Toolbar";
|
||||
|
||||
export default class MainPage extends Component {
|
||||
class MainPage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
|
@ -61,23 +61,18 @@ export default class MainPage extends Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
const config = appOptions.config;
|
||||
const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
|
||||
return (
|
||||
<Page name="home">
|
||||
<Page name="home" className={showLogo && 'page-with-logo'}>
|
||||
{/* Top Navbar */}
|
||||
<Navbar id='editor-navbar'>
|
||||
{/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
|
||||
<NavLeft>
|
||||
<Link icon='icon-undo'></Link>
|
||||
<Link icon='icon-redo'></Link>
|
||||
</NavLeft>
|
||||
<NavRight>
|
||||
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
|
||||
<Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
|
||||
{ Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
|
||||
<Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
|
||||
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
|
||||
</NavRight>
|
||||
<Search useSuspense={false} />
|
||||
<Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
|
||||
{showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
|
||||
<Subnavbar>
|
||||
<Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
|
||||
<Search useSuspense={false}/>
|
||||
</Subnavbar>
|
||||
</Navbar>
|
||||
<CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
|
||||
{/* Page content */}
|
||||
|
|
@ -106,4 +101,6 @@ export default class MainPage extends Component {
|
|||
</Page>
|
||||
)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default inject("storeAppOptions")(observer(MainPage));
|
||||
|
|
@ -12,8 +12,6 @@ export class storeAppOptions {
|
|||
|
||||
isEdit = false;
|
||||
config = {};
|
||||
|
||||
isEdit = false;
|
||||
canViewComments = false;
|
||||
|
||||
setConfigOptions (config) {
|
||||
|
|
|
|||
33
apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
Normal file
33
apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import React, {Fragment} from 'react';
|
||||
import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
import EditorUIController from '../lib/patch'
|
||||
|
||||
const ToolbarView = props => {
|
||||
return (
|
||||
<Fragment>
|
||||
<NavLeft>
|
||||
{props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
|
||||
{props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getUndoRedo({
|
||||
disabledUndo: !props.isCanUndo,
|
||||
disabledRedo: !props.isCanRedo,
|
||||
onUndoClick: props.onUndo,
|
||||
onRedoClick: props.onRedo
|
||||
})}
|
||||
</NavLeft>
|
||||
{!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
|
||||
<NavRight>
|
||||
{props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({
|
||||
disabled: props.disabledEditControls || props.disabledControls,
|
||||
onEditClick: () => props.openOptions('edit'),
|
||||
onAddClick: () => props.openOptions('add')
|
||||
})}
|
||||
{ Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
|
||||
{props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link>}
|
||||
<Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
|
||||
</NavRight>
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
export default ToolbarView;
|
||||
Loading…
Reference in a new issue