Add tooltip to know we can sort the column

client/src/app/+admin/follows/followers-list/followers-list.component.html

@@ -33,9 +33,9 @@
       </th>
       <th scope="col" style="width: 150px;" i18n>Actions</th>
       <th scope="col" i18n>Follower</th>
-      <th scope="col" style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
-      <th scope="col" style="width: 100px;" i18n pSortableColumn="score">Score <p-sortIcon field="score"></p-sortIcon></th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 100px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th scope="col" style="width: 100px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="score">Score <p-sortIcon field="score"></p-sortIcon></th>
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html

@@ -29,7 +29,7 @@
       </th>
       <th scope="col" style="width: 150px;" i18n>Action</th>
       <th scope="col" style="width: 160px;" i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th>
-      <th scope="col" i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th >
+      <th scope="col" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th >
       <th scope="col" style="width: 100px;" i18n *ngIf="isDisplayingRemoteVideos()">Total size</th>
     </tr>
   </ng-template>

client/src/app/+admin/moderation/registration-list/registration-list.component.html

@@ -41,9 +41,9 @@
       <th scope="col" i18n>Email</th>
       <th scope="col" i18n>Channel</th>
       <th scope="col" i18n>Registration reason</th>
-      <th scope="col" i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th scope="col" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
       <th scope="col" i18n>Moderation response</th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">Requested on <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Requested on <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/+admin/moderation/video-block-list/video-block-list.component.html

@@ -26,10 +26,10 @@
       <th scope="col" style="width: 150px;">
         <span i18n class="visually-hidden">Actions</span>
       </th>
-      <th scope="col" i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
+      <th scope="col" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
       <th scope="col" style="width: 100px;" i18n>Sensitive</th>
       <th scope="col" style="width: 120px;" i18n>Unfederated</th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/+admin/overview/comments/video-comment-list.component.html

@@ -46,7 +46,7 @@
       <th scope="col" style="width: 300px;" i18n>Account</th>
       <th scope="col" style="width: 300px;" i18n>Video</th>
       <th scope="col" i18n>Comment</th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/+admin/overview/users/user-list/user-list.component.html

@@ -63,14 +63,14 @@
           </div>
         </div>
       </th>
-      <th scope="col" *ngIf="isSelected('username')" pResizableColumn  pSortableColumn="username">{{ getColumn('username').label }} <p-sortIcon field="username"></p-sortIcon></th>
-      <th scope="col" *ngIf="isSelected('role')" style="width: 120px;"  pSortableColumn="role">{{ getColumn('role').label }} <p-sortIcon field="role"></p-sortIcon></th>
+      <th scope="col" *ngIf="isSelected('username')" pResizableColumn [ngbTooltip]="sortTooltip" container="body" pSortableColumn="username">{{ getColumn('username').label }} <p-sortIcon field="username"></p-sortIcon></th>
+      <th scope="col" *ngIf="isSelected('role')" style="width: 120px;" [ngbTooltip]="sortTooltip" container="body" pSortableColumn="role">{{ getColumn('role').label }} <p-sortIcon field="role"></p-sortIcon></th>
       <th scope="col" *ngIf="isSelected('email')">{{ getColumn('email').label }}</th>
-      <th scope="col" *ngIf="isSelected('quota')" style="width: 160px;"  pSortableColumn="videoQuotaUsed">{{ getColumn('quota').label }} <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th>
+      <th scope="col" *ngIf="isSelected('quota')" style="width: 160px;" [ngbTooltip]="sortTooltip" container="body" pSortableColumn="videoQuotaUsed">{{ getColumn('quota').label }} <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th>
       <th scope="col" *ngIf="isSelected('quotaDaily')" style="width: 160px;">{{ getColumn('quotaDaily').label }}</th>
       <th scope="col" *ngIf="isSelected('pluginAuth')" style="width: 140px;" pResizableColumn >{{ getColumn('pluginAuth').label }}</th>
