Improving select displays, focus box-shadows for paginators, instructions for index url

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 4ce4c18fc886a4133b3ed30fe6a42a39cd03a7ec..b925d3d0245d59083ab333a5077f0bcdccf567e8 100644 (file)
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -108,6 +108,7 @@
 
                 <div class="peertube-select-container">
                   <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
+                    <option i18n value="undefined" disabled>Policy for sensitive videos</option>
                     <option i18n value="do_not_list">Do not list</option>
                     <option i18n value="blur">Blur thumbnails</option>
                     <option i18n value="display">Display</option>
@@ -319,7 +320,7 @@
                 <label i18n for="userVideoQuota">Default video quota per user</label>
                 <div class="peertube-select-container">
                   <select id="userVideoQuota" formControlName="videoQuota" class="form-control">
-                    <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
+                    <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
                       {{ videoQuotaOption.label }}
                     </option>
                   </select>
@@ -331,7 +332,7 @@
                 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
                 <div class="peertube-select-container">
                   <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
-                    <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
+                    <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
                       {{ videoQuotaDailyOption.label }}
                     </option>
                   </select>
@@ -441,10 +442,14 @@
                   <div class="form-group">
                     <my-peertube-checkbox
                       inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
-                      i18n-labelText labelText="Automatically follow instances of the public index"
+                      i18n-labelText labelText="Automatically follow instances of a public index"
                     >
                       <ng-container ngProjectAs="description">
-                        <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+                        <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
+
+                        <span i18n>
+                          You should only follow indexes you trust, or <a href="https://framagit.org/framasoft/peertube/instances-peertube#peertube-auto-follow">host your own</a>.
+                        </span>
                       </ng-container>
 
                       <ng-container ngProjectAs="extra">
@@ -651,20 +656,16 @@
                 </my-peertube-checkbox>
               </div>
 
-              <div class="form-group">
-
-                <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
-                  <label i18n for="transcodingThreads">Transcoding threads</label>
-                  <div class="peertube-select-container">
-                    <select id="transcodingThreads" formControlName="threads" class="form-control">
-                      <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
-                        {{ transcodingThreadOption.label }}
-                      </option>
-                    </select>
-                  </div>
-                  <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
+              <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                <label i18n for="transcodingThreads">Transcoding threads</label>
+                <div class="peertube-select-container">
+                  <select id="transcodingThreads" formControlName="threads" class="form-control">
+                    <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
+                      {{ transcodingThreadOption.label }}
+                    </option>
+                  </select>
                 </div>
-
+                <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
               </div>
 
               <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">

