Merge pull request #223 from microsoftgraph/nmetulev/person-image

fix for person image not rendering, introduces selected-person template

Author: vogtn

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

@@ -64,8 +64,8 @@ mgt-people-picker .people-list-separator {
   text-align: center;
 }
 
-:host .people-chosen-input,
-mgt-people-picker .people-chosen-input {
+:host .people-selected-input,
+mgt-people-picker .people-selected-input {
   position: relative;
   border: none;
   line-height: normal;
@@ -77,8 +77,8 @@ mgt-people-picker .people-chosen-input {
   line-height: 19px;
 }
 
-:host .people-chosen-list,
-mgt-people-picker .people-chosen-list {
+:host .people-selected-list,
+mgt-people-picker .people-selected-list {
   display: flex;
   flex-wrap: wrap;
   vertical-align: middle;
@@ -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,8 +205,9 @@ mgt-people-picker .person-display-name {
 mgt-person {
   --avatar-size-s: 32px;
   margin-left: 12px;
+  cursor: default;
 }
-.chosen-person {
+.selected-person {
   --avatar-size-s: 24px;
   margin-left: 0px;
 }

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

@@ -129,7 +129,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       html`
         <div class="people-picker" @blur=${this.lostFocus}>
           <div class="people-picker-input" @click=${this.gainedFocus}>
-            ${this.renderChosenPeople()}
+            ${this.renderSelectedPeople()}
           </div>
           <div class="people-list-separator"></div>
           ${this.renderPeopleList()}
@@ -145,7 +145,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @memberof MgtPeoplePicker
    */
   public focus(options?: FocusOptions) {
-    const peopleInput = this.renderRoot.querySelector('.people-chosen-input') as HTMLInputElement;
+    const peopleInput = this.renderRoot.querySelector('.people-selected-input') as HTMLInputElement;
     if (peopleInput) {
       peopleInput.focus(options);
     }
@@ -378,9 +378,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @param person - person and details pertaining to user selected
    */
   private removePerson(person: MicrosoftGraph.User | MicrosoftGraph.Person | MicrosoftGraph.Contact) {
-    const chosenPerson: any = person;
     const filteredPersonArr = this.selectedPeople.filter(p => {
-      return p.id !== chosenPerson.id;
+      return p.id !== person.id;
     });
     this.selectedPeople = filteredPersonArr;
     this.fireCustomEvent('selectionChanged', this.selectedPeople);
@@ -406,7 +405,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     `;
   }
 
-  private renderChosenPeople() {
+  private renderSelectedPeople() {
     let peopleList;
     let inputClass = 'input-search-start';
     if (this.selectedPeople.length > 0) {
@@ -416,10 +415,11 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         ${this.selectedPeople.slice(0, this.selectedPeople.length).map(
           person =>
             html`
-              <li class="people-person">
-                ${this.renderTemplate('person', { person }, person.displayName) || this.renderChosenPerson(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>
             `
         )}
       `;
@@ -428,12 +428,12 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     }
     // tslint:disable
     return html`
-      <div class="people-chosen-list">
+      <div class="people-selected-list">
         ${peopleList}
         <div class="${inputClass}">
           <input
             id="people-picker-input"
-            class="people-chosen-input"
+            class="people-selected-input"
             type="text"
             placeholder="Start typing a name"
             label="people-picker-input"
@@ -451,7 +451,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
   private gainedFocus() {
     const peopleList = this.renderRoot.querySelector('.people-list');
-    const peopleInput = this.renderRoot.querySelector('.people-chosen-input') as HTMLInputElement;
+    const peopleInput = this.renderRoot.querySelector('.people-selected-input') as HTMLInputElement;
     peopleInput.focus();
     peopleInput.select();
     if (peopleList) {
@@ -504,13 +504,12 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   }
 
   private renderPeopleList() {
-    let people: any = this.people;
     let content: TemplateResult;
 
     if (this.showLoading) {
       content = this.renderTemplate('loading', null, 'loading') || this.renderLoadingMessage();
-    } else if (people) {
-      people = people.slice(0, this.showMax);
+    } else if (this.people) {
+      const people = this.people.slice(0, this.showMax);
 
       if (!this.isLoading && people.length === 0 && this._userInput.length > 0) {
         content = this.renderTemplate('error', null, 'error') || this.renderErrorMessage();
@@ -539,11 +538,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
             class="list-person ${person.isSelected === 'fill' ? 'people-person-list-fill' : 'people-person-list'}"
             @click="${() => this.addPerson(person)}"
           >
-            ${this.renderTemplate('person', { person }, person.displayName) || this.renderPerson(person)}
-            <div class="people-person-text-area" id="${person.displayName}">
-              ${this.renderHighlightText(person)}
-              <span class="people-person-job-title">${person.jobTitle}</span>
-            </div>
+            ${this.renderTemplate('person', { person }, person.id) || this.renderPerson(person)}
           </li>
         `
       )}
@@ -553,11 +548,21 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   private renderPerson(person: MicrosoftGraph.Person) {
     return html`
       <mgt-person .personDetails=${person} .personImage=${'@'}></mgt-person>
+      <div class="people-person-text-area" id="${person.displayName}">
+        ${this.renderHighlightText(person)}
+        <span class="people-person-job-title">${person.jobTitle}</span>
+      </div>
     `;
   }
-  private renderChosenPerson(person: MicrosoftGraph.Person) {
+  private renderSelectedPerson(person: MicrosoftGraph.Person) {
     return html`
-      <mgt-person class="chosen-person" .personDetails=${person} .personImage=${'@'} show-name></mgt-person>
+      <mgt-person
+        class="selected-person"
+        .personDetails=${person}
+        .personImage=${'@'}
+        show-name
+        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.ts

@@ -93,6 +93,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    */
   @property({
     attribute: 'person-image',
+    reflect: true,
     type: String
   })
   public personImage: string;
@@ -122,8 +123,6 @@ export class MgtPerson extends MgtTemplatedComponent {
 
   private _mouseLeaveTimeout;
   private _mouseEnterTimeout;
-  private _openLeft: boolean = false;
-  private _openUp: boolean = false;
 
   /**
    * Synchronizes property values when attributes change.
@@ -163,11 +162,12 @@ export class MgtPerson extends MgtTemplatedComponent {
    * trigger the element to update.
    */
   public render() {
+    const image = this.getImage();
     const person =
-      this.renderTemplate('default', { person: this.personDetails, personImage: this.getImage() }) ||
+      this.renderTemplate('default', { person: this.personDetails, personImage: image }) ||
       html`
         <div class="person-root">
-          ${this.renderImage()} ${this.renderDetails()}
+          ${this.renderImage(image)} ${this.renderDetails()}
         </div>
       `;
 
@@ -240,6 +240,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       const response = await batch.execute();
 
       this.personDetails = response.user;
+      this.personImage = response.photo;
       (this.personDetails as any).personImage = response.photo;
     } else if (!this.personDetails && this.personQuery) {
       const people = await provider.graph.findPerson(this.personQuery);
@@ -280,6 +281,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       }
     }
     if (image) {
+      this.personImage = image;
       (this.personDetails as any).personImage = image;
     }
 
@@ -378,10 +380,9 @@ export class MgtPerson extends MgtTemplatedComponent {
     return null;
   }
 
-  private renderImage() {
+  private renderImage(image: string) {
     if (this.personDetails) {
       const title = this.personCardInteraction === PersonCardInteraction.none ? this.personDetails.displayName : '';
-      const image = this.getImage();
       const isLarge = this.showEmail && this.showName;
       const imageClasses = {
         initials: !image,