Added light dismiss logic to mgt-flyout and implemented in mgt-login (#344)

* Added light dismiss logic to mgt-flyout and implemented in mgt-login

* Flyout improvements inspired by the common-components branch

* Undoing changes to index.html

* PR updates

Author: shweaver-MSFT

src/components/mgt-login/mgt-login.scss

@@ -64,6 +64,10 @@ mgt-login .login-button {
     opacity: 0.4;
     pointer-events: none;
   }
+
+  &.no-click {
+    pointer-events: none;
+  }
 }
 
 :host .login-icon,

src/components/mgt-login/mgt-login.ts

@@ -6,12 +6,14 @@
  */
 
 import { User } from '@microsoft/microsoft-graph-types';
-import { customElement, html, property } from 'lit-element';
+import { customElement, html, property, query } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
 import { MgtBaseComponent } from '../baseComponent';
 import '../mgt-person/mgt-person';
+import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout';
 import { styles } from './mgt-login-css';
 
 /**
@@ -52,13 +54,27 @@ export class MgtLogin extends MgtBaseComponent {
   })
   public userDetails: User;
 
-  private _image: string;
+  /**
+   * Gets the flyout element
+   *
+   * @protected
+   * @type {MgtFlyout}
+   * @memberof MgtLogin
+   */
+  @query('.flyout') protected flyout: MgtFlyout;
 
   /**
    * determines if login menu popup should be showing
    * @type {boolean}
    */
-  @property({ attribute: false }) private _showFlyout: boolean;
+  @property({ attribute: false }) private _isFlyoutOpen: boolean;
+
+  private _image: string;
+
+  constructor() {
+    super();
+    this._isFlyoutOpen = false;
+  }
 
   /**
    * Invoked each time the custom element is appended into a document-connected element
@@ -68,17 +84,6 @@ export class MgtLogin extends MgtBaseComponent {
   public connectedCallback() {
     super.connectedCallback();
     this.addEventListener('click', e => e.stopPropagation());
-    window.addEventListener('click', e => this.handleWindowClick(e));
-  }
-
-  /**
-   * Invoked each time the custom element is disconnected from the document's DOM
-   *
-   * @memberof MgtLogin
-   */
-  public disconnectedCallback() {
-    window.removeEventListener('click', e => this.handleWindowClick(e));
-    super.disconnectedCallback();
   }
 
   /**
@@ -172,8 +177,12 @@ export class MgtLogin extends MgtBaseComponent {
    * @memberof MgtLogin
    */
   protected renderButton() {
+    const classes = {
+      'login-button': true,
+      'no-click': this._isFlyoutOpen
+    };
     return html`
-      <button ?disabled="${this.isLoadingState}" @click=${this.onClick} class="login-button" role="button">
+      <button ?disabled="${this.isLoadingState}" @click=${this.onClick} class=${classMap(classes)} role="button">
         ${this.renderButtonContent()}
       </button>
     `;
@@ -187,8 +196,13 @@ export class MgtLogin extends MgtBaseComponent {
    */
   protected renderFlyout() {
     return html`
-      <mgt-flyout .isOpen=${this._showFlyout}>
-        <div slot="flyout" class="flyout">
+      <mgt-flyout
+        class="flyout"
+        light-dismiss
+        @opened=${() => (this._isFlyoutOpen = true)}
+        @closed=${() => (this._isFlyoutOpen = false)}
+      >
+        <div slot="flyout">
           ${this.renderFlyoutContent()}
         </div>
       </mgt-flyout>
@@ -255,7 +269,10 @@ export class MgtLogin extends MgtBaseComponent {
    * @memberof MgtLogin
    */
   protected showFlyout(): void {
-    this._showFlyout = true;
+    const flyout = this.flyout;
+    if (flyout) {
+      flyout.open();
+    }
   }
 
   /**
@@ -265,26 +282,15 @@ export class MgtLogin extends MgtBaseComponent {
    * @memberof MgtLogin
    */
   protected hideFlyout(): void {
-    this._showFlyout = false;
-  }
-
-  /**
-   * Toggle the state of the flyout.
-   *
-   * @protected
-   * @memberof MgtLogin
-   */
-  protected toggleFlyout(): void {
-    this._showFlyout = !this._showFlyout;
-  }
-
-  private handleWindowClick(e: MouseEvent) {
-    this.hideFlyout();
+    const flyout = this.flyout;
+    if (flyout) {
+      flyout.close();
+    }
   }
 
-  private onClick(event: MouseEvent) {
+  private onClick() {
     if (this.userDetails) {
-      this.toggleFlyout();
+      this.showFlyout();
     } else {
       this.login();
     }