EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 loading: Improve core-loading layout and animations

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-05-28 16:16:34 +02:00
parent f5c5b0e65e
commit f74b7b204f
39 changed files with 56 additions and 47 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" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<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" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<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" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
<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" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
<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" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<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" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
<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" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<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'" class="core-loading-center">
<core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false">
<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'"
class="core-loading-center safe-area-page">
[fullscreen]="false" class="safe-area-page">
<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/mod/assign/components/index/addon-mod-assign-index.html
View File

@ -28,7 +28,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

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

@ -1,4 +1,4 @@
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<!-- 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/book/components/index/addon-mod-book-index.html
View File

@ -21,7 +21,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/chat/components/index/addon-mod-chat-index.html
View File

@ -24,7 +24,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/choice/components/index/addon-mod-choice-index.html
View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/data/components/index/addon-mod-data-index.html
View File

@ -37,7 +37,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/folder/components/index/addon-mod-folder-index.html
View File

@ -23,7 +23,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/forum/components/index/index.html
View File

@ -41,7 +41,7 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="discussions.loaded" class="core-loading-center">
<core-loading [hideUntil]="discussions.loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
(completionChanged)="onCompletionChange()">

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

@ -1,4 +1,4 @@
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<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>

2
src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
View File

@ -49,7 +49,7 @@
[autoFocus]="true" [lengthCheck]="2" (onClear)="toggleSearch()" searchArea="AddonModGlossary-{{module.id}}">
</core-search-box>
<core-loading [hideUntil]="entries.loaded" class="core-loading-center">
<core-loading [hideUntil]="entries.loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
(completionChanged)="onCompletionChange()">

2
src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
View File

@ -30,7 +30,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<core-tabs [hideUntil]="loaded" [selectedIndex]="selectedTab">
<!-- Index/Preview tab. -->
<core-tab [title]="'addon.mod_lesson.preview' | translate" (ionSelect)="indexSelected()">

2
src/addons/mod/lti/components/index/addon-mod-lti-index.html
View File

@ -17,7 +17,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/page/components/index/addon-mod-page-index.html
View File

@ -23,7 +23,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/resource/components/index/addon-mod-resource-index.html
View File

@ -18,7 +18,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/survey/components/index/addon-mod-survey-index.html
View File

@ -27,7 +27,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/url/components/index/addon-mod-url-index.html
View File

@ -13,7 +13,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
View File

@ -46,7 +46,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/notes/pages/list/list.html
View File

@ -29,7 +29,7 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="notesLoaded" class="core-loading-center">
<core-loading [hideUntil]="notesLoaded">
<ion-item class="ion-text-wrap" *ngIf="user">
<core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label><h2>{{user!.fullname}}</h2></ion-label>

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

@ -6,7 +6,6 @@
--loading-text-color: var(--ion-text-color);
position: static;
@include core-transition(height, 200ms);
color: var(--loading-text-color);
ion-spinner {
@ -48,7 +47,7 @@
position: unset;
}
&.core-loading-center {
&.core-loading-inline {
display: block;
.core-loading-container {
@ -56,4 +55,14 @@
position: relative;
}
}
&.core-loading-loaded.core-loading-inline {
position: relative;
min-height: 102px;
.core-loading-container {
padding-top: 10px;
position: absolute;
}
}
}

12
src/core/components/loading/loading.ts
View File

@ -49,6 +49,8 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
@Input() hideUntil: unknown; // Determine when should the contents be shown.
@Input() message?: string; // Message to show while loading.
@Input() protected fullscreen = true; // Use the whole screen.
@ViewChild('content') content?: ElementRef;
uniqueId: string;
@ -69,6 +71,8 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
// Default loading message.
this.message = Translate.instant('core.loading');
}
this.element.classList.toggle('core-loading-inline', !this.fullscreen);
}
/**
@ -78,11 +82,9 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
// Add class if loaded on init.
if (this.hideUntil) {
this.element.classList.add('core-loading-loaded');
this.content?.nativeElement.classList.add('core-loading-content');
} else {
this.content?.nativeElement.classList.remove('core-loading-content');
this.content?.nativeElement.classList.add('core-loading-content-loading');
}
this.content?.nativeElement.classList.toggle('core-loading-content', !!this.hideUntil);
}
/**
@ -99,12 +101,10 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
// Change CSS to force calculate height.
// Removed 500ms timeout to avoid reallocating html.
this.content?.nativeElement.classList.add('core-loading-content');
this.content?.nativeElement.classList.remove('core-loading-content-loading');
});
} else {
this.element.classList.remove('core-loading-loaded');
this.content?.nativeElement.classList.remove('core-loading-content');
this.content?.nativeElement.classList.add('core-loading-content-loading');
}
// Trigger the event after a timeout since the elements inside ngIf haven't been added to DOM yet.

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" class="core-loading-center">
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
<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" class="core-loading-center">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<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/h5p/components/h5p-iframe/core-h5p-iframe.html
View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="iframeSrc" class="core-loading-center safe-area-page">
<core-loading [hideUntil]="iframeSrc" [fullscreen]="false" class="safe-area-page">
<core-iframe *ngIf="iframeSrc" [src]="iframeSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="iframeLoaded()">
</core-iframe>
<script *ngIf="resizeScript && iframeSrc" type="text/javascript" [src]="resizeScript"></script>

2
src/core/features/sharedfiles/components/list/list.html
View File

@ -6,7 +6,7 @@
<core-site-picker *ngIf="showSitePicker" [hidden]="!filesLoaded" [initialSite]="siteId" (siteSelected)="changeSite($event)">
</core-site-picker>
<core-loading [hideUntil]="filesLoaded" class="core-loading-center">
<core-loading [hideUntil]="filesLoaded" [fullscreen]="false">
<ion-list *ngIf="files && files.length > 0">
<ng-container *ngFor="let file of files; let idx = index">
<core-local-file *ngIf="file.isFile" [file]="file" [manage]="manage" [overrideClick]="pick"

2
src/core/features/sharedfiles/services/handlers/upload.ts
View File

@ -59,7 +59,7 @@ export class CoreSharedFilesUploadHandlerService implements CoreFileUploaderHand
return {
title: 'core.sharedfiles.sharedfiles',
class: 'core-sharedfiles-fileuploader-handler',
icon: 'folder',
icon: 'fas-folder',
action: (
maxSize?: number,
upload?: boolean,

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

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