align ownership change video list table with moderation tables

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

diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
index 14ae497d97c12155001e9e53801a0eb42659a851..090ec7b44568c8eb781872c8a2d6274b1ff9d591 100644 (file)
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
@@ -11,31 +11,53 @@
 >
   <ng-template pTemplate="header">
     <tr>
-      <th i18n>Initiator</th>
-      <th i18n>Video</th>
-      <th i18n pSortableColumn="createdAt">
+      <th style="width: 35%;" i18n>Initiator</th>
+      <th style="width: 65%;" i18n>Video</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">
         Created
         <p-sortIcon field="createdAt"></p-sortIcon>
       </th>
-      <th i18n>Status</th>
-      <th i18n>Action</th>
+      <th style="width: 100px;" i18n>Status</th>
+      <th style="width: 130px;" i18n>Action</th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-videoChangeOwnership>
     <tr>
       <td>
-        <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Account page"
-           target="_blank" rel="noopener noreferrer">
-          {{ createByString(videoChangeOwnership.initiatorAccount) }}
+        <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="chip two-lines">
+            <img
+              class="avatar"
+              [src]="videoChangeOwnership.initiatorAccount.avatar?.path"
+              (error)="switchToDefaultAvatar($event)"
+              alt="Avatar"
+            >
+            <div>
+              {{ videoChangeOwnership.initiatorAccount.displayName }}
+              <span class="text-muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
+            </div>
+          </div>
         </a>
       </td>
+
       <td>
-        <a [href]="videoChangeOwnership.video.url" i18n-title title="Video page" target="_blank" rel="noopener noreferrer">
-          {{ videoChangeOwnership.video.name }}
+        <a [href]="videoChangeOwnership.video.url" class="video-table-video-link" [title]="videoChangeOwnership.video.name" target="_blank" rel="noopener noreferrer">
+          <div class="video-table-video">
+            <div class="video-table-video-image">
+              <img [src]="videoChangeOwnership.video.thumbnailPath">
+            </div>
+            <div class="video-table-video-text">
+              <div>
+                {{ videoChangeOwnership.video.name }}
+              </div>
+              <div class="text-muted">by {{ videoChangeOwnership.video.channel?.displayName }} </div>
+            </div>
+          </div>
         </a>
       </td>
-      <td>{{ videoChangeOwnership.createdAt }}</td>
+
+      <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
       <td i18n>{{ videoChangeOwnership.status }}</td>
       <td class="action-cell">
         <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
@@ -45,6 +67,16 @@
       </td>
     </tr>
   </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="no-results">
+          <ng-container i18n>No ownership change request found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
 </p-table>
 
 <my-account-accept-ownership #myAccountAcceptOwnershipComponent (accepted)="accepted()"></my-account-accept-ownership>