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

[PE mobile] Add edit popup

Browse source
This commit is contained in:
JuliaSvinareva 2020-12-15 17:35:09 +03:00
parent 5950c5adc1
commit fb2a28df5b
10 changed files with 330 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
apps/presentationeditor/mobile/locale/en.json
View file

@ -55,6 +55,15 @@
"textShape": "Shape",
"textImage": "Image",
"textOther": "Other"
},
"Edit": {
"textText": "Text",
"textSlide": "Slide",
"textTable": "Table",
"textShape": "Shape",
"textImage": "Image",
"textChart": "Chart",
"textHyperlink": "Hyperlink"
}
}
}

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

@ -4,6 +4,7 @@ import { inject } from "mobx-react";
import { withTranslation } from 'react-i18next';
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
@inject("storeFocusObjects")
class MainController extends Component {
constructor(props) {
super(props)
@ -170,6 +171,11 @@ class MainController extends Component {
// me.api.asc_registerCallback('asc_onPrintUrl', _.bind(me.onPrintUrl, me));
// me.api.asc_registerCallback('asc_onThumbnailsShow', _.bind(me.onThumbnailsShow, me));
// me.api.asc_registerCallback('asc_onMeta', _.bind(me.onMeta, me));
const storeFocusObjects = this.props.storeFocusObjects;
this.api.asc_registerCallback('asc_onFocusObject', objects => {
storeFocusObjects.resetFocusObjects(objects);
});
}
_onDocumentContentReady() {

20
apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx Normal file
View file

@ -0,0 +1,20 @@
import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react";
import { EditSlide } from '../../view/edit/EditSlide';
class EditSlideController extends Component {
constructor (props) {
super(props);
}
render () {
return (
<EditSlide
/>
)
}
}
export default EditSlideController;

20
apps/presentationeditor/mobile/src/controller/edit/EditText.jsx Normal file
View file

@ -0,0 +1,20 @@
import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react";
import { EditText } from '../../view/edit/EditText';
class EditTextController extends Component {
constructor (props) {
super(props);
}
render () {
return (
<EditText
/>
)
}
}
export default EditTextController;

10
apps/presentationeditor/mobile/src/page/main.jsx
View file

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
// import EditOptions from '../view/edit/Edit';
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.jsx'
@ -64,10 +64,10 @@ export default class MainPage extends Component {
</Navbar>
{/* Page content */}
<View id="editor_sdk" />
{/*{*/}
{/*!this.state.editOptionsVisible ? null :*/}
{/*<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />*/}
{/*}*/}
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
}
{
!this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} />

55
apps/presentationeditor/mobile/src/store/focusObjects.js Normal file
View file

@ -0,0 +1,55 @@
import {action, observable, computed} from 'mobx';
export class storeFocusObjects {
@observable _focusObjects = [];
@action resetFocusObjects(objects) {
this._focusObjects = objects;
}
@computed get settings() {
const _settings = [];
let no_text = true;
for (let object of this._focusObjects) {
const type = object.get_ObjectType(),
objectValue = object.get_ObjectValue();
if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
if ( !objectValue.get_Locked() )
no_text = false;
} else if (Asc.c_oAscTypeSelectElement.Table == type) {
if ( !objectValue.get_Locked() ) {
_settings.push('table');
no_text = false;
}
} else if (Asc.c_oAscTypeSelectElement.Slide == type) {
if ( !(objectValue.get_LockLayout() || objectValue.get_LockBackground() || objectValue.get_LockTransition() || objectValue.get_LockTiming() ))
_settings.push('slide');
} else if (Asc.c_oAscTypeSelectElement.Image == type) {
if ( !objectValue.get_Locked() )
_settings.push('image');
} else if (Asc.c_oAscTypeSelectElement.Chart == type) {
if ( !objectValue.get_Locked() )
_settings.push('chart');
} else if (Asc.c_oAscTypeSelectElement.Shape == type && !objectValue.get_FromChart()) {
if ( !objectValue.get_Locked() ) {
_settings.push('shape');
no_text = false;
}
} else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
_settings.push('hyperlink');
}
}
if (!no_text && _settings.indexOf('image') < 0)
_settings.unshift('text');
const resultArr = _settings.filter((value, index, self) => self.indexOf(value) === index); //get uniq array
// Exclude hyperlink if text is locked
if (resultArr.indexOf('hyperlink') > -1 && resultArr.indexOf('text') < 0) {
resultArr.splice(resultArr.indexOf('hyperlink'), 1);
}
// Exclude shapes if chart exist
if (resultArr.indexOf('chart') > -1) {
resultArr.splice(resultArr.indexOf('shape'), 1);
}
return resultArr;
}
}

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

@ -1,6 +1,6 @@
// import {storeDocumentSettings} from './documentSettings';
// import {storeFocusObjects} from "./focusObjects";
import {storeFocusObjects} from "./focusObjects";
import {storeUsers} from '../../../../common/mobile/lib/store/users';
import {storeApplicationSettings} from './applicationSettings';
// import {storeTextSettings} from "./textSettings";
@ -11,7 +11,7 @@ import {storeApplicationSettings} from './applicationSettings';
// import {storeChartSettings} from "./chartSettings";
export const stores = {
// storeFocusObjects: new storeFocusObjects(),
storeFocusObjects: new storeFocusObjects(),
// storeDocumentSettings: new storeDocumentSettings(),
users: new storeUsers(),
storeApplicationSettings: new storeApplicationSettings()

183
apps/presentationeditor/mobile/src/view/edit/Edit.jsx Normal file
View file

@ -0,0 +1,183 @@
import React, {useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import EditSlideController from "../../controller/edit/EditSlide";
import EditTextController from "../../controller/edit/EditText";
//import EditShapeController from "../../controller/edit/EditShape";
//import EditImageController from "../../controller/edit/EditImage";
//import EditTableController from "../../controller/edit/EditTable";
//import EditChartController from "../../controller/edit/EditChart";
//import EditLinkController from "../../controller/edit/EditLink";
const routes = [
];
const EmptyEditLayout = () => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<div className="content-block inset">
<div className="content-block-inner">
<p>{_t.textSelectObjectToEdit}</p>
</div>
</div>
</Page>
)
};
const EditLayoutNavbar = ({ editors, inPopover }) => {
const isAndroid = Device.android;
return (
<Navbar>
{
editors.length > 1 ?
<div className='tab-buttons tabbar'>
{editors.map((item, index) => <Link key={"pe-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.lenght + '%'}}></span>}
</div> :
<NavTitle>{ editors[0].caption }</NavTitle>
}
{ !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
</Navbar>
)
};
const EditLayoutContent = ({ editors }) => {
if (editors.length > 1) {
return (
<Tabs animated>
{editors.map((item, index) =>
<Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
} else {
return (
<Page>
{editors[0].component}
</Page>
)
}
};
const EditTabs = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const settings = props.storeFocusObjects.settings;
let editors = [];
if (settings.length < 1) {
editors.push({
caption: _t.textSettings,
component: <EmptyEditLayout />
});
} else {
if (settings.indexOf('slide') > -1) {
editors.push({
caption: _t.textSlide,
id: 'edit-slide',
component: <EditSlideController />
})
}
if (settings.indexOf('text') > -1) {
editors.push({
caption: _t.textText,
id: 'edit-text',
component: <EditTextController />
})
}
/*if (settings.indexOf('table') > -1) {
editors.push({
caption: _t.textTable,
id: 'edit-table',
component: <EditTableController />
})
}
if (settings.indexOf('shape') > -1) {
editors.push({
caption: _t.textShape,
id: 'edit-shape',
component: <EditShapeController />
})
}
if (settings.indexOf('image') > -1) {
editors.push({
caption: _t.textImage,
id: 'edit-image',
component: <EditImageController />
})
}
if (settings.indexOf('chart') > -1) {
editors.push({
caption: _t.textChart,
id: 'edit-chart',
component: <EditChartController />
})
}
if (settings.indexOf('hyperlink') > -1) {
editors.push({
caption: _t.textHyperlink,
id: 'edit-link',
component: <EditLinkController />
})
}*/
}
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}>
<EditLayoutNavbar editors={editors} inPopover={props.inPopover}/>
<EditLayoutContent editors={editors} />
</Page>
</View>
)
};
const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs));
const EditView = props => {
const onOptionClick = (page) => {
$f7.views.current.router.navigate(page);
};
const show_popover = props.usePopover;
return (
show_popover ?
<Popover id="edit-popover" className="popover__titled" onPopoverClosed={() => props.onClosed()}>
<EditTabsContainer inPopover={true} onOptionClick={onOptionClick} style={{height: '410px'}} />
</Popover> :
<Sheet id="edit-sheet" push onSheetClosed={() => props.onClosed()}>
<EditTabsContainer onOptionClick={onOptionClick} />
</Sheet>
)
};
const EditOptions = props => {
useEffect(() => {
if ( Device.phone )
f7.sheet.open('#edit-sheet');
else f7.popover.open('#edit-popover', '#btn-edit');
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed )
props.onclosed();
};
return (
<EditView usePopover={!Device.phone} onClosed={onviewclosed} />
)
};
export default EditOptions;

15
apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx Normal file
View file

@ -0,0 +1,15 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const EditSlide = props => {
return (
<Fragment>
</Fragment>
)
};
export {EditSlide};

15
apps/presentationeditor/mobile/src/view/edit/EditText.jsx Normal file
View file

@ -0,0 +1,15 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const EditText = props => {
return (
<Fragment>
</Fragment>
)
};
export {EditText};