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

[DE mobile] Add editing a table of contents v.2

Browse source
This commit is contained in:
SergeyEzhin 2022-01-25 20:10:16 +04:00
parent 6a3a566830
commit a183de4c6e
6 changed files with 150 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -350,7 +350,10 @@
"textCentered": "Centered",
"textFormal": "Formal",
"textStandard": "Standard",
"textModern": "Modern"
"textModern": "Modern",
"textCancel": "Cancel",
"textRefreshEntireTable": "Refresh entire table",
"textRefreshPageNumbersOnly": "Refresh page numbers only"
},
"Error": {
"convertationTimeoutText": "Conversion timeout exceeded.",

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

@ -10,20 +10,40 @@ class EditTableContentsController extends Component {
super(props);
}
onStyle(value, type) {
onStyle(value) {
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);
}
onPageNumbers(value) {
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
propsTableContents.put_ShowPageNumbers(value);
propsTableContents.put_RightAlignTab(value);
api.asc_SetTableOfContentsPr(propsTableContents);
}
onRightAlign(value) {
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
propsTableContents.put_RightAlignTab(value);
api.asc_SetTableOfContentsPr(propsTableContents);
}
onLeader(value) {
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
propsTableContents.put_TabLeader(value);
api.asc_SetTableOfContentsPr(propsTableContents);
}
onTableContentsUpdate(type, currentTOC) {
const api = Common.EditorApi.get();
let props = api.asc_GetTableOfContentsPr(currentTOC);
@ -48,6 +68,11 @@ class EditTableContentsController extends Component {
return (
<EditTableContents
onStyle={this.onStyle}
onTableContentsUpdate={this.onTableContentsUpdate}
onRemoveTableContents={this.onRemoveTableContents}
onPageNumbers={this.onPageNumbers}
onRightAlign={this.onRightAlign}
onLeader={this.onLeader}
/>
)
}

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

@ -16,7 +16,6 @@ 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(),
@ -36,6 +35,5 @@ export const stores = {
storeReview: new storeReview(),
storeComments: new storeComments(),
storeToolbarSettings: new storeToolbarSettings(),
storeTableContent: new storeTableContent()
};

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

@ -1,67 +0,0 @@
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();
}
}

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

