Fix videos add tabs style

2 files changed, 21 insertions, 12 deletions

diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index 4c30ddefc..e14e23aed 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -4,18 +4,27 @@
     <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
   </div>
 
-  <tabset class="video-add-tabset root-tabset bootstrap" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
+  <ngb-tabset class="video-add-tabset root-tabset bootstrap" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
 
-    <tab i18n-heading heading="Upload a file">
-      <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)"></my-video-upload>
-    </tab>
+    <ngb-tab i18n-title title="">
+      <ng-template ngbTabTitle><span i18n>Upload a file</span></ng-template>
+      <ng-template ngbTabContent>
+        <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)"></my-video-upload>
+      </ng-template>
+    </ngb-tab>
 
-    <tab *ngIf="isVideoImportHttpEnabled()" i18n-heading heading="Import with URL">
-      <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)"></my-video-import-url>
-    </tab>
+    <ngb-tab *ngIf="isVideoImportHttpEnabled()">
+      <ng-template ngbTabTitle><span i18n>Import with URL</span></ng-template>
+      <ng-template ngbTabContent>
+        <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)"></my-video-import-url>
+      </ng-template>
+    </ngb-tab>
 
-    <tab *ngIf="isVideoImportTorrentEnabled()" i18n-heading heading="Import with torrent">
-      <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)"></my-video-import-torrent>
-    </tab>
-  </tabset>
+    <ngb-tab *ngIf="isVideoImportTorrentEnabled()">
+      <ng-template ngbTabTitle><span i18n>Import with torrent</span></ng-template>
+      <ng-template ngbTabContent>
+        <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)"></my-video-import-torrent>
+      </ng-template>
+    </ngb-tab>
+  </ngb-tabset>
 </div>
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index c1f96cc37..892520e40 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -7,7 +7,7 @@ $border-color: #EAEAEA;
 
 $background-color:  #F7F7F7;
 
-/deep/ tabset.root-tabset.video-add-tabset {
+/deep/ .root-tabset.video-add-tabset {
   &.hide-nav .nav {
     display: none !important;
   }