[mobile-react] Edit sheet
This commit is contained in:
parent
14ffba35b7
commit
2164ff77ae
|
@ -1,17 +1,31 @@
|
|||
{
|
||||
"ViewSettings": {
|
||||
"textSettings": "Settings",
|
||||
"textDone": "Done",
|
||||
"textFindAndReplace": "Find and Replace",
|
||||
"textDocumentSettings": "Document Settings",
|
||||
"textApplicationSettings": "Application Settings",
|
||||
"textDownload": "Download",
|
||||
"textPrint": "Print",
|
||||
"textDocumentInfo": "Document Info",
|
||||
"textHelp": "Help",
|
||||
"textAbout": "About"
|
||||
},
|
||||
"Collaboration": {
|
||||
"textEditUser": "Users who are editing the file:"
|
||||
}
|
||||
"ViewSettings": {
|
||||
"textSettings": "Settings",
|
||||
"textDone": "Done",
|
||||
"textFindAndReplace": "Find and Replace",
|
||||
"textDocumentSettings": "Document Settings",
|
||||
"textApplicationSettings": "Application Settings",
|
||||
"textDownload": "Download",
|
||||
"textPrint": "Print",
|
||||
"textDocumentInfo": "Document Info",
|
||||
"textHelp": "Help",
|
||||
"textAbout": "About"
|
||||
},
|
||||
"Collaboration": {
|
||||
"textEditUser": "Users who are editing the file:"
|
||||
},
|
||||
"Edit": {
|
||||
"textClose": "Close",
|
||||
"textText": "Text",
|
||||
"textParagraph": "Paragraph",
|
||||
"textTable": "Table",
|
||||
"textFooter": "Footer",
|
||||
"textHeader": "Header",
|
||||
"textShape": "Shape",
|
||||
"textImage": "Image",
|
||||
"textChart": "Chart",
|
||||
"textHyperlink": "Hyperlink",
|
||||
"textSelectObjectToEdit": "Select object to edit",
|
||||
"textSettings": "Settings"
|
||||
}
|
||||
}
|
|
@ -1,57 +1,140 @@
|
|||
import React, {Component} from 'react';
|
||||
import {
|
||||
Page,
|
||||
Navbar,
|
||||
NavRight,
|
||||
NavLeft,
|
||||
Link,
|
||||
Popup,
|
||||
Tabs,
|
||||
Tab
|
||||
} from 'framework7-react';
|
||||
import React from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import { Page, Navbar, NavRight, NavLeft, NavTitle, Link, Sheet, Tabs, Tab, View } from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import EditText from "./EditText";
|
||||
import EditParagraph from "./EditParagraph";
|
||||
|
||||
export default class EditContainer extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
popupOpened: false,
|
||||
};
|
||||
}
|
||||
render() {
|
||||
const editors = ['text', 'paragraph'];//, 'table', 'header', 'shape', 'image', 'chart', 'hyperlink'];
|
||||
const tabLinks = editors.map((item, index) =>
|
||||
<Link key={"de-tablink-" + item} tabLink={"#" + item} tabLinkActive={index === 0}>{item}</Link>
|
||||
);
|
||||
const tabs = editors.map((item, index) =>
|
||||
<Tab key={"de-tab-" + item} id={item} className="page-content" tabActive={index === 0}>
|
||||
{item === 'text' && <EditText />}
|
||||
{item === 'paragraph' && <EditParagraph />}
|
||||
{/*{item === 'table' && <EditTable />}
|
||||
{item === 'header' && <EditHeader />}
|
||||
{item === 'shape' && <EditShape />}
|
||||
{item === 'image' && <EditImage />}
|
||||
{item === 'chart' && <EditChart />}
|
||||
{item === 'hyperlink' && <EditHyperlink />}*/}
|
||||
</Tab>
|
||||
);
|
||||
const EmptyEditLayout = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Page>
|
||||
<div className="content-block inset">
|
||||
<div className="content-block-inner">
|
||||
<p>{t("Edit.textSelectObjectToEdit")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const EditLayoutNavbar = ({ editors }) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Navbar>
|
||||
{
|
||||
editors.length > 1 ?
|
||||
<NavLeft tabbar>
|
||||
{editors.map((item, index) => <Link key={"de-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
|
||||
</NavLeft> :
|
||||
<NavTitle>{ editors[0].caption }</NavTitle>
|
||||
}
|
||||
<NavRight>
|
||||
<Link sheetClose>{t("Edit.textClose")}</Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
)
|
||||
};
|
||||
|
||||
const EditLayoutContent = ({ editors }) => {
|
||||
if (editors.length > 1) {
|
||||
return (
|
||||
<Popup className="edit-popup" opened={this.state.popupOpened} onPopupClosed={() => this.setState({popupOpened : false})}>
|
||||
<Page pageContent={false}>
|
||||
<Navbar>
|
||||
<NavLeft tabbar>
|
||||
{tabLinks}
|
||||
</NavLeft>
|
||||
<NavRight>
|
||||
<Link popupClose=".edit-popup">Close</Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
<Tabs animated>
|
||||
{tabs}
|
||||
</Tabs>
|
||||
</Page>
|
||||
</Popup>
|
||||
<Tabs animated>
|
||||
{editors.map((item, index) =>
|
||||
<Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
|
||||
{item.component}
|
||||
</Tab>
|
||||
)}
|
||||
</Tabs>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<Page>
|
||||
{editors[0].component}
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const EditSheet = props => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const settings = props.storeFocusObjects.focusObjects;
|
||||
const headerType = props.storeFocusObjects.headerType;
|
||||
let editors = [];
|
||||
if (settings.length < 1) {
|
||||
editors.push({
|
||||
caption: t("Edit.textSettings"),
|
||||
component: <EmptyEditLayout />
|
||||
});
|
||||
} else {
|
||||
if (settings.indexOf('text') > -1) {
|
||||
editors.push({
|
||||
caption: t("Edit.textText"),
|
||||
id: 'edit-text',
|
||||
component: <EditText />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('paragraph') > -1) {
|
||||
editors.push({
|
||||
caption: t("Edit.textParagraph"),
|
||||
id: 'edit-paragraph',
|
||||
component: <EditParagraph />
|
||||
})
|
||||
}
|
||||
/*if (settings.indexOf('table') > -1) {
|
||||
editors.push({
|
||||
caption: t("Edit.textTable"),
|
||||
id: 'edit-table',
|
||||
component: <EditTable />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('header') > -1) {
|
||||
editors.push({
|
||||
caption: headerType==2 ? t("Edit.textFooter") : t("Edit.textHeader"),
|
||||
id: 'edit-header',
|
||||
component: <EditHeader />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('shape') > -1) {
|
||||
editors.push({
|
||||
caption: t("Edit.textShape"),
|
||||
id: 'edit-shape',
|
||||
component: <EditShape />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: t("Edit.textImage"),
|
||||
id: 'edit-image',
|
||||
component: <EditImage />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('chart') > -1) {
|
||||
editors.push({
|
||||
caption: t("Edit.textChart"),
|
||||
id: 'edit-chart',
|
||||
component: <EditChart />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('hyperlink') > -1) {
|
||||
editors.push({
|
||||
caption: t("Edit.textHyperlink"),
|
||||
id: 'edit-link',
|
||||
component: <EditHyperlink />
|
||||
})
|
||||
}*/
|
||||
}
|
||||
return (
|
||||
<Sheet className="edit__sheet" push>
|
||||
<View>
|
||||
<Page pageContent={false}>
|
||||
<EditLayoutNavbar editors={editors} />
|
||||
<EditLayoutContent editors={editors} />
|
||||
</Page>
|
||||
</View>
|
||||
</Sheet>
|
||||
)
|
||||
};
|
||||
|
||||
export default inject("storeFocusObjects")(observer(EditSheet));
|
|
@ -3,7 +3,7 @@ import React, {Component} from 'react'
|
|||
import {inject} from "mobx-react";
|
||||
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
|
||||
|
||||
@inject("storeDocumentSettings")
|
||||
@inject("storeDocumentSettings", "storeFocusObjects")
|
||||
class MainController extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
@ -162,6 +162,10 @@ class MainController extends Component {
|
|||
this.api.asc_registerCallback('asc_onPageOrient', isPortrait => {
|
||||
storeSettings.isPortrait = isPortrait === true;
|
||||
});
|
||||
const storeFocusObjects = this.props.storeFocusObjects;
|
||||
this.api.asc_registerCallback('asc_onFocusObject', objects => {
|
||||
storeFocusObjects.resetFocusObjects(objects);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
@ -1,25 +1,7 @@
|
|||
import React, { Component } from 'react';
|
||||
import {
|
||||
Page,
|
||||
View,
|
||||
Navbar,
|
||||
NavLeft,
|
||||
NavTitle,
|
||||
NavTitleLarge,
|
||||
NavRight,
|
||||
Link,
|
||||
Toolbar,
|
||||
Block,
|
||||
BlockTitle,
|
||||
List,
|
||||
ListItem,
|
||||
Row,
|
||||
Col,
|
||||
Button,
|
||||
Icon, Popup
|
||||
} from 'framework7-react';
|
||||
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
|
||||
|
||||
import EditPopup from '../components/edit/Edit.jsx';
|
||||
import EditSheet from '../components/edit/Edit.jsx';
|
||||
import SettingsPopup from '../components/settings/Settings.jsx';
|
||||
import { CollaborationPopover, CollaborationSheet } from '../../../../common/mobile/lib/view/Collaboration.jsx'
|
||||
|
||||
|
@ -39,7 +21,7 @@ export default class Home extends Component {
|
|||
<Link>Redu</Link>
|
||||
</NavLeft>
|
||||
<NavRight>
|
||||
<Link href={false} popupOpen=".edit-popup">Edit</Link>
|
||||
<Link href={false} sheetOpen=".edit__sheet">Edit</Link>
|
||||
{/*<Link href={false} popoverOpen=".collab__popover">Users</Link>*/}
|
||||
<Link href={false} sheetOpen=".collab__sheet">Users</Link>
|
||||
<Link href={false} popupOpen=".settings-popup">Settings</Link>
|
||||
|
@ -48,7 +30,7 @@ export default class Home extends Component {
|
|||
{/* Page content */}
|
||||
<View id="editor_sdk">
|
||||
</View>
|
||||
<EditPopup />
|
||||
<EditSheet />
|
||||
<SettingsPopup />
|
||||
<CollaborationPopover />
|
||||
<CollaborationSheet />
|
||||
|
|
37
apps/documenteditor/mobile/src/store/focusObjects.js
Normal file
37
apps/documenteditor/mobile/src/store/focusObjects.js
Normal file
|
@ -0,0 +1,37 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
|
||||
export class storeFocusObjects {
|
||||
@observable focusObjects = [];
|
||||
@observable headerType = 1;
|
||||
|
||||
@action resetFocusObjects (objects) {
|
||||
this.focusObjects = objects;
|
||||
let _settings = [];
|
||||
for (let object of objects) {
|
||||
var type = object.get_ObjectType();
|
||||
if (Asc.c_oAscTypeSelectElement.Paragraph === type) {
|
||||
_settings.push('text', 'paragraph');
|
||||
} else if (Asc.c_oAscTypeSelectElement.Table === type) {
|
||||
_settings.push('table');
|
||||
} else if (Asc.c_oAscTypeSelectElement.Image === type) {
|
||||
if (object.get_ObjectValue().get_ChartProperties()) {
|
||||
_settings.push('chart');
|
||||
} else if (object.get_ObjectValue().get_ShapeProperties()) {
|
||||
_settings.push('shape');
|
||||
} else {
|
||||
_settings.push('image');
|
||||
}
|
||||
} else if (Asc.c_oAscTypeSelectElement.Hyperlink === type) {
|
||||
_settings.push('hyperlink');
|
||||
} else if (Asc.c_oAscTypeSelectElement.Header === type) {
|
||||
_settings.push('header');
|
||||
this.headerType = object.get_ObjectValue().get_Type();
|
||||
}
|
||||
}
|
||||
// Exclude shapes if chart exist
|
||||
if (_settings.indexOf('chart') > -1) {
|
||||
_settings = _settings.filter((value) => value !== 'shape');
|
||||
}
|
||||
this.focusObjects = _settings.filter((value, index, self) => self.indexOf(value) === index);
|
||||
}
|
||||
}
|
|
@ -1,8 +1,10 @@
|
|||
|
||||
import {storeDocumentSettings} from './documentSettings'
|
||||
import {storeFocusObjects} from "./focusObjects";
|
||||
import {storeUsers} from '../../../../common/mobile/lib/store/users'
|
||||
|
||||
export const stores = {
|
||||
storeFocusObjects: new storeFocusObjects(),
|
||||
storeDocumentSettings: new storeDocumentSettings(),
|
||||
users: new storeUsers()
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue