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

[DE PE] Fix Bug 49364

Browse source
This commit is contained in:
ShimaginAndrey 2021-09-29 09:56:50 +03:00
parent 5f34dcab62
commit 60350fbb13
12 changed files with 217 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
apps/documenteditor/mobile/src/controller/edit/EditTable.jsx
View file

@ -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));
export default inject("storeFocusObjects", "storeTableSettings")(observer(EditTableController));

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

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

30
apps/documenteditor/mobile/src/store/tableSettings.js
View file

@ -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()
}

20
apps/documenteditor/mobile/src/view/add/Add.jsx
View file

@ -47,6 +47,7 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
return (
<Navbar>
{tabs.length > 1 ?
@ -64,11 +65,12 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
)
};
const AddLayoutContent = ({ tabs }) => {
const AddLayoutContent = ({ tabs, onGetTableStylesPreviews }) => {
return (
<Tabs animated>
{tabs.map((item, index) =>
<Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
<Tab key={"de-tab-" + item.id} onTabShow={(e) => {e.id === 'add-table' && onGetTableStylesPreviews()}} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
@ -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: <AddLinkController noNavbar={true}/>
});
}
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 (
<View style={style} stackPages={true} routes={routes}>
<Page pageContent={false}>
<AddLayoutNavbar tabs={tabs} inPopover={inPopover}/>
<AddLayoutContent tabs={tabs} />
<AddLayoutContent tabs={tabs} onGetTableStylesPreviews={onGetTableStylesPreviews}/>
</Page>
</View>
)

12
apps/documenteditor/mobile/src/view/add/AddTable.jsx
View file

@ -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 (
<div className={'table-styles dataview'}>
<div className="preload"></div>
<ul className="row">
{styles.map((style, index) => {
return (
@ -19,6 +28,7 @@ const AddTable = props => {
)
})}
</ul>
{onReadyStyles()}
</div>
)
};

55
apps/documenteditor/mobile/src/view/edit/EditTable.jsx
View file

@ -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 (
<div className="dataview table-styles">
<ul className="row">
@ -192,6 +198,7 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
)
})}
</ul>
{storeTableSettings.isRenderStyles && onReadyStyles()}
</div>
)
}));
@ -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 (
<Page>
<Navbar title={_t.textOptions} backLink={_t.textBack}>
<Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={openIndicator}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
@ -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 (
<Page>
<Navbar backLink={_t.textBack}>
@ -495,12 +529,14 @@ const PageStyle = props => {
<Tab key={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
<List>
<ListItem>
<StyleTemplates templates={templates} onStyleClick={props.onStyleClick}/>
<div className="preload"></div>
<StyleTemplates onReadyStyles={onReadyStyles} onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
</ListItem>
</List>
<List>
<ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{
onCheckTemplateChange: props.onCheckTemplateChange
onCheckTemplateChange: props.onCheckTemplateChange,
onGetTableStylesPreviews: props.onGetTableStylesPreviews,
}}/>
</List>
</Tab>
@ -560,6 +596,7 @@ const EditTable = props => {
<ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
onStyleClick: props.onStyleClick,
onCheckTemplateChange: props.onCheckTemplateChange,
onGetTableStylesPreviews: props.onGetTableStylesPreviews,
onFillColor: props.onFillColor,
onBorderTypeClick: props.onBorderTypeClick
}}></ListItem>

14
apps/presentationeditor/mobile/src/controller/add/AddOther.jsx
View file

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

9
apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx
View file

@ -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));
export default inject("storeFocusObjects", "storeTableSettings")(observer(EditTableController));

9
apps/presentationeditor/mobile/src/less/app.less
View file

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

29
apps/presentationeditor/mobile/src/store/tableSettings.js
View file

@ -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) {

13
apps/presentationeditor/mobile/src/view/add/AddOther.jsx
View file

@ -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 (
<Page id={'add-table'}>
<Navbar title={_t.textTable} backLink={_t.textBack}/>
<div className="preload"></div>
<div className={'table-styles dataview'}>
<ul className="row">
{styles.map((style, index) => {
@ -24,6 +30,7 @@ const PageTable = props => {
)
})}
</ul>
{onReadyStyles()}
</div>
</Page>
)
@ -36,7 +43,7 @@ const AddOther = props => {
const hideAddComment = props.hideAddComment();
return (
<List>
<ListItem title={_t.textTable} link={'/add-table/'} routeProps={{
<ListItem title={_t.textTable} link={'/add-table/'} onClick = {() => props.onGetTableStylesPreviews()} routeProps={{
onStyleClick: props.onStyleClick,
initStyleTable: props.initStyleTable
}}>

54
apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
View file

@ -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
)
})}
</ul>
{storeTableSettings.isRenderStyles && onReadyStyles()}
</div>
)
}));
@ -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 (
<Page>
<Navbar title={_t.textOptions} backLink={_t.textBack}>
<Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={openIndicator}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
@ -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 (
<Page>
<Navbar backLink={_t.textBack}>
@ -336,12 +369,14 @@ const PageStyle = props => {
<Tab key={"pe-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
<List>
<ListItem>
<StyleTemplates templates={templates} onStyleClick={props.onStyleClick}/>
<div className="preload"></div>
<StyleTemplates onReadyStyles={onReadyStyles} onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
</ListItem>
</List>
<List>
<ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{
onCheckTemplateChange: props.onCheckTemplateChange
onCheckTemplateChange: props.onCheckTemplateChange,
onGetTableStylesPreviews: props.onGetTableStylesPreviews,
}}/>
</List>
</Tab>
@ -495,6 +530,7 @@ const EditTable = props => {
<ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
onStyleClick: props.onStyleClick,
onCheckTemplateChange: props.onCheckTemplateChange,
onGetTableStylesPreviews: props.onGetTableStylesPreviews,
onFillColor: props.onFillColor,
onBorderTypeClick: props.onBorderTypeClick
}}></ListItem>