From 60350fbb13f02679038eb2e2a6633cd3fc206ec6 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Wed, 29 Sep 2021 09:56:50 +0300 Subject: [PATCH] [DE PE] Fix Bug 49364 --- .../mobile/src/controller/edit/EditTable.jsx | 11 +++- apps/documenteditor/mobile/src/less/app.less | 10 ++++ .../mobile/src/store/tableSettings.js | 30 ++++++---- .../mobile/src/view/add/Add.jsx | 20 +++++-- .../mobile/src/view/add/AddTable.jsx | 12 +++- .../mobile/src/view/edit/EditTable.jsx | 55 ++++++++++++++++--- .../mobile/src/controller/add/AddOther.jsx | 14 ++++- .../mobile/src/controller/edit/EditTable.jsx | 9 ++- .../mobile/src/less/app.less | 9 +++ .../mobile/src/store/tableSettings.js | 29 ++++++---- .../mobile/src/view/add/AddOther.jsx | 13 ++++- .../mobile/src/view/edit/EditTable.jsx | 54 +++++++++++++++--- 12 files changed, 217 insertions(+), 49 deletions(-) diff --git a/apps/documenteditor/mobile/src/controller/edit/EditTable.jsx b/apps/documenteditor/mobile/src/controller/edit/EditTable.jsx index 57962333d..b9644e476 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditTable.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditTable.jsx @@ -17,7 +17,9 @@ class EditTableController extends Component { this.onRemoveColumn = this.onRemoveColumn.bind(this); this.onRemoveRow = this.onRemoveRow.bind(this); this.onWrapMoveText = this.onWrapMoveText.bind(this); + this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this); } + closeIfNeed () { if (!this.props.storeFocusObjects.isTableInStack) { if ( Device.phone ) { @@ -160,6 +162,7 @@ class EditTableController extends Component { onCheckTemplateChange (tableLook, type, isChecked) { const api = Common.EditorApi.get(); const properties = new Asc.CTableProp(); + switch (type) { case 0: tableLook.put_FirstRow(isChecked); @@ -184,6 +187,11 @@ class EditTableController extends Component { api.tblApply(properties); } + onGetTableStylesPreviews() { + const api = Common.EditorApi.get(); + setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews()),10); + } + onFillColor (color) { const api = Common.EditorApi.get(); const properties = new Asc.CTableProp(); @@ -228,9 +236,10 @@ class EditTableController extends Component { onCheckTemplateChange={this.onCheckTemplateChange} onFillColor={this.onFillColor} onBorderTypeClick={this.onBorderTypeClick} + onGetTableStylesPreviews = {this.onGetTableStylesPreviews} /> ) } } -export default inject("storeFocusObjects")(observer(EditTableController)); \ No newline at end of file +export default inject("storeFocusObjects", "storeTableSettings")(observer(EditTableController)); \ 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 30e7e21e1..12a97dc46 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -46,6 +46,7 @@ } } + // Review .page-review { --f7-toolbar-link-color: @themeColor; @@ -96,6 +97,15 @@ } } +#edit-table-style, #add-table { + .preloader-modal { + background-color: transparent; + .preloader { + --f7-preloader-color: var(--f7-theme-color-shade); + } + } +} + .item-content { .preview{ color: @gray; diff --git a/apps/documenteditor/mobile/src/store/tableSettings.js b/apps/documenteditor/mobile/src/store/tableSettings.js index 892e307a2..2b48d0c9f 100644 --- a/apps/documenteditor/mobile/src/store/tableSettings.js +++ b/apps/documenteditor/mobile/src/store/tableSettings.js @@ -8,29 +8,39 @@ export class storeTableSettings { cellBorders: observable, cellBorderWidth: observable, cellBorderColor: observable, + arrayStyles: observable, + isRenderStyles:observable, initTableTemplates: action, - styles: computed, + resetFlagRender: action, + setStyles: action, updateCellBorderWidth: action, updateCellBorderColor: action, }); } _templates = []; + arrayStyles = []; + isRenderStyles; - initTableTemplates (templates) { - this._templates = templates; + resetFlagRender (bool) { + this.isRenderStyles = bool; + } + + initTableTemplates () { + this.isRenderStyles = true; } - get styles () { + setStyles (arrStyles) { let styles = []; - for (let template of this._templates) { + for (let template of arrStyles) { styles.push({ - imageUrl : template.asc_getImage(), - templateId : template.asc_getId() - }); - } - return styles; + imageUrl : template.asc_getImage(), + templateId : template.asc_getId() + }); + } + return this.arrayStyles = styles; } + getTableLook (tableObject) { return tableObject.get_TableLook() } diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx index a53800be8..26a48ac4f 100644 --- a/apps/documenteditor/mobile/src/view/add/Add.jsx +++ b/apps/documenteditor/mobile/src/view/add/Add.jsx @@ -47,6 +47,7 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => { const isAndroid = Device.android; const { t } = useTranslation(); const _t = t('Add', {returnObjects: true}); + return ( {tabs.length > 1 ? @@ -64,11 +65,12 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => { ) }; -const AddLayoutContent = ({ tabs }) => { +const AddLayoutContent = ({ tabs, onGetTableStylesPreviews }) => { + return ( {tabs.map((item, index) => - + {e.id === 'add-table' && onGetTableStylesPreviews()}} id={item.id} className="page-content" tabActive={index === 0}> {item.component} )} @@ -76,7 +78,7 @@ const AddLayoutContent = ({ tabs }) => { ) }; -const AddTabs = inject("storeFocusObjects")(observer(({storeFocusObjects, showPanels, style, inPopover}) => { +const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover}) => { const { t } = useTranslation(); const _t = t('Add', {returnObjects: true}); const api = Common.EditorApi.get(); @@ -179,11 +181,21 @@ const AddTabs = inject("storeFocusObjects")(observer(({storeFocusObjects, showPa component: }); } + + const onGetTableStylesPreviews = () => { + const api = Common.EditorApi.get(); + if(storeTableSettings.isRenderStyles) { + f7.preloader.showIn('.preload'); + setTimeout( () => storeTableSettings.setStyles(api.asc_getTableStylesPreviews()), 10); + storeTableSettings.resetFlagRender(false); + } + } + return ( - + ) diff --git a/apps/documenteditor/mobile/src/view/add/AddTable.jsx b/apps/documenteditor/mobile/src/view/add/AddTable.jsx index 3e4635f43..84a84790e 100644 --- a/apps/documenteditor/mobile/src/view/add/AddTable.jsx +++ b/apps/documenteditor/mobile/src/view/add/AddTable.jsx @@ -1,14 +1,23 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; +import { f7 } from 'framework7-react'; import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; const AddTable = props => { + const storeTableSettings = props.storeTableSettings; - const styles = storeTableSettings.styles; + const styles = storeTableSettings.arrayStyles; + + const onReadyStyles = () => { + f7.preloader.hideIn('.preload'); + } + return ( +
+
    {styles.map((style, index) => { return ( @@ -19,6 +28,7 @@ const AddTable = props => { ) })}
+ {onReadyStyles()}
) }; diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx index d17639b5b..d42edf860 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx @@ -1,4 +1,4 @@ -import React, {Fragment, useState} from 'react'; +import React, {Fragment, useEffect, useRef, useState} from 'react'; import {observer, inject} from "mobx-react"; import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react'; import { f7 } from 'framework7-react'; @@ -173,12 +173,18 @@ const PageWrap = props => { // Style -const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => { +const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,onReadyStyles, onGetTableStylesPreviews,storeFocusObjects}) => { const tableObject = storeFocusObjects.tableObject; const styleId = tableObject && tableObject.get_TableStyle(); const [stateId, setId] = useState(styleId); - const styles = storeTableSettings.styles; - + const styles = storeTableSettings.arrayStyles; + + useEffect(() => { + if (storeTableSettings.isRenderStyles) onGetTableStylesPreviews(); + return () => { + storeTableSettings.resetFlagRender(false); + } + }, []); return (
    @@ -192,6 +198,7 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer ) })}
