Automatic colspan for tables

2023-05-26 10:27:02 +02:00 · 2023-05-26 10:27:02 +02:00 · 4b70c278a9
parent a4c49a17ea
commit 4b70c278a9
20 changed files with 50 additions and 30 deletions
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@ -72,7 +72,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container>
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@ -79,7 +79,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>Your instance is not following anyone.</ng-container>
--- 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
@ -57,7 +57,7 @@

  <ng-template pTemplate="rowexpansion" let-redundancy>
    <tr *ngIf="redundancy.redundancies.files.length !== 0">
-      <td class="expand-cell" [attr.colspan]="getColspan()">
+      <td class="expand-cell" myAutoColspan>
        <div *ngFor="let file of redundancy.redundancies.files" class="expansion-block">
          <my-video-redundancy-information [redundancyElement]="file"></my-video-redundancy-information>
        </div>
@ -65,7 +65,7 @@
    </tr>

    <tr *ngIf="redundancy.redundancies.streamingPlaylists.length !== 0">
-      <td class="expand-cell" [attr.colspan]="getColspan()">
+      <td class="expand-cell" myAutoColspan>
        <div *ngFor="let playlist of redundancy.redundancies.streamingPlaylists">
          <my-video-redundancy-information [redundancyElement]="playlist"></my-video-redundancy-information>
        </div>
@ -75,7 +75,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container *ngIf="isDisplayingRemoteVideos()" i18n>Your instance doesn't mirror any video.</ng-container>
          <ng-container *ngIf="!isDisplayingRemoteVideos()" i18n>Your instance has no mirrored videos.</ng-container>
--- 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
@ -63,12 +63,6 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
        })
  }

-  getColspan () {
-    if (this.isDisplayingRemoteVideos()) return 5
-
-    return 4
-  }
-
  isDisplayingRemoteVideos () {
    return this.displayType === 'remote-videos'
  }
--- a/client/src/app/+admin/moderation/registration-list/registration-list.component.html
+++ b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
@ -102,7 +102,7 @@

  <ng-template pTemplate="rowexpansion" let-registration>
    <tr>
-      <td colspan="9">
+      <td myAutoColspan>
        <div class="moderation-expanded">
          <div class="left">
            <div class="d-flex">
@ -122,7 +122,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="9">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No registrations found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>No registrations found.</ng-container>
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@ -68,7 +68,7 @@

  <ng-template pTemplate="rowexpansion" let-videoBlock>
    <tr>
-      <td class="expand-cell" colspan="6">
+      <td class="expand-cell" myAutoColspan>
        <div class="d-flex moderation-expanded">

          <div class="left">
@ -87,7 +87,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No blocked video found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>No blocked video found.</ng-container>
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.html
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.html
@ -93,7 +93,7 @@

  <ng-template pTemplate="rowexpansion" let-videoComment>
    <tr>
-      <td class="expand-cell" colspan="5">
+      <td class="expand-cell" myAutoColspan>
        <div [innerHTML]="videoComment.textHtml"></div>
      </td>
    </tr>
@ -101,7 +101,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="7">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No comments found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>No comments found.</ng-container>
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@ -146,7 +146,7 @@

  <ng-template pTemplate="rowexpansion" let-user>
    <tr class="user-blocked-reason">
-      <td colspan="7">
+      <td myAutoColspan>
        <span i18n class="ban-reason-label">Ban reason:</span>
        {{ user.blockedReason }}
      </td>
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@ -100,7 +100,7 @@

  <ng-template pTemplate="rowexpansion" let-video>
    <tr>
-      <td class="video-info expand-cell" colspan="7">
+      <td class="video-info expand-cell" myAutoColspan>
        <div>
          <div *ngIf="isWebTorrent(video)">
            WebTorrent:
--- a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
@ -87,7 +87,7 @@

  <ng-template pTemplate="rowexpansion" let-runnerJob>
    <tr>
