[DE mobile] Add editing a table of contents v.2
This commit is contained in:
parent
6a3a566830
commit
a183de4c6e
|
@ -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.",
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
};
|
||||
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
|
@ -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
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -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
|
||||
};
|
Loading…
Reference in a new issue