+ {storeTableSettings.isRenderStyles && onReadyStyles()}
) })); @@ -200,6 +207,9 @@ const PageStyleOptions = props => { const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const tableObject = props.storeFocusObjects.tableObject; + const nextStateRef = useRef(); + const prevStateRef = useRef(); + let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer; if (tableObject) { tableLook = tableObject.get_TableLook(); @@ -210,9 +220,30 @@ const PageStyleOptions = props => { isLastCol = tableLook.get_LastCol(); isBandVer = tableLook.get_BandVer(); } + + nextStateRef.current = [isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer]; + + useEffect(() => { + props.storeTableSettings.resetFlagRender(false); + prevStateRef.current = [...nextStateRef.current]; + + return () => { + if (!(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) { + props.onGetTableStylesPreviews(); + } + } + }, []); + + const openIndicator = () => { + if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) { + $$('.table-styles').hide(); + f7.preloader.showIn('.preload'); + } + } + return ( - + {Device.phone && @@ -464,8 +495,6 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro const PageStyle = props => { const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); - const storeTableSettings = props.storeTableSettings; - const templates = storeTableSettings.styles; const isAndroid = Device.android; const tableObject = props.storeFocusObjects.tableObject; @@ -474,6 +503,11 @@ const PageStyle = props => { return null; } + const onReadyStyles = () => { + f7.preloader.hideIn('.preload'); + $$('.table-styles').show(); + } + return ( @@ -495,12 +529,14 @@ const PageStyle = props => { - +
+ @@ -560,6 +596,7 @@ const EditTable = props => { diff --git a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx index f10cbe1f5..cf11ca69c 100644 --- a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx +++ b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx @@ -1,5 +1,6 @@ import React, {Component} from 'react'; import { f7 } from 'framework7-react'; +import {observer, inject} from "mobx-react"; import {Device} from '../../../../../common/mobile/utils/device'; import { withTranslation} from 'react-i18next'; @@ -10,6 +11,7 @@ class AddOtherController extends Component { super(props); this.onStyleClick = this.onStyleClick.bind(this); this.initStyleTable = this.initStyleTable.bind(this); + this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this); this.initTable = false; } @@ -90,6 +92,15 @@ class AddOtherController extends Component { }).open(); } + onGetTableStylesPreviews = () => { + const api = Common.EditorApi.get(); + if (this.props.storeTableSettings.isRenderStyles) { + f7.preloader.showIn('.preload'); + setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews()) , 10); + this.props.storeTableSettings.resetFlagRender(false); + } + } + hideAddComment () { const api = Common.EditorApi.get(); const stack = api.getSelectedElements(); @@ -122,11 +133,12 @@ class AddOtherController extends Component { onStyleClick={this.onStyleClick} initStyleTable={this.initStyleTable} hideAddComment={this.hideAddComment} + onGetTableStylesPreviews = {this.onGetTableStylesPreviews} /> ) } } -const AddOtherWithTranslation = withTranslation()(AddOtherController); +const AddOtherWithTranslation = inject("storeTableSettings")(withTranslation()(AddOtherController)); export {AddOtherWithTranslation as AddOtherController}; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx index 9ae2be6ba..a743f06e1 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx @@ -16,6 +16,7 @@ class EditTableController extends Component { this.onAddRowBelow = this.onAddRowBelow.bind(this); this.onRemoveColumn = this.onRemoveColumn.bind(this); this.onRemoveRow = this.onRemoveRow.bind(this); + this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this); } closeIfNeed () { @@ -120,6 +121,11 @@ class EditTableController extends Component { api.tblApply(properties); } + onGetTableStylesPreviews() { + const api = Common.EditorApi.get(); + this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews()); + } + onFillColor (color) { const api = Common.EditorApi.get(); const properties = new Asc.CTableProp(); @@ -213,9 +219,10 @@ class EditTableController extends Component { onBorderTypeClick={this.onBorderTypeClick} onReorder={this.onReorder} onAlign={this.onAlign} + onGetTableStylesPreviews = {this.onGetTableStylesPreviews} /> ) } } -export default inject("storeFocusObjects")(observer(EditTableController)); \ No newline at end of file +export default inject("storeFocusObjects", "storeTableSettings")(observer(EditTableController)); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 289e67d0e..19b7a9bb8 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -84,6 +84,15 @@ } } +#edit-table-style, #add-table { + .preloader-modal { + background-color: transparent; + .preloader { + --f7-preloader-color: var(--f7-theme-color-shade); + } + } +} + .item-content { .preview{ color: @gray; diff --git a/apps/presentationeditor/mobile/src/store/tableSettings.js b/apps/presentationeditor/mobile/src/store/tableSettings.js index 272093980..bf0f96dbe 100644 --- a/apps/presentationeditor/mobile/src/store/tableSettings.js +++ b/apps/presentationeditor/mobile/src/store/tableSettings.js @@ -8,28 +8,37 @@ export class storeTableSettings { cellBorders: observable, cellBorderWidth: observable, cellBorderColor: observable, + arrayStyles: observable, + isRenderStyles:observable, initTableTemplates: action, - styles: computed, + resetFlagRender: action, + setStyles: action, updateCellBorderWidth: action, updateCellBorderColor: action, }); } _templates = []; + arrayStyles = []; + isRenderStyles; - initTableTemplates (templates) { - this._templates = templates; + resetFlagRender (bool) { + this.isRenderStyles = bool; + } + + initTableTemplates () { + this.isRenderStyles = true; } - get styles () { + setStyles (arrStyles) { let styles = []; - for (let template of this._templates) { + for (let template of arrStyles) { styles.push({ - imageUrl : template.asc_getImage(), - templateId : template.asc_getId() - }); - } - return styles; + imageUrl : template.asc_getImage(), + templateId : template.asc_getId() + }); + } + return this.arrayStyles = styles; } getTableLook (tableObject) { diff --git a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx index 572d77a39..f46de1649 100644 --- a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx +++ b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx @@ -1,6 +1,6 @@ import React, {useState} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react'; +import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; @@ -9,10 +9,16 @@ const PageTable = props => { const { t } = useTranslation(); const _t = t('View.Add', {returnObjects: true}); const storeTableSettings = props.storeTableSettings; - const styles = storeTableSettings.styles; + const styles = storeTableSettings.arrayStyles; + + const onReadyStyles = () => { + f7.preloader.hideIn('.preload'); + } + return ( +
    {styles.map((style, index) => { @@ -24,6 +30,7 @@ const PageTable = props => { ) })}
