From 10475dea7d2343c13014134b33bc75f7c59ac992 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Thu, 19 Dec 2019 14:51:35 +0100
Subject: improve notification popup interactivity: read all, layout, position

fixes #1730
---
 .../my-account-notifications.component.html                      | 9 ++++++---
 .../my-account-notifications.component.ts                        | 4 ++++
 2 files changed, 10 insertions(+), 3 deletions(-)

(limited to 'client/src/app/+my-account')

diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index d518b22ec..daf721f03 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -4,9 +4,12 @@
     Notification preferences
   </a>
 
-  <button (click)="markAllAsRead()" i18n>
-    <my-global-icon iconName="circle-tick"></my-global-icon>
-    Mark all as read
+  <button class="btn" [disabled]="!getUnreadNotifications()" (click)="markAllAsRead()">
+    <my-global-icon *ngIf="getUnreadNotifications()" iconName="inbox-full"></my-global-icon>
+    <span i18n *ngIf="getUnreadNotifications()">Mark all as read</span>
+
+    <my-global-icon *ngIf="!getUnreadNotifications()" iconName="circle-tick"></my-global-icon>
+    <span i18n *ngIf="!getUnreadNotifications()">All read</span>
   </button>
 </div>
 
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
index 9eca13d0f..156e7713d 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
@@ -11,4 +11,8 @@ export class MyAccountNotificationsComponent {
   markAllAsRead () {
     this.userNotification.markAllAsRead()
   }
+
+  getUnreadNotifications () {
+    return this.userNotification.notifications.filter(n => n.read === false).length
+  }
 }
-- 
cgit v1.2.3