diff --git a/client/src/app/+admin/config/shared/config.service.ts b/client/src/app/+admin/config/shared/config.service.ts
index 28a3d67d657d1ebb092fd50f204003e840f10872..874b8094dd96ce802c52f90566c8e62257be76e0 100644 (file)
--- a/client/src/app/+admin/config/shared/config.service.ts
+++ b/client/src/app/+admin/config/shared/config.service.ts
@@ -10,8 +10,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 export class ConfigService {
   private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/config'
 
-  videoQuotaOptions: { value: number, label: string }[] = []
-  videoQuotaDailyOptions: { value: number, label: string }[] = []
+  videoQuotaOptions: { value: number, label: string, disabled?: boolean }[] = []
+  videoQuotaDailyOptions: { value: number, label: string, disabled?: boolean }[] = []
 
   constructor (
     private authHttp: HttpClient,
@@ -19,8 +19,10 @@ export class ConfigService {
     private i18n: I18n
   ) {
     this.videoQuotaOptions = [
+      { value: undefined, label: 'Default quota', disabled: true },
       { value: -1, label: this.i18n('Unlimited') },
-      { value: 0, label: '0' },
+      { value: undefined, label: '─────', disabled: true },
+      { value: 0, label: this.i18n('None - no upload possible') },
       { value: 100 * 1024 * 1024, label: this.i18n('100MB') },
       { value: 500 * 1024 * 1024, label: this.i18n('500MB') },
       { value: 1024 * 1024 * 1024, label: this.i18n('1GB') },
@@ -30,8 +32,10 @@ export class ConfigService {
     ]
 
     this.videoQuotaDailyOptions = [
+      { value: undefined, label: 'Default daily upload limit', disabled: true },
       { value: -1, label: this.i18n('Unlimited') },
-      { value: 0, label: '0' },
+      { value: undefined, label: '─────', disabled: true },
+      { value: 0, label: this.i18n('None - no upload possible') },
       { value: 10 * 1024 * 1024, label: this.i18n('10MB') },
       { value: 50 * 1024 * 1024, label: this.i18n('50MB') },
       { value: 100 * 1024 * 1024, label: this.i18n('100MB') },

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 18d88c20c28dd3af9965439f84457d9f812119fb..07362b3b93d4f58a0155652aebe6b00f728ce8fa 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
@@ -3,9 +3,9 @@
     <label for="displayType" i18n>Display</label>
 
     <div class="peertube-select-container">
-      <select id="displayType" name="displayType" [(ngModel)]="displayType" (ngModelChange)="onDisplayTypeChanged()">
-        <option value="my-videos">My videos duplicated by remote instances</option>
-        <option value="remote-videos">Remote videos duplicated by my instance</option>
+      <select id="displayType" name="displayType" [(ngModel)]="displayType" (ngModelChange)="onDisplayTypeChanged()" class="form-control">
+        <option value="my-videos" i18n>My videos duplicated by remote instances</option>
+        <option value="remote-videos" i18n>Remote videos duplicated by my instance</option>
       </select>
     </div>
   </div>
@@ -22,14 +22,14 @@
       <th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th>
       <th i18n>Video URL</th>
       <th i18n *ngIf="isDisplayingRemoteVideos()">Total size</th>
-      <th></th>
+      <th style="width: 80px;"></th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-expanded="expanded" let-redundancy>
     <tr>
 
-      <td class="expand-cell">
+      <td>
         <span class="expander" i18n-ngbTooltip ngbTooltip="List redundancies" [pRowToggler]="redundancy">
           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
         </span>
@@ -53,7 +53,7 @@
 
   <ng-template pTemplate="rowexpansion" let-redundancy>
     <tr *ngIf="redundancy.redundancies.files.length !== 0">
-      <td [attr.colspan]="getColspan()">
+      <td class="expand-cell" [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>
@@ -61,7 +61,7 @@
     </tr>
 
     <tr *ngIf="redundancy.redundancies.streamingPlaylists.length !== 0">
-      <td [attr.colspan]="getColspan()">
+      <td class="expand-cell" [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.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index d563b4e950dedda6f99188127fc0ae24327a525c..2b62d30a389c7bf619c7a5edb5ee716565e5d5aa 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
@@ -66,9 +66,9 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   }
 
   getColspan () {
-    if (this.isDisplayingRemoteVideos()) return 3
+    if (this.isDisplayingRemoteVideos()) return 5
 
-    return 2
+    return 4
   }
 
   isDisplayingRemoteVideos () {

diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
index 7797bc56e708eba12004c9e6006c90b5b5d1d61d..8c39306438870610933d263fbc0df1341a46df16 100644 (file)
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
@@ -1,12 +1,15 @@
 <p-table
   [value]="blockedAccounts" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {first} to {last} of {totalRecords} muted accounts"
 >
 
   <ng-template pTemplate="header">
     <tr>
       <th i18n>Account</th>
       <th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 

diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
index f634ba83406290a28b0433df18bd7c39dc97b065..44c5c2fb81d5124636df36cee270e353533ea837 100644 (file)
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
@@ -1,13 +1,15 @@
 <p-table
   [value]="blockedServers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {first} to {last} of {totalRecords} muted instances"
 >
 
   <ng-template pTemplate="header">
     <tr>
       <th i18n>Instance</th>
       <th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th></th>
+      <th></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 

diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
index 8fbd33871a4636693edc4fa352b483ad4faae76a..8082e93f4d0d3280f1bf7249a4a3fac814d593be 100644 (file)
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
@@ -8,7 +8,9 @@
   <div class="modal-body">
     <form novalidate [formGroup]="form" (ngSubmit)="banUser()">
       <div class="form-group">
-        <textarea formControlName="moderationComment" [ngClass]="{ 'input-error': formErrors['moderationComment'] }">
+        <textarea
+          formControlName="moderationComment" ngbAutofocus i18-placeholder placeholder="Comment this report…"
+          [ngClass]="{ 'input-error': formErrors['moderationComment'] }" class="form-control">
         </textarea>
         <div *ngIf="formErrors.moderationComment" class="form-error">
           {{ formErrors.moderationComment }}

diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
index 29f90194baeb9744fdec1c7bb1372a20a97633bc..a0471f2b062d9d7e9a84fbfd3e43f836d4d2915a 100644 (file)
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
@@ -32,7 +32,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
 
   ngOnInit () {
     this.buildForm({
-      moderationComment: this.videoAbuseValidatorsService.VIDEO_ABUSE_REASON
+      moderationComment: this.videoAbuseValidatorsService.VIDEO_ABUSE_MODERATION_COMMENT
     })
   }
 

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 b25412c99d1f0df22b6f816daa878c3472158db6..cf7b61d2aa86424e15cd3b0ac0757684bebb8541 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
@@ -1,12 +1,14 @@
 <p-table
   [value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {first} to {last} of {totalRecords} reports"
 >
   <ng-template pTemplate="header">
-    <tr>
-      <th style="width: 40px"></th>
+    <tr> <!-- header -->
+      <th style="width: 40px;"></th>
       <th i18n>Reporter</th>
-      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 200px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th i18n>Video</th>
       <th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
       <th style="width: 120px;"></th>
@@ -15,9 +17,8 @@
 
   <ng-template pTemplate="body" let-expanded="expanded" let-videoAbuse>
     <tr>
-
-      <td class="expand-cell">
-        <span class="expander" i18n-ngbTooltip ngbTooltip="More information" [pRowToggler]="videoAbuse">
+      <td class="c-hand" [pRowToggler]="videoAbuse" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
+        <span class="expander">
           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
         </span>
       </td>
@@ -31,7 +32,7 @@
       <td>{{ videoAbuse.createdAt }}</td>
 
       <td>
-        <a [href]="getVideoUrl(videoAbuse)" i18n-title title="Go to the video" target="_blank" rel="noopener noreferrer">
+        <a [href]="getVideoUrl(videoAbuse)" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
           {{ videoAbuse.video.name }}
         </a>
       </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 4f9a6c18c495db05786ba8e390f1e9591e6c836f..a39e7639e1d031165e0b0e26b38b862b6dafe600 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
@@ -1,23 +1,25 @@
 <p-table
   [value]="blacklist" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {first} to {last} of {totalRecords} blacklisted videos"
 >
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 40px"></th>
-      <th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th>
-      <th i18n>Sensitive</th>
-      <th i18n>Unfederated</th>
-      <th i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
+      <th style="width: 120px;" i18n>Sensitive</th>
+      <th style="width: 120px;" i18n>Unfederated</th>
+      <th style="width: 200px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th style="width: 120px;"></th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-videoBlacklist let-expanded="expanded">
     <tr>
-
-      <td class="expand-cell">
-        <span *ngIf="videoBlacklist.reason" class="expander" i18n-ngbTooltip ngbTooltip="More information" [pRowToggler]="videoBlacklist">
+      <td *ngIf="!videoBlacklist.reason"></td>
+      <td *ngIf="videoBlacklist.reason" class="expand-cell c-hand" [pRowToggler]="videoBlacklist" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
+        <span class="expander">
           <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 3dd4e8a2a12e330f62e6d7cf30f819d079287ea2..e9765ca7738d3db188ab6e6ff297b91e98c19bb8 100644 (file)
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@@ -2,7 +2,7 @@
   <div class="select-filter-block">
     <label for="jobType" i18n>Job type</label>
     <div class="peertube-select-container">
-      <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()">
+      <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
         <option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</option>
       </select>
     </div>
@@ -11,7 +11,7 @@
   <div class="select-filter-block">
     <label for="jobState" i18n>Job state</label>
     <div class="peertube-select-container">
-      <select id="jobState" name="jobState" [(ngModel)]="jobState" (ngModelChange)="onJobStateOrTypeChanged()">
+      <select id="jobState" name="jobState" [(ngModel)]="jobState" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
         <option *ngFor="let state of jobStates" [value]="state">{{ state }}</option>
       </select>
     </div>

diff --git a/client/src/app/+admin/system/logs/logs.component.html b/client/src/app/+admin/system/logs/logs.component.html
index 37f833020115c4594aa27b6f78c7fcefae49e35f..ae1b0c601a3935f55337a6b2cfdfb99ce42bb825 100644 (file)
--- a/client/src/app/+admin/system/logs/logs.component.html
+++ b/client/src/app/+admin/system/logs/logs.component.html
@@ -1,18 +1,18 @@
 <div class="header">
   <div class="peertube-select-container">
-    <select [(ngModel)]="logType" (ngModelChange)="refresh()">
+    <select [(ngModel)]="logType" (ngModelChange)="refresh()" class="form-control">
       <option *ngFor="let logTypeChoice of logTypeChoices" [value]="logTypeChoice.id">{{ logTypeChoice.label }}</option>
     </select>
   </div>
 
   <div class="peertube-select-container">
-    <select [(ngModel)]="startDate" (ngModelChange)="refresh()">
+    <select [(ngModel)]="startDate" (ngModelChange)="refresh()" class="form-control">
       <option *ngFor="let timeChoice of timeChoices" [value]="timeChoice.id">{{ timeChoice.label }}</option>
     </select>
   </div>
 
   <div class="peertube-select-container" *ngIf="!isAuditLog()">
-    <select [(ngModel)]="level" (ngModelChange)="refresh()">
+    <select [(ngModel)]="level" (ngModelChange)="refresh()" class="form-control">
       <option *ngFor="let levelChoice of levelChoices" [value]="levelChoice.id">{{ levelChoice.label }}</option>
     </select>
   </div>

diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 51db100e97f23589b50aba6703028ffa6063dc72..5303d60964865b492607c6bc9e568e2749a5e475 100644 (file)
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -139,7 +139,7 @@
         <label i18n for="videoQuota">Video quota</label>
         <div class="peertube-select-container">
           <select id="videoQuota" formControlName="videoQuota" class="form-control">
-            <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
+            <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
               {{ videoQuotaOption.label }}
             </option>
           </select>
@@ -155,7 +155,7 @@
         <label i18n for="videoQuotaDaily">Daily video quota</label>
         <div class="peertube-select-container">
           <select id="videoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
-            <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
+            <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
               {{ videoQuotaDailyOption.label }}
             </option>
           </select>

diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
index a23cd9033c4ff0414bcb86ce872cfedf27f53ec0..18ca5805f71139c581b238f2c514ecb73d61d1d8 100644 (file)
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -8,8 +8,8 @@ import { User } from '@app/shared/users/user.model'
 import { ScreenService } from '@app/shared/misc/screen.service'
 
 export abstract class UserEdit extends FormReactive implements OnInit {
-  videoQuotaOptions: { value: string, label: string }[] = []
-  videoQuotaDailyOptions: { value: string, label: string }[] = []
+  videoQuotaOptions: { value: string, label: string, disabled?: boolean }[] = []
+  videoQuotaDailyOptions: { value: string, label: string, disabled?: boolean }[] = []
   username: string
   user: User
 
@@ -94,9 +94,14 @@ export abstract class UserEdit extends FormReactive implements OnInit {
   protected buildQuotaOptions () {
     // These are used by a HTML select, so convert key into strings
     this.videoQuotaOptions = this.configService
-                                 .videoQuotaOptions.map(q => ({ value: q.value.toString(), label: q.label }))
+                                 .videoQuotaOptions.map(q => ({ value: q.value?.toString(), label: q.label, disabled: q.disabled }))
 
     this.videoQuotaDailyOptions = this.configService
-                                      .videoQuotaDailyOptions.map(q => ({ value: q.value.toString(), label: q.label }))
+                                      .videoQuotaDailyOptions.map(q => ({ value: q.value?.toString(), label: q.label, disabled: q.disabled }))
+
+    console.log(
+      this.videoQuotaOptions,
+      this.videoQuotaDailyOptions
+    )
   }
 }

diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 249883efcbffbdfc8727e402f7a3dfaab9420e32..15bdb6398b4538824b8238bf94dc442e9fe23f40 100644 (file)
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -11,6 +11,8 @@
   [value]="users" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
   [(selection)]="selectedUsers"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {first} to {last} of {totalRecords} users"
 >
   <ng-template pTemplate="caption">
     <div class="caption">

diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 5274be01cf938d55485c67c28ac7b70f621a1c21..40f08027f5bf031396eece6605a60e463e5529b3 100644 (file)
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -24,3 +24,8 @@ tr.banned {
     @include peertube-input-text(250px);
   }
 }
+
+p-tableCheckbox {
+  position: relative;
+  top: -2.5px;
+}

diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
index a96a11f5e6a365a73e67044dca95b3e55665bfc0..8a93bc9b4f7381ac1eb625d48a38dc87b54dbf54 100644 (file)
--- a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
@@ -11,6 +11,7 @@
     <tr>
       <th i18n>Account</th>
       <th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 

diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
index 329cfb08f77556c846a15052a291682c3be991ca..0f7ca1f85ce66105f7d86e49b10d2be01fd3ce02 100644 (file)
--- a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
@@ -11,7 +11,7 @@
     <tr>
       <th i18n>Instance</th>
       <th i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th></th>
+      <th></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 

diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
index a755c4d69012c2e0da9f43d0de1316cf36b46d33..0dda33af247baaa0fa4a46befddb52c71233e9e6 100644 (file)
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
@@ -11,6 +11,7 @@
 
     <div class="peertube-select-container">
       <select id="nsfwPolicy" formControlName="nsfwPolicy" class="form-control">
+        <option i18n value="undefined" disabled>Policy for sensitive videos</option>
         <option i18n value="do_not_list">Do not list</option>
         <option i18n value="blur">Blur thumbnails</option>
         <option i18n value="display">Display</option>

diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss
index e7dbcd9979fd28a35967833e88b013408968da21..9671cc65f1e53bf6e0b4f5c2719fdc7ef511132a 100644 (file)
--- a/client/src/app/shared/forms/timestamp-input.component.scss
+++ b/client/src/app/shared/forms/timestamp-input.component.scss
@@ -1,8 +1,15 @@
+@import 'variables';
+
 p-inputmask {
   ::ng-deep input {
     width: 80px;
     font-size: 15px;
 
     border: none;
+
+    &:focus-within,
+    &:focus {
+      box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+    }
   }
 }

diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
index 56e7d70dd2619dde71a02db5483121738d0ab7f1..3550556a0273ff483b2acf3dcea767004f091a47 100644 (file)
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -1,7 +1,7 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
-import { NgbModal, NgbNavChangeEvent, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCaption } from '@shared/models'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index e13e0bff6e2d433509bcaaa988446ad5cc1bbe92..eee3db8fca3fdbe52ce979fa74464673b191eb0f 100644 (file)
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -27,7 +27,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
-.dropdown:not(.btn-group) {
+.dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown) {
   z-index: z(dropdown) !important;
 
   &.list-overflow-menu,
@@ -37,7 +37,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 .dropdown-menu {
-  z-index: z(dropdown) !important;
   border-radius: 3px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   font-size: 15px;
@@ -76,10 +75,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
   .modal-dialog {
     text-align: left;
-    vertical-align: middle;
-    min-width: 500px;
-    width: 40vw;
-    max-width: 900px;
+
+    &:not(.modal-lg):not(.modal-xl) {
+      min-width: 500px;
+      width: 40vw;
+      max-width: 900px;
+    }
   }
 }
 

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 869532fe9fb0a6f30f00ad265ded5e8102bf0f5f..8444f935774849631a314c1c5d309c43f67877ba 100644 (file)
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -17,6 +17,11 @@ my-button {
   height: max-content;
 }
 
+// focus box-shadow for primeng
+.ui-inputtext:enabled:focus:not(.ui-state-error) {
+  box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+}
+
 // data table customizations
 p-table {
   .ui-table-caption {
@@ -178,6 +183,16 @@ p-table {
       justify-content: center;
       align-items: center;
 
+      .ui-dropdown {
+        position: absolute;
+        left: 0;
+      }
+
+      .ui-paginator-current {
+        position: absolute;
+        right: 0;
+      }
+
       .ui-paginator-first,
       .ui-paginator-prev,
       .ui-paginator-next,
@@ -189,6 +204,11 @@ p-table {
         font-size: 13px;
         top: -1px;
 
+        &.focus-within,
+        &:focus {
+          box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+        }
+
         &.ui-state-disabled:hover {
           background-color: #fff !important;
         }
@@ -217,6 +237,13 @@ p-table {
       .ui-paginator-pages {
         height: auto !important;
 
+        .ui-paginator-page {
+          &.focus-within,
+          &:focus {
+            box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+          } 
+        }
+
         a {
           color: var(--mainForegroundColor) !important;
           font-weight: $font-semibold !important;
@@ -232,11 +259,6 @@ p-table {
               color: #fff !important;
               background-color: var(--mainColor) !important;
             }
-
-            &.focus-within,
-            &:focus {
-              box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
-            }
           }
         }
       }