[DE mobile] Changed styles in table of contents

apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx

@@ -11,21 +11,19 @@ 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) {
+    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];
+        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);
-        api.SetDrawImagePlaceContents(id, propsTableContents);
-
-        // arrValuesStyles.forEach((value, index) => {
-        //     propsTableContents.put_StylesType(value);
-        //     api.SetDrawImagePlaceContents(`image-style${index}`, propsTableContents);
-        // });
+            api.SetDrawImagePlaceContents(canvasElem, propsTableContents);
+        });
     }
 
     onStyle(value) {

apps/documenteditor/mobile/src/controller/edit/StylesImages.jsx

@@ -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;

apps/documenteditor/mobile/src/less/app.less

@@ -163,6 +163,23 @@
     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 
 
 .empty-screens {

apps/documenteditor/mobile/src/view/edit/Edit.jsx

@@ -22,7 +22,6 @@ 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
@@ -190,13 +189,9 @@ const routes = [
 
     // Table Contents 
 
-    // {
-    //     path: '/edit-style-table-contents/',
-    //     component: PageEditStylesTableContents
-    // },
     {
         path: '/edit-style-table-contents/',
-        component: StylesImagesController
+        component: PageEditStylesTableContents
     },
     {
         path: '/edit-leader-table-contents/',

apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx

@@ -10,7 +10,6 @@ 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());
@@ -26,7 +25,6 @@ const EditTableContents = props => {
         { 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 },
@@ -122,18 +120,11 @@ 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');
+    const widthImage = !Device.phone ? '330px' :  window.innerWidth - 30 + 'px';
 
     useEffect(() => {
-        setTimeout(() => {
-            console.log('ready');
-            arrValuesStyles.forEach((value, index) => {
-                props.getStylesImages(`image-style${index}`, value);
-            });
-        }, 1000);
+        props.getStylesImages();
     }, []);
 
     return (
@@ -150,21 +141,21 @@ const PageEditStylesTableContents = props => {
             <List>
                 {props.arrStyles.map((style, index) => {
                     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>
-                            <div id={`image-style${index}`}></div>
-                        </Fragment>
+                            <div className={'style-toc__image ' + (style.value === styleValue ? 'style-toc__image_active' : '')}> 
+                                <canvas style={{width: widthImage, height: '10px'}} id={`image-toc-style${index}`}></canvas>
+                            </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> */}
 }
 
 const PageEditLeaderTableContents = props => {

apps/documenteditor/mobile/src/view/edit/StylesImages.jsx

@@ -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;