feat: add quick messaging to fluent person-card (#1958)

* update: add quick message field to person-card overview * update: use Chat graph entity to create chat and send chat message * update: add chat permissions and mgt-person-card to developer test page * update: remove overview section double line * Update packages/mgt-components/src/components/mgt-person-card/mgt-person-card.graph.ts Co-authored-by: Musale Martin <[email protected]> * Update packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss Co-authored-by: Musale Martin <[email protected]> * Update packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts * update: update box placeholder, fix build * update: break down sections into own components * update: break down sections into own components-edit index * update: fix build * update: fix clear chatbox on sent message * update: uncomment base section styles * update: pull in latest changes from next/fluentui, fix file section styling * refactor: change CSS props for smoother RTL * fix: set the license text on the files * fix: use set-var to set the correct theme colors of border-top * fix: add new shared variables and update existing ones * fix: add theme file for profile component - set and document new custom CSS token * fix: add a them file for the organization component - set the --person-card-active-org-member-color for the person-card * fix: add a theme file for the contact component - set the custom CSS tokens for person card as theme values * fix: add title for the person card file component * fix: add a theme for person with correct tokens - add a new token for the line 1 color customization - refactor CSS properties to work in theme modes * fix: remove unused CSS tokens, add new CSS tokens - refactor CSS to use theme variables * fix: use latest yarn file * update: fix File section title * remove Base Card Section for file-list * fix file-list overview section * Update: Add confirmation icon Change chat input background color Disable send icon while sending * fix keyboard enter * Update packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts Co-authored-by: Gavin Barron <[email protected]> * Update packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts Co-authored-by: Gavin Barron <[email protected]> * update: replace send message with fluent-button * update: remove fluent-button disabled styles * improving message send button disable flow * fixing indents in html blocks --------- Co-authored-by: Musale Martin <[email protected]> Co-authored-by: Gavin Barron <[email protected]>
microsoftgraph · Mar 2, 2023 · 94e390b · 94e390b
1 parent 96740ab
commit 94e390b
Show file tree

Hide file tree

Showing 35 changed files with 1,201 additions and 807 deletions.
diff --git a/...on-card/sections/BasePersonCardSection.ts → ...s/src/components/BasePersonCardSection.ts b/...on-card/sections/BasePersonCardSection.ts → ...s/src/components/BasePersonCardSection.ts
@@ -9,10 +9,10 @@ import { MgtTemplatedComponent, mgtHtml } from '@microsoft/mgt-element';
 import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { IDynamicPerson } from '../../../graph/types';
-import { MgtPersonCard } from '../mgt-person-card';
+import { IDynamicPerson } from '../graph/types';
+import { MgtPersonCard } from './mgt-person-card/mgt-person-card';
 
-import '../../sub-components/mgt-spinner/mgt-spinner';
+import './sub-components/mgt-spinner/mgt-spinner';
 
 /**
  * A base class for building person card subsections.

diff --git a/...rd/sections/base-person-card-section.scss → .../components/base-person-card-section.scss b/...rd/sections/base-person-card-section.scss → .../components/base-person-card-section.scss
@@ -5,8 +5,8 @@
  * -------------------------------------------------------------------------------------------
  */
 
-@import '../../../styles/shared-styles.scss';
-@import '../../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
+@import '../styles/shared-styles.scss';
+@import '../../../../node_modules/office-ui-fabric-core/dist/sass/References';
 
 $font-color: var(--font-color, #323130);
 

diff --git a/packages/mgt-components/src/components/components.ts b/packages/mgt-components/src/components/components.ts
@@ -19,6 +19,10 @@ import './mgt-person/mgt-person-types';
 import './mgt-tasks/mgt-tasks';
 import './mgt-teams-channel-picker/mgt-teams-channel-picker';
 import './mgt-todo/mgt-todo';
+import './mgt-contact/mgt-contact';
+import './mgt-messages/mgt-messages';
+import './mgt-organization/mgt-organization';
+import './mgt-profile/mgt-profile';
 import './mgt-theme-toggle/mgt-theme-toggle';
 
 export * from './mgt-agenda/mgt-agenda';
@@ -35,4 +39,9 @@ export * from './mgt-person/mgt-person-types';
 export * from './mgt-tasks/mgt-tasks';
 export * from './mgt-teams-channel-picker/mgt-teams-channel-picker';
 export * from './mgt-todo/mgt-todo';
+export * from './mgt-contact/mgt-contact';
+export * from './mgt-contact/mgt-contact';
+export * from './mgt-messages/mgt-messages';
+export * from './mgt-organization/mgt-organization';
+export * from './mgt-profile/mgt-profile';
 export * from './mgt-theme-toggle/mgt-theme-toggle';
diff --git a/...card-contact/mgt-person-card-contact.scss → ...c/components/mgt-contact/mgt-contact.scss b/...card-contact/mgt-person-card-contact.scss → ...c/components/mgt-contact/mgt-contact.scss
@@ -6,11 +6,9 @@
  */
 
 @import '../base-person-card-section.scss';
-@import '../../../../styles/shared-styles.scss';
-@import '../../../../styles/shared-sass-variables.scss';
-
-$person-card-contact-link-color: var(--person-card-contact-link-color, #{$commblue_primary});
-$person-card-contact-link-hover-color: var(--person-card-contact-link-hover-color, #004578);
+@import '../../styles/shared-styles.scss';
+@import '../../styles/shared-sass-variables.scss';
+@import './mgt-contact.theme.scss';
 
 :host {
   position: relative;
@@ -60,7 +58,7 @@ $person-card-contact-link-hover-color: var(--person-card-contact-link-hover-colo
           line-height: 19px;
 
           .part__link {
-            color: $person-card-contact-link-color;
+            color: set-var(person-card-contact-link-color, $theme-default, $contact-theme);
             font-family: $font-family;
             font-size: 14px;
             cursor: pointer;
@@ -71,7 +69,7 @@ $person-card-contact-link-hover-color: var(--person-card-contact-link-hover-colo
             display: inline-block;
 
             &:hover {
-              color: $person-card-contact-link-hover-color;
+              color: set-var(person-card-contact-link-hover-color, $theme-default, $contact-theme);
             }
           }
         }

diff --git a/packages/mgt-components/src/components/mgt-contact/mgt-contact.theme.scss b/packages/mgt-components/src/components/mgt-contact/mgt-contact.theme.scss
@@ -0,0 +1,23 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+@import '../../styles/shared-sass-variables.scss';
+
+$contact-theme: (
+  person-card-contact-link-color: (
+    _var: --person-card-contact-link-color,
+    light: $link__color--light,
+    dark: $link__color--dark
+  ),
+  person-card-contact-link-hover-color: (
+    _var: --person-card-contact-link-hover-color,
+    light: $link__color__hover--light,
+    dark: $link__color__hover--dark
+  )
+);
+
+@include create-themes($contact-theme);
diff --git a/...n-card-contact/mgt-person-card-contact.ts → ...src/components/mgt-contact/mgt-contact.ts b/...n-card-contact/mgt-person-card-contact.ts → ...src/components/mgt-contact/mgt-contact.ts
@@ -10,10 +10,10 @@ import { html, TemplateResult } from 'lit';
 import { TeamsHelper, customElement } from '@microsoft/mgt-element';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { getEmailFromGraphEntity } from '../../../../graph/graph.people';
+import { getEmailFromGraphEntity } from '../../graph/graph.people';
 import { BasePersonCardSection } from '../BasePersonCardSection';
-import { styles } from './mgt-person-card-contact-css';
-import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
+import { styles } from './mgt-contact-css';
+import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { strings } from './strings';
 
 /**
@@ -40,12 +40,12 @@ type Protocol = 'mailto:' | 'tel:';
  * The contact details subsection of the person card
  *
  * @export
- * @class MgtPersonCardProfile
+ * @class MgtContact
  * @extends {MgtTemplatedComponent}
  */
-@customElement('person-card-contact')
-// @customElement('mgt-person-card-contact')
-export class MgtPersonCardContact extends BasePersonCardSection {
+@customElement('contact')
+// @customElement('mgt-contact')
+export class MgtContact extends BasePersonCardSection {
   /**
    * Array of styles to apply to the element. The styles should be defined
    * using the `css` tag function.
@@ -143,7 +143,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    *
    * @readonly
    * @type {string}
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   public get displayName(): string {
     return this.strings.contactSectionTitle;
@@ -155,7 +155,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Render the icon for display in the navigation ribbon.
    *
    * @returns {TemplateResult}
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   public renderIcon(): TemplateResult {
     return getSvg(SvgIcon.Contact);
@@ -165,7 +165,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Reset any state in the section
    *
    * @protected
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   public clearState() {
     super.clearState();
@@ -178,7 +178,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Render the compact view
    *
    * @returns {TemplateResult}
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected renderCompactView(): TemplateResult {
     let contentTemplate: TemplateResult;
@@ -214,7 +214,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    *
    * @protected
    * @returns {TemplateResult}
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected renderFullView(): TemplateResult {
     let contentTemplate: TemplateResult;
@@ -241,7 +241,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * @protected
    * @param {IContactPart} part
    * @returns {TemplateResult}
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected renderContactPart(part: IContactPart): TemplateResult {
     let isPhone = false;
@@ -270,9 +270,12 @@ export class MgtPersonCardContact extends BasePersonCardSection {
           <div class="part__title">${part.title}</div>
           <div class="part__value" title=${part.title}>${valueTemplate}</div>
         </div>
-        <div class="part__copy" aria-role="button" aria-label=${this.strings.copyToClipboardButton} title=${
-      this.strings.copyToClipboardButton
-    }>
+        <div
+          class="part__copy"
+          aria-role="button" 
+          aria-label=${this.strings.copyToClipboardButton}
+          title=${this.strings.copyToClipboardButton}
+        >
           ${getSvg(SvgIcon.Copy)}
         </div>
       </div>
@@ -283,7 +286,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Handle the click event for contact parts
    *
    * @protected
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected handlePartClick(e: MouseEvent, value: string): void {
     if (value) {
@@ -303,7 +306,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Send a chat message to the user
    *
    * @protected
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected sendChat(upn: string): void {
     if (!upn) {
@@ -329,7 +332,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Send an email to the user
    *
    * @protected
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected sendEmail(email: string): void {
     this.sendLink('mailto:', email);
@@ -339,7 +342,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Send a call to the user
    *
    * @protected
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected sendCall = (phone: string): void => {
     this.sendLink('tel:', phone);

diff --git a/...ctions/mgt-person-card-contact/strings.ts → ...nts/src/components/mgt-contact/strings.ts b/...ctions/mgt-person-card-contact/strings.ts → ...nts/src/components/mgt-contact/strings.ts
diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss
@@ -31,6 +31,18 @@ $progress-ring-size: var(--progress-ring-size, 24px);
 :host {
   font-family: $font-family;
   font-size: $font-size;
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+    color: set-var(title__color__subtitle, $theme-default, $common);
+    padding: 20px 0 12px;
+    line-height: 19px;
+  }
+}
+
+:host .root {
+  padding-inline-start: 20px;
 }
 
 :host .file-list-wrapper {
@@ -43,6 +55,12 @@ $progress-ring-size: var(--progress-ring-size, 24px);
   display: flex;
   flex-direction: column;
   border-radius: 8px;
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+    color: set-var(title__color__subtitle, $theme-default, $common);
+    margin: 0 20px -15px 20px;
+  }
 
   .file-list {
     display: flex;