get rid of "ngx-bootstrap/dropdown"

vladimiry · May 4, 2018 · c03e5b7 · c03e5b7
1 parent d953d2b
commit c03e5b7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/src/web/src/app/+accounts/accounts.component.html b/src/web/src/app/+accounts/accounts.component.html
@@ -1,15 +1,16 @@
 <div class="wrapper" *ngIf="initialized$ | async" [ngClass]="{'compact-layout': compactLayout$ | async}">
     <div class="accounts-block p-2">
-        <div class="btn-group accounts-list" dropdown placement="bottom right"
+        <div class="btn-group accounts-list" placement="bottom right dropdown"
              [ngStyle]="!accounts.length && {'visibility': 'hidden'}">
             <div class="unread-summary" *ngIf="accounts.length > 1 && (accountsUnreadSummary$ | async)">
                 <span class="badge badge-danger">{{ accountsUnreadSummary$ | async }}</span>
             </div>
-            <button dropdownToggle type="button" class="btn btn-warning-light dropdown-toggle" *ngIf="selectedAccount$ | async">
+            <button type="button" class="btn btn-warning-light dropdown-toggle"
+                    *ngIf="selectedAccount$ | async" (click)="accountsListClosed = !accountsListClosed">
                 <protonmail-desktop-app-account-title [account]="selectedAccount$ | async"></protonmail-desktop-app-account-title>
                 <span class="caret"></span>
             </button>
-            <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
+            <ul class="dropdown-menu dropdown-menu-right" role="menu" [style.display]="accountsListClosed ? 'none' : 'block'">
                 <li role="menuitem" *ngFor="let account of accounts; trackBy: trackAccount">
                     <a class="dropdown-item" (click)="activateAccount(account)">
                         <protonmail-desktop-app-account-title [account]="account"></protonmail-desktop-app-account-title>
@@ -25,15 +26,15 @@
             </a>
         </ul>
         <div class="controls">
-            <div class="btn-group" dropdown>
+            <div class="btn-group dropdown">
                 <button type="button" class="btn btn-secondary" (click)="openSettingsView()">
                     <i class="fa fa-cog"></i>
                     Options
                 </button>
-                <button type="button" dropdownToggle class="btn btn-secondary dropdown-toggle dropdown-toggle-split">
+                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" (click)="menuClosed = !menuClosed">
                     <span class="caret"></span>
                 </button>
-                <ul *dropdownMenu class="dropdown-menu" role="menu">
+                <ul class="dropdown-menu" role="menu" [style.display]="menuClosed ? 'none' : 'block'" (click)="menuClosed = true">
                     <li role="menuitem">
                         <button class="dropdown-item toggle-layout-view" type="button" (click)="toggleCompactLayout()">
                             <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="togglingCompactLayout$ | async"></i>

diff --git a/src/web/src/app/+accounts/accounts.component.ts b/src/web/src/app/+accounts/accounts.component.ts
@@ -8,7 +8,11 @@ import {WebAccount} from "_shared/model/account";
 import {SETTINGS_OUTLET, SETTINGS_PATH} from "_web_app/app.constants";
 import {AccountsActions, NavigationActions, OptionsActions} from "_web_app/store/actions";
 import {
-    accountsSelector, accountsUnreadSummarySelector, initializedSelector, selectedAccountSelector, selectedLoginSelector,
+    accountsSelector,
+    accountsUnreadSummarySelector,
+    initializedSelector,
+    selectedAccountSelector,
+    selectedLoginSelector,
     State,
 } from "_web_app/store/reducers/accounts";
 import {configCompactLayoutSelector, progressSelector} from "_web_app/store/reducers/options";
@@ -29,6 +33,8 @@ export class AccountsComponent implements OnInit, OnDestroy {
     togglingCompactLayout$ = this.store.select(progressSelector)
         .pipe(map(({togglingCompactLayout}) => togglingCompactLayout));
     accounts: WebAccount[] = [];
+    menuClosed = true;
+    accountsListClosed = true;
     unSubscribe$ = new Subject();
 
     constructor(private store: Store<State>) {}
@@ -48,6 +54,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
 
     activateAccount(account: WebAccount) {
         this.store.dispatch(new AccountsActions.ActivateAccount(account.accountConfig.login));
+        this.accountsListClosed = true;
     }
 
     trackAccount(index: number, account: WebAccount) {