[PE mobile] Add toolbar, add logo
This commit is contained in:
parent
87fb7fe1bd
commit
0277ac9306
|
@ -7,6 +7,17 @@
|
|||
@darkGrey: #757575;
|
||||
|
||||
--f7-navbar-shadow-image: none;
|
||||
|
||||
--f7-navbar-bg-color: @themeColor;
|
||||
--f7-navbar-link-color: @navBarIconColor;
|
||||
--f7-navbar-text-color: @navBarIconColor;
|
||||
--f7-navbar-height: 56px;
|
||||
|
||||
--f7-subnavbar-bg-color: @themeColor;
|
||||
--f7-subnavbar-link-color: @navBarIconColor;
|
||||
--f7-subnavbar-text-color: @navBarIconColor;
|
||||
--f7-subnavbar-height: 56px;
|
||||
|
||||
--f7-radio-active-color: @themeColor;
|
||||
--f7-toggle-active-color: @themeColor;
|
||||
--f7-range-bar-active-bg-color: @themeColor;
|
||||
|
@ -29,6 +40,13 @@
|
|||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.page.page-with-subnavbar.page-with-logo {
|
||||
.page-content {
|
||||
--f7-page-navbar-offset: var(--f7-navbar-height);
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.segmented {
|
||||
.decrement, .increment {
|
||||
|
@ -412,7 +430,7 @@
|
|||
}
|
||||
a.icon-only {
|
||||
width: auto;
|
||||
height: 48px;
|
||||
height: 56px;
|
||||
}
|
||||
.buttons-row-replace a {
|
||||
color: @white;
|
||||
|
|
|
@ -25,6 +25,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.subnavbar {
|
||||
.subnavbar-inner {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page.page-with-subnavbar {
|
||||
.page-content {
|
||||
--f7-page-subnavbar-offset: 0px;
|
||||
|
|
|
@ -25,6 +25,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
|
|||
Common.Notifications.on('api:disconnect', onCoAuthoringDisconnect);
|
||||
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);
|
||||
|
@ -40,6 +41,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
|
|||
Common.Notifications.off('api:disconnect', onCoAuthoringDisconnect);
|
||||
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);
|
||||
|
|
|
@ -5,14 +5,6 @@
|
|||
|
||||
|
||||
.device-android {
|
||||
--f7-navbar-bg-color: @themeColor;
|
||||
--f7-navbar-link-color: @navBarIconColor;
|
||||
--f7-navbar-text-color: @navBarIconColor;
|
||||
|
||||
--f7-subnavbar-bg-color: @themeColor;
|
||||
--f7-subnavbar-link-color: @navBarIconColor;
|
||||
--f7-subnavbar-text-color: @navBarIconColor;
|
||||
|
||||
// Main Toolbar
|
||||
#editor-navbar.navbar .right {
|
||||
padding-right: 4px;
|
||||
|
|
|
@ -105,13 +105,9 @@ class MainController extends Component {
|
|||
|
||||
// Common.SharedSettings.set('document', data.doc);
|
||||
|
||||
// if (data.doc) {
|
||||
// DE.getController('Toolbar').setDocumentTitle(data.doc.title);
|
||||
// if (data.doc.info) {
|
||||
// data.doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead.");
|
||||
// data.doc.info.created && console.log("Obsolete: The 'created' parameter of the document 'info' section is deprecated. Please use 'uploaded' instead.");
|
||||
// }
|
||||
// }
|
||||
if (data.doc) {
|
||||
Common.Notifications.trigger('setdoctitle', data.doc.title);
|
||||
}
|
||||
};
|
||||
|
||||
const onEditorPermissions = params => {
|
||||
|
@ -335,13 +331,14 @@ class MainController extends Component {
|
|||
}
|
||||
|
||||
_onDocumentContentReady() {
|
||||
const me = this;
|
||||
me.api.SetDrawingFreeze(false);
|
||||
this.api.SetDrawingFreeze(false);
|
||||
|
||||
me.api.Resize();
|
||||
me.api.zoomFitToPage();
|
||||
this.api.Resize();
|
||||
this.api.zoomFitToPage();
|
||||
// me.api.asc_GetDefaultTableStyles && _.defer(function () {me.api.asc_GetDefaultTableStyles()});
|
||||
|
||||
this.applyLicense();
|
||||
|
||||
Common.Gateway.documentReady();
|
||||
f7.emit('resize');
|
||||
|
||||
|
@ -357,6 +354,11 @@ class MainController extends Component {
|
|||
// }
|
||||
}
|
||||
|
||||
applyLicense() {
|
||||
/* TO DO */
|
||||
Common.Notifications.trigger('toolbar:activatecontrols');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
|
|
209
apps/presentationeditor/mobile/src/controller/Toolbar.jsx
Normal file
209
apps/presentationeditor/mobile/src/controller/Toolbar.jsx
Normal file
|
@ -0,0 +1,209 @@
|
|||
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')(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;
|
||||
|
||||
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_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
|
||||
api.asc_registerCallback('asc_onCountPages', onApiCountPages);
|
||||
Common.Notifications.on('api:disconnect', onCoAuthoringDisconnect);
|
||||
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();
|
||||
}
|
||||
|
||||
return () => {
|
||||
Common.Notifications.off('document:ready', onDocumentReady);
|
||||
Common.Notifications.off('setdoctitle', setDocTitle);
|
||||
Common.Notifications.off('api:disconnect', onCoAuthoringDisconnect);
|
||||
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_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
|
||||
api.asc_unregisterCallback('asc_onCountPages', onApiCountPages);
|
||||
}
|
||||
});
|
||||
|
||||
const [docTitle, resetDocTitle] = useState('');
|
||||
const setDocTitle = (title) => {
|
||||
resetDocTitle(title);
|
||||
}
|
||||
|
||||
// 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.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(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) {
|
||||
api.Undo();
|
||||
}
|
||||
};
|
||||
const onRedo = () => {
|
||||
const api = Common.EditorApi.get();
|
||||
if (api) {
|
||||
api.Redo();
|
||||
}
|
||||
}
|
||||
|
||||
const [disabledAdd, setDisabledAdd] = useState(false);
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
setDisabledAdd(slide_deleted);
|
||||
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) => {
|
||||
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}
|
||||
disabledAdd={disabledAdd}
|
||||
disabledEdit={disabledEdit}
|
||||
disabledPreview={disabledPreview}
|
||||
disabledControls={disabledControls}
|
||||
disabledEditControls={disabledEditControls}
|
||||
disabledSettings={disabledSettings}
|
||||
displayCollaboration={displayCollaboration}
|
||||
/>
|
||||
)
|
||||
});
|
||||
|
||||
export {ToolbarController as Toolbar};
|
|
@ -1,15 +1,16 @@
|
|||
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 AddOptions from '../view/add/Add';
|
||||
import Settings from '../view/settings/Settings';
|
||||
import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx';
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
import { Search, SearchSettings } from '../controller/Search';
|
||||
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 = {
|
||||
|
@ -54,23 +55,18 @@ export default class MainPage extends Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Page name="home">
|
||||
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" 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>
|
||||
{/* Page content */}
|
||||
<View id="editor_sdk" />
|
||||
|
@ -94,7 +90,9 @@ export default class MainPage extends Component {
|
|||
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
|
||||
}
|
||||
<ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
|
||||
</Page>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default inject("storeAppOptions")(observer(MainPage));
|
35
apps/presentationeditor/mobile/src/view/Toolbar.jsx
Normal file
35
apps/presentationeditor/mobile/src/view/Toolbar.jsx
Normal file
|
@ -0,0 +1,35 @@
|
|||
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.getUndoRedo({
|
||||
disabledUndo: !props.isCanUndo,
|
||||
disabledRedo: !props.isCanRedo,
|
||||
onUndoClick: props.onUndo,
|
||||
onRedoClick: props.onRedo
|
||||
})}
|
||||
</NavLeft>
|
||||
{!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
|
||||
<NavRight>
|
||||
<Link className={(props.disabledControls || props.disabledPreview) && 'disabled'} icon='icon-play' href={false}></Link>
|
||||
{props.isEdit && EditorUIController.getToolbarOptions({
|
||||
disabledAdd: props.disabledAdd || props.disabledControls,
|
||||
disabledEdit: props.disabledEdit || 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