Migrate to bootstrap 5

[github/Chocobozzz/PeerTube.git] / client / src / app / +my-account / my-account-notifications / my-account-notifications.component.html

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 daf721f033fccb32d658025dc15382725079c06a..b98cd115631b8a43a855aaa2a5e95b5e14b507b4 100644 (file)
--- 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,15 +1,30 @@
+<h1 class="visually-hidden" i18n>Notifications</h1>
 <div class="header">
   <a routerLink="/my-account/settings" fragment="notifications" i18n>
-    <my-global-icon iconName="cog"></my-global-icon>
+    <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
     Notification preferences
   </a>
 
-  <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>
+  <div class="peertube-select-container peertube-select-button ms-2 me-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>
 
-    <my-global-icon *ngIf="!getUnreadNotifications()" iconName="circle-tick"></my-global-icon>
-    <span i18n *ngIf="!getUnreadNotifications()">All read</span>
+  <button class="btn ms-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>