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

Merge pull request #1247 from ONLYOFFICE/feature/fix-settings-sliders

Browse source 
[DE PE] Fix Bug 49364
This commit is contained in:
maxkadushkin 2021-10-18 19:02:04 +03:00 committed by GitHub
parent 187c3f350f 89a4d1e6d9
commit 9febde7603
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 194 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@ 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) {
@ -184,6 +185,11 @@ class EditTableController extends Component {
api.tblApply(properties);
}
onGetTableStylesPreviews() {
const api = Common.EditorApi.get();
setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews()), 1);
}
onFillColor (color) {
const api = Common.EditorApi.get();
const properties = new Asc.CTableProp();
@ -228,9 +234,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));

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

@ -112,5 +112,17 @@
background: @black;
}
// Skeleton table
.table-styles .row div:not(:first-child) {
margin: 2px auto 0px;
}
.table-styles li, .table-styles .row div {
padding: 0;
}
.table-styles .row .skeleton-list{
display: block;
width: 70px;
height: 50px;
}

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

@ -4,33 +4,34 @@ import {f7} from 'framework7-react';
export class storeTableSettings {
constructor() {
makeObservable(this, {
_templates: observable,
cellBorders: observable,
cellBorderWidth: observable,
cellBorderColor: observable,
arrayStyles: observable,
initTableTemplates: action,
styles: computed,
setStyles: action,
updateCellBorderWidth: action,
updateCellBorderColor: action,
});
}
_templates = [];
arrayStyles = [];
initTableTemplates (templates) {
this._templates = templates;
initTableTemplates () {
this.arrayStyles = [];
}
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;
return this.arrayStyles = styles;
}
getTableLook (tableObject) {
return tableObject.get_TableLook()
}

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

@ -64,11 +64,11 @@ 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 +76,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 +179,16 @@ const AddTabs = inject("storeFocusObjects")(observer(({storeFocusObjects, showPa
component: <AddLinkController noNavbar={true}/>
});
}
const onGetTableStylesPreviews = () => {
const api = Common.EditorApi.get();
setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 1);
}
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>
)

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

@ -1,23 +1,35 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle,SkeletonBlock, 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;
return (
<div className={'table-styles dataview'}>
<ul className="row">
{styles.map((style, index) => {
return (
<li key={index}
onClick={() => {props.onStyleClick(style.templateId)}}>
<img src={style.imageUrl}/>
</li>
)
})}
{!styles.length ?
Array.from({ length: 70 }).map((item,index) => (
<li className='skeleton-list' key={index}>
<SkeletonBlock width='70px' height='8px' effect='wave'/>
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
</li>
)) :
styles.map((style, index) => {
return (
<li key={index}
onClick={() => {props.onStyleClick(style.templateId)}}>
<img src={style.imageUrl}/>
</li>
)
})
}
</ul>
</div>
)

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

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useState, useEffect} 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 {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle, SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
@ -173,24 +173,39 @@ const PageWrap = props => {
// Style
const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects, onGetTableStylesPreviews}) => {
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(!styles.length) onGetTableStylesPreviews();
}, []);
return (
<div className="dataview table-styles">
<ul className="row">
{styles.map((style, index) => {
return (
<li key={index}
className={style.templateId === stateId ? 'active' : ''}
onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
<img src={style.imageUrl}/>
</li>
)
})}
{ !styles.length ?
Array.from({ length: 27 }).map((item,index) => (
<li className='skeleton-list' key={index}>
<SkeletonBlock width='70px' height='8px' effect='wave'/>
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
</li>
)) :
styles.map((style, index) => {
return (
<li key={index}
className={style.templateId === stateId ? 'active' : ''}
onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
<img src={style.imageUrl}/>
</li>
)
})
}
</ul>
</div>
)
@ -210,9 +225,12 @@ const PageStyleOptions = props => {
isLastCol = tableLook.get_LastCol();
isBandVer = tableLook.get_BandVer();
}
const openIndicator = () => props.onGetTableStylesPreviews();
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'>
@ -495,12 +513,13 @@ 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}/>
<StyleTemplates onGetTableStylesPreviews={props.onGetTableStylesPreviews} templates={templates} 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 +579,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>

