Improve admin tables row expand

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
index 80c66ec60368cfa969dc7294e024ca7de39e460e..18d88c20c28dd3af9965439f84457d9f812119fb 100644 (file)
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@@ -1,6 +1,4 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Video redundancies list</div>
-
   <div class="select-filter-block">
     <label for="displayType" i18n>Display</label>
 
@@ -19,6 +17,7 @@
 >
   <ng-template pTemplate="header">
     <tr>
+      <th style="width: 40px"></th>
       <th i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th>
       <th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th>
       <th i18n>Video URL</th>
@@ -27,8 +26,15 @@
     </tr>
   </ng-template>
 
-  <ng-template pTemplate="body" let-redundancy>
-    <tr class="expander" [pRowToggler]="redundancy">
+  <ng-template pTemplate="body" let-expanded="expanded" let-redundancy>
+    <tr>
+
+      <td class="expand-cell">
+        <span class="expander" i18n-ngbTooltip ngbTooltip="List redundancies" [pRowToggler]="redundancy">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+
       <td *ngIf="isDisplayingRemoteVideos()">{{ getRedundancyStrategy(redundancy) }}</td>
 
       <td>{{ redundancy.name }}</td>
@@ -46,16 +52,16 @@
   </ng-template>
 
   <ng-template pTemplate="rowexpansion" let-redundancy>
-    <tr>
-      <td colspan="2">
+    <tr *ngIf="redundancy.redundancies.files.length !== 0">
+      <td [attr.colspan]="getColspan()">
         <div *ngFor="let file of redundancy.redundancies.files" class="expansion-block">
           <my-video-redundancy-information [redundancyElement]="file"></my-video-redundancy-information>
         </div>
       </td>
     </tr>
 
-    <tr>
-      <td colspan="2">
+    <tr *ngIf="redundancy.redundancies.streamingPlaylists.length !== 0">
+      <td [attr.colspan]="getColspan()">
         <div *ngFor="let playlist of redundancy.redundancies.streamingPlaylists">
           <my-video-redundancy-information [redundancyElement]="playlist"></my-video-redundancy-information>
         </div>

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
index 05018c281fefa3f9ffebb0fb49cf4255f54a78f4..e1085cd1ba798c8f57cb95f2d6619d037c7d16ec 100644 (file)
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
@@ -6,7 +6,7 @@
 }
 
 .admin-sub-header {
-  align-items: flex-end;
+  justify-content: flex-end;
 
   .select-filter-block {
     &:not(:last-child) {

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index 2edee99a3a3ee2d5d4520910bf30e0a202b19e65..d563b4e950dedda6f99188127fc0ae24327a525c 100644 (file)
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -65,6 +65,12 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
         })
   }
 
+  getColspan () {
+    if (this.isDisplayingRemoteVideos()) return 3
+
+    return 2
+  }
+
   isDisplayingRemoteVideos () {
     return this.displayType === 'remote-videos'
   }

diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index 30eb2dbde82e0bb3ea5428ed3d4277e273eef231..b25412c99d1f0df22b6f816daa878c3472158db6 100644 (file)
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -15,8 +15,9 @@
 
   <ng-template pTemplate="body" let-expanded="expanded" let-videoAbuse>
     <tr>
+
       <td class="expand-cell">
-        <span class="expander" [pRowToggler]="videoAbuse">
+        <span class="expander" i18n-ngbTooltip ngbTooltip="More information" [pRowToggler]="videoAbuse">
           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
         </span>
       </td>

diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index a0b89acc6134f9abf6600c095d15cf3fa6a90d50..4f9a6c18c495db05786ba8e390f1e9591e6c836f 100644 (file)
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -15,8 +15,9 @@
 
   <ng-template pTemplate="body" let-videoBlacklist let-expanded="expanded">
     <tr>
+
       <td class="expand-cell">
-        <span *ngIf="videoBlacklist.reason" class="expander" [pRowToggler]="videoBlacklist">
+        <span *ngIf="videoBlacklist.reason" class="expander" i18n-ngbTooltip ngbTooltip="More information" [pRowToggler]="videoBlacklist">
           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
         </span>
       </td>

diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html
index b0f68eadd0c7d36fcef293dc10132ba0e7cf94d8..3dd4e8a2a12e330f62e6d7cf30f819d079287ea2 100644 (file)
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@@ -1,6 +1,4 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Jobs list</div>
-
   <div class="select-filter-block">
     <label for="jobType" i18n>Job type</label>
     <div class="peertube-select-container">
@@ -27,6 +25,7 @@
 >
   <ng-template pTemplate="header">
     <tr>
+      <th style="width: 40px"></th>
       <th class="job-id" i18n>ID</th>
       <th class="job-type" i18n>Type</th>
       <th class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
@@ -35,7 +34,13 @@
   </ng-template>
 
   <ng-template pTemplate="body" let-expanded="expanded" let-job>
-    <tr class="expander" [pRowToggler]="job">
+    <tr>
+      <td class="expand-cell">
+        <span class="expander" [pRowToggler]="job" i18n-ngbTooltip ngbTooltip="More information">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+
       <td class="job-id" [title]="job.id">{{ job.id }}</td>
       <td class="job-type">{{ job.type }}</td>
       <td class="job-date">{{ job.createdAt }}</td>

diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 4cb706d2dcffc10cf3b07e264c83b738f67929fe..4a3de92740666fa0ed2fd34d0d40dbbcb96be171 100644 (file)
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -18,7 +18,7 @@
 }
 
 .admin-sub-header {
-  align-items: flex-end;
+  justify-content: flex-end;
 
   .select-filter-block {
     &:not(:last-child) {

diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
index 329948cb5514f8099e11c4303727a7b5d7702be6..9226643381c4246b2600b3f199edecd2e02bab26 100644 (file)
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
@@ -15,8 +15,8 @@
 
   <ng-template pTemplate="body" let-expanded="expanded" let-videoImport>
     <tr>
-      <td>
-        <span *ngIf="videoImport.error" class="expander" [pRowToggler]="videoImport">
+      <td class="expand-cell">
+        <span *ngIf="videoImport.error" class="expander" [pRowToggler]="videoImport" i18n-ngbTooltip ngbTooltip="See the error">
           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
         </span>
       </td>