From f5a4604d267322682770d276a540817095c87d7f Mon Sep 17 00:00:00 2001
From: Alessandro Gaggia <alex@besharp.it>
Date: Wed, 21 Oct 2020 12:59:53 +0200
Subject: [PATCH] fixed issue 33: dropdown menu not closing when opening
 another one

---
 .../session-card/session-card.component.html   | 18 +++++++++++-------
 .../session-card/session-card.component.scss   | 15 ++++++++++++++-
 .../session-card/session-card.component.ts     |  7 +++----
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/app/session/session-card/session-card.component.html b/src/app/session/session-card/session-card.component.html
index a9a07bd80..430bbb1b7 100644
--- a/src/app/session/session-card/session-card.component.html
+++ b/src/app/session/session-card/session-card.component.html
@@ -1,10 +1,16 @@
-<div class="session-card button-area  {{session.account.type === eAccountType.AZURE ? 'azr' : 'aws'}} {{session.active ? 'active' : ''}}" (click)="switchCredentials()">
-  <span class="information">
+<div class="session-card button-area  {{session.account.type === eAccountType.AZURE ? 'azr' : 'aws'}} {{session.active ? 'active' : ''}}" >
+  <span class="information" (click)="switchCredentials()">
     <b>{{session.account.accountName.length >= 23 ? session.account.accountName.substr(0, 20) + '...' : session.account.accountName}}</b> - {{ sessionDetailToShow }}
   </span>
-  <ng-container dropdown placement="right">
-    <a dropdownToggle class="drop-list-container" aria-controls="drop-list" (click)="openDropDown($event);"><i
-      class="fa fa-ellipsis-v"></i></a>
+  <span class="information-offset" (click)="switchCredentials()">
+    <i class="status-item fas fa-circle {{session.active ? 'active' : 'offline'}}" *ngIf="!session.loading"></i>
+    <i class="status-item far fa-spinner-third fa-spin" *ngIf="session.loading"></i>
+  </span>
+
+  <ng-container dropdown placement="right" [autoClose]="true">
+    <a dropdownToggle class="drop-list-container" aria-controls="drop-list" (click)="openDropDown($event);" >
+      <i class="fa fa-ellipsis-v"></i>
+    </a>
     <div id="drop-list" *dropdownMenu class="dropdown-menu drop-list dropdown-menu-right" role="menu" aria-labelledby="button-basic">
       <a (click)="ssmModalOpen(session, $event);" *ngIf="(session.account.type === eAccountType.AWS || session.account.type === eAccountType.AWS_PLAIN_USER) && session.active">SSM session</a>
       <a (click)="removeAccount(session, $event);">Remove account</a>
@@ -15,8 +21,6 @@
     </div>
   </ng-container>
 
-  <i class="status-item fas fa-circle {{session.active ? 'active' : 'offline'}}" *ngIf="!session.loading"></i>
-  <i class="status-item far fa-spinner-third fa-spin" *ngIf="session.loading"></i>
 </div>
 
 
diff --git a/src/app/session/session-card/session-card.component.scss b/src/app/session/session-card/session-card.component.scss
index e32bf439f..500a8cbb9 100644
--- a/src/app/session/session-card/session-card.component.scss
+++ b/src/app/session/session-card/session-card.component.scss
@@ -25,7 +25,6 @@
 
 .session-card {
   width: 100%;
-  padding: 10px;
   background: $light-color;
   text-align: left;
   position: relative;
@@ -35,6 +34,20 @@
   margin: 0 0 15px;
   cursor: pointer;
 
+  span.information {
+    padding: 10px;
+    display: inline-block;
+    width: 77%;
+  }
+  span.information-offset {
+    padding: 10px;
+    display: inline-block;
+    width: 12%;
+    margin-left: 41px;
+    float: right;
+    height: 42px;
+  }
+
   .drop-list-container {
     padding: 4px 10px 3px;
     background: $main-color-light;
diff --git a/src/app/session/session-card/session-card.component.ts b/src/app/session/session-card/session-card.component.ts
index 53f4691a3..3be44e690 100644
--- a/src/app/session/session-card/session-card.component.ts
+++ b/src/app/session/session-card/session-card.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild} from '@angular/core';
+import {Component, EventEmitter, Host, Input, OnInit, Output, TemplateRef, ViewChild} from '@angular/core';
 import {Session} from '../../models/session';
 import {SessionService} from '../../services/session.service';
 import {CredentialsService} from '../../services/credentials.service';
@@ -19,10 +19,9 @@ import {AccountType} from '../../models/AccountType';
 @Component({
   selector: 'app-session-card',
   templateUrl: './session-card.component.html',
-  styleUrls: ['./session-card.component.scss']
+  styleUrls: ['./session-card.component.scss'],
 })
 
-
 export class SessionCardComponent implements OnInit {
 
   eAccountType = AccountType;
@@ -152,7 +151,7 @@ export class SessionCardComponent implements OnInit {
   }
 
   openDropDown(event) {
-    event.stopPropagation();
+    //event.stopPropagation();
   }
 
   // ============================== //