[DE mobile] Add editing a table of contents
This commit is contained in:
parent
7c56ea77a1
commit
6a3a566830
|
@ -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.",
|
||||
|
|
|
@ -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;
|
|
@ -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
67
apps/documenteditor/mobile/src/store/tableContent.js
Normal 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();
|
||||
}
|
||||
}
|
|
@ -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}>
|
||||
|
|
|
@ -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
|
||||
};
|
Loading…
Reference in a new issue