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

[DE PE] Replacing loader on skeleton-templates

Browse source
This commit is contained in:
ShimaginAndrey 2021-10-11 16:31:52 +03:00
parent cbad61c6c5
commit 9998c6ed5b
8 changed files with 128 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -97,15 +97,6 @@
}
}
#edit-table-style, #add-table {
.preloader-modal {
background-color: transparent;
.preloader {
--f7-preloader-color: var(--f7-theme-color-shade);
}
}
}
.item-content {
.preview{
color: @gray;
@ -122,5 +113,14 @@
background: @black;
}
// Skeleton table
.table-styles .row div:not(:first-child) {
margin: 6px auto 0px;
}
.table-styles .row .skeleton-list{
display: block;
}

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

@ -185,10 +185,10 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
const onGetTableStylesPreviews = () => {
const api = Common.EditorApi.get();
if(storeTableSettings.isRenderStyles) {
$$('.table-styles').hide();
f7.preloader.showIn('.preload');
setTimeout( () => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 10);
storeTableSettings.resetFlagRender(false);
setTimeout(() => {
storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true));
storeTableSettings.resetFlagRender(false);
},5);
}
}

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

@ -1,7 +1,7 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useEffect, 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 {Page, Navbar, List, ListItem, ListButton, Row, SkeletonBlock, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
@ -9,30 +9,39 @@ const AddTable = props => {
const storeTableSettings = props.storeTableSettings;
const styles = storeTableSettings.arrayStyles;
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
const onReadyStyles = () => {
f7.preloader.hideIn('.preload');
$$('.table-styles').show();
}
useEffect(() => {
if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false);
}, [storeTableSettings.isRenderStyles]);
return (
<Fragment>
<div className="preload"></div>
<div className={'table-styles dataview'}>
<ul className="row">
{styles.map((style, index) => {
<div className={'table-styles dataview'}>
<ul className="row">
{stateLoaderSkeleton ?
Array.from({ length: 31 }).map((item,index) => (
<li className='skeleton-list' key={index}>
<SkeletonBlock width='65px' height='10px' effect='wave'/>
<SkeletonBlock width='65px' height='10px' effect='wave' />
<SkeletonBlock width='65px' height='10px' effect='wave' />
<SkeletonBlock width='65px' height='10px' effect='wave' />
</li>
)) :
styles.map((style, index) => {
return (
<li key={index}
onClick={() => {props.onStyleClick(style.templateId)}}>
<img src={style.imageUrl}/>
</li>
)
})}
</ul>
{onReadyStyles()}
</div>
</Fragment>
)
})
}
</ul>
</div>
)
};
export default inject("storeTableSettings")(observer(AddTable));

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

@ -1,6 +1,6 @@
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 {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,22 +173,39 @@ const PageWrap = props => {
// Style
const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,onReadyStyles, onGetTableStylesPreviews,storeFocusObjects}) => {
const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick, storeTableSettings, onGetTableStylesPreviews,storeFocusObjects}) => {
const tableObject = storeFocusObjects.tableObject;
const styleId = tableObject && tableObject.get_TableStyle();
const [stateId, setId] = useState(styleId);
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
const styles = storeTableSettings.arrayStyles;
useEffect(() => {
if (storeTableSettings.isRenderStyles) {
onGetTableStylesPreviews();
storeTableSettings.resetFlagRender(false);
}
setTimeout(() => storeTableSettings.resetFlagRender(false), 0);
}
}, []);
useEffect(() => {
storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [storeTableSettings.isRenderStyles]);
return (
<div className="dataview table-styles">
<ul className="row">
{styles.map((style, index) => {
{ stateLoaderSkeleton ?
Array.from({ length: 31 }).map((item,index) => (
<li className='skeleton-list' key={index}>
<SkeletonBlock width='65px' height='10px' effect='wave'/>
<SkeletonBlock width='65px' height='10px' effect='wave' />
<SkeletonBlock width='65px' height='10px' effect='wave' />
<SkeletonBlock width='65px' height='10px' effect='wave' />
</li>
)) :
styles.map((style, index) => {
return (
<li key={index}
className={style.templateId === stateId ? 'active' : ''}
@ -196,9 +213,9 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
<img src={style.imageUrl}/>
</li>
)
})}
})
}
</ul>
{storeTableSettings.isRenderStyles && onReadyStyles()}
</div>
)
}));
@ -226,19 +243,13 @@ const PageStyleOptions = props => {
useEffect(() => {
prevStateRef.current = [...nextStateRef.current];
return () => {
if (!(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
props.storeTableSettings.resetFlagRender(true);
}
}
}, []);
const openIndicator = () => {
if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
$$('.table-styles').hide();
f7.preloader.showIn('.preload');
props.onGetTableStylesPreviews();
props.onGetTableStylesPreviews();
}
setTimeout(() => props.storeTableSettings.resetFlagRender(false), 10);
}
return (
@ -503,11 +514,6 @@ const PageStyle = props => {
return null;
}
const onReadyStyles = () => {
f7.preloader.hideIn('.preload');
$$('.table-styles').show();
}
return (
<Page>
<Navbar backLink={_t.textBack}>
@ -529,8 +535,7 @@ const PageStyle = props => {
<Tab key={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
<List>
<ListItem>
<div className="preload"></div>
<StyleTemplates onReadyStyles={onReadyStyles} onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
<StyleTemplates onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
</ListItem>
</List>
<List>

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

@ -94,11 +94,11 @@ class AddOtherController extends Component {
onGetTableStylesPreviews = () => {
const api = Common.EditorApi.get();
if (this.props.storeTableSettings.isRenderStyles) {
$$('.table-styles').hide();
f7.preloader.showIn('.preload');
setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)) , 10);
this.props.storeTableSettings.resetFlagRender(false);
if(this.props.storeTableSettings.isRenderStyles) {
setTimeout(() => {
this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true));
this.props.storeTableSettings.resetFlagRender(false);
},5);
}
}

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

@ -84,15 +84,6 @@
}
}
#edit-table-style, #add-table {
.preloader-modal {
background-color: transparent;
.preloader {
--f7-preloader-color: var(--f7-theme-color-shade);
}
}
}
.item-content {
.preview{
color: @gray;
@ -108,3 +99,12 @@
.swiper-pagination-bullet-active{
background: @black;
}
// Skeleton table
.table-styles .row div:not(:first-child) {
margin: 6px auto 0px;
}
.table-styles .row .skeleton-list{
display: block;
}

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

@ -1,6 +1,6 @@
import React, {useState} from 'react';
import React, {useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react';
import {f7, List, ListItem, Page, Navbar, Icon,SkeletonBlock, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device";
@ -10,28 +10,38 @@ const PageTable = props => {
const _t = t('View.Add', {returnObjects: true});
const storeTableSettings = props.storeTableSettings;
const styles = storeTableSettings.arrayStyles;
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
const onReadyStyles = () => {
f7.preloader.hideIn('.preload');
$$('.table-styles').show();
}
useEffect(() => {
if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false);
}, [storeTableSettings.isRenderStyles]);
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) => {
{stateLoaderSkeleton ?
Array.from({ length: 31 }).map((item,index) => (
<li className='skeleton-list' key={index}>
<SkeletonBlock width='65px' height='10px' effect='wave'/>
<SkeletonBlock width='65px' height='10px' effect='wave' />
<SkeletonBlock width='65px' height='10px' effect='wave' />
<SkeletonBlock width='65px' height='10px' effect='wave' />
</li>
)) :
styles.map((style, index) => {
return (
<li key={index}
onClick={() => {props.onStyleClick(style.templateId)}}>
<img src={style.imageUrl}/>
</li>
)
})}
})
}
</ul>
{onReadyStyles()}
</div>
</Page>
)

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