+ {onReadyStyles()}
) @@ -36,7 +43,7 @@ const AddOther = props => { const hideAddComment = props.hideAddComment(); return ( - props.onGetTableStylesPreviews()} routeProps={{ onStyleClick: props.onStyleClick, initStyleTable: props.initStyleTable }}> diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx index 789ba0a45..0687845ae 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx @@ -1,4 +1,4 @@ -import React, {Fragment, useState} from 'react'; +import React, {Fragment, useState, useEffect, useRef} from 'react'; import {observer, inject} from "mobx-react"; import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react'; import { useTranslation } from 'react-i18next'; @@ -7,11 +7,18 @@ import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile // Style -const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => { +const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick, onReadyStyles, onGetTableStylesPreviews, storeTableSettings,storeFocusObjects}) => { const tableObject = storeFocusObjects.tableObject; const styleId = tableObject ? tableObject.get_TableStyle() : null; const [stateId, setId] = useState(styleId); - const styles = storeTableSettings.styles; + const styles = storeTableSettings.arrayStyles; + + useEffect(() => { + if (storeTableSettings.isRenderStyles) onGetTableStylesPreviews(); + return () => { + storeTableSettings.resetFlagRender(false); + } + }, []); if (!tableObject && Device.phone) { $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); @@ -31,6 +38,7 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer ) })} + {storeTableSettings.isRenderStyles && onReadyStyles()} ) })); @@ -38,8 +46,10 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer const PageStyleOptions = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const tableObject = props.storeFocusObjects.tableObject; + const nextStateRef = useRef(); + const prevStateRef = useRef(); + let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer; if (tableObject) { tableLook = tableObject.get_TableLook(); @@ -51,9 +61,29 @@ const PageStyleOptions = props => { isBandVer = tableLook.get_BandVer(); } + nextStateRef.current = [isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer]; + + useEffect(() => { + props.storeTableSettings.resetFlagRender(false); + prevStateRef.current = [...nextStateRef.current]; + + return () => { + if (!(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) { + props.onGetTableStylesPreviews(); + } + } + }, []); + + const openIndicator = () => { + if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) { + $$('.table-styles').hide(); + f7.preloader.showIn('.preload'); + } + } + return ( - + {Device.phone && @@ -311,10 +341,13 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro const PageStyle = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeTableSettings = props.storeTableSettings; - const templates = storeTableSettings.styles; const isAndroid = Device.android; + const onReadyStyles = () => { + f7.preloader.hideIn('.preload'); + $$('.table-styles').show(); + } + return ( @@ -336,12 +369,14 @@ const PageStyle = props => { - +
+ @@ -495,6 +530,7 @@ const EditTable = props => {