[DE mobile] Add edit header settings
This commit is contained in:
parent
348bbf6341
commit
5912bc3e1f
|
@ -113,6 +113,12 @@
|
|||
"textRemoveLink": "Remove Link",
|
||||
"textLink": "Link",
|
||||
"textDisplay": "Display",
|
||||
"textScreenTip": "Screen Tip"
|
||||
"textScreenTip": "Screen Tip",
|
||||
"textPageNumbering": "Page Numbering",
|
||||
"textDifferentFirstPage": "Different first page",
|
||||
"textDifferentOddAndEvenPages": "Different odd and even pages",
|
||||
"textLinkToPrevious": "Link to Previous",
|
||||
"textContinueFromPreviousSection": "Continue from previous section",
|
||||
"textStartAt": "Start at"
|
||||
}
|
||||
}
|
|
@ -12,6 +12,7 @@ import EditImageController from "./controller/EditImage";
|
|||
import EditTableController from "./controller/EditTable";
|
||||
import EditChartController from "./controller/EditChart";
|
||||
import EditHyperlinkController from "./controller/EditHyperlink";
|
||||
import EditHeaderController from "./controller/EditHeader";
|
||||
|
||||
import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers} from "./EditText";
|
||||
import {PageAdvancedSettings} from "./EditParagraph";
|
||||
|
@ -186,13 +187,13 @@ const EditTabs = props => {
|
|||
component: <EditTableController />
|
||||
})
|
||||
}
|
||||
/*if (settings.indexOf('header') > -1) {
|
||||
if (settings.indexOf('header') > -1) {
|
||||
editors.push({
|
||||
caption: headerType==2 ? _t.textFooter : _t.textHeader,
|
||||
caption: headerType === 2 ? _t.textFooter : _t.textHeader,
|
||||
id: 'edit-header',
|
||||
component: <EditHeader />
|
||||
component: <EditHeaderController />
|
||||
})
|
||||
}*/
|
||||
}
|
||||
if (settings.indexOf('shape') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textShape,
|
||||
|
|
|
@ -0,0 +1,51 @@
|
|||
import React, { Fragment, useState } from 'react';
|
||||
import { observer, inject } from "mobx-react";
|
||||
import { List, ListItem, Segmented, Button, Toggle, BlockTitle } from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const EditHeader = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const headerObject = props.storeFocusObjects.headerObject;
|
||||
const isDiffFirst = headerObject.get_DifferentFirst();
|
||||
const isDiffOdd = headerObject.get_DifferentEvenOdd();
|
||||
const linkToPrev = headerObject.get_LinkToPrevious();
|
||||
const boolLinkToPrev = !!linkToPrev;
|
||||
const startPageNumber = headerObject.get_StartPageNumber();
|
||||
let _startAt = 1;
|
||||
if (startPageNumber >= 0) {
|
||||
_startAt = startPageNumber;
|
||||
}
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
<ListItem title={_t.textDifferentFirstPage}>
|
||||
<Toggle checked={isDiffFirst} onToggleChange={() => {props.onDiffFirst(!isDiffFirst)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textDifferentOddAndEvenPages}>
|
||||
<Toggle checked={isDiffOdd} onToggleChange={() => {props.onDiffOdd(!isDiffOdd)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textLinkToPrevious} className={linkToPrev===null ? 'disabled' : ''}>
|
||||
<Toggle checked={boolLinkToPrev} onToggleChange={() => {props.onSameAs(!boolLinkToPrev)}}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<BlockTitle>{_t.textPageNumbering}</BlockTitle>
|
||||
<List>
|
||||
<ListItem title={_t.textContinueFromPreviousSection}>
|
||||
<Toggle checked={startPageNumber<0} onToggleChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textStartAt} className={startPageNumber<0 ? 'disabled' : ''}>
|
||||
<div slot='after-start'>{_startAt}</div>
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement' onClick={() => {props.onStartAt(_startAt, true)}}> - </Button>
|
||||
<Button outline className='increment' onClick={() => {props.onStartAt(_startAt, false)}}> + </Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
export default inject("storeFocusObjects")(observer(EditHeader));
|
|
@ -0,0 +1,63 @@
|
|||
import React, {Component} from 'react';
|
||||
|
||||
import EditHeader from '../EditHeader';
|
||||
|
||||
class EditHeaderController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
onDiffFirst (value) {
|
||||
const api = Common.EditorApi.get();
|
||||
if (api) {
|
||||
api.HeadersAndFooters_DifferentFirstPage(value);
|
||||
}
|
||||
}
|
||||
|
||||
onDiffOdd (value) {
|
||||
const api = Common.EditorApi.get();
|
||||
if (api) {
|
||||
api.HeadersAndFooters_DifferentOddandEvenPage(value);
|
||||
}
|
||||
}
|
||||
|
||||
onSameAs (value) {
|
||||
const api = Common.EditorApi.get();
|
||||
if (api) {
|
||||
api.HeadersAndFooters_LinkToPrevious(value);
|
||||
}
|
||||
}
|
||||
|
||||
onNumberingContinue (isChecked, value) {
|
||||
const api = Common.EditorApi.get();
|
||||
if (api) {
|
||||
api.asc_SetSectionStartPage(isChecked ? -1 : value);
|
||||
}
|
||||
}
|
||||
|
||||
onStartAt (value, isDecrement) {
|
||||
const api = Common.EditorApi.get();
|
||||
if (api) {
|
||||
let start = value;
|
||||
if (isDecrement) {
|
||||
start = Math.max(1, --start);
|
||||
} else {
|
||||
start = Math.min(2147483646, ++start);
|
||||
}
|
||||
api.asc_SetSectionStartPage(start);
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditHeader onDiffFirst={this.onDiffFirst}
|
||||
onDiffOdd={this.onDiffOdd}
|
||||
onSameAs={this.onSameAs}
|
||||
onNumberingContinue={this.onNumberingContinue}
|
||||
onStartAt={this.onStartAt}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default EditHeaderController;
|
|
@ -9,7 +9,7 @@ export class storeFocusObjects {
|
|||
}
|
||||
|
||||
@computed get settings() {
|
||||
let _settings = [];
|
||||
const _settings = [];
|
||||
for (let object of this._focusObjects) {
|
||||
let type = object.get_ObjectType();
|
||||
if (Asc.c_oAscTypeSelectElement.Paragraph === type) {
|
||||
|
@ -36,29 +36,43 @@ export class storeFocusObjects {
|
|||
}
|
||||
@computed get headerType() {
|
||||
for (let object of this._focusObjects) {
|
||||
let type = object.get_ObjectType();
|
||||
const type = object.get_ObjectType();
|
||||
if (Asc.c_oAscTypeSelectElement.Header === type) {
|
||||
return object.get_ObjectValue().get_Type();
|
||||
}
|
||||
}
|
||||
return this._headerType;
|
||||
}
|
||||
@computed get headerObject() {
|
||||
const headers = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Header) {
|
||||
headers.push(object);
|
||||
}
|
||||
}
|
||||
if (headers.length > 0) {
|
||||
const object = headers[headers.length - 1]; // get top
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@computed get paragraphObject() {
|
||||
let paragraphs = [];
|
||||
const paragraphs = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
|
||||
paragraphs.push(object);
|
||||
}
|
||||
}
|
||||
if (paragraphs.length > 0) {
|
||||
let object = paragraphs[paragraphs.length - 1]; // get top
|
||||
const object = paragraphs[paragraphs.length - 1]; // get top
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@computed get shapeObject() {
|
||||
let shapes = [];
|
||||
const shapes = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
|
||||
if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) {
|
||||
|
@ -67,14 +81,14 @@ export class storeFocusObjects {
|
|||
}
|
||||
}
|
||||
if (shapes.length > 0) {
|
||||
let object = shapes[shapes.length - 1]; // get top
|
||||
const object = shapes[shapes.length - 1]; // get top
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@computed get imageObject() {
|
||||
let images = [];
|
||||
const images = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
|
||||
const imageObject = object.get_ObjectValue();
|
||||
|
@ -84,21 +98,21 @@ export class storeFocusObjects {
|
|||
}
|
||||
}
|
||||
if (images.length > 0) {
|
||||
let object = images[images.length - 1]; // get top
|
||||
const object = images[images.length - 1]; // get top
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@computed get tableObject() {
|
||||
let tables = [];
|
||||
const tables = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
|
||||
tables.push(object);
|
||||
}
|
||||
}
|
||||
if (tables.length > 0) {
|
||||
let object = tables[tables.length - 1]; // get top table
|
||||
const object = tables[tables.length - 1]; // get top table
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
|
@ -120,7 +134,7 @@ export class storeFocusObjects {
|
|||
}
|
||||
}
|
||||
if (charts.length > 0) {
|
||||
let object = charts[charts.length - 1]; // get top table
|
||||
const object = charts[charts.length - 1]; // get top table
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
|
@ -134,7 +148,7 @@ export class storeFocusObjects {
|
|||
}
|
||||
}
|
||||
if (links.length > 0) {
|
||||
let object = links[links.length - 1]; // get top
|
||||
const object = links[links.length - 1]; // get top
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
|
|
Loading…
Reference in a new issue