From e58825cca8fd1cf61d274973e73e3808a86c7037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <dgarcia@initios.com>
Date: Mon, 26 Nov 2018 11:17:53 +0100
Subject: [PATCH] Show message when events list is empty

---
 app/locales/taiga/locale-en.json              |  1 +
 .../notifications-list.jade                   | 59 ++++++++++---------
 app/modules/notifications/notifications.scss  |  5 ++
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/app/locales/taiga/locale-en.json b/app/locales/taiga/locale-en.json
index 638941cf..ad30643d 100644
--- a/app/locales/taiga/locale-en.json
+++ b/app/locales/taiga/locale-en.json
@@ -1705,6 +1705,7 @@
         "DISMISS_ALL": "Dismiss all",
         "VIEW_ALL": "View all",
         "NO_NEW_EVENTS": "No new events",
+        "NO_EVENTS_YET": "There are no events yet",
         "ASSIGNED_YOU": "{{username}} assigned you to {{obj_name}}",
         "ADDED_YOU_AS_WATCHER": "{{username}} added you as watcher on {{obj_name}}",
         "ADDED_YOU_AS_MEMBER": "{{username}} added you as member",
diff --git a/app/modules/notifications/notifications-list/notifications-list.jade b/app/modules/notifications/notifications-list/notifications-list.jade
index 47b61d61..046e4e0b 100644
--- a/app/modules/notifications/notifications-list/notifications-list.jade
+++ b/app/modules/notifications/notifications-list/notifications-list.jade
@@ -5,36 +5,39 @@ section.notifications-list
                 src="/#{v}/svg/spinner-circle.svg"
                 alt="Loading..."
             )
-    div(
-        ng-if="!vm.loading"
-        infinite-scroll="vm.loadNotifications()"
-        infinite-scroll-disabled="vm.scrollDisabled"
-        ng-attr-infinite-scroll-container="vm.infiniteScrollContainer"
-        ng-attr-infinite-scroll-distance="vm.infiniteScrollDistance"
-    )
-        .entry(
-            tg-repeat="notification in vm.notificationsList"
-            ng-class="{'new': !notification.get('read')}"
+    div(ng-if="!vm.loading" )
+        .empty(ng-if="!vm.notificationsList.length")
+            span {{ 'EVENTS.NO_EVENTS_YET' | translate }}
+        div(
+            ng-if="vm.notificationsList.length"
+            infinite-scroll="vm.loadNotifications()"
+            infinite-scroll-disabled="vm.scrollDisabled"
+            ng-attr-infinite-scroll-container="vm.infiniteScrollContainer"
+            ng-attr-infinite-scroll-distance="vm.infiniteScrollDistance"
         )
-            .entry-avatar
-                // profile image with url
-                .profile-picture(ng-if="notification.getIn(['data', 'user', 'is_profile_visible'])")
-                    a(tg-nav="user-profile:username=notification.getIn(['data', 'user', 'username'])", title="{{::notification.getIn(['data', 'user', 'name']) }}")
+            .entry(
+                tg-repeat="notification in vm.notificationsList"
+                ng-class="{'new': !notification.get('read')}"
+            )
+                .entry-avatar
+                    // profile image with url
+                    .profile-picture(ng-if="notification.getIn(['data', 'user', 'is_profile_visible'])")
+                        a(tg-nav="user-profile:username=notification.getIn(['data', 'user', 'username'])", title="{{::notification.getIn(['data', 'user', 'name']) }}")
+                            img(
+                                tg-avatar="notification.getIn(['data', 'user'])"
+                                alt="{{::notification.getIn(['data', 'user', 'name'])}}"
+                            )
+                    // profile image without url
+                    .profile-picture(ng-if="!notification.getIn(['data', 'user', 'is_profile_visible'])")
                         img(
                             tg-avatar="notification.getIn(['data', 'user'])"
                             alt="{{::notification.getIn(['data', 'user', 'name'])}}"
                         )
-                // profile image without url
-                .profile-picture(ng-if="!notification.getIn(['data', 'user', 'is_profile_visible'])")
-                    img(
-                        tg-avatar="notification.getIn(['data', 'user'])"
-                        alt="{{::notification.getIn(['data', 'user', 'name'])}}"
-                    )
-            .entry-content
-                p(tg-compile-html="notification.get('title_html')")
-                p
-                  a.entry-project(
-                    href=""
-                    ng-click="vm.setAsRead(notification, notification.get('projectUrl'))"
-                  ) {{::notification.getIn(['data', 'project', 'name'])}}
-            .entry-date {{::notification.get('created') | momentFromNow}}
\ No newline at end of file
+                .entry-content
+                    p(tg-compile-html="notification.get('title_html')")
+                    p
+                      a.entry-project(
+                        href=""
+                        ng-click="vm.setAsRead(notification, notification.get('projectUrl'))"
+                      ) {{::notification.getIn(['data', 'project', 'name'])}}
+                .entry-date {{::notification.get('created') | momentFromNow}}
\ No newline at end of file
diff --git a/app/modules/notifications/notifications.scss b/app/modules/notifications/notifications.scss
index 097fb93a..9a730018 100644
--- a/app/modules/notifications/notifications.scss
+++ b/app/modules/notifications/notifications.scss
@@ -30,6 +30,11 @@
             color: $primary-light;
         }
     }
+    .empty {
+        margin: 4rem auto;
+        text-align: center;
+        width: 100%;
+    }
     .notifications-list .entry {
         align-items: center;
         font-size: .95rem;