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

[DE mobile] Changed styles in table of contents

Browse source
This commit is contained in:
SergeyEzhin 2022-02-09 00:32:59 +04:00
parent b36d044620
commit afa38a73bf
6 changed files with 37 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,21 +11,19 @@ class EditTableContentsController extends Component {
this.startLevel = 1; this.startLevel = 1;
this.endLevel = 3; this.endLevel = 3;
this.fillTOCProps = this.fillTOCProps.bind(this); this.fillTOCProps = this.fillTOCProps.bind(this);
// this.getStylesImages = this.getStylesImages.bind(this);
} }
getStylesImages(id, value) { getStylesImages() {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr(); 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]; const arrValuesStyles = [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 canvasElem = document.querySelector(`#image-toc-style${index}`);
propsTableContents.put_StylesType(value); propsTableContents.put_StylesType(value);
api.SetDrawImagePlaceContents(id, propsTableContents); api.SetDrawImagePlaceContents(canvasElem, propsTableContents);
});
// arrValuesStyles.forEach((value, index) => {
// propsTableContents.put_StylesType(value);
// api.SetDrawImagePlaceContents(`image-style${index}`, propsTableContents);
// });
} }
onStyle(value) { onStyle(value) {

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

@ -1,55 +0,0 @@
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;

17
apps/documenteditor/mobile/src/less/app.less
View file

@ -163,6 +163,23 @@
padding: 0 16px; padding: 0 16px;
} }
.style-toc {
&__image {
margin: 0 15px;
max-height: 180px;
overflow: hidden;
&_active {
border: 1.5px solid @brandColor;
}
}
}
.block > .block-title:first-child, .list > .block-title:first-child {
margin-top: var(--f7-block-margin-vertical);
margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
}
// Navigation // Navigation
.empty-screens { .empty-screens {

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

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

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

@ -10,7 +10,6 @@ const EditTableContents = props => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const propsTableContents = api.asc_GetTableOfContentsPr(); const propsTableContents = api.asc_GetTableOfContentsPr();
const stylesCount = propsTableContents.get_StylesCount(); const stylesCount = propsTableContents.get_StylesCount();
console.log(propsTableContents);
const [type, setType] = useState(0); const [type, setType] = useState(0);
const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType()); const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
const [pageNumbers, setPageNumbers] = useState(propsTableContents.get_ShowPageNumbers()); const [pageNumbers, setPageNumbers] = useState(propsTableContents.get_ShowPageNumbers());
@ -26,7 +25,6 @@ const EditTableContents = props => {
{ displayValue: t('Edit.textCentered'), value: Asc.c_oAscTOFStylesType.Centered }, { displayValue: t('Edit.textCentered'), value: Asc.c_oAscTOFStylesType.Centered },
{ displayValue: t('Edit.textFormal'), value: Asc.c_oAscTOFStylesType.Formal } { 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.textSimple'), value: Asc.c_oAscTOCStylesType.Simple },
{ displayValue: t('Edit.textOnline'), value: Asc.c_oAscTOCStylesType.Web }, { displayValue: t('Edit.textOnline'), value: Asc.c_oAscTOCStylesType.Web },
{ displayValue: t('Edit.textStandard'), value: Asc.c_oAscTOCStylesType.Standard }, { displayValue: t('Edit.textStandard'), value: Asc.c_oAscTOCStylesType.Standard },
@ -122,18 +120,11 @@ const EditTableContents = props => {
const PageEditStylesTableContents = props => { const PageEditStylesTableContents = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true}); 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 [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]]; const widthImage = !Device.phone ? '330px' : window.innerWidth - 30 + 'px';
// console.log('render');
useEffect(() => { useEffect(() => {
setTimeout(() => { props.getStylesImages();
console.log('ready');
arrValuesStyles.forEach((value, index) => {
props.getStylesImages(`image-style${index}`, value);
});
}, 1000);
}, []); }, []);
return ( return (
@ -150,21 +141,21 @@ const PageEditStylesTableContents = props => {
<List> <List>
{props.arrStyles.map((style, index) => { {props.arrStyles.map((style, index) => {
return ( return (
<Fragment key={index}> <div className='style-toc' key={index} onClick={() => {
setStyleValue(style.value);
props.setStyleValue(style.value);
props.onStyle(style.value)
}}>
<BlockTitle>{style.displayValue}</BlockTitle> <BlockTitle>{style.displayValue}</BlockTitle>
<div id={`image-style${index}`}></div> <div className={'style-toc__image ' + (style.value === styleValue ? 'style-toc__image_active' : '')}>
</Fragment> <canvas style={{width: widthImage, height: '10px'}} id={`image-toc-style${index}`}></canvas>
</div>
</div>
) )
})} })}
</List> </List>
</Page> </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 => { const PageEditLeaderTableContents = props => {

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

@ -1,62 +0,0 @@
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;