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

[DE mobile] Change styles in table of contents

Browse source
This commit is contained in:
SergeyEzhin 2022-02-03 20:34:19 +04:00
parent 63db8da5d4
commit 4ffd60ce86
5 changed files with 164 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,6 @@ 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 {
@ -12,6 +11,21 @@ class EditTableContentsController extends Component {
this.startLevel = 1;
this.endLevel = 3;
this.fillTOCProps = this.fillTOCProps.bind(this);
// this.getStylesImages = this.getStylesImages.bind(this);
}
getStylesImages(id, value) {
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
// const arrValuesStyles = [Asc.c_oAscTOCStylesType.Current, Asc.c_oAscTOCStylesType.Simple, Asc.c_oAscTOCStylesType.Web, Asc.c_oAscTOCStylesType.Standard, Asc.c_oAscTOCStylesType.Modern, Asc.c_oAscTOCStylesType.Classic];
propsTableContents.put_StylesType(value);
api.SetDrawImagePlaceContents(id, propsTableContents);
// arrValuesStyles.forEach((value, index) => {
// propsTableContents.put_StylesType(value);
// api.SetDrawImagePlaceContents(`image-style${index}`, propsTableContents);
// });
}
onStyle(value) {
@ -244,6 +258,7 @@ class EditTableContentsController extends Component {
onLevelsChange={this.onLevelsChange}
fillTOCProps={this.fillTOCProps}
addStyles={this.addStyles}
getStylesImages={this.getStylesImages}
/>
)
}

55
apps/documenteditor/mobile/src/controller/edit/StylesImages.jsx Normal file
View file

@ -0,0 +1,55 @@
import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react";
import StylesImages from '../../view/edit/StylesImages';
class StylesImagesController extends Component {
constructor (props) {
super(props);
// this.getStylesImages = this.getStylesImages.bind(this);
}
getStylesImages() {
const api = Common.EditorApi.get();
// const propsTableContents = api.asc_GetTableOfContentsPr();
const arrValuesStyles = [Asc.c_oAscTOCStylesType.Current, Asc.c_oAscTOCStylesType.Simple, Asc.c_oAscTOCStylesType.Web, Asc.c_oAscTOCStylesType.Standard, Asc.c_oAscTOCStylesType.Modern, Asc.c_oAscTOCStylesType.Classic];
arrValuesStyles.forEach((value, index) => {
let propsTableContents = api.asc_GetTableOfContentsPr();
// let propsTableContents = new Asc.CTableOfContentsPr();
propsTableContents.put_StylesType(value);
api.SetDrawImagePlaceContents(`image-style${index}`, propsTableContents);
});
}
componentDidMount() {
console.log('mount');
// setTimeout(() => {
this.getStylesImages();
// }, 1000);
}
componentWillUnmount() {
console.log('unmount');
}
onStyle(value) {
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
propsTableContents.put_StylesType(value);
api.asc_SetTableOfContentsPr(propsTableContents);
}
render () {
return (
<StylesImages
onStyle={this.onStyle}
getStylesImages={this.getStylesImages}
/>
)
}
}
export default StylesImagesController;

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

@ -22,6 +22,7 @@ import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} fro
import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
import {PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents';
import StylesImagesController from '../../controller/edit/StylesImages';
const routes = [
//Edit text
@ -189,9 +190,13 @@ const routes = [
// Table Contents
// {
// path: '/edit-style-table-contents/',
// component: PageEditStylesTableContents
// },
{
path: '/edit-style-table-contents/',
component: PageEditStylesTableContents
component: StylesImagesController
},
{
path: '/edit-leader-table-contents/',

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

@ -10,6 +10,7 @@ const EditTableContents = props => {
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
const stylesCount = propsTableContents.get_StylesCount();
console.log(propsTableContents);
const [type, setType] = useState(0);
const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
const [pageNumbers, setPageNumbers] = useState(propsTableContents.get_ShowPageNumbers());
@ -73,7 +74,8 @@ const EditTableContents = props => {
onStyle: props.onStyle,
arrStyles,
setStyleValue,
styleValue
styleValue,
getStylesImages: props.getStylesImages
}}></ListItem>
</List>
<List>
@ -120,7 +122,19 @@ const EditTableContents = props => {
const PageEditStylesTableContents = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const arrValuesStyles = [Asc.c_oAscTOCStylesType.Current, Asc.c_oAscTOCStylesType.Simple, Asc.c_oAscTOCStylesType.Web, Asc.c_oAscTOCStylesType.Standard, Asc.c_oAscTOCStylesType.Modern, Asc.c_oAscTOCStylesType.Classic];
const [styleValue, setStyleValue] = useState(props.styleValue);
// const arrStylesImages = [$$('#image-style0')[0], $$('#image-style1')[0], $$('#image-style2')[0], $$('#image-style3')[0], $$('#image-style4')[0], $$('#image-style5')[0]];
// console.log('render');
useEffect(() => {
setTimeout(() => {
console.log('ready');
arrValuesStyles.forEach((value, index) => {
props.getStylesImages(`image-style${index}`, value);
});
}, 1000);
}, []);
return (
<Page>
@ -136,16 +150,21 @@ 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.setStyleValue(style.value);
props.onStyle(style.value)
}}></ListItem>
<Fragment key={index}>
<BlockTitle>{style.displayValue}</BlockTitle>
<div id={`image-style${index}`}></div>
</Fragment>
)
})}
</List>
</Page>
)
{/* <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> */}
}
const PageEditLeaderTableContents = props => {

62
apps/documenteditor/mobile/src/view/edit/StylesImages.jsx Normal file
View file

@ -0,0 +1,62 @@
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, Actions, ActionsButton, ActionsGroup} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const StylesImages = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr();
const [type, setType] = useState(0);
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 [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
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> */}
{arrStyles.map((style, index) => {
return (
<div key={index}>
<BlockTitle>{style.displayValue}</BlockTitle>
<div id={`image-style${index}`}></div>
</div>
)
})}
{/* </List> */}
</Page>
)
{/* <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> */}
}
export default StylesImages;