Improve navigation sub-menu and tabs effects (#2971)

[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 c5fd3ccb9e3818c46272bcc345315931ca65cf79..be5d41f3bf1038a8a97ed4c94b4d54ab5f14dc59 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
@@ -1,7 +1,12 @@
+<h1>
+  <my-global-icon iconName="download" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>My ownership changes</ng-container>
+</h1>
+
 <p-table
     [value]="videoChangeOwnerships"
     [lazy]="true"
-    [paginator]="true"
+    [paginator]="totalRecords > 0"
     [totalRecords]="totalRecords"
     [rows]="rowsPerPage"
     [sortField]="sort.field"
@@ -10,31 +15,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="Go to the account"
-           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="Go to the video" 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'">
@@ -44,6 +71,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>