Add no-notifications indicator when list empty

5 years ago · 19a3524ab5
parent 0f372b2ed5
commit 19a3524ab5
2 changed files with 14 additions and 3 deletions
--- a/www/notifications/app-notifications.less
+++ b/www/notifications/app-notifications.less
@ -77,8 +77,17 @@
                justify-content: flex-start;
                align-items: center;
                background-color: #ffffff;
-                &:not(:last-child) {
-                    border-bottom: 1px solid #ccc;
+                &.no-notifications {
+                    display: none;
+                    padding: 1rem 1rem;
+                    font-style: italic;
+                    color: #777;
+                    &:only-child {
+                        display: block;
+                    }
+                }
+                &:not(:first-child) {
+                    border-top: 1px solid #ccc;
                }

                .cp-notification-content {
--- a/www/notifications/inner.js
+++ b/www/notifications/inner.js
@ -65,7 +65,9 @@ define([
                    dismissAll = h("div.cp-app-notifications-dismissall.cp-clickable", { title: Messages.dismissAll || "Dismiss All" }, h("span.fa.fa-trash")),
                ]),
            ]),
-            notifsList = h("div.cp-app-notifications-panel-list"),
+            notifsList = h("div.cp-app-notifications-panel-list", [
+                h("div.cp-notification.no-notifications", Messages.notifications_empty),
+            ]),
        ]);
        $div.append(notifsPanel);