@ -1,25 +1,34 @@
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 {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, onReadyStyles, onGetTableStylesPreviews, storeTableSettings,storeFocusObjects}) => {
const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick, onGetTableStylesPreviews, storeTableSettings,storeFocusObjects}) => {
const tableObject = storeFocusObjects.tableObject;
const styleId = tableObject ? tableObject.get_TableStyle() : null;
const [stateId, setId] = useState(styleId);
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
const styles = storeTableSettings.arrayStyles;
useEffect(() => {
if (storeTableSettings.isRenderStyles) {
onGetTableStylesPreviews();
storeTableSettings.resetFlagRender(false);
}
setTimeout(() => {
onGetTableStylesPreviews();
storeTableSettings.resetFlagRender(false);
},0);
}
}, []);
useEffect(() => {
storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [storeTableSettings.isRenderStyles]);
if (!tableObject && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
@ -28,7 +37,16 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
return (
<div className="dataview table-styles">
<ul className="row">
{styles.map((style, index) => {
{ stateLoaderSkeleton ?
Array.from({ length: 31 }).map((item,index) => (
<li className='skeleton-list' key={index}>
<SkeletonBlock width='65px' height='10px' effect='wave'/>
<SkeletonBlock width='65px' height='10px' effect='wave' />
<SkeletonBlock width='65px' height='10px' effect='wave' />
<SkeletonBlock width='65px' height='10px' effect='wave' />
</li>
)) :
styles.map((style, index) => {
return (
<li key={index}
className={style.templateId === stateId ? 'active' : ''}
@ -38,7 +56,6 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
)
})}
</ul>
{storeTableSettings.isRenderStyles && onReadyStyles()}
</div>
)
}));
@ -65,20 +82,13 @@ const PageStyleOptions = props => {
useEffect(() => {
prevStateRef.current = [...nextStateRef.current];
return () => {
if (!(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
props.storeTableSettings.resetFlagRender(true);
}
}
}, []);
const openIndicator = () => {
if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
$$('.table-styles').hide();
f7.preloader.showIn('.preload');
props.onGetTableStylesPreviews();
setTimeout (() => props.onGetTableStylesPreviews(),0);
}
setTimeout(() => props.storeTableSettings.resetFlagRender(false), 0);
}
return (
@ -343,11 +353,6 @@ const PageStyle = props => {
const _t = t('View.Edit', {returnObjects: true});
const isAndroid = Device.android;
const onReadyStyles = () => {
f7.preloader.hideIn('.preload');
$$('.table-styles').show();
}
return (
<Page>
<Navbar backLink={_t.textBack}>
@ -370,7 +375,7 @@ const PageStyle = props => {
<List>
<ListItem>
<div className="preload"></div>
<StyleTemplates onReadyStyles={onReadyStyles} onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
<StyleTemplates onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
</ListItem>
</List>
<List>