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

2 files changed, 26 insertions, 21 deletions

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 4ce4c18fc..b925d3d02 100644
--- 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 28a3d67d6..874b8094d 100644
--- 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') },