X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bmy-account%2Fmy-account-notifications%2Fmy-account-notifications.component.html;h=f0e9f4010ab0fb566146a47d99523f073a87a580;hb=ba8a8367e7fde7915ae6633445bf46ebf4a9fe94;hp=b98a1087e8d752c1699b1d34fd92e9ddb2c4bd6a;hpb=07a982363fcc6f838dd3f5c2039a2affaea3b0b2;p=github%2FChocobozzz%2FPeerTube.git

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 b98a1087e..f0e9f4010 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
@@ -1,7 +1,31 @@
+<h1 class="sr-only" i18n>Notifications</h1>
 <div class="header">
-  <a routerLink="/my-account/settings" fragment="notifications" i18n>Notification preferences</a>
+  <a routerLink="/my-account/settings" fragment="notifications" i18n>
+    <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+    Notification preferences
+  </a>
 
-  <button (click)="markAllAsRead()" i18n>Mark all as read</button>
+  <div class="peertube-select-container peertube-select-button ml-2 mr-2">
+    <select [(ngModel)]="notificationSortType" (ngModelChange)="onChangeSortColumn()" class="form-control">
+      <option value="undefined" disabled>Sort by</option>
+      <option value="createdAt" i18n>Newest first</option>
+      <option value="read" [disabled]="!hasUnreadNotifications()" i18n>Unread first</option>
+    </select>
+  </div>
+
+  <button class="btn ml-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
+    <ng-container *ngIf="hasUnreadNotifications()">
+      <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon>
+
+      <span i18n>Mark all as read</span>
+    </ng-container>
+
+    <ng-container *ngIf="!hasUnreadNotifications()">
+      <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
+
+      <span i18n>All read</span>
+    </ng-container>
+  </button>
 </div>
 
 <my-user-notifications #userNotification></my-user-notifications>