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

MOBILE-3833 core: Simplify empty box component

main
Pau Ferrer Ocaña 2022-03-23 17:33:20 +01:00
parent a3762ef43a
commit ceae6f980d
13 changed files with 47 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,7 +69,7 @@
</ion-row>
<core-empty-box *ngIf="filteredCourses.length == 0" image="assets/img/icons/courses.svg"
[message]="'addon.block_myoverview.nocourses' | translate" inline="true">
[message]="'addon.block_myoverview.nocourses' | translate">
</core-empty-box>
<!-- List of courses. -->

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

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

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

@ -37,7 +37,7 @@
</div>
</div>
<core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg" inline="true"
<core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg"
[message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>
</core-loading>

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

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

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

@ -79,5 +79,5 @@
<p>{{'addon.block_timeline.noevents' | translate}}</p>
</ion-label>
</ion-item>
<core-empty-box *ngIf="empty && !course" image="assets/img/icons/activities.svg" inline="true"
[message]="'addon.block_timeline.noevents' | translate"></core-empty-box>
<core-empty-box *ngIf="empty && !course" image="assets/img/icons/activities.svg" [message]="'addon.block_timeline.noevents' | translate">
</core-empty-box>

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

@ -66,7 +66,7 @@
<addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMore(course)"
[course]="course" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
</ng-container>
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg"
[message]="'addon.block_timeline.noevents' | translate"></core-empty-box>
</core-loading>
</core-loading>

2
src/addons/calendar/pages/day/day.html
View File

@ -59,7 +59,7 @@
</ion-item>
</ion-card>
<core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar" inline="true"
<core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar"
[message]="'addon.calendar.noevents' | translate">
</core-empty-box>

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

@ -60,7 +60,7 @@
<core-format-text *ngIf="pageContent" [component]="component" [componentId]="componentId" [text]="pageContent"
contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
</core-format-text>
<core-empty-box *ngIf="!pageContent" icon="fas-file-alt" [message]="'addon.mod_wiki.nocontent' | translate" inline="true">
<core-empty-box *ngIf="!pageContent" icon="fas-file-alt" [message]="'addon.mod_wiki.nocontent' | translate">
</core-empty-box>
</article>

12
src/core/components/empty-box/core-empty-box.html
View File

@ -1,8 +1,4 @@
<div class="core-empty-box ion-padding" [class.core-empty-box-inline]="(!image && !icon) || inline">
<div class="core-empty-box-content">
<img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
<ion-icon *ngIf="icon" [name]="icon" aria-hidden="true"></ion-icon>
<p *ngIf="message" [class.ion-padding-top]="image || icon">{{ message }}</p>
<ng-content></ng-content>
</div>
</div>
<img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
<ion-icon *ngIf="icon" [name]="icon" aria-hidden="true"></ion-icon>
<p *ngIf="message">{{ message }}</p>
<ng-content></ng-content>

89
src/core/components/empty-box/empty-box.scss
View File

@ -1,74 +1,35 @@
@import "~theme/globals";
:host {
display: contents;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
color: var(--text-color);
margin: 0 auto;
text-align: center;
padding: 16px;
--image-size: 120px;
.core-empty-box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: table;
height: 100%;
width: 100%;
margin: 0;
clear: both;
pointer-events: none;
.core-empty-box-content {
margin: 0;
display: table-cell;
text-align: center;
vertical-align: middle;
pointer-events: auto;
}
&.core-empty-box-inline {
position: relative;
z-index: initial;
top: initial;
right: initial;
bottom: 0;
left: initial;
height: auto;
}
ion-icon {
font-size: 120px;
}
img {
height: 125px;
width: 145px;
margin: 0 auto;
}
p {
font-size: 120%;
}
ion-icon {
font-size: var(--image-size);
}
img {
height: var(--image-size);
}
p {
font-size: 120%;
}
&.core-empty-box-clickable .core-empty-box {
&.core-empty-box-clickable {
z-index: 0;
}
}
@media (max-height: 550px) {
.core-empty-box {
position: relative;
height: auto;
margin-top: 50px;
ion-icon {
font-size: 100px;
}
img {
height: 104px;
width: 121px;
}
}
}
&.core-empty-inline .core-empty-box {
position: relative;
z-index: initial;
height: auto;
@include media-breakpoint-down(sm) {
:host {
--image-size: 100px;
}
}

11
src/core/components/empty-box/empty-box.ts
View File

@ -32,12 +32,11 @@ export class CoreEmptyBoxComponent {
@Input() message = ''; // Message to display.
@Input() icon?: string; // Name of the icon to use.
@Input() image?: string; // Image source. If an icon is provided, image won't be used.
/**
* If this has to be shown inline instead of occupying whole page.
* If image or icon is not supplied, it's true by default.
*/
@Input() inline = false;
@Input() flipIconRtl = false; // Whether to flip the icon in RTL. Defaults to false.
/**
* @deprecated not used anymore.
*/
@Input() inline = false;
}

3
src/core/components/split-view/split-view.scss
View File

@ -10,7 +10,7 @@
--menu-display: flex;
--content-display: block;
--content-outlet-display: none;
--content-placeholder-display: var(--content-display);
--content-placeholder-display: flex;
top: 0;
right: 0;
@ -70,6 +70,7 @@
--menu-min-width: 0px;
--menu-max-width: 100%;
--content-display: none;
--content-placeholder-display: none;
--menu-border-width: 0px;
--menu-box-shadow: none;
--menu-z: 0px;

3
src/theme/theme.base.scss
View File

@ -1520,7 +1520,8 @@ ion-header.no-title {
}
.has-spacer {
.has-spacer,
.core-flex-fill {
display: flex;
flex-direction: column;
min-height: 100%;