MOBILE-2737 ux: Make empty box buttons clickable

main
Pau Ferrer Ocaña 2018-11-21 10:58:16 +01:00
parent ac9bd47da0
commit abab22e73b
4 changed files with 8 additions and 2 deletions

View File

@ -86,7 +86,7 @@
<core-empty-box *ngIf="isEmpty && !search.searching" icon="archive" [message]="'addon.mod_data.norecords' | translate"> <core-empty-box *ngIf="isEmpty && !search.searching" icon="archive" [message]="'addon.mod_data.norecords' | translate">
</core-empty-box> </core-empty-box>
<core-empty-box *ngIf="isEmpty && search.searching" icon="archive" [message]="'addon.mod_data.nomatch' | translate"> <core-empty-box *ngIf="isEmpty && search.searching" icon="archive" [message]="'addon.mod_data.nomatch' | translate" class="core-empty-box-clickable">
<a (click)="searchReset()">{{ 'addon.mod_data.resetsettings' | translate}}</a> <a (click)="searchReset()">{{ 'addon.mod_data.resetsettings' | translate}}</a>
</core-empty-box> </core-empty-box>

View File

@ -76,7 +76,7 @@
</ion-card> </ion-card>
</ng-container> </ng-container>
<core-empty-box *ngIf="forum && discussions.length == 0" icon="chatbubbles" [message]="'addon.mod_forum.forumnodiscussionsyet' | translate"> <core-empty-box *ngIf="forum && discussions.length == 0" icon="chatbubbles" [message]="'addon.mod_forum.forumnodiscussionsyet' | translate" class="core-empty-box-clickable">
<div padding *ngIf="forum.cancreatediscussions"> <div padding *ngIf="forum.cancreatediscussions">
<button ion-button block (click)="openNewDiscussion()"> <button ion-button block (click)="openNewDiscussion()">
{{ 'addon.mod_forum.addanewdiscussion' | translate }} {{ 'addon.mod_forum.addanewdiscussion' | translate }}

View File

@ -40,6 +40,10 @@ ion-app.app-root core-empty-box {
} }
} }
&.core-empty-box-clickable .core-empty-box {
z-index: 0;
}
@media (max-width: 350px) { @media (max-width: 350px) {
.core-empty-box { .core-empty-box {
position: relative; position: relative;

View File

@ -17,6 +17,8 @@ import { Component, Input } from '@angular/core';
/** /**
* Component to show an empty box message. It will show an optional icon or image and a text centered on page. * Component to show an empty box message. It will show an optional icon or image and a text centered on page.
* *
* Use class="core-empty-box-clickable" if you want to add some clickable elements to the box.
*
* Usage: * Usage:
* <core-empty-box *ngIf="empty" icon="bell" [message]="'core.emptymessage' | translate"></core-empty-box> * <core-empty-box *ngIf="empty" icon="bell" [message]="'core.emptymessage' | translate"></core-empty-box>
*/ */