From afa38a73bf6b681a17c0079f70e30e336e64aaa4 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 9 Feb 2022 00:32:59 +0400 Subject: [PATCH] [DE mobile] Changed styles in table of contents --- .../src/controller/edit/EditTableContents.jsx | 18 +++--- .../src/controller/edit/StylesImages.jsx | 55 ---------------- apps/documenteditor/mobile/src/less/app.less | 17 +++++ .../mobile/src/view/edit/Edit.jsx | 7 +-- .../src/view/edit/EditTableContents.jsx | 31 ++++------ .../mobile/src/view/edit/StylesImages.jsx | 62 ------------------- 6 files changed, 37 insertions(+), 153 deletions(-) delete mode 100644 apps/documenteditor/mobile/src/controller/edit/StylesImages.jsx delete mode 100644 apps/documenteditor/mobile/src/view/edit/StylesImages.jsx diff --git a/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx index 2b075ff27..eff60bb6d 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx +++ b/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]; - propsTableContents.put_StylesType(value); - api.SetDrawImagePlaceContents(id, propsTableContents); - - // arrValuesStyles.forEach((value, index) => { - // propsTableContents.put_StylesType(value); - // api.SetDrawImagePlaceContents(`image-style${index}`, propsTableContents); - // }); + arrValuesStyles.forEach((value, index) => { + let canvasElem = document.querySelector(`#image-toc-style${index}`); + + propsTableContents.put_StylesType(value); + api.SetDrawImagePlaceContents(canvasElem, propsTableContents); + }); } onStyle(value) { diff --git a/apps/documenteditor/mobile/src/controller/edit/StylesImages.jsx b/apps/documenteditor/mobile/src/controller/edit/StylesImages.jsx deleted file mode 100644 index a70f1f45e..000000000 --- a/apps/documenteditor/mobile/src/controller/edit/StylesImages.jsx +++ /dev/null @@ -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 ( - - ) - } -} - -export default StylesImagesController; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 54914cc14..db821fd98 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/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 { diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index 0179d5b7e..0a06b8f18 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/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/', diff --git a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx index c13b6490c..90cb71308 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx +++ b/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 => { {props.arrStyles.map((style, index) => { return ( - +
{ + setStyleValue(style.value); + props.setStyleValue(style.value); + props.onStyle(style.value) + }}> {style.displayValue} -
- +
+ +
+
) })} ) - - {/* { - setStyleValue(style.value); - props.setStyleValue(style.value); - props.onStyle(style.value) - }}> */} } const PageEditLeaderTableContents = props => { diff --git a/apps/documenteditor/mobile/src/view/edit/StylesImages.jsx b/apps/documenteditor/mobile/src/view/edit/StylesImages.jsx deleted file mode 100644 index f79ccf5cf..000000000 --- a/apps/documenteditor/mobile/src/view/edit/StylesImages.jsx +++ /dev/null @@ -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 ( - - - {Device.phone && - - - - - - } - - {/* */} - {arrStyles.map((style, index) => { - return ( -
- {style.displayValue} -
-
- ) - })} - {/* */} - - ) - - {/* { - setStyleValue(style.value); - props.setStyleValue(style.value); - props.onStyle(style.value) - }}> */} -} - -export default StylesImages; \ No newline at end of file