Migrate to bootstrap 4 and ng-bootstrap

5 files changed, 33 insertions, 47 deletions

diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html
index f941e32f8..c37bf2826 100644
--- a/client/src/app/menu/language-chooser.component.html
+++ b/client/src/app/menu/language-chooser.component.html
@@ -1,15 +1,10 @@
-<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-
-      <div class="modal-header">
-        <span class="close" aria-hidden="true" (click)="hide()"></span>
-        <h4 i18n class="modal-title">Change the language</h4>
-      </div>
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Change the language</h4>
+    <span class="close" aria-label="Close" role="button" (click)="hide()"></span>
+  </div>
 
-      <div class="modal-body" *ngFor="let lang of languages">
-        <a [href]="buildLanguageLink(lang)">{{ lang.label }}</a>
-      </div>
-    </div>
+  <div class="modal-body">
+    <a *ngFor="let lang of languages" [href]="buildLanguageLink(lang)">{{ lang.label }}</a>
   </div>
-</div>
+</ng-template>
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 30c70c6a2..944e86f46 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -1,19 +1,12 @@
 @import '_variables';
 @import '_mixins';
 
-.modal {
-  z-index: 10005;
-}
-
-.modal-title {
-  text-align: center;
-}
-
 .modal-body {
   text-align: center;
 
   a {
+    display: block;
     font-size: 16px;
-    margin-top: 10px;
+    margin: 15px;
   }
 }
\ No newline at end of file
diff --git a/client/src/app/menu/language-chooser.component.ts b/client/src/app/menu/language-chooser.component.ts
index 3de6a129d..45fa73e76 100644
--- a/client/src/app/menu/language-chooser.component.ts
+++ b/client/src/app/menu/language-chooser.component.ts
@@ -1,6 +1,6 @@
-import { Component, ViewChild } from '@angular/core'
-import { ModalDirective } from 'ngx-bootstrap/modal'
+import { Component, ElementRef, ViewChild } from '@angular/core'
 import { I18N_LOCALES } from '../../../../shared'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
   selector: 'my-language-chooser',
@@ -8,21 +8,17 @@ import { I18N_LOCALES } from '../../../../shared'
   styleUrls: [ './language-chooser.component.scss' ]
 })
 export class LanguageChooserComponent {
-  @ViewChild('modal') modal: ModalDirective
+  @ViewChild('modal') modal: ElementRef
 
-  languages: { [ id: string ]: string }[] = []
+  languages: { id: string, label: string }[] = []
 
-  constructor () {
+  constructor (private modalService: NgbModal) {
     this.languages = Object.keys(I18N_LOCALES)
       .map(k => ({ id: k, label: I18N_LOCALES[k] }))
   }
 
   show () {
-    this.modal.show()
-  }
-
-  hide () {
-    this.modal.hide()
+    this.modalService.open(this.modal)
   }
 
   buildLanguageLink (lang: { id: string }) {
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index c487a6fc1..9657e5269 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -11,24 +11,22 @@
           <div class="logged-in-email">{{ user.username }}</div>
         </div>
 
-        <div class="logged-in-more" dropdown placement="right" container="body">
-          <span class="glyphicon glyphicon-option-vertical" dropdownToggle></span>
+        <div class="logged-in-more" ngbDropdown placement="bottom-right">
+          <span class="glyphicon glyphicon-option-vertical" ngbDropdownToggle role="button"></span>
 
-          <ul *dropdownMenu class="dropdown-menu">
-            <li>
-              <a i18n [routerLink]="[ '/accounts', user.account?.nameWithHost ]" class="dropdown-item" title="My public profile">
-               My public profile
-              </a>
+          <div ngbDropdownMenu>
+            <a *ngIf="user.account" i18n [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
+             My public profile
+            </a>
 
-              <a i18n routerLink="/my-account" class="dropdown-item" title="My account">
-                My account
-              </a>
+            <a i18n routerLink="/my-account" class="dropdown-item">
+              My account
+            </a>
 
-              <a i18n (click)="logout($event)" class="dropdown-item" title="Log out" href="#">
-                Log out
-              </a>
-            </li>
-          </ul>
+            <a i18n (click)="logout($event)" class="dropdown-item" href="#">
+              Log out
+            </a>
+          </div>
         </div>
       </div>
 
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index e61f4acd3..39f1e9be0 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -69,6 +69,10 @@ menu {
       .glyphicon {
         cursor: pointer;
         font-size: 18px;
+
+        &::after {
+          border: none;
+        }
       }
     }
   }