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 { .item-content {
.preview{ .preview{
color: @gray; color: @gray;
@ -122,5 +113,14 @@
background: @black; 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 onGetTableStylesPreviews = () => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if(storeTableSettings.isRenderStyles) { if(storeTableSettings.isRenderStyles) {
$$('.table-styles').hide(); setTimeout(() => {
f7.preloader.showIn('.preload'); storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true));
setTimeout( () => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 10); storeTableSettings.resetFlagRender(false);
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 {observer, inject} from "mobx-react";
import { f7 } from 'framework7-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 { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
@ -9,30 +9,39 @@ const AddTable = props => {
const storeTableSettings = props.storeTableSettings; const storeTableSettings = props.storeTableSettings;
const styles = storeTableSettings.arrayStyles; const styles = storeTableSettings.arrayStyles;
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
const onReadyStyles = () => { useEffect(() => {
f7.preloader.hideIn('.preload');
$$('.table-styles').show(); if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false);
}
}, [storeTableSettings.isRenderStyles]);
return ( return (
<Fragment> <div className={'table-styles dataview'}>
<div className="preload"></div> <ul className="row">
<div className={'table-styles dataview'}> {stateLoaderSkeleton ?
<ul className="row"> Array.from({ length: 31 }).map((item,index) => (
{styles.map((style, 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 ( 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> }
{onReadyStyles()} </ul>
</div> </div>
</Fragment>
) )
}; };
export default inject("storeTableSettings")(observer(AddTable)); 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 React, {Fragment, useEffect, useRef, useState} 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,22 +173,39 @@ const PageWrap = props => {
// Style // 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 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 [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
const styles = storeTableSettings.arrayStyles; const styles = storeTableSettings.arrayStyles;
useEffect(() => { useEffect(() => {
if (storeTableSettings.isRenderStyles) { if (storeTableSettings.isRenderStyles) {
onGetTableStylesPreviews(); onGetTableStylesPreviews();
storeTableSettings.resetFlagRender(false); setTimeout(() => storeTableSettings.resetFlagRender(false), 0);
} }
}, []); }, []);
useEffect(() => {
storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [storeTableSettings.isRenderStyles]);
return ( return (
<div className="dataview table-styles"> <div className="dataview table-styles">
<ul className="row"> <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 ( return (
<li key={index} <li key={index}
className={style.templateId === stateId ? 'active' : ''} className={style.templateId === stateId ? 'active' : ''}
@ -196,9 +213,9 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
<img src={style.imageUrl}/> <img src={style.imageUrl}/>
</li> </li>
) )
})} })
}
</ul> </ul>
{storeTableSettings.isRenderStyles && onReadyStyles()}
</div> </div>
) )
})); }));
@ -226,19 +243,13 @@ const PageStyleOptions = props => {
useEffect(() => { useEffect(() => {
prevStateRef.current = [...nextStateRef.current]; prevStateRef.current = [...nextStateRef.current];
return () => {
if (!(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
props.storeTableSettings.resetFlagRender(true);
}
}
}, []); }, []);
const openIndicator = () => { const openIndicator = () => {
if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) { if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
$$('.table-styles').hide(); props.onGetTableStylesPreviews();
f7.preloader.showIn('.preload');
props.onGetTableStylesPreviews();
} }
setTimeout(() => props.storeTableSettings.resetFlagRender(false), 10);
} }
return ( return (
@ -503,11 +514,6 @@ const PageStyle = props => {
return null; return null;
} }
const onReadyStyles = () => {
f7.preloader.hideIn('.preload');
$$('.table-styles').show();
}
return ( return (
<Page> <Page>
<Navbar backLink={_t.textBack}> <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}> <Tab key={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
<List> <List>
<ListItem> <ListItem>
<div className="preload"></div> <StyleTemplates onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
<StyleTemplates onReadyStyles={onReadyStyles} onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
</ListItem> </ListItem>
</List> </List>
<List> <List>

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

@ -94,11 +94,11 @@ class AddOtherController extends Component {
onGetTableStylesPreviews = () => { onGetTableStylesPreviews = () => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if (this.props.storeTableSettings.isRenderStyles) { if(this.props.storeTableSettings.isRenderStyles) {
$$('.table-styles').hide(); setTimeout(() => {
f7.preloader.showIn('.preload'); this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true));
setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)) , 10); this.props.storeTableSettings.resetFlagRender(false);
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 { .item-content {
.preview{ .preview{
color: @gray; color: @gray;
@ -108,3 +99,12 @@
.swiper-pagination-bullet-active{ .swiper-pagination-bullet-active{
background: @black; 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 {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 { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device"; import {Device} from "../../../../../common/mobile/utils/device";
@ -10,28 +10,38 @@ const PageTable = props => {
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.arrayStyles; const styles = storeTableSettings.arrayStyles;
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
const onReadyStyles = () => { useEffect(() => {
f7.preloader.hideIn('.preload');
$$('.table-styles').show(); if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false);
}
}, [storeTableSettings.isRenderStyles]);
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="preload"></div>
<div className={'table-styles dataview'}> <div className={'table-styles dataview'}>
<ul className="row"> <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 ( 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>
{onReadyStyles()}
</div> </div>
</Page> </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 React, {Fragment, useState, useEffect, useRef} 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, onReadyStyles, onGetTableStylesPreviews, storeTableSettings,storeFocusObjects}) => { const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick, onGetTableStylesPreviews, storeTableSettings,storeFocusObjects}) => {
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 [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
const styles = storeTableSettings.arrayStyles; const styles = storeTableSettings.arrayStyles;
useEffect(() => { useEffect(() => {
if (storeTableSettings.isRenderStyles) { if (storeTableSettings.isRenderStyles) {
onGetTableStylesPreviews(); setTimeout(() => {
storeTableSettings.resetFlagRender(false); onGetTableStylesPreviews();
} storeTableSettings.resetFlagRender(false);
},0);
}
}, []); }, []);
useEffect(() => {
storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [storeTableSettings.isRenderStyles]);
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();
return null; return null;
@ -28,7 +37,16 @@ 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) => { { 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 ( return (
<li key={index} <li key={index}
className={style.templateId === stateId ? 'active' : ''} className={style.templateId === stateId ? 'active' : ''}
@ -38,7 +56,6 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
) )
})} })}
</ul> </ul>
{storeTableSettings.isRenderStyles && onReadyStyles()}
</div> </div>
) )
})); }));
@ -65,20 +82,13 @@ const PageStyleOptions = props => {
useEffect(() => { useEffect(() => {
prevStateRef.current = [...nextStateRef.current]; prevStateRef.current = [...nextStateRef.current];
return () => {
if (!(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
props.storeTableSettings.resetFlagRender(true);
}
}
}, []); }, []);
const openIndicator = () => { const openIndicator = () => {
if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) { if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
$$('.table-styles').hide(); setTimeout (() => props.onGetTableStylesPreviews(),0);
f7.preloader.showIn('.preload');
props.onGetTableStylesPreviews();
} }
setTimeout(() => props.storeTableSettings.resetFlagRender(false), 0);
} }
return ( return (
@ -343,11 +353,6 @@ const PageStyle = props => {
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const isAndroid = Device.android; const isAndroid = Device.android;
const onReadyStyles = () => {
f7.preloader.hideIn('.preload');
$$('.table-styles').show();
}
return ( return (
<Page> <Page>
<Navbar backLink={_t.textBack}> <Navbar backLink={_t.textBack}>
@ -370,7 +375,7 @@ const PageStyle = props => {
<List> <List>
<ListItem> <ListItem>
<div className="preload"></div> <div className="preload"></div>
<StyleTemplates onReadyStyles={onReadyStyles} onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/> <StyleTemplates onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
</ListItem> </ListItem>
</List> </List>
<List> <List>