[DE mobile] Add edit header settings

This commit is contained in:
JuliaSvinareva 2020-11-17 20:25:25 +03:00
parent 348bbf6341
commit 5912bc3e1f
5 changed files with 152 additions and 17 deletions

View file

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

View file

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

View file

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

View file

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

View file

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