@ -21,7 +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';
import { PageEditLeaderTableContents, PageEditStylesTableContents } from './EditTableContents';
const routes = [
//Edit text
@ -191,7 +191,11 @@ const routes = [
{
path: '/edit-style-table-contents/',
component: EditStylesTableContents
component: PageEditStylesTableContents
},
{
path: '/edit-leader-table-contents/',
component: PageEditLeaderTableContents
}
];

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

@ -1,6 +1,6 @@
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 {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
@ -10,8 +10,11 @@ const EditTableContents = props => {
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
console.log(propsTableContents);
const storeTableContent = props.storeTableContent;
const type = storeTableContent.type;
const [type, setType] = useState(0);
const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
const [pageNumbers, setPageNumbers] = useState(propsTableContents.get_ShowPageNumbers());
const [rightAlign, setRightAlign] = useState(propsTableContents.get_RightAlignTab());
const [leaderValue, setLeaderValue] = useState(propsTableContents.get_TabLeader() ? propsTableContents.get_TabLeader() : Asc.c_oAscTabLeader.Dot);
const arrStyles = (type === 1) ? [
{ displayValue: t('Edit.textCurrent'), value: Asc.c_oAscTOFStylesType.Current },
{ displayValue: t('Edit.textSimple'), value: Asc.c_oAscTOFStylesType.Simple },
@ -28,29 +31,81 @@ const EditTableContents = props => {
{ displayValue: t('Edit.textModern'), value: Asc.c_oAscTOCStylesType.Modern },
{ displayValue: t('Edit.textClassic'), value: Asc.c_oAscTOCStylesType.Classic }
];
const arrLeaders = [
{ value: Asc.c_oAscTabLeader.None, displayValue: t('Edit.textNone') },
{ value: Asc.c_oAscTabLeader.Dot, displayValue: '....................' },
{ value: Asc.c_oAscTabLeader.Hyphen, displayValue: '-----------------' },
{ value: Asc.c_oAscTabLeader.Underscore,displayValue: '__________' }
];
const activeStyle = arrStyles.find(style => style.value === propsTableContents.get_StylesType());
const activeStyle = arrStyles.find(style => style.value === styleValue);
const activeLeader = arrLeaders.find(leader => leader.value === leaderValue);
const openActionsButtonsRefresh = () => {
f7.actions.create({
buttons: [
[
{
text: t('Edit.textRefreshEntireTable'),
onClick: () => props.onTableContentsUpdate('all')
},
{
text: t('Edit.textRefreshPageNumbersOnly'),
onClick: () => props.onTableContentsUpdate('pages')
}
],
[
{
text: t('Edit.textCancel'),
bold: true
}
]
]
}).open()
}
return (
<Fragment>
<List>
<ListItem title={t('Edit.textStyle')} link="/edit-style-table-contents/" after={activeStyle.displayValue} routeProps={{onStyle: props.onStyle, arrStyles}}></ListItem>
<ListItem title={t('Edit.textStyle')} link="/edit-style-table-contents/" after={activeStyle.displayValue} routeProps={{
onStyle: props.onStyle,
arrStyles,
setStyleValue,
styleValue
}}></ListItem>
</List>
<List>
<ListItem>
<span>{t('Edit.textPageNumbers')}</span>
<Toggle defaultChecked></Toggle>
<Toggle checked={pageNumbers} onToggleChange={() => {
setPageNumbers(!pageNumbers);
props.onPageNumbers(!pageNumbers);
}}></Toggle>
</ListItem>
<ListItem>
<span>{t('Edit.textRightAlign')}</span>
<Toggle defaultChecked></Toggle>
</ListItem>
<ListItem title={t('Edit.textLeader')} link="/edit-table-contents-leader" after=""></ListItem>
{pageNumbers &&
<ListItem>
<span>{t('Edit.textRightAlign')}</span>
<Toggle checked={rightAlign} onToggleChange={() => {
setRightAlign(!rightAlign);
props.onRightAlign(!rightAlign);
}}></Toggle>
</ListItem>
}
{(pageNumbers && rightAlign) &&
<ListItem title={t('Edit.textLeader')} link="/edit-leader-table-contents/"
after={activeLeader ? activeLeader.displayValue : arrLeaders[0].displayValue} routeProps={{
onLeader: props.onLeader,
arrLeaders,
leaderValue,
setLeaderValue
}}></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')} />
<ListButton className={'button-fill button-raised'} title={t('Edit.textRefresh')}
onClick={() => openActionsButtonsRefresh()} />
<ListButton className='button-red button-fill button-raised' title={t('Edit.textRemoveTableContent')} onClick={() => props.onRemoveTableContents()} />
</List>
</Fragment>
)
@ -59,13 +114,7 @@ const EditTableContents = props => {
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);
const [styleValue, setStyleValue] = useState(props.styleValue);
return (
<Page>
@ -81,7 +130,11 @@ const PageEditStylesTableContents = props => {
<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>
<ListItem key={index} radio title={style.displayValue} value={style.value} checked={style.value === styleValue} onClick={() => {
setStyleValue(style.value);
props.setStyleValue(style.value);
props.onStyle(style.value)
}}></ListItem>
)
})}
</List>
@ -89,10 +142,39 @@ const PageEditStylesTableContents = props => {
)
}
const EditTableContentsContainer = inject("storeTableContent")(observer(EditTableContents));
const EditStylesTableContents = inject("storeTableContent")(observer(PageEditStylesTableContents));
const PageEditLeaderTableContents = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const [leaderValue, setLeaderValue] = useState(props.leaderValue);
return (
<Page>
<Navbar title={t('Edit.textLeader')} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List>
{props.arrLeaders.map((leader, index) => {
return (
<ListItem key={index} radio title={leader.displayValue} checked={leaderValue === leader.value} onClick={() => {
setLeaderValue(leader.value);
props.setLeaderValue(leader.value);
props.onLeader(leader.value);
}}></ListItem>
)
})}
</List>
</Page>
)
}
export {
EditTableContentsContainer as EditTableContents,
EditStylesTableContents
EditTableContents,
PageEditStylesTableContents,
PageEditLeaderTableContents
};