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

Editing skeleton

Browse source
This commit is contained in:
ShimaginAndrey 2021-10-13 12:56:59 +03:00
parent 9998c6ed5b
commit 63667a9c6d
6 changed files with 32 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -116,10 +116,15 @@
// Skeleton table
.table-styles .row div:not(:first-child) {
margin: 6px auto 0px;
margin: 2px auto 0px;
}
.table-styles li, .table-styles .row div {
padding: 0;
}
.table-styles .row .skeleton-list{
display: block;
width: 70px;
height: 50px;
}

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

@ -23,10 +23,11 @@ const AddTable = props => {
{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' />
<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) => {

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

@ -199,10 +199,11 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
{ 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' />
<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) => {

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

@ -103,8 +103,13 @@
// Skeleton table
.table-styles .row div:not(:first-child) {
margin: 6px auto 0px;
margin: 2px auto 0px;
}
.table-styles li, .table-styles .row div {
padding: 0;
}
.table-styles .row .skeleton-list{
display: block;
width: 70px;
height: 50px;
}

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

@ -26,10 +26,11 @@ const PageTable = props => {
{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' />
<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) => {

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

@ -40,10 +40,11 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
{ 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' />
<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) => {