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

MOBILE-3320 core: Improve inline loading styles

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-05-31 11:13:05 +02:00
parent 7b097320cd
commit 94ec1c9734
17 changed files with 57 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
<h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<ion-item class="ion-text-wrap item-media" *ngFor="let entry of entries" detail="false" button
(click)="gotoCoureListModType(entry)">
<img slot="start" [src]="entry.icon" alt="" role="presentation" class="core-module-icon">

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

@ -36,7 +36,7 @@
</core-context-menu-item>
</core-context-menu>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<div class="safe-padding-horizontal" [hidden]="showFilter || !showSelectorFilter">
<!-- "Time" selector. -->
<core-combobox [label]="'core.show' | translate" [selection]="selectedFilter" (onChange)="selectedChanged($event)">

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

@ -20,7 +20,7 @@
</core-horizontal-scroll-controls>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page margin">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
[message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->

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

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

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

@ -3,7 +3,7 @@
<h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<ng-container *ngIf="mainMenuBlock">
<ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
<ion-label>

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

@ -20,7 +20,7 @@
</core-horizontal-scroll-controls>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page margin">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
[message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->

6
src/addons/block/timeline/components/timeline/addon-block-timeline.html
View File

@ -9,7 +9,7 @@
</core-context-menu-item>
</core-context-menu>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<div class="safe-padding-horizontal">
<core-combobox [selection]="filter" (onChange)="switchFilter($event)">
<ion-select-option class="ion-text-wrap" value="all">
@ -35,12 +35,12 @@
</ion-select-option>
</core-combobox>
</div>
<core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false">
<core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false" class="margin">
<addon-block-timeline-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore"
(loadMore)="loadMoreTimeline()" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
</core-loading>
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'"
[fullscreen]="false" class="safe-area-page">
[fullscreen]="false" class="safe-area-page margin">
<ion-grid class="ion-no-padding">
<ion-row class="ion-no-padding">
<ion-col *ngFor="let course of timelineCourses.courses" class="ion-no-padding" size="12" size-md="6">

2
src/addons/messages/pages/discussion/discussion.html
View File

@ -128,7 +128,7 @@
<!-- Scroll bottom. -->
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="loaded && newMessages > 0">
<ion-fab-button size="small" (click)="scrollToFirstUnreadMessage()" color="light"
[attr.aria-label]="'addon.messages.newmessages' | translate">
[attr.aria-label]="'addon.messages.newmessages' | translate">
<ion-icon name="fas-arrow-down" aria-hidden="true"></ion-icon>
<span class="core-discussion-messages-badge">{{ newMessages }}</span>
</ion-fab-button>

2
src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<core-loading [hideUntil]="loaded" class="margin">
<!-- User and status of the submission. -->
<ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"

2
src/addons/mod/forum/components/post-options-menu/post-options-menu.html
View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<ion-item class="ion-text-wrap" (click)="editPost()" *ngIf="offlinePost || (canEdit && isOnline)">
<ion-icon name="fas-pen" slot="start" aria-hidden="true"></ion-icon>
<ion-label>

6
src/core/components/loading/core-loading.html
View File

@ -1,8 +1,6 @@
<div class="core-loading-container" *ngIf="!hideUntil" role="status" [@coreShowHideAnimation]>
<span class="core-loading-spinner">
<ion-spinner color="primary"></ion-spinner>
<p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
</span>
<ion-spinner color="primary"></ion-spinner>
<p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
</div>
<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="hideUntil" [@coreShowHideAnimation]>
<ng-content *ngIf="hideUntil">

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

@ -4,35 +4,44 @@
--loading-background: var(--ion-background-color);
--loading-spinner: var(--ion-color-primary);
--loading-text-color: var(--ion-text-color);
--loading-inline-margin: 0;
--loading-inline-min-height: 28px;
position: static;
color: var(--loading-text-color);
&.margin {
--loading-inline-margin: 10px;
}
&.core-loading-loaded {
--loading-inline-margin: 0;
--loading-inline-min-height: 0;
}
ion-spinner {
--color: var(--loading-spinner);
color: var(--color);
}
> .core-loading-container {
.core-loading-container {
position: absolute;
@include position(0, 0, 0, 0);
display: table;
display: flex;
height: 100%;
width: 100%;
text-align: center;
clear: both;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 3;
margin: 0;
padding: 10px 0 0 0;
padding: 0;
background-color: var(--loading-background);
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
@include core-transition(all, 200ms);
}
.core-loading-spinner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.core-loading-message {
@include margin(10px, 0, 0, 0);
}
.core-loading-content {
@ -48,21 +57,26 @@
}
&.core-loading-inline {
display: block;
.core-loading-container {
padding-top: 20px;
position: relative;
}
}
&.core-loading-loaded.core-loading-inline {
--loading-background: transparent;
position: relative;
min-height: 102px;
display: block;
min-height: var(--loading-inline-min-height);
margin-top: var(--loading-inline-margin);
margin-bottom: var(--loading-inline-margin);
.core-loading-message {
@include margin(0, 0, 0, 10px);
}
.core-loading-container {
padding-top: 10px;
position: absolute;
flex-direction: row;
}
}
}
:host-context(ion-item) {
&.core-loading-inline {
position: static;
display: block;
}
}

2
src/core/features/block/components/course-blocks/core-block-course-blocks.html
View File

@ -3,7 +3,7 @@
</div>
<div *ngIf="blocks && blocks.length > 0 && !hideBlocks" [class.core-hide-blocks]="hideBottomBlocks" class="core-course-blocks-side">
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false" class="margin">
<ion-list>
<!-- Course expand="block"s. -->
<ng-container *ngFor="let block of blocks">

2
src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html
View File

@ -7,7 +7,7 @@
</h2>
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<ion-item *ngIf="block.contents?.content" class="ion-text-wrap core-block-content">
<ion-label>
<core-format-text [text]="block.contents?.content" contextLevel="block" [contextInstanceId]="block.instanceid"

2
src/core/features/comments/components/comments/core-comments.html
View File

@ -1,4 +1,4 @@
<core-loading *ngIf="!disabled" [hideUntil]="commentsLoaded || !displaySpinner">
<core-loading *ngIf="!disabled" [hideUntil]="commentsLoaded || !displaySpinner" [fullscreen]="false">
<div *ngIf="!countError" (click)="openComments($event)" [class.core-comments-clickable]="!disabled">
{{ 'core.comments.commentscount' | translate : {'$a': commentsCount} }}
</div>

2
src/core/features/courses/pages/my-courses/my-courses.html
View File

@ -12,7 +12,7 @@
<ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button [hidden]="!downloadAllCoursesEnabled || !courses || courses.length < 2 || downloadAllCoursesLoading"
(click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">
(click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">
<ion-icon [name]="downloadAllCoursesIcon" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-spinner [hidden]="!downloadAllCoursesEnabled || !courses || courses.length < 2 ||

2
src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html
View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false" class="margin">
<core-compile-html [text]="content" [javascript]="javascript" [jsData]="jsData" [forceCompile]="forceCompile" #compile>
</core-compile-html>
</core-loading>