Merge pull request #1247 from ONLYOFFICE/feature/fix-settings-sliders
[DE PE] Fix Bug 49364
This commit is contained in:
commit
9febde7603
|
@ -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));
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
@ -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 ?
|
||||||
return (
|
Array.from({ length: 70 }).map((item,index) => (
|
||||||
<li key={index}
|
<li className='skeleton-list' key={index}>
|
||||||
onClick={() => {props.onStyleClick(style.templateId)}}>
|
<SkeletonBlock width='70px' height='8px' effect='wave'/>
|
||||||
<img src={style.imageUrl}/>
|
<SkeletonBlock width='70px' height='8px' effect='wave' />
|
||||||
</li>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -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,24 +173,39 @@ 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 ?
|
||||||
return (
|
Array.from({ length: 27 }).map((item,index) => (
|
||||||
<li key={index}
|
<li className='skeleton-list' key={index}>
|
||||||
className={style.templateId === stateId ? 'active' : ''}
|
<SkeletonBlock width='70px' height='8px' effect='wave'/>
|
||||||
onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
|
<SkeletonBlock width='70px' height='8px' effect='wave' />
|
||||||
<img src={style.imageUrl}/>
|
<SkeletonBlock width='70px' height='8px' effect='wave' />
|
||||||
</li>
|
<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>
|
</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>
|
||||||
|
|
|
@ -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};
|
|
@ -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));
|
|
@ -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;
|
||||||
|
}
|
|
@ -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) {
|
||||||
|
|
|
@ -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 ?
|
||||||
return (
|
Array.from({ length: 70 }).map((item,index) => (
|
||||||
<li key={index}
|
<li className='skeleton-list' key={index}>
|
||||||
onClick={() => {props.onStyleClick(style.templateId)}}>
|
<SkeletonBlock width='70px' height='8px' effect='wave'/>
|
||||||
<img src={style.imageUrl}/>
|
<SkeletonBlock width='70px' height='8px' effect='wave' />
|
||||||
</li>
|
<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>
|
</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
|
||||||
}}>
|
}}>
|
||||||
|
|
|
@ -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,16 +25,27 @@ 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 ?
|
||||||
return (
|
Array.from({ length: 34 }).map((item,index) => (
|
||||||
<li key={index}
|
<li className='skeleton-list' key={index}>
|
||||||
className={style.templateId === stateId ? 'active' : ''}
|
<SkeletonBlock width='70px' height='8px' effect='wave'/>
|
||||||
onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
|
<SkeletonBlock width='70px' height='8px' effect='wave' />
|
||||||
<img src={style.imageUrl}/>
|
<SkeletonBlock width='70px' height='8px' effect='wave' />
|
||||||
</li>
|
<SkeletonBlock width='70px' height='8px' effect='wave' />
|
||||||
)
|
<SkeletonBlock width='70px' height='8px' effect='wave' />
|
||||||
})}
|
</li>
|
||||||
</ul>
|
)) :
|
||||||
|
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>
|
</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>
|
||||||
|
|
Loading…
Reference in a new issue