From abab22e73b7f0fa9d90c3f11fe9d80df0d95a2c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 21 Nov 2018 10:58:16 +0100
Subject: [PATCH] MOBILE-2737 ux: Make empty box buttons clickable

---
 src/addon/mod/data/components/index/addon-mod-data-index.html | 2 +-
 .../mod/forum/components/index/addon-mod-forum-index.html     | 2 +-
 src/components/empty-box/empty-box.scss                       | 4 ++++
 src/components/empty-box/empty-box.ts                         | 2 ++
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/addon/mod/data/components/index/addon-mod-data-index.html b/src/addon/mod/data/components/index/addon-mod-data-index.html
index c195f2b41..e44f6bcba 100644
--- a/src/addon/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addon/mod/data/components/index/addon-mod-data-index.html
@@ -86,7 +86,7 @@
     <core-empty-box *ngIf="isEmpty && !search.searching" icon="archive" [message]="'addon.mod_data.norecords' | translate">
     </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>
     </core-empty-box>
 
diff --git a/src/addon/mod/forum/components/index/addon-mod-forum-index.html b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
index f89d71c79..981e01d02 100644
--- a/src/addon/mod/forum/components/index/addon-mod-forum-index.html
+++ b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
@@ -76,7 +76,7 @@
                 </ion-card>
             </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">
                     <button ion-button block (click)="openNewDiscussion()">
                         {{ 'addon.mod_forum.addanewdiscussion' | translate }}
diff --git a/src/components/empty-box/empty-box.scss b/src/components/empty-box/empty-box.scss
index d348eb6d1..4eb024d88 100644
--- a/src/components/empty-box/empty-box.scss
+++ b/src/components/empty-box/empty-box.scss
@@ -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) {
     .core-empty-box {
       position: relative;
diff --git a/src/components/empty-box/empty-box.ts b/src/components/empty-box/empty-box.ts
index 0d9fdd7ec..827cde39a 100644
--- a/src/components/empty-box/empty-box.ts
+++ b/src/components/empty-box/empty-box.ts
@@ -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.
  *
+ * Use class="core-empty-box-clickable" if you want to add some clickable elements to the box.
+ *
  * Usage:
  * <core-empty-box *ngIf="empty" icon="bell" [message]="'core.emptymessage' | translate"></core-empty-box>
  */