Improve features table

client/src/app/shared/instance/feature-boolean.component.html

@@ -0,0 +1,3 @@
+<span *ngIf="value === true" class="glyphicon glyphicon-ok"></span>
+<span *ngIf="value === false" class="glyphicon glyphicon-remove"></span>
+

client/src/app/shared/instance/feature-boolean.component.scss

@@ -0,0 +1,10 @@
+@import '_variables';
+@import '_mixins';
+
+.glyphicon-ok {
+  color: $green;
+}
+
+.glyphicon-remove {
+  color: $red;
+}

client/src/app/shared/instance/feature-boolean.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-feature-boolean',
+  templateUrl: './feature-boolean.component.html',
+  styleUrls: [ './feature-boolean.component.scss' ]
+})
+export class FeatureBooleanComponent {
+  @Input() value: boolean
+}

client/src/app/shared/instance/instance-features-table.component.html

@@ -1,22 +1,43 @@
 <div class="feature-table">
 
-  <table class="table">
+  <table class="table" *ngIf="config">
     <tr>
-      <td i18n class="label">Default NSFW/sensitive videos policy (can be redefined by the users)</td>
+      <td i18n class="label">
+        <div>Default NSFW/sensitive videos policy</div>
+        <div class="more-info">can be redefined by the users</div>
+      </td>
 
       <td class="value">{{ buildNSFWLabel() }}</td>
     </tr>
 
-    <tr *ngFor="let feature of features">
+    <tr>
-      <td class="label">{{ feature.label }}</td>
+      <td i18n class="label">User registration allowed</td>
       <td>
-        <span *ngIf="feature.value === true" class="glyphicon glyphicon-ok"></span>
+        <my-feature-boolean [value]="config.signup.allowed"></my-feature-boolean>
-        <span *ngIf="feature.value === false" class="glyphicon glyphicon-remove"></span>
       </td>
     </tr>
 
     <tr>
-      <td i18n class="label">Video quota</td>
+      <td i18n class="label" colspan="2">Video uploads</td>
+    </tr>
+
+    <tr>
+      <td i18n class="sub-label">Transcoding in multiple resolutions</td>
+      <td>
+        <my-feature-boolean [value]="config.transcoding.enabledResolutions.length !== 0"></my-feature-boolean>
+      </td>
+    </tr>
+
+    <tr>
+      <td i18n class="sub-label">Video uploads</td>
+      <td>
+        <span *ngIf="config.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
+        <span *ngIf="!config.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
+      </td>
+    </tr>
+
+    <tr>
+      <td i18n class="sub-label">Video quota</td>
 
       <td class="value">
         <ng-container *ngIf="initialUserVideoQuota !== -1">
@@ -30,5 +51,35 @@
         </ng-container>
       </td>
     </tr>
+
+    <tr>
+      <td i18n class="label" colspan="2">Import</td>
+    </tr>
+
+    <tr>
+      <td i18n class="sub-label">HTTP import (YouTube, Vimeo, direct URL...)</td>
+      <td>
+        <my-feature-boolean [value]="config.import.videos.http.enabled"></my-feature-boolean>
+      </td>
+    </tr>
+
+    <tr>
+      <td i18n class="sub-label">Torrent import</td>
+      <td>
+        <my-feature-boolean [value]="config.import.videos.torrent.enabled"></my-feature-boolean>
+      </td>
+    </tr>
+
+
+    <tr>
+      <td i18n class="label" colspan="2">Player</td>
+    </tr>
+
+    <tr>
+      <td i18n class="sub-label">P2P enabled</td>
+      <td>
+        <my-feature-boolean [value]="config.tracker.enabled"></my-feature-boolean>
+      </td>
+    </tr>
   </table>
 </div>

client/src/app/shared/instance/instance-features-table.component.scss

@@ -5,16 +5,28 @@ table {
   font-size: 14px;
   color: var(--mainForegroundColor);
 
-  .label {
+  .label,
-    font-weight: $font-semibold;
+  .sub-label {
     min-width: 330px;
+
+    &.label {
+      font-weight: $font-semibold;
     }
 
-  .glyphicon-ok {
+    &.sub-label {
-    color: $green;
+      padding-left: 30px;
     }
 
-  .glyphicon-remove {
+    .more-info {
-    color: $red;
+      font-style: italic;
+      font-weight: initial;
+      font-size: 14px
     }
   }
+
+  td {
+    vertical-align: middle;
+  }
+}
+
+

client/src/app/shared/instance/instance-features-table.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ServerConfig } from '@shared/models'
 
 @Component({
   selector: 'my-instance-features-table',
@@ -8,8 +9,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
   styleUrls: [ './instance-features-table.component.scss' ]
 })
 export class InstanceFeaturesTableComponent implements OnInit {
-  features: { label: string, value?: boolean }[] = []
   quotaHelpIndication = ''
+  config: ServerConfig
 
   constructor (
     private i18n: I18n,
@@ -28,7 +29,7 @@ export class InstanceFeaturesTableComponent implements OnInit {
   ngOnInit () {
     this.serverService.configLoaded
         .subscribe(() => {
-          this.buildFeatures()
+          this.config = this.serverService.getConfig()
           this.buildQuotaHelpIndication()
         })
   }
@@ -41,37 +42,6 @@ export class InstanceFeaturesTableComponent implements OnInit {
     if (policy === 'display') return this.i18n('Displayed')
   }
 
-  private buildFeatures () {
-    const config = this.serverService.getConfig()
-
-    this.features = [
-      {
-        label: this.i18n('User registration allowed'),
-        value: config.signup.allowed
-      },
-      {
-        label: this.i18n('Video uploads require manual validation by moderators'),
-        value: config.autoBlacklist.videos.ofUsers.enabled
-      },
-      {
-        label: this.i18n('Transcode your videos in multiple resolutions'),
-        value: config.transcoding.enabledResolutions.length !== 0
-      },
-      {
-        label: this.i18n('HTTP import (YouTube, Vimeo, direct URL...)'),
-        value: config.import.videos.http.enabled
-      },
-      {
-        label: this.i18n('Torrent import'),
-        value: config.import.videos.torrent.enabled
-      },
-      {
-        label: this.i18n('P2P enabled'),
-        value: config.tracker.enabled
-      }
-    ]
-  }
-
   private getApproximateTime (seconds: number) {
     const hours = Math.floor(seconds / 3600)
     let pluralSuffix = ''

client/src/app/shared/shared.module.ts

@@ -92,6 +92,7 @@ import { VideoReportComponent } from '@app/shared/video/modals/video-report.comp
 import { ClipboardModule } from 'ngx-clipboard'
 import { FollowService } from '@app/shared/instance/follow.service'
 import { MultiSelectModule } from 'primeng/multiselect'
+import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.component'
 
 @NgModule({
   imports: [
@@ -156,6 +157,7 @@ import { MultiSelectModule } from 'primeng/multiselect'
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,
+    FeatureBooleanComponent,
     UserBanModalComponent,
     UserModerationDropdownComponent,
     TopMenuDropdownComponent,