[PE mobile] Add toolbar, add logo

This commit is contained in:
JuliaSvinareva 2021-04-15 12:42:44 +03:00
parent 87fb7fe1bd
commit 0277ac9306
8 changed files with 303 additions and 41 deletions

View file

@ -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;

View file

@ -25,6 +25,12 @@
}
}
.subnavbar {
.subnavbar-inner {
padding: 0;
}
}
.page.page-with-subnavbar {
.page-content {
--f7-page-subnavbar-offset: 0px;

View file

@ -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);

View file

@ -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;

View file

@ -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>

View 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};

View file

@ -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));

View 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;