-      <th scope="col" *ngIf="isSelected('createdAt')" style="width: 150px;"  pSortableColumn="createdAt">{{ getColumn('createdAt').label }} <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th scope="col" *ngIf="isSelected('lastLoginDate')" style="width: 150px;"  pSortableColumn="lastLoginDate">{{ getColumn('lastLoginDate').label }} <p-sortIcon field="lastLoginDate"></p-sortIcon></th>
+      <th scope="col" *ngIf="isSelected('createdAt')" style="width: 150px;" [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">{{ getColumn('createdAt').label }} <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" *ngIf="isSelected('lastLoginDate')" style="width: 150px;" [ngbTooltip]="sortTooltip" container="body" pSortableColumn="lastLoginDate">{{ getColumn('lastLoginDate').label }} <p-sortIcon field="lastLoginDate"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/+admin/overview/videos/video-list.component.html

@@ -43,7 +43,7 @@
       <th scope="col" i18n>Video</th>
       <th scope="col" i18n>Info</th>
       <th scope="col" i18n>Files</th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="publishedAt">Published <p-sortIcon field="publishedAt"></p-sortIcon></th>
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="publishedAt">Published <p-sortIcon field="publishedAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/+admin/system/jobs/jobs.component.html

@@ -47,7 +47,7 @@
       <th scope="col" style="width: 200px" class="job-priority" i18n>Priority <small>(1 = highest priority)</small></th>
       <th scope="col" style="width: 200px" class="job-state" i18n *ngIf="jobState === 'all'">State</th>
       <th scope="col" style="width: 100px" class="job-progress" i18n *ngIf="hasGlobalProgress()">Progress</th>
-      <th scope="col" style="width: 150px" class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 150px" class="job-date" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html

@@ -30,11 +30,11 @@
       </th>
       <th scope="col" i18n>UUID</th>
       <th scope="col" i18n>Type</th>
-      <th scope="col" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
-      <th scope="col" style="width: 100px" i18n pSortableColumn="priority">Priority <p-sortIcon field="priority"></p-sortIcon></th>
-      <th scope="col" style="width: 100px" i18n pSortableColumn="progress">Progress <p-sortIcon field="progress"></p-sortIcon></th>
+      <th scope="col" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th scope="col" style="width: 100px" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="priority">Priority <p-sortIcon field="priority"></p-sortIcon></th>
+      <th scope="col" style="width: 100px" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="progress">Progress <p-sortIcon field="progress"></p-sortIcon></th>
       <th scope="col" i18n>Runner</th>
-      <th scope="col" style="width: 200px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 200px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/+admin/system/runners/runner-list/runner-list.component.html

@@ -25,7 +25,7 @@
       <th scope="col" i18n>Description</th>
       <th scope="col" i18n>IP</th>
       <th scope="col" i18n>Last contact</th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html

@@ -24,7 +24,7 @@
         <span i18n class="visually-hidden">Actions</span>
       </th>
       <th scope="col" i18n>Token</th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th scope="col" style="width: 160px;" i18n>Associated runners</th>
     </tr>
   </ng-template>

client/src/app/+my-library/my-ownership/my-ownership.component.html

@@ -12,7 +12,7 @@
       <th scope="col" style="width: 150px;" i18n>Actions</th>
       <th scope="col" style="width: 35%;" i18n>Initiator</th>
       <th scope="col" style="width: 65%;" i18n>Video</th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">
         Created
         <p-sortIcon field="createdAt"></p-sortIcon>
       </th>

client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html

@@ -32,11 +32,11 @@
       <th scope="col" style="width: 10%;">
         <span i18n class="visually-hidden">Actions</span>
       </th>
-      <th scope="col" style="width: 25%" i18n pSortableColumn="externalChannelUrl">External Channel <p-sortIcon field="externalChannelUrl"></p-sortIcon></th>
-      <th scope="col" style="width: 25%" i18n pSortableColumn="videoChannel">Channel <p-sortIcon field="videoChannel"></p-sortIcon></th>
-      <th scope="col" style="width: 10%" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
-      <th scope="col" style="width: 10%" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th scope="col" style="width: 10%" i18n pSortableColumn="lastSyncAt">Last synchronization at <p-sortIcon field="lastSyncAt"></p-sortIcon></th>
+      <th scope="col" style="width: 25%" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="externalChannelUrl">External Channel <p-sortIcon field="externalChannelUrl"></p-sortIcon></th>
+      <th scope="col" style="width: 25%" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="videoChannel">Channel <p-sortIcon field="videoChannel"></p-sortIcon></th>
+      <th scope="col" style="width: 10%" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th scope="col" style="width: 10%" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 10%" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="lastSyncAt">Last synchronization at <p-sortIcon field="lastSyncAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/+my-library/my-video-imports/my-video-imports.component.html

@@ -29,7 +29,7 @@
       <th scope="col" style="width: 45%" i18n>Target</th>
       <th scope="col" style="width: 55%" i18n>Video</th>
       <th scope="col" style="width: 150px" i18n>State</th>
-      <th scope="col" style="width: 150px" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 150px" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/core/rest/rest-table.ts

@@ -22,6 +22,8 @@ export abstract class RestTable <T = unknown> {
 
   search: string
 
+  sortTooltip = $localize`Sort by this column`
+
   protected route: ActivatedRoute
   protected router: Router
 

client/src/app/shared/shared-abuse-list/abuse-list-table.component.html

@@ -22,8 +22,8 @@
       </th>
       <th scope="col" *ngIf="isAdminView()" style="width: 20%;" pResizableColumn i18n>Reporter</th>
       <th scope="col" i18n>Video/Comment/Account</th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th scope="col" i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
       <th scope="col" i18n style="width: 80px;">Messages</th>
       <th scope="col" i18n *ngIf="isAdminView()" style="width: 100px;">Internal note</th>
     </tr>

client/src/app/shared/shared-moderation/account-blocklist.component.html

@@ -21,7 +21,7 @@
     <tr>
       <th scope="col" style="width: 150px;" i18n>Action</th> <!-- column for action buttons -->
       <th scope="col" i18n>Account</th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 

client/src/app/shared/shared-moderation/server-blocklist.component.html

@@ -29,7 +29,7 @@
     <tr>
       <th scope="col" style="width: 150px;" i18n>Action</th> <!-- column for action buttons -->
       <th scope="col" i18n>Instance</th>
-      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th scope="col" style="width: 150px;" i18n [ngbTooltip]="sortTooltip" container="body" pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>