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.onRemoveColumn = this.onRemoveColumn.bind(this);
this.onRemoveRow = this.onRemoveRow.bind(this); this.onRemoveRow = this.onRemoveRow.bind(this);
this.onWrapMoveText = this.onWrapMoveText.bind(this); this.onWrapMoveText = this.onWrapMoveText.bind(this);
this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
} }
closeIfNeed () { closeIfNeed () {
if (!this.props.storeFocusObjects.isTableInStack) { if (!this.props.storeFocusObjects.isTableInStack) {
@ -184,6 +185,11 @@ class EditTableController extends Component {
api.tblApply(properties); api.tblApply(properties);
} }
onGetTableStylesPreviews() {
const api = Common.EditorApi.get();
setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews()), 1);
}
onFillColor (color) { onFillColor (color) {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const properties = new Asc.CTableProp(); const properties = new Asc.CTableProp();
@ -228,9 +234,10 @@ class EditTableController extends Component {
onCheckTemplateChange={this.onCheckTemplateChange} onCheckTemplateChange={this.onCheckTemplateChange}
onFillColor={this.onFillColor} onFillColor={this.onFillColor}
onBorderTypeClick={this.onBorderTypeClick} 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; 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 { export class storeTableSettings {
constructor() { constructor() {
makeObservable(this, { makeObservable(this, {
_templates: observable,
cellBorders: observable, cellBorders: observable,
cellBorderWidth: observable, cellBorderWidth: observable,
cellBorderColor: observable, cellBorderColor: observable,
arrayStyles: observable,
initTableTemplates: action, initTableTemplates: action,
styles: computed, setStyles: action,
updateCellBorderWidth: action, updateCellBorderWidth: action,
updateCellBorderColor: action, updateCellBorderColor: action,
}); });
} }
_templates = []; arrayStyles = [];
initTableTemplates (templates) { initTableTemplates () {
this._templates = templates; this.arrayStyles = [];
} }
get styles () { setStyles (arrStyles) {
let styles = []; let styles = [];
for (let template of this._templates) { for (let template of arrStyles) {
styles.push({ styles.push({
imageUrl : template.asc_getImage(), imageUrl : template.asc_getImage(),
templateId : template.asc_getId() templateId : template.asc_getId()
}); });
} }
return styles; return this.arrayStyles = styles;
} }
getTableLook (tableObject) { getTableLook (tableObject) {
return tableObject.get_TableLook() 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 ( return (
<Tabs animated> <Tabs animated>
{tabs.map((item, index) => {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} {item.component}
</Tab> </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 } = useTranslation();
const _t = t('Add', {returnObjects: true}); const _t = t('Add', {returnObjects: true});
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
@ -179,11 +179,16 @@ const AddTabs = inject("storeFocusObjects")(observer(({storeFocusObjects, showPa
component: <AddLinkController noNavbar={true}/> component: <AddLinkController noNavbar={true}/>
}); });
} }
const onGetTableStylesPreviews = () => {
const api = Common.EditorApi.get();
setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 1);
}
return ( return (
<View style={style} stackPages={true} routes={routes}> <View style={style} stackPages={true} routes={routes}>
<Page pageContent={false}> <Page pageContent={false}>
<AddLayoutNavbar tabs={tabs} inPopover={inPopover}/> <AddLayoutNavbar tabs={tabs} inPopover={inPopover}/>
<AddLayoutContent tabs={tabs} /> <AddLayoutContent tabs={tabs} onGetTableStylesPreviews={onGetTableStylesPreviews}/>
</Page> </Page>
</View> </View>
) )

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

@ -1,23 +1,35 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-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 { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
const AddTable = props => { const AddTable = props => {
const storeTableSettings = props.storeTableSettings; const storeTableSettings = props.storeTableSettings;
const styles = storeTableSettings.styles; const styles = storeTableSettings.arrayStyles;
return ( return (
<div className={'table-styles dataview'}> <div className={'table-styles dataview'}>
<ul className="row"> <ul className="row">
{styles.map((style, index) => { {!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 ( return (
<li key={index} <li key={index}
onClick={() => {props.onStyleClick(style.templateId)}}> onClick={() => {props.onStyleClick(style.templateId)}}>
<img src={style.imageUrl}/> <img src={style.imageUrl}/>
</li> </li>
) )
})} })
}
</ul> </ul>
</div> </div>
) )

38
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 {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 { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
@ -173,16 +173,30 @@ const PageWrap = props => {
// Style // 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 tableObject = storeFocusObjects.tableObject;
const styleId = tableObject && tableObject.get_TableStyle(); const styleId = tableObject && tableObject.get_TableStyle();
const [stateId, setId] = useState(styleId); const [stateId, setId] = useState(styleId);
const styles = storeTableSettings.styles; const styles = storeTableSettings.arrayStyles;
useEffect(() => {
if(!styles.length) onGetTableStylesPreviews();
}, []);
return ( return (
<div className="dataview table-styles"> <div className="dataview table-styles">
<ul className="row"> <ul className="row">
{styles.map((style, index) => { { !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 ( return (
<li key={index} <li key={index}
className={style.templateId === stateId ? 'active' : ''} className={style.templateId === stateId ? 'active' : ''}
@ -190,7 +204,8 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
<img src={style.imageUrl}/> <img src={style.imageUrl}/>
</li> </li>
) )
})} })
}
</ul> </ul>
</div> </div>
) )
@ -210,9 +225,12 @@ const PageStyleOptions = props => {
isLastCol = tableLook.get_LastCol(); isLastCol = tableLook.get_LastCol();
isBandVer = tableLook.get_BandVer(); isBandVer = tableLook.get_BandVer();
} }
const openIndicator = () => props.onGetTableStylesPreviews();
return ( return (
<Page> <Page>
<Navbar title={_t.textOptions} backLink={_t.textBack}> <Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={openIndicator}>
{Device.phone && {Device.phone &&
<NavRight> <NavRight>
<Link sheetClose='#edit-sheet'> <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}> <Tab key={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
<List> <List>
<ListItem> <ListItem>
<StyleTemplates templates={templates} onStyleClick={props.onStyleClick}/> <StyleTemplates onGetTableStylesPreviews={props.onGetTableStylesPreviews} templates={templates} onStyleClick={props.onStyleClick}/>
</ListItem> </ListItem>
</List> </List>
<List> <List>
<ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{ <ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{
onCheckTemplateChange: props.onCheckTemplateChange onCheckTemplateChange: props.onCheckTemplateChange,
onGetTableStylesPreviews: props.onGetTableStylesPreviews,
}}/> }}/>
</List> </List>
</Tab> </Tab>
@ -560,6 +579,7 @@ const EditTable = props => {
<ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{ <ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
onStyleClick: props.onStyleClick, onStyleClick: props.onStyleClick,
onCheckTemplateChange: props.onCheckTemplateChange, onCheckTemplateChange: props.onCheckTemplateChange,
onGetTableStylesPreviews: props.onGetTableStylesPreviews,
onFillColor: props.onFillColor, onFillColor: props.onFillColor,
onBorderTypeClick: props.onBorderTypeClick onBorderTypeClick: props.onBorderTypeClick
}}></ListItem> }}></ListItem>

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

@ -1,5 +1,6 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import { f7 } from 'framework7-react'; import { f7 } from 'framework7-react';
import {observer, inject} from "mobx-react";
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
import { withTranslation} from 'react-i18next'; import { withTranslation} from 'react-i18next';
@ -10,6 +11,7 @@ class AddOtherController extends Component {
super(props); super(props);
this.onStyleClick = this.onStyleClick.bind(this); this.onStyleClick = this.onStyleClick.bind(this);
this.initStyleTable = this.initStyleTable.bind(this); this.initStyleTable = this.initStyleTable.bind(this);
this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
this.initTable = false; this.initTable = false;
} }
@ -90,6 +92,11 @@ class AddOtherController extends Component {
}).open(); }).open();
} }
onGetTableStylesPreviews = () => {
const api = Common.EditorApi.get();
setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 1);
}
hideAddComment () { hideAddComment () {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const stack = api.getSelectedElements(); const stack = api.getSelectedElements();
@ -122,11 +129,12 @@ class AddOtherController extends Component {
onStyleClick={this.onStyleClick} onStyleClick={this.onStyleClick}
initStyleTable={this.initStyleTable} initStyleTable={this.initStyleTable}
hideAddComment={this.hideAddComment} hideAddComment={this.hideAddComment}
onGetTableStylesPreviews = {this.onGetTableStylesPreviews}
/> />
) )
} }
} }
const AddOtherWithTranslation = withTranslation()(AddOtherController); const AddOtherWithTranslation = inject("storeTableSettings")(withTranslation()(AddOtherController));
export {AddOtherWithTranslation as 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.onAddRowBelow = this.onAddRowBelow.bind(this);
this.onRemoveColumn = this.onRemoveColumn.bind(this); this.onRemoveColumn = this.onRemoveColumn.bind(this);
this.onRemoveRow = this.onRemoveRow.bind(this); this.onRemoveRow = this.onRemoveRow.bind(this);
this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
} }
closeIfNeed () { 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 () { render () {
return ( return (
<EditTable onRemoveTable={this.onRemoveTable} <EditTable onRemoveTable={this.onRemoveTable}
@ -213,9 +219,10 @@ class EditTableController extends Component {
onBorderTypeClick={this.onBorderTypeClick} onBorderTypeClick={this.onBorderTypeClick}
onReorder={this.onReorder} onReorder={this.onReorder}
onAlign={this.onAlign} 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{ .swiper-pagination-bullet-active{
background: @black; 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 { export class storeTableSettings {
constructor() { constructor() {
makeObservable(this, { makeObservable(this, {
_templates: observable,
cellBorders: observable, cellBorders: observable,
cellBorderWidth: observable, cellBorderWidth: observable,
cellBorderColor: observable, cellBorderColor: observable,
arrayStyles: observable,
initTableTemplates: action, initTableTemplates: action,
styles: computed, setStyles: action,
updateCellBorderWidth: action, updateCellBorderWidth: action,
updateCellBorderColor: action, updateCellBorderColor: action,
}); });
} }
_templates = []; arrayStyles = [];
initTableTemplates (templates) { initTableTemplates () {
this._templates = templates; this.arrayStyles = [];
} }
get styles () { setStyles (arrStyles) {
let styles = []; let styles = [];
for (let template of this._templates) { for (let template of arrStyles) {
styles.push({ styles.push({
imageUrl : template.asc_getImage(), imageUrl : template.asc_getImage(),
templateId : template.asc_getId() templateId : template.asc_getId()
}); });
} }
return styles; return this.arrayStyles = styles;
} }
getTableLook (tableObject) { getTableLook (tableObject) {

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

@ -1,6 +1,6 @@
import React, {useState} from 'react'; import React, {useState} from 'react';
import {observer, inject} from "mobx-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 { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device"; import {Device} from "../../../../../common/mobile/utils/device";
@ -9,20 +9,32 @@ const PageTable = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const storeTableSettings = props.storeTableSettings; const storeTableSettings = props.storeTableSettings;
const styles = storeTableSettings.styles; const styles = storeTableSettings.arrayStyles;
return ( return (
<Page id={'add-table'}> <Page id={'add-table'}>
<Navbar title={_t.textTable} backLink={_t.textBack}/> <Navbar title={_t.textTable} backLink={_t.textBack}/>
<div className={'table-styles dataview'}> <div className={'table-styles dataview'}>
<ul className="row"> <ul className="row">
{styles.map((style, index) => { {!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 ( return (
<li key={index} <li key={index}
onClick={() => {props.onStyleClick(style.templateId)}}> onClick={() => {props.onStyleClick(style.templateId)}}>
<img src={style.imageUrl}/> <img src={style.imageUrl}/>
</li> </li>
) )
})} })
}
</ul> </ul>
</div> </div>
</Page> </Page>
@ -36,7 +48,7 @@ const AddOther = props => {
const hideAddComment = props.hideAddComment(); const hideAddComment = props.hideAddComment();
return ( return (
<List> <List>
<ListItem title={_t.textTable} link={'/add-table/'} routeProps={{ <ListItem title={_t.textTable} link={'/add-table/'} onClick = {() => props.onGetTableStylesPreviews()} routeProps={{
onStyleClick: props.onStyleClick, onStyleClick: props.onStyleClick,
initStyleTable: props.initStyleTable initStyleTable: props.initStyleTable
}}> }}>

37
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 {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 { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
// Style // 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 tableObject = storeFocusObjects.tableObject;
const styleId = tableObject ? tableObject.get_TableStyle() : null; const styleId = tableObject ? tableObject.get_TableStyle() : null;
const [stateId, setId] = useState(styleId); const [stateId, setId] = useState(styleId);
const styles = storeTableSettings.styles; const styles = storeTableSettings.arrayStyles;
useEffect(() => {
if(!styles.length) onGetTableStylesPreviews();
}, []);
if (!tableObject && Device.phone) { if (!tableObject && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -21,7 +25,17 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
return ( return (
<div className="dataview table-styles"> <div className="dataview table-styles">
<ul className="row"> <ul className="row">
{styles.map((style, index) => { { !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 ( return (
<li key={index} <li key={index}
className={style.templateId === stateId ? 'active' : ''} className={style.templateId === stateId ? 'active' : ''}
@ -29,7 +43,8 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
<img src={style.imageUrl}/> <img src={style.imageUrl}/>
</li> </li>
) )
})} })
}
</ul> </ul>
</div> </div>
) )
@ -51,9 +66,11 @@ const PageStyleOptions = props => {
isBandVer = tableLook.get_BandVer(); isBandVer = tableLook.get_BandVer();
} }
const openIndicator = () => props.onGetTableStylesPreviews();
return ( return (
<Page> <Page>
<Navbar title={_t.textOptions} backLink={_t.textBack}> <Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={openIndicator}>
{Device.phone && {Device.phone &&
<NavRight> <NavRight>
<Link sheetClose='#edit-sheet'> <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}> <Tab key={"pe-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
<List> <List>
<ListItem> <ListItem>
<StyleTemplates templates={templates} onStyleClick={props.onStyleClick}/> <StyleTemplates onGetTableStylesPreviews={props.onGetTableStylesPreviews} templates={templates} onStyleClick={props.onStyleClick}/>
</ListItem> </ListItem>
</List> </List>
<List> <List>
<ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{ <ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{
onCheckTemplateChange: props.onCheckTemplateChange onCheckTemplateChange: props.onCheckTemplateChange,
onGetTableStylesPreviews: props.onGetTableStylesPreviews,
}}/> }}/>
</List> </List>
</Tab> </Tab>
@ -495,6 +513,7 @@ const EditTable = props => {
<ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{ <ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
onStyleClick: props.onStyleClick, onStyleClick: props.onStyleClick,
onCheckTemplateChange: props.onCheckTemplateChange, onCheckTemplateChange: props.onCheckTemplateChange,
onGetTableStylesPreviews: props.onGetTableStylesPreviews,
onFillColor: props.onFillColor, onFillColor: props.onFillColor,
onBorderTypeClick: props.onBorderTypeClick onBorderTypeClick: props.onBorderTypeClick
}}></ListItem> }}></ListItem>