Migrate to bootstrap 4 and ng-bootstrap

5 files changed, 28 insertions, 29 deletions

diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index 802562dd7..3de3b6fcd 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -5,8 +5,13 @@
     id="description" name="description">
   </textarea>
 
-  <tabset *ngIf="arePreviewsDisplayed()" class="previews">
-    <tab *ngIf="truncate !== undefined" i18n-heading heading="Truncated preview" [innerHTML]="truncatedPreviewHTML"></tab>
-    <tab i18n-heading heading="Complete preview" [innerHTML]="previewHTML"></tab>
-  </tabset>
+  <ngb-tabset *ngIf="arePreviewsDisplayed()" class="previews" type="pills">
+    <ngb-tab *ngIf="truncate !== undefined" i18n-title title="Truncated preview">
+      <ng-template ngbTabContent><div [innerHTML]="truncatedPreviewHTML"></div></ng-template>
+    </ngb-tab>
+
+    <ngb-tab i18n-title title="Complete preview">
+      <ng-template ngbTabContent><div [innerHTML]="previewHTML"></div></ng-template>
+    </ngb-tab>
+  </ngb-tabset>
 </div>
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index 1c3863e52..42a92d7f0 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -18,9 +18,8 @@
   title="Get help"
   i18n-title
   [attr.aria-pressed]="isPopoverOpened"
-  [popover]="tooltipTemplate"
+  [ngbPopover]="tooltipTemplate"
   [placement]="tooltipPlacement"
-  [outsideClick]="true"
   (onHidden)="onPopoverHidden()"
   (onShown)="onPopoverShown()"
 ></span>
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 94de3af9f..ea7f2c887 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -8,11 +8,6 @@ import { HelpComponent } from '@app/shared/misc/help.component'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
 import { MarkdownService } from '@app/videos/shared'
 
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
-import { ModalModule } from 'ngx-bootstrap/modal'
-import { PopoverModule } from 'ngx-bootstrap/popover'
-import { TabsModule } from 'ngx-bootstrap/tabs'
-import { TooltipModule } from 'ngx-bootstrap/tooltip'
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
 
@@ -53,6 +48,7 @@ import { VideoCaptionService } from '@app/shared/video-caption'
 import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.component'
 import { VideoImportService } from '@app/shared/video-import/video-import.service'
 import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component'
+import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 
 @NgModule({
   imports: [
@@ -62,11 +58,11 @@ import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.com
     RouterModule,
     HttpClientModule,
 
-    BsDropdownModule.forRoot(),
-    ModalModule.forRoot(),
-    PopoverModule.forRoot(),
-    TabsModule.forRoot(),
-    TooltipModule.forRoot(),
+    NgbDropdownModule.forRoot(),
+    NgbModalModule.forRoot(),
+    NgbPopoverModule.forRoot(),
+    NgbTabsetModule.forRoot(),
+    NgbTooltipModule.forRoot(),
 
     PrimeSharedModule,
     NgPipesModule
@@ -97,11 +93,12 @@ import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.com
     RouterModule,
     HttpClientModule,
 
-    BsDropdownModule,
-    ModalModule,
-    PopoverModule,
-    TabsModule,
-    TooltipModule,
+    NgbDropdownModule,
+    NgbModalModule,
+    NgbPopoverModule,
+    NgbTabsetModule,
+    NgbTooltipModule,
+
     PrimeSharedModule,
     BytesPipe,
     KeysPipe,
diff --git a/client/src/app/shared/video/video-feed.component.html b/client/src/app/shared/video/video-feed.component.html
index 5ef13e1ed..2e687a7b9 100644
--- a/client/src/app/shared/video/video-feed.component.html
+++ b/client/src/app/shared/video/video-feed.component.html
@@ -1,13 +1,10 @@
 <div class="video-feed">
-  <span *ngIf="syndicationItems.length !== 0" class="icon icon-syndication"
-    [popover]="feedsList"
-    placement="bottom"
-    [outsideClick]="true">
-  </span>
+  <span
+    *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" placement="bottom"
+    class="icon icon-syndication" role="button"
+  ></span>
 
   <ng-template #feedsList>
-    <div *ngFor="let item of syndicationItems">
-      <a [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
-    </div>
+    <a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
   </ng-template>
 </div>
\ No newline at end of file
diff --git a/client/src/app/shared/video/video-feed.component.scss b/client/src/app/shared/video/video-feed.component.scss
index 2efeb405e..a5d1aabf7 100644
--- a/client/src/app/shared/video/video-feed.component.scss
+++ b/client/src/app/shared/video/video-feed.component.scss
@@ -5,6 +5,7 @@
     @include disable-default-a-behaviour;
 
     color: black;
+    display: block;
   }
 
   .icon {