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

[DE mobile] Add editing a table of contents

Browse source
This commit is contained in:
SergeyEzhin 2022-01-25 01:58:20 +04:00
parent 7c56ea77a1
commit 6a3a566830
6 changed files with 262 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
apps/documenteditor/mobile/locale/en.json
View file

@ -333,7 +333,24 @@
"textTu": "Tu",
"textType": "Type",
"textWe": "We",
"textWrap": "Wrap"
"textWrap": "Wrap",
"textTableOfCont": "Table Of Cont.",
"textPageNumbers": "Page Numbers",
"textSimple": "Simple",
"textRightAlign": "Right Align",
"textLeader": "Leader",
"textStructure": "Structure",
"textRefresh": "Refresh",
"textLevels": "Levels",
"textRemoveTableContent": "Remove table of content",
"textCurrent": "Current",
"textOnline": "Online",
"textClassic": "Classic",
"textDistinctive": "Distinctive",
"textCentered": "Centered",
"textFormal": "Formal",
"textStandard": "Standard",
"textModern": "Modern"
},
"Error": {
"convertationTimeoutText": "Conversion timeout exceeded.",

56
apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx Normal file
View file

@ -0,0 +1,56 @@
import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react";
import { EditTableContents } from '../../view/edit/EditTableContents';
class EditTableContentsController extends Component {
constructor (props) {
super(props);
}
onStyle(value, type) {
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
propsTableContents.put_StylesType(value);
if (type === 1) {
let checked = (value !== Asc.c_oAscTOFStylesType.Centered);
propsTableContents.put_RightAlignTab(checked);
// checked && properties.put_TabLeader(this.cmbLeader.getValue());
}
console.log(propsTableContents);
api.asc_SetTableOfContentsPr(propsTableContents);
}
onTableContentsUpdate(type, currentTOC) {
const api = Common.EditorApi.get();
let props = api.asc_GetTableOfContentsPr(currentTOC);
if (props) {
if (currentTOC && props)
currentTOC = props.get_InternalClass();
api.asc_UpdateTableOfContents(type == 'pages', currentTOC);
}
};
onRemoveTableContents(currentTOC) {
const api = Common.EditorApi.get();
currentTOC = !!currentTOC;
let props = api.asc_GetTableOfContentsPr(currentTOC);
currentTOC = (currentTOC && props) ? props.get_InternalClass() : undefined;
api.asc_RemoveTableOfContents(currentTOC);
}
render () {
return (
<EditTableContents
onStyle={this.onStyle}
/>
)
}
}
export default EditTableContentsController;

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

@ -16,6 +16,7 @@ import {storePalette} from "./palette";
import {storeReview} from '../../../../common/mobile/lib/store/review';
import {storeComments} from "../../../../common/mobile/lib/store/comments";
import {storeToolbarSettings} from "./toolbar";
import {storeTableContent} from "./tableContent";
export const stores = {
storeAppOptions: new storeAppOptions(),
@ -34,6 +35,7 @@ export const stores = {
storePalette: new storePalette(),
storeReview: new storeReview(),
storeComments: new storeComments(),
storeToolbarSettings: new storeToolbarSettings()
storeToolbarSettings: new storeToolbarSettings(),
storeTableContent: new storeTableContent()
};

67
apps/documenteditor/mobile/src/store/tableContent.js Normal file
View file

@ -0,0 +1,67 @@
import {action, observable, computed, makeObservable} from 'mobx';
export class storeTableContent {
constructor() {
makeObservable(this, {
type: observable,
changeType: action,
options: observable,
initSettings: action
});
}
type = 0;
changeType(value) {
this.type = value;
}
options = {
contentWidth: 500,
height: 455
};
initSettings(props) {
// if (props) {
// // var value = props.get_Hyperlink();
// // this.chLinks.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true);
// let value = props.get_StylesType();
// this.cmbStyles.setValue((value!==null) ? value : Asc.c_oAscTOCStylesType.Current);
// value = props.get_ShowPageNumbers();
// this.chPages.setValue((value !== null && value !== undefined) ? value : 'indeterminate');
// if (this.chPages.getValue() == 'checked') {
// value = props.get_RightAlignTab();
// this.chAlign.setValue((value !== null && value !== undefined) ? value : 'indeterminate');
// if (this.chAlign.getValue() == 'checked') {
// value = props.get_TabLeader();
// (value!==undefined) && this.cmbLeader.setValue(value);
// }
// } else {
// (this.type==1) && (this.cmbStyles.getValue()==Asc.c_oAscTOFStylesType.Centered) && this.chAlign.setValue(false);
// }
// }
// (this.type==1) ? this.fillTOFProps(props) : this.fillTOCProps(props);
// // Show Pages is always true when window is opened
// this._originalProps = (props) ? props : new Asc.CTableOfContentsPr();
// if (!props) {
// if (this.type==1) {
// this._originalProps.put_Caption(this.textFigure);
// this._originalProps.put_IncludeLabelAndNumber(this.chFullCaption.getValue() == 'checked');
// } else {
// this._originalProps.put_OutlineRange(this.startLevel, this.endLevel);
// }
// this._originalProps.put_Hyperlink(this.chLinks.getValue() == 'checked');
// this._originalProps.put_ShowPageNumbers(this.chPages.getValue() == 'checked');
// if (this.chPages.getValue() == 'checked') {
// this._originalProps.put_RightAlignTab(this.chAlign.getValue() == 'checked');
// this._originalProps.put_TabLeader(this.cmbLeader.getValue());
// }
// }
// (this.type==1) ? this.api.SetDrawImagePlaceTableOfFigures('tableofcontents-img', this._originalProps) : this.api.SetDrawImagePlaceContents('tableofcontents-img', this._originalProps);
// this.scrollerY.update();
}
}

20
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View file

@ -13,6 +13,7 @@ import EditTableController from "../../controller/edit/EditTable";
import EditChartController from "../../controller/edit/EditChart";
import EditHyperlinkController from "../../controller/edit/EditHyperlink";
import EditHeaderController from "../../controller/edit/EditHeader";
import EditTableContentsController from "../../controller/edit/EditTableContents";
import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor} from "./EditText";
import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
@ -20,6 +21,7 @@ import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShap
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
import {PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
import { EditStylesTableContents } from './EditTableContents';
const routes = [
//Edit text
@ -183,6 +185,13 @@ const routes = [
{
path: '/edit-chart-custom-border-color/',
component: PageChartCustomBorderColor,
},
// Table Contents
{
path: '/edit-style-table-contents/',
component: EditStylesTableContents
}
];
@ -242,10 +251,13 @@ const EditLayoutContent = ({ editors }) => {
const EditTabs = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const api = Common.EditorApi.get();
const inToc = api.asc_GetTableOfContentsPr(true);
const settings = props.storeFocusObjects.settings;
const headerType = props.storeFocusObjects.headerType;
let editors = [];
if (settings.length < 1) {
editors.push({
caption: _t.textSettings,
@ -310,6 +322,14 @@ const EditTabs = props => {
}
}
if(inToc) {
editors.push({
caption: _t.textTableOfCont,
id: 'edit-table-contents',
component: <EditTableContentsController />
})
}
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}>

98
apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx Normal file
View file

@ -0,0 +1,98 @@
import React, {Fragment, useEffect, useState } from 'react';
import {observer, inject} from "mobx-react";
import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const EditTableContents = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
console.log(propsTableContents);
const storeTableContent = props.storeTableContent;
const type = storeTableContent.type;
const arrStyles = (type === 1) ? [
{ displayValue: t('Edit.textCurrent'), value: Asc.c_oAscTOFStylesType.Current },
{ displayValue: t('Edit.textSimple'), value: Asc.c_oAscTOFStylesType.Simple },
{ displayValue: t('Edit.textOnline'), value: Asc.c_oAscTOFStylesType.Web },
{ displayValue: t('Edit.textClassic'), value: Asc.c_oAscTOFStylesType.Classic },
{ displayValue: t('Edit.textDistinctive'), value: Asc.c_oAscTOFStylesType.Distinctive },
{ displayValue: t('Edit.textCentered'), value: Asc.c_oAscTOFStylesType.Centered },
{ displayValue: t('Edit.textFormal'), value: Asc.c_oAscTOFStylesType.Formal }
] : [
{ displayValue: t('Edit.textCurrent'), value: Asc.c_oAscTOCStylesType.Current },
{ displayValue: t('Edit.textSimple'), value: Asc.c_oAscTOCStylesType.Simple },
{ displayValue: t('Edit.textOnline'), value: Asc.c_oAscTOCStylesType.Web },
{ displayValue: t('Edit.textStandard'), value: Asc.c_oAscTOCStylesType.Standard },
{ displayValue: t('Edit.textModern'), value: Asc.c_oAscTOCStylesType.Modern },
{ displayValue: t('Edit.textClassic'), value: Asc.c_oAscTOCStylesType.Classic }
];
const activeStyle = arrStyles.find(style => style.value === propsTableContents.get_StylesType());
return (
<Fragment>
<List>
<ListItem title={t('Edit.textStyle')} link="/edit-style-table-contents/" after={activeStyle.displayValue} routeProps={{onStyle: props.onStyle, arrStyles}}></ListItem>
</List>
<List>
<ListItem>
<span>{t('Edit.textPageNumbers')}</span>
<Toggle defaultChecked></Toggle>
</ListItem>
<ListItem>
<span>{t('Edit.textRightAlign')}</span>
<Toggle defaultChecked></Toggle>
</ListItem>
<ListItem title={t('Edit.textLeader')} link="/edit-table-contents-leader" after=""></ListItem>
<ListItem title={t('Edit.textStructure')} link="/edit-table-contents-structure/" after={t('Edit.textLevels')}></ListItem>
</List>
<List className="buttons-list">
<ListButton className={'button-fill button-raised'} title={t('Edit.textRefresh')} />
<ListButton className='button-red button-fill button-raised' title={t('Edit.textRemoveTableContent')} />
</List>
</Fragment>
)
};
const PageEditStylesTableContents = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
const storeTableContent = props.storeTableContent;
const type = storeTableContent.type;
const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
// const styleValue = propsTableContents.get_StylesType();
console.log(styleValue);
return (
<Page>
<Navbar title={_t.textStyle} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List>
{props.arrStyles.map((style, index) => {
return (
<ListItem key={index} radio title={style.displayValue} value={style.value} checked={style.value === styleValue} onClick={() => {setStyleValue(style.value); props.onStyle(style.value, type)}}></ListItem>
)
})}
</List>
</Page>
)
}
const EditTableContentsContainer = inject("storeTableContent")(observer(EditTableContents));
const EditStylesTableContents = inject("storeTableContent")(observer(PageEditStylesTableContents));
export {
EditTableContentsContainer as EditTableContents,
EditStylesTableContents
};