fixed conflict

Author: nmetulev

index.html

@@ -32,10 +32,7 @@
     <!-- <mgt-mock-provider></mgt-mock-provider> -->
 
     <mgt-login></mgt-login>
-    <mgt-person person-query="me" show-name show-email person-card="hover"></mgt-person>
+    <mgt-person person-query="me" show-name show-email person-card="click"></mgt-person>
     <mgt-people-picker></mgt-people-picker>
-    <mgt-tasks data-source="todo"></mgt-tasks>
-    <mgt-agenda group-by-day></mgt-agenda>
-    <mgt-people></mgt-people>
   </body>
 </html>

src/components/baseComponent.ts

@@ -5,7 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { LitElement } from 'lit-element';
+import { LitElement, PropertyValues } from 'lit-element';
 /**
  * BaseComponent extends LitElement including ShadowRoot toggle and fireCustomEvent features
  *
@@ -45,7 +45,7 @@ export abstract class MgtBaseComponent extends LitElement {
   }
 
   /**
-   * Recieve ShadowRoot Disabled value
+   * Receive ShadowRoot Disabled value
    *
    * @returns boolean _useShadowRoot value
    * @memberof MgtBaseComponent
@@ -81,4 +81,22 @@ export abstract class MgtBaseComponent extends LitElement {
   protected createRenderRoot() {
     return this.isShadowRootDisabled() ? this : super.createRenderRoot();
   }
+
+  /**
+   * Invoked whenever the element is updated. Implement to perform
+   * post-updating tasks via DOM APIs, for example, focusing an element.
+   *
+   * Setting properties inside this method will trigger the element to update
+   * again after this update cycle completes.
+   *
+   * * @param changedProperties Map of changed properties with old values
+   */
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    const event = new CustomEvent('updated', {
+      bubbles: true,
+      cancelable: true
+    });
+    this.dispatchEvent(event);
+  }
 }

src/components/mgt-people-picker/mgt-people-picker.scss