10
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,11 @@ class AddOtherController extends Component {
}).open();
}
onGetTableStylesPreviews = () => {
const api = Common.EditorApi.get();
setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 1);
}
hideAddComment () {
const api = Common.EditorApi.get();
const stack = api.getSelectedElements();
@ -122,11 +129,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 () {
@ -197,6 +198,11 @@ class EditTableController extends Component {
}
}
onGetTableStylesPreviews() {
const api = Common.EditorApi.get();
setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews()), 1);
}
render () {
return (
<EditTable onRemoveTable={this.onRemoveTable}
@ -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));

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

@ -99,3 +99,17 @@
.swiper-pagination-bullet-active{
background: @black;
}
// Skeleton table
.table-styles .row div:not(:first-child) {
margin: 2px auto 0px;
}
.table-styles li, .table-styles .row div {
padding: 0;
}
.table-styles .row .skeleton-list{
display: block;
width: 70px;
height: 50px;
}

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

@ -4,32 +4,32 @@ import {f7} from 'framework7-react';
export class storeTableSettings {
constructor() {
makeObservable(this, {
_templates: observable,
cellBorders: observable,
cellBorderWidth: observable,
cellBorderColor: observable,
arrayStyles: observable,
initTableTemplates: action,
styles: computed,
setStyles: action,
updateCellBorderWidth: action,
updateCellBorderColor: action,
});
}
_templates = [];
arrayStyles = [];
initTableTemplates (templates) {
this._templates = templates;
initTableTemplates () {
this.arrayStyles = [];
}
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;
return this.arrayStyles = styles;
}
getTableLook (tableObject) {

34
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 {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, SkeletonBlock, Segmented, Button} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device";
@ -9,20 +9,32 @@ 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;
return (
<Page id={'add-table'}>
<Navbar title={_t.textTable} backLink={_t.textBack}/>
<div className={'table-styles dataview'}>
<ul className="row">
{styles.map((style, index) => {
return (
<li key={index}
onClick={() => {props.onStyleClick(style.templateId)}}>
<img src={style.imageUrl}/>
</li>
)
})}
{!styles.length ?
Array.from({ length: 70 }).map((item,index) => (
<li className='skeleton-list' key={index}>
<SkeletonBlock width='70px' height='8px' effect='wave'/>
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
</li>
)) :
styles.map((style, index) => {
return (
<li key={index}
onClick={() => {props.onStyleClick(style.templateId)}}>
<img src={style.imageUrl}/>
</li>
)
})
}
</ul>
</div>
</Page>
@ -36,7 +48,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
}}>

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

@ -1,17 +1,21 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useState, useEffect} 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 {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle,SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
// Style
const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects,onGetTableStylesPreviews}) => {
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(!styles.length) onGetTableStylesPreviews();
}, []);
if (!tableObject && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -21,16 +25,27 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
return (
<div className="dataview table-styles">
<ul className="row">
{styles.map((style, index) => {
return (
<li key={index}
className={style.templateId === stateId ? 'active' : ''}
onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
<img src={style.imageUrl}/>
</li>
)
})}
</ul>
{ !styles.length ?
Array.from({ length: 34 }).map((item,index) => (
<li className='skeleton-list' key={index}>
<SkeletonBlock width='70px' height='8px' effect='wave'/>
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
<SkeletonBlock width='70px' height='8px' effect='wave' />
</li>
)) :
styles.map((style, index) => {
return (
<li key={index}
className={style.templateId === stateId ? 'active' : ''}
onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
<img src={style.imageUrl}/>
</li>
)
})
}
</ul>
</div>
)
}));
@ -51,9 +66,11 @@ const PageStyleOptions = props => {
isBandVer = tableLook.get_BandVer();
}
const openIndicator = () => props.onGetTableStylesPreviews();
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'>
@ -336,12 +353,13 @@ 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}/>
<StyleTemplates onGetTableStylesPreviews={props.onGetTableStylesPreviews} templates={templates} 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 +513,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>