GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-3320 core: Improvements on loading component

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-06-04 12:44:48 +02:00
parent 64dd36a5e2
commit 224a7baa7d
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
View File

@ -5,7 +5,7 @@
</core-horizontal-scroll-controls> </core-horizontal-scroll-controls>
</div> </div>
</ion-item-divider> </ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page margin"> <core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
<div <div
[id]="scrollElementId" [id]="scrollElementId"
[hidden]="!items || items.length === 0" [hidden]="!items || items.length === 0"

3
src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
View File

@ -8,4 +8,7 @@
.core-course-module-handler { .core-course-module-handler {
--inner-border-width: 0; --inner-border-width: 0;
} }
core-loading {
--loading-inline-min-height: 102px;
}
} }

22
src/core/components/loading/loading.scss
View File

@ -2,21 +2,24 @@
:host { :host {
--loading-background: var(--ion-background-color); --loading-background: var(--ion-background-color);
--loading-background-inline: var(--ion-background-color-rgb);
--loading-spinner: var(--ion-color-primary); --loading-spinner: var(--ion-color-primary);
--loading-text-color: var(--ion-text-color); --loading-text-color: var(--ion-text-color);
--loading-inline-margin: 0; --loading-inline-margin: 0;
--loading-inline-min-height: 28px; --loading-inline-min-height: 28px;
--internal-loading-inline-min-height: var(--loading-inline-min-height);
position: static; position: static;
color: var(--loading-text-color); color: var(--loading-text-color);
@include core-transition(all, 200ms);
&.margin { &.margin {
--loading-inline-margin: 10px; --loading-inline-margin: 10px;
--internal-loading-inline-min-height: calc(var(--loading-inline-min-height) + var(--loading-inline-margin) + var(--loading-inline-margin));
} }
&.core-loading-loaded { &.core-loading-loaded {
--loading-inline-margin: 0; --internal-loading-inline-min-height: 0;
--loading-inline-min-height: 0;
} }
ion-spinner { ion-spinner {
@ -27,17 +30,17 @@
.core-loading-container { .core-loading-container {
position: absolute; position: absolute;
@include position(0, 0, 0, 0); @include position(0, 0, 0, 0);
display: flex;
height: 100%; height: 100%;
width: 100%; width: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 3; z-index: 3;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: var(--loading-background); background-color: var(--loading-background);
@include core-transition(all, 200ms); @include core-transition(all, 200ms);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
} }
.core-loading-message { .core-loading-message {
@ -54,15 +57,14 @@
&.core-loading-loaded { &.core-loading-loaded {
position: unset; position: unset;
display: contents;
} }
&.core-loading-inline { &.core-loading-inline {
--loading-background: transparent; --loading-background: rgba(var(--loading-background-inline), 0.5);
position: relative; position: relative;
display: block; display: block;
min-height: var(--loading-inline-min-height); min-height: var(--internal-loading-inline-min-height);
margin-top: var(--loading-inline-margin);
margin-bottom: var(--loading-inline-margin);
.core-loading-message { .core-loading-message {
@include margin(0, 0, 0, 10px); @include margin(0, 0, 0, 10px);