@@ -113,7 +113,6 @@ mgt-people-picker .people-person {
   border-radius: 15px;
   height: 24px;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -192,7 +191,6 @@ mgt-people-picker .remove-person-button-secondary {
 mgt-people-picker .person-display-name {
   max-width: 100px;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
   margin-left: 8px;
   font-family: Segoe UI;
@@ -207,6 +205,7 @@ mgt-people-picker .person-display-name {
 mgt-person {
   --avatar-size-s: 32px;
   margin-left: 12px;
+  cursor: default;
 }
 .selected-person {
   --avatar-size-s: 24px;

src/components/mgt-people-picker/mgt-people-picker.ts

@@ -415,11 +415,11 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         ${this.selectedPeople.slice(0, this.selectedPeople.length).map(
           person =>
             html`
-              <li class="people-person">
+              <div class="people-person">
                 ${this.renderTemplate('selected-person', { person }, `selected-${person.id}`) ||
                   this.renderSelectedPerson(person)}
                 <div class="CloseIcon" @click="${() => this.removePerson(person)}">\uE711</div>
-              </li>
+              </div>
             `
         )}
       `;
@@ -561,7 +561,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         .personDetails=${person}
         .personImage=${'@'}
         show-name
-        person-card="hover"
+        person-card="click"
       ></mgt-person>
     `;
   }

src/components/mgt-person-card/mgt-person-card.scss

@@ -27,6 +27,7 @@ $color: var(--color, #{$ms-color-neutralDark});
 
     .details {
       margin-left: 14px;
+      line-height: 1.15;
 
       .display-name {
         font-size: 27.3103px;
@@ -56,6 +57,7 @@ $color: var(--color, #{$ms-color-neutralDark});
 
         .icon {
           margin: 0 22px 0 0;
+          cursor: pointer;
         }
         .icon:hover {
           opacity: 0.6;
@@ -118,6 +120,7 @@ $color: var(--color, #{$ms-color-neutralDark});
           }
           .link-subtitle {
             color: #3078cd;
+            cursor: pointer;
           }
           .link-subtitle:hover {
             opacity: 0.6;

src/components/mgt-person/mgt-person.scss

@@ -137,20 +137,6 @@ mgt-person .user-email {
   -ms-grid-row: 2;
 }
 
-.root .flyout {
-  display: none;
-  position: absolute;
-  z-index: 1;
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: 0.1s;
+.flyout {
   padding: 8px;
 }
-
-.root .flyout.visible {
-  display: inline-block;
-  opacity: 1;
-  &.openLeft {
-    right: 0;
-  }
-}

src/components/mgt-person/mgt-person.ts

@@ -6,13 +6,15 @@
  */
 
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
-import { customElement, html, property, PropertyValues } from 'lit-element';
+import { customElement, html, property, PropertyValues, TemplateResult } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
+import { styleMap } from 'lit-html/directives/style-map';
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
 import { getEmailFromGraphEntity } from '../../utils/GraphHelpers';
 import { MgtPersonCard } from '../mgt-person-card/mgt-person-card';
+import '../sub-components/mgt-flyout/mgt-flyout';
 import { MgtTemplatedComponent } from '../templatedComponent';
 import { PersonCardInteraction } from './../PersonCardInteraction';
 import { styles } from './mgt-person-css';
@@ -116,13 +118,11 @@ export class MgtPerson extends MgtTemplatedComponent {
   })
   public personCardInteraction: PersonCardInteraction = PersonCardInteraction.none;
 
-  @property({ attribute: false }) private _isPersonCardVisible: boolean = false;
-  @property({ attribute: false }) private _personCardShouldRender: boolean = false;
+  @property({ attribute: false }) private isPersonCardVisible: boolean = false;
+  @property({ attribute: false }) private personCardShouldRender: boolean = false;
 
   private _mouseLeaveTimeout;
   private _mouseEnterTimeout;
-  private _openLeft: boolean = false;
-  private _openUp: boolean = false;
 
   /**
    * Synchronizes property values when attributes change.
@@ -174,11 +174,11 @@ export class MgtPerson extends MgtTemplatedComponent {
     return html`
       <div
         class="root"
-        @mouseenter=${this._handleMouseEnter}
-        @mouseleave=${this._handleMouseLeave}
-        @click=${this._handleMouseClick}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+        @click=${this.handleMouseClick}
       >
-        ${person} ${this.renderPersonCard(image)}
+        ${this.renderFlyout(person)}
       </div>
     `;
   }
@@ -288,40 +288,41 @@ export class MgtPerson extends MgtTemplatedComponent {
     this.requestUpdate();
   }
 
-  private _handleMouseClick() {
-    if (this.personCardInteraction === PersonCardInteraction.click && !this._isPersonCardVisible) {
-      this._showPersonCard();
+  private handleMouseClick() {
+    if (this.personCardInteraction === PersonCardInteraction.click && !this.isPersonCardVisible) {
+      this.showPersonCard();
     } else {
-      this._hidePersonCard();
+      this.hidePersonCard();
     }
   }
 
-  private _handleMouseEnter(e: MouseEvent) {
+  private handleMouseEnter(e: MouseEvent) {
     clearTimeout(this._mouseEnterTimeout);
     clearTimeout(this._mouseLeaveTimeout);
     if (this.personCardInteraction !== PersonCardInteraction.hover) {
       return;
     }
-    this._mouseEnterTimeout = setTimeout(this._showPersonCard.bind(this), 500);
+    this._mouseEnterTimeout = setTimeout(this.showPersonCard.bind(this), 500);
   }
 
-  private _handleMouseLeave(e: MouseEvent) {
+  private handleMouseLeave(e: MouseEvent) {
     clearTimeout(this._mouseEnterTimeout);
     clearTimeout(this._mouseLeaveTimeout);
-    this._mouseLeaveTimeout = setTimeout(this._hidePersonCard.bind(this), 500);
+    this._mouseLeaveTimeout = setTimeout(this.hidePersonCard.bind(this), 500);
   }
 
-  private _showPersonCard() {
-    if (!this._personCardShouldRender) {
-      this._personCardShouldRender = true;
+  private showPersonCard() {
+    if (!this.personCardShouldRender) {
+      this.personCardShouldRender = true;
     }
 
-    this._isPersonCardVisible = true;
+    this.isPersonCardVisible = true;
   }
 
-  private _hidePersonCard() {
-    this._isPersonCardVisible = false;
-    const personCard = this.querySelector('mgt-person-card') as MgtPersonCard;
+  private hidePersonCard() {
+    this.isPersonCardVisible = false;
+    const personCard = (this.querySelector('mgt-person-card') ||
+      this.renderRoot.querySelector('mgt-person-card')) as MgtPersonCard;
     if (personCard) {
       personCard.isExpanded = false;
     }
@@ -336,44 +337,28 @@ export class MgtPerson extends MgtTemplatedComponent {
     return null;
   }
 
-  private renderPersonCard(image: string) {
-    // ensure person card is only rendered when needed
-    if (this.personCardInteraction === PersonCardInteraction.none || !this._personCardShouldRender) {
-      return;
-    }
-    // logic for rendering left if there is no space
-    const personRect = this.renderRoot.querySelector('.root').getBoundingClientRect();
-    const leftEdge = personRect.left;
-    const rightEdge = (window.innerWidth || document.documentElement.clientWidth) - personRect.right;
-    this._openLeft = rightEdge < leftEdge;
-
-    // logic for rendering up
-    const bottomEdge = (window.innerHeight || document.documentElement.clientHeight) - personRect.bottom;
-    this._openUp = bottomEdge < 175;
-
-    // find position to renderup to
-    let customStyle = null;
-    if (this._openUp) {
-      const personSize = this.getBoundingClientRect().bottom - this.getBoundingClientRect().top;
-      customStyle = `bottom: ${personSize / 2 + 8}px`;
+  private renderFlyout(anchor: TemplateResult) {
+    if (this.personCardInteraction === PersonCardInteraction.none) {
+      return anchor;
     }
 
-    const flyoutClasses = {
-      flyout: true,
-      openLeft: this._openLeft,
-      openUp: this._openUp,
-      visible: this._isPersonCardVisible
-    };
-    if (this._isPersonCardVisible) {
-      return html`
-        <div style="${customStyle}" class=${classMap(flyoutClasses)}>
-          ${this.renderTemplate('person-card', { person: this.personDetails, personImage: image }) ||
-            html`
-              <mgt-person-card .personDetails=${this.personDetails} .personImage=${image}> </mgt-person-card>
-            `}
-        </div>
-      `;
-    }
+    const image = this.getImage();
+    const flyout = this.personCardShouldRender
+      ? html`
+          <div slot="flyout" class="flyout">
+            ${this.renderTemplate('person-card', { person: this.personDetails, personImage: image }) ||
+              html`
+                <mgt-person-card .personDetails=${this.personDetails} .personImage=${image}> </mgt-person-card>
+              `}
+          </div>
+        `
+      : null;
+
+    return html`
+      <mgt-flyout .isOpen=${this.isPersonCardVisible}>
+        ${anchor} ${flyout}
+      </mgt-flyout>
+    `;
   }
 
   private renderDetails() {

src/components/mgt-tasks/mgt-tasks.scss

@@ -198,21 +198,16 @@ mgt-tasks,
           }
           .Picker {
             background-color: white;
-            display: block;
-            position: absolute;
             box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
             -webkit-background-clip: padding-box;
             -moz-background-clip: padding-box;
             background-clip: padding-box;
-            width: 450px;
+            width: 350px;
             color: var(--task-detail-color, black);
-            z-index: 1;
+            margin: 8px;
             mgt-people-picker {
               --separator-margin: 0px 10px 0px 10px;
             }
-            &.Hidden {
-              display: none;
-            }
           }
 
           input,