[SSE mobile] Added edit popover/sheet
This commit is contained in:
parent
273ef21d44
commit
6c95a26e76
|
@ -12,6 +12,11 @@
|
|||
"textFormula": "Formula",
|
||||
"textShape": "Shape",
|
||||
"textOther": "Other"
|
||||
},
|
||||
"Edit" : {
|
||||
"textSelectObjectToEdit": "Select object to edit",
|
||||
"textSettings": "Settings",
|
||||
"textCell": "Cell"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,6 +5,7 @@ import { f7 } from 'framework7-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)
|
||||
|
@ -202,6 +203,14 @@ class MainController extends Component {
|
|||
// me.api.asc_registerCallback('asc_onPrintUrl', _.bind(me.onPrintUrl, me));
|
||||
// me.api.asc_registerCallback('asc_onDocumentName', _.bind(me.onDocumentName, me));
|
||||
me.api.asc_registerCallback('asc_onEndAction', me._onLongActionEnd.bind(me));
|
||||
|
||||
const storeFocusObjects = this.props.storeFocusObjects;
|
||||
this.api.asc_registerCallback('asc_onFocusObject', objects => {
|
||||
storeFocusObjects.resetFocusObjects(objects);
|
||||
});
|
||||
this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => {
|
||||
storeFocusObjects.resetCellInfo(cellInfo);
|
||||
});
|
||||
}
|
||||
|
||||
_onLongActionEnd(type, id) {
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
|
||||
import EditCell from '../../view/edit/EditCell';
|
||||
|
||||
class EditCellController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditCell
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default EditCellController;
|
|
@ -7,6 +7,7 @@ import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.
|
|||
import CellEditor from '../controller/CellEditor';
|
||||
import Statusbar from '../controller/StatusBar'
|
||||
import AddOptions from "../view/add/Add";
|
||||
import EditOptions from "../view/edit/Edit";
|
||||
|
||||
export default class MainPage extends Component {
|
||||
constructor(props) {
|
||||
|
@ -67,10 +68,10 @@ export default class MainPage extends Component {
|
|||
<CellEditor />
|
||||
{/* 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')} />
|
||||
|
|
138
apps/spreadsheeteditor/mobile/src/store/focusObjects.js
Normal file
138
apps/spreadsheeteditor/mobile/src/store/focusObjects.js
Normal file
|
@ -0,0 +1,138 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
|
||||
export class storeFocusObjects {
|
||||
@observable focusOn = undefined;
|
||||
|
||||
@observable _focusObjects = [];
|
||||
|
||||
@action resetFocusObjects(objects) {
|
||||
this.focusOn = 'obj';
|
||||
this._focusObjects = objects;
|
||||
}
|
||||
|
||||
@computed get objects() {
|
||||
const _objects = [];
|
||||
for (let object of this._focusObjects) {
|
||||
const type = object.get_ObjectType();
|
||||
|
||||
if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
|
||||
_objects.push('text', 'paragraph');
|
||||
} else if (Asc.c_oAscTypeSelectElement.Table == type) {
|
||||
_objects.push('table');
|
||||
} else if (Asc.c_oAscTypeSelectElement.Image == type) {
|
||||
if (object.get_ObjectValue().get_ChartProperties()) {
|
||||
_objects.push('chart');
|
||||
} else if (object.get_ObjectValue().get_ShapeProperties()) {
|
||||
_objects.push('shape');
|
||||
} else {
|
||||
_objects.push('image');
|
||||
}
|
||||
} else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
|
||||
_objects.push('hyperlink');
|
||||
}
|
||||
}
|
||||
const resultArr = _objects.filter((value, index, self) => self.indexOf(value) === index); //get uniq array
|
||||
// Exclude shapes if chart exist
|
||||
if (resultArr.indexOf('chart') > -1) {
|
||||
resultArr.splice(resultArr.indexOf('shape'), 1);
|
||||
}
|
||||
return resultArr;
|
||||
}
|
||||
|
||||
@observable _cellInfo;
|
||||
|
||||
@action resetCellInfo (cellInfo) {
|
||||
this.focusOn = 'cell';
|
||||
this._cellInfo = cellInfo;
|
||||
}
|
||||
|
||||
@computed get selections () {
|
||||
const _selections = [];
|
||||
|
||||
let isCell, isRow, isCol, isAll, isChart, isImage, isTextShape, isShape, isTextChart,
|
||||
selType = this._cellInfo.asc_getSelectionType(),
|
||||
isObjLocked = false;
|
||||
|
||||
switch (selType) {
|
||||
case Asc.c_oAscSelectionType.RangeCells: isCell = true; break;
|
||||
case Asc.c_oAscSelectionType.RangeRow: isRow = true; break;
|
||||
case Asc.c_oAscSelectionType.RangeCol: isCol = true; break;
|
||||
case Asc.c_oAscSelectionType.RangeMax: isAll = true; break;
|
||||
case Asc.c_oAscSelectionType.RangeImage: isImage = true; break;
|
||||
case Asc.c_oAscSelectionType.RangeShape: isShape = true; break;
|
||||
case Asc.c_oAscSelectionType.RangeChart: isChart = true; break;
|
||||
case Asc.c_oAscSelectionType.RangeChartText:isTextChart = true; break;
|
||||
case Asc.c_oAscSelectionType.RangeShapeText: isTextShape = true; break;
|
||||
}
|
||||
|
||||
if (isImage || isShape || isChart) {
|
||||
isImage = isShape = isChart = false;
|
||||
let has_chartprops = false;
|
||||
let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps();
|
||||
|
||||
for (let i = 0; i < selectedObjects.length; i++) {
|
||||
if (selectedObjects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image) {
|
||||
const elValue = selectedObjects[i].asc_getObjectValue();
|
||||
isObjLocked = isObjLocked || elValue.asc_getLocked();
|
||||
const shapeProps = elValue.asc_getShapeProperties();
|
||||
|
||||
if (shapeProps) {
|
||||
if (shapeProps.asc_getFromChart()) {
|
||||
isChart = true;
|
||||
} else {
|
||||
isShape = true;
|
||||
}
|
||||
} else if (elValue.asc_getChartProperties()) {
|
||||
isChart = true;
|
||||
has_chartprops = true;
|
||||
} else {
|
||||
isImage = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (isTextShape || isTextChart) {
|
||||
const selectedObjects = this.api.asc_getGraphicObjectProps();
|
||||
let isEquation = false;
|
||||
|
||||
for (var i = 0; i < selectedObjects.length; i++) {
|
||||
const elType = selectedObjects[i].asc_getObjectType();
|
||||
if (elType == Asc.c_oAscTypeSelectElement.Image) {
|
||||
const value = selectedObjects[i].asc_getObjectValue();
|
||||
isObjLocked = isObjLocked || value.asc_getLocked();
|
||||
} else if (elType == Asc.c_oAscTypeSelectElement.Paragraph) {
|
||||
} else if (elType == Asc.c_oAscTypeSelectElement.Math) {
|
||||
isEquation = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isChart || isTextChart) {
|
||||
_selections.push('chart');
|
||||
|
||||
if (isTextChart) {
|
||||
_selections.push('text');
|
||||
}
|
||||
} else if ((isShape || isTextShape) && !isImage) {
|
||||
_selections.push('shape');
|
||||
|
||||
if (isTextShape) {
|
||||
_selections.push('text');
|
||||
}
|
||||
} else if (isImage) {
|
||||
_selections.push('image');
|
||||
|
||||
if (isShape) {
|
||||
_selections.push('shape');
|
||||
}
|
||||
} else {
|
||||
_selections.push('cell');
|
||||
|
||||
if (this._cellInfo.asc_getHyperlink()) {
|
||||
_selections.push('hyperlink');
|
||||
}
|
||||
}
|
||||
return _selections;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
|
@ -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 {storeWorksheets} from './sheets';
|
||||
// import {storeTextSettings} from "./textSettings";
|
||||
|
@ -11,7 +11,7 @@ import {storeWorksheets} from './sheets';
|
|||
// import {storeChartSettings} from "./chartSettings";
|
||||
|
||||
export const stores = {
|
||||
// storeFocusObjects: new storeFocusObjects(),
|
||||
storeFocusObjects: new storeFocusObjects(),
|
||||
// storeDocumentSettings: new storeDocumentSettings(),
|
||||
users: new storeUsers(),
|
||||
sheets: new storeWorksheets()
|
||||
|
|
138
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
Normal file
138
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
Normal file
|
@ -0,0 +1,138 @@
|
|||
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 EditCellController from "../../controller/edit/EditCell";
|
||||
|
||||
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;
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
return (
|
||||
<Navbar>
|
||||
{
|
||||
editors.length > 1 ?
|
||||
<div className='tab-buttons tabbar'>
|
||||
{editors.map((item, index) => <Link key={"sse-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={"sse-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 store = props.storeFocusObjects;
|
||||
const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.settings : store.selections);
|
||||
let editors = [];
|
||||
if (settings.length < 1) {
|
||||
editors.push({
|
||||
caption: _t.textSettings,
|
||||
component: <EmptyEditLayout />
|
||||
});
|
||||
} else {
|
||||
if (settings.indexOf('cell') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textCell,
|
||||
id: 'edit-text',
|
||||
component: <EditCellController />
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
12
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
Normal file
12
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
Normal file
|
@ -0,0 +1,12 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
|
||||
const EditCell = props => {
|
||||
return (
|
||||
<Fragment>
|
||||
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
export default EditCell;
|
Loading…
Reference in a new issue