-      <td colspan="9">
+      <td myAutoColspan>
        <div class="mt-2 fs-7 font-monospace">
          Parent job: {{ runnerJob.parent?.uuid || '-' }} <br />
          Processed on {{ (runnerJob.startedAt || '-') }} <br />
@ -111,7 +111,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="9">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container i18n>No runner jobs found.</ng-container>
        </div>
--- a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
@ -51,7 +51,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container i18n>No remote runners found.</ng-container>
        </div>
--- a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
@ -55,7 +55,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="4">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container i18n>No registration token found for remote runners.</ng-container>
        </div>
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@ -67,7 +67,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container i18n>No ownership change request found.</ng-container>
        </div>
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@ -72,7 +72,7 @@

  <ng-template pTemplate="rowexpansion" let-videoImport>
    <tr class="video-import-error" *ngIf="videoImport.error">
-      <td colspan="6">
+      <td myAutoColspan>
        <pre>{{ videoImport.error }}</pre>
      </td>
    </tr>
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@ -136,10 +136,10 @@

  <ng-template pTemplate="rowexpansion" let-abuse>
      <tr>
-        <td *ngIf="isAdminView()" class="expand-cell" colspan="8">
+        <td *ngIf="isAdminView()" class="expand-cell" myAutoColspan>
          <my-abuse-details [abuse]="abuse" [isAdminView]="true"></my-abuse-details>
        </td>
-        <td *ngIf="!isAdminView()" class="expand-cell" colspan="6">
+        <td *ngIf="!isAdminView()" class="expand-cell" myAutoColspan>
          <my-abuse-details [abuse]="abuse" [isAdminView]="false"></my-abuse-details>
        </td>
      </tr>
@ -147,7 +147,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No abuses found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>No abuses found.</ng-container>
--- a/client/src/app/shared/shared-main/angular/auto-colspan.directive.ts
+++ b/client/src/app/shared/shared-main/angular/auto-colspan.directive.ts
@ -0,0 +1,22 @@
+import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core'
+
+@Directive({
+  selector: '[myAutoColspan]'
+})
+export class AutoColspanDirective implements AfterViewInit {
+
+  constructor (
+    private host: ElementRef,
+    private renderer: Renderer2
+  ) { }
+
+  ngAfterViewInit () {
+    const el = this.host.nativeElement as HTMLElement
+    const table = el.closest('table')
+    if (!table) throw new Error('table element not found')
+
+    const th = table.querySelectorAll('th')
+
+    this.renderer.setAttribute(el, 'colspan', th.length + '')
+  }
+}
--- a/client/src/app/shared/shared-main/angular/index.ts
+++ b/client/src/app/shared/shared-main/angular/index.ts
@ -1,3 +1,4 @@
+export * from './auto-colspan.directive'
 export * from './autofocus.directive'
 export * from './bytes.pipe'
 export * from './defer-loading.directive'
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@ -18,6 +18,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { AccountService, SignupLabelComponent } from './account'
 import {
+  AutoColspanDirective,
  AutofocusDirective,
  BytesPipe,
  DeferLoadingDirective,
@ -89,6 +90,7 @@ import { VideoChannelService } from './video-channel'
    DurationFormatterPipe,
    AutofocusDirective,
    DeferLoadingDirective,
+    AutoColspanDirective,

    InfiniteScrollerDirective,
    PeerTubeTemplateDirective,
@ -150,6 +152,7 @@ import { VideoChannelService } from './video-channel'
    DurationFormatterPipe,
    AutofocusDirective,
    DeferLoadingDirective,
+    AutoColspanDirective,

    InfiniteScrollerDirective,
    PeerTubeTemplateDirective,
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@ -49,7 +49,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="3">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>No account found.</ng-container>
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@ -51,7 +51,7 @@

  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="3">
+      <td myAutoColspan>
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>No server found.</ng-container>