Merge branch 'master' into nivogt/card-window-bounds

Author: nmetulev

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

@@ -76,12 +76,14 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   // User input in search
   @property() private _userInput: string = '';
 
+  // if search is still loading don't load "people not found" state
+  @property() private showLoading = false;
+  @property() private isLoading = false;
+
   // tracking of user arrow key input for selection
   private arrowSelectionCount: number = 0;
   // List of people requested if group property is provided
   private groupPeople: any[];
-  // if search is still loading don't load "people not found" state
-  private isLoading = false;
   private debouncedSearch;
 
   constructor() {
@@ -320,13 +322,10 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       let people: any;
 
       if (provider && provider.state === ProviderState.SignedIn) {
-        const that = this;
-        let loading = true;
+        this.isLoading = true;
 
         setTimeout(() => {
-          if (loading) {
-            that.isLoading = true;
-          }
+          this.showLoading = this.isLoading;
         }, 400);
 
         const client = Providers.globalProvider.graph;
@@ -345,8 +344,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         }
 
         this.people = this.filterPeople(people);
-        loading = false;
         this.isLoading = false;
+        this.showLoading = false;
       }
     } else {
       this.people = [];
@@ -508,12 +507,12 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     let people: any = this.people;
     let content: TemplateResult;
 
-    if (people) {
+    if (this.showLoading) {
+      content = this.renderTemplate('loading', null, 'loading') || this.renderLoadingMessage();
+    } else if (people) {
       people = people.slice(0, this.showMax);
 
-      if (this.isLoading) {
-        content = this.renderTemplate('loading', null, 'loading') || this.renderLoadingMessage();
-      } else if (people.length === 0 && this._userInput.length > 0) {
+      if (!this.isLoading && people.length === 0 && this._userInput.length > 0) {
         content = this.renderTemplate('error', null, 'error') || this.renderErrorMessage();
       } else {
         if (people[0]) {

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

@@ -16,14 +16,21 @@ mgt-people .people-list {
   list-style-type: none;
   margin: $list-margin;
   padding: 0;
-  font-family: var(--default-font-family, "Segoe UI");
+  font-family: var(--default-font-family, 'Segoe UI');
   font-style: normal;
   font-weight: normal;
   display: flex;
+  align-items: center;
 }
 
 :host .people-person,
 mgt-people .people-person {
   margin: $avatar-margin;
   display: flex;
 }
+:host .overflow,
+mgt-people .overflow {
+  span {
+    vertical-align: middle;
+  }
+}

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

@@ -140,7 +140,7 @@ export class MgtPeople extends MgtTemplatedComponent {
                     people: this.people
                   }) ||
                   html`
-                    <li>+${this.people.length - this.showMax}</li>
+                    <li class="overflow"><span>+${this.people.length - this.showMax}<span></li>
                   `
                 : null}
             </ul>

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

@@ -27,6 +27,7 @@ $email-color: var(--email-color, #{$ms-color-neutralPrimary});
   display: inline-block;
   color: $color;
   position: relative;
+  vertical-align: top;
 }
 
 :host svg,
@@ -65,11 +66,11 @@ mgt-person .Details {
 mgt-person .user-avatar {
   width: $avatar-size;
   height: $avatar-size;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   &.initials {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     color: $initials-color;
     background-color: $initials-background-color;
     border-radius: 50%;
@@ -89,7 +90,6 @@ mgt-person .user-avatar {
 
   img {
     height: 100%;
-    width: 100%;
   }
 }
 

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

@@ -319,12 +319,11 @@ export class MgtPerson extends MgtTemplatedComponent {
   }
 
   private _handleMouseEnter(e: MouseEvent) {
+    clearTimeout(this._mouseEnterTimeout);
+    clearTimeout(this._mouseLeaveTimeout);
     if (this.personCardInteraction !== PersonCardInteraction.hover) {
       return;
     }
-
-    clearTimeout(this._mouseEnterTimeout);
-    clearTimeout(this._mouseLeaveTimeout);
     this._mouseEnterTimeout = setTimeout(this._showPersonCard.bind(this), 500);
   }
 
@@ -450,7 +449,6 @@ export class MgtPerson extends MgtTemplatedComponent {
         const initials = this.getInitials();
 
         imageHtml = html`
-          <img />
           <span class="initials-text" aria-label="${initials}">
             ${initials}
           </span>

src/components/mgt-tasks/mgt-tasks.ts

@@ -5,8 +5,8 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { Person, PlannerAssignments, User } from '@microsoft/microsoft-graph-types';
-import { Contact, OutlookTaskFolder } from '@microsoft/microsoft-graph-types-beta';
+import { Person, PlannerAssignments, PlannerTask, User } from '@microsoft/microsoft-graph-types';
+import { Contact, OutlookTask, OutlookTaskFolder } from '@microsoft/microsoft-graph-types-beta';
 import { customElement, html, property } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { repeat } from 'lit-html/directives/repeat';
@@ -192,6 +192,13 @@ export class MgtTasks extends MgtTemplatedComponent {
   @property({ attribute: 'group-id', type: String })
   public groupId: string = null;
 
+  /**
+   * Optional filter function when rendering tasks
+   *
+   * @memberof MgtTasks
+   */
+  public taskFilter: (task: PlannerTask | OutlookTask) => boolean;
+
   @property() private _isNewTaskVisible: boolean = false;
   @property() private _newTaskBeingAdded: boolean = false;
   @property() private _newTaskName: string = '';
@@ -313,11 +320,15 @@ export class MgtTasks extends MgtTemplatedComponent {
    * trigger the element to update.
    */
   protected render() {
-    const tasks = this._tasks
+    let tasks = this._tasks
       .filter(task => this.isTaskInSelectedGroupFilter(task))
       .filter(task => this.isTaskInSelectedFolderFilter(task))
       .filter(task => !this._hiddenTasks.includes(task.id));
 
+    if (this.taskFilter) {
+      tasks = tasks.filter(task => this.taskFilter(task._raw));
+    }
+
     const loadingTask = this._inTaskLoad && !this._hasDoneInitialLoad ? this.renderLoadingTask() : null;
 
     let header;
@@ -982,7 +993,7 @@ export class MgtTasks extends MgtTemplatedComponent {
     const groupTitle = this._currentGroup ? null : this.getPlanTitle(task.topParentId);
     const folderTitle = this._currentFolder ? null : this.getFolderName(task.immediateParentId);
 
-    const context = { task: { ...task, groupTitle, folderTitle } };
+    const context = { task: { ...task._raw, groupTitle, folderTitle } };
     const taskTemplate = this.renderTemplate('task', context, task.id);
     if (taskTemplate) {
       return taskTemplate;