Remove deprecated NgbTabsetModule module

4 files changed, 79 insertions, 73 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 6d72e5765..967f3b188 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -1,8 +1,10 @@
 <div class="video-edit" [formGroup]="form">
-  <ngb-tabset class="root-tabset bootstrap">
+  <div ngbNav #nav="ngbNav" class="nav-tabs">
 
-    <ngb-tab i18n-title title="Basic info">
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Basic info</a>
+
+      <ng-template ngbNavContent>
         <div class="row">
           <div class="col-md-8">
             <div class="form-group">
@@ -155,10 +157,12 @@
           </div>
         </div>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
+
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Captions</a>
 
-    <ngb-tab i18n-title title="Captions">
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
         <div class="captions">
 
           <div class="captions-header">
@@ -206,10 +210,12 @@
 
         </div>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
+
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Advanced settings</a>
 
-    <ngb-tab i18n-title title="Advanced settings">
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
         <div class="row advanced-settings">
           <div class="col-md-12 col-xl-8">
 
@@ -262,10 +268,11 @@
           </div>
         </div>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
 
-  </ngb-tabset>
+  </div>
 
+  <div [ngbNavOutlet]="nav"></div>
 </div>
 
 <my-video-caption-add-modal
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 144914731..90d26e13d 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -19,6 +19,10 @@ my-peertube-checkbox {
   margin-bottom: 1rem;
 }
 
+.nav-tabs {
+  margin-bottom: 15px;
+}
+
 .video-edit {
   height: 100%;
   min-height: 300px;
@@ -145,10 +149,6 @@ p-calendar {
 }
 
 ::ng-deep {
-  .root-tabset > .nav {
-    margin-bottom: 15px;
-  }
-
   .ng2-tag-input {
     border: none !important;
   }
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 a99988600..79bfc6e5c 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -10,27 +10,37 @@
     <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
   </div>
 
-  <ngb-tabset class="video-add-tabset root-tabset bootstrap" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
+  <div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
+    <ng-container ngbNavItem>
+      <a ngbNavLink>
+        <span i18n>Upload a file</span>
+      </a>
 
-    <ngb-tab>
-      <ng-template ngbTabTitle><span i18n>Upload a file</span></ng-template>
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
         <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)" (firstStepError)="onError()"></my-video-upload>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
 
-    <ngb-tab *ngIf="isVideoImportHttpEnabled()">
-      <ng-template ngbTabTitle><span i18n>Import with URL</span></ng-template>
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem *ngIf="isVideoImportHttpEnabled()">
+      <a ngbNavLink>
+        <span i18n>Import with URL</span>
+      </a>
+
+      <ng-template ngbNavContent>
         <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)" (firstStepError)="onError()"></my-video-import-url>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
+
+    <ng-container ngbNavItem *ngIf="isVideoImportTorrentEnabled()">
+      <a ngbNavLink>
+        <span i18n>Import with torrent</span>
+      </a>
 
-    <ngb-tab *ngIf="isVideoImportTorrentEnabled()">
-      <ng-template ngbTabTitle><span i18n>Import with torrent</span></ng-template>
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
         <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)" (firstStepError)="onError()"></my-video-import-torrent>
       </ng-template>
-    </ngb-tab>
-  </ngb-tabset>
+    </ng-container>
+  </div>
+
+  <div [ngbNavOutlet]="nav"></div>
 </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 7acab3744..9d068afde 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -13,52 +13,41 @@ $border-color: #EAEAEA;
   font-size: 15px;
 }
 
-::ng-deep .root-tabset.video-add-tabset {
-  margin-top: 50px;
-
-  &.hide-nav > .nav {
-    display: none !important;
-  }
-
-  & > .nav {
-    border-bottom: $border-width $border-type $border-color;
-    margin: 0 !important;
-
-    & > li {
-      margin-bottom: -$border-width;
-    }
-
-    a.nav-link {
-      @include disable-default-a-behaviour;
-
-      height: 40px !important;
-      padding: 0 30px !important;
-      font-size: 15px;
-
-      &.active {
-        border: $border-width $border-type $border-color;
-        border-bottom: none;
-        background-color: var(--submenuColor) !important;
-
-        span {
-          border-bottom: 2px solid var(--mainColor);
-          font-weight: $font-bold;
-        }
+::ng-deep .video-add-nav {
+  border-bottom: $border-width $border-type $border-color;
+  margin: 50px 0 0 0 !important;
+
+  a.nav-link {
+    @include disable-default-a-behaviour;
+
+    margin-bottom: -$border-width;
+    height: 40px !important;
+    padding: 0 30px !important;
+    font-size: 15px;
+
+    &.active {
+      border: $border-width $border-type $border-color;
+      border-bottom: none;
+      background-color: var(--submenuColor) !important;
+
+      span {
+        border-bottom: 2px solid var(--mainColor);
+        font-weight: $font-bold;
       }
     }
   }
+}
 
-  .upload-video-container {
-    border: $border-width $border-type $border-color;
-    border-top: none;
-
-    background-color: var(--submenuColor);
-    border-radius: 3px;
-    width: 100%;
-    min-height: 440px;
-    padding-bottom: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+::ng-deep .upload-video-container {
+  border: $border-width $border-type $border-color;
+  border-top: none;
+
+  background-color: var(--submenuColor);
+  border-radius: 3px;
+  width: 100%;
+  min-height: 440px;
+  padding-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }