Skip to content

Commit 94e390b

Browse files
Mnickiimusalegavinbarron
authored
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]>
1 parent 96740ab commit 94e390b

35 files changed

+1201
-807
lines changed

‎packages/mgt-components/src/components/mgt-person-card/sections/BasePersonCardSection.ts‎ renamed to ‎packages/mgt-components/src/components/BasePersonCardSection.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import { MgtTemplatedComponent, mgtHtml } from '@microsoft/mgt-element';
99
import { html, TemplateResult } from 'lit';
1010
import { property } from 'lit/decorators.js';
1111

12-
import { IDynamicPerson } from '../../../graph/types';
13-
import { MgtPersonCard } from '../mgt-person-card';
12+
import { IDynamicPerson } from '../graph/types';
13+
import { MgtPersonCard } from './mgt-person-card/mgt-person-card';
1414

15-
import '../../sub-components/mgt-spinner/mgt-spinner';
15+
import './sub-components/mgt-spinner/mgt-spinner';
1616

1717
/**
1818
* A base class for building person card subsections.

‎packages/mgt-components/src/components/mgt-person-card/sections/base-person-card-section.scss‎ renamed to ‎packages/mgt-components/src/components/base-person-card-section.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
* -------------------------------------------------------------------------------------------
66
*/
77

8-
@import '../../../styles/shared-styles.scss';
9-
@import '../../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
8+
@import '../styles/shared-styles.scss';
9+
@import '../../../../node_modules/office-ui-fabric-core/dist/sass/References';
1010

1111
$font-color: var(--font-color, #323130);
1212

‎packages/mgt-components/src/components/components.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ import './mgt-person/mgt-person-types';
1919
import './mgt-tasks/mgt-tasks';
2020
import './mgt-teams-channel-picker/mgt-teams-channel-picker';
2121
import './mgt-todo/mgt-todo';
22+
import './mgt-contact/mgt-contact';
23+
import './mgt-messages/mgt-messages';
24+
import './mgt-organization/mgt-organization';
25+
import './mgt-profile/mgt-profile';
2226
import './mgt-theme-toggle/mgt-theme-toggle';
2327

2428
export * from './mgt-agenda/mgt-agenda';
@@ -35,4 +39,9 @@ export * from './mgt-person/mgt-person-types';
3539
export * from './mgt-tasks/mgt-tasks';
3640
export * from './mgt-teams-channel-picker/mgt-teams-channel-picker';
3741
export * from './mgt-todo/mgt-todo';
42+
export * from './mgt-contact/mgt-contact';
43+
export * from './mgt-contact/mgt-contact';
44+
export * from './mgt-messages/mgt-messages';
45+
export * from './mgt-organization/mgt-organization';
46+
export * from './mgt-profile/mgt-profile';
3847
export * from './mgt-theme-toggle/mgt-theme-toggle';

‎packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.scss‎ renamed to ‎packages/mgt-components/src/components/mgt-contact/mgt-contact.scss‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@
66
*/
77

88
@import '../base-person-card-section.scss';
9-
@import '../../../../styles/shared-styles.scss';
10-
@import '../../../../styles/shared-sass-variables.scss';
11-
12-
$person-card-contact-link-color: var(--person-card-contact-link-color, #{$commblue_primary});
13-
$person-card-contact-link-hover-color: var(--person-card-contact-link-hover-color, #004578);
9+
@import '../../styles/shared-styles.scss';
10+
@import '../../styles/shared-sass-variables.scss';
11+
@import './mgt-contact.theme.scss';
1412

1513
:host {
1614
position: relative;
@@ -60,7 +58,7 @@ $person-card-contact-link-hover-color: var(--person-card-contact-link-hover-colo
6058
line-height: 19px;
6159

6260
.part__link {
63-
color: $person-card-contact-link-color;
61+
color: set-var(person-card-contact-link-color, $theme-default, $contact-theme);
6462
font-family: $font-family;
6563
font-size: 14px;
6664
cursor: pointer;
@@ -71,7 +69,7 @@ $person-card-contact-link-hover-color: var(--person-card-contact-link-hover-colo
7169
display: inline-block;
7270

7371
&:hover {
74-
color: $person-card-contact-link-hover-color;
72+
color: set-var(person-card-contact-link-hover-color, $theme-default, $contact-theme);
7573
}
7674
}
7775
}

‎packages/mgt-components/src/components/mgt-contact/mgt-contact.theme.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
@import '../../styles/shared-sass-variables.scss';
9+
10+
$contact-theme: (
11+
person-card-contact-link-color: (
12+
_var: --person-card-contact-link-color,
13+
light: $link__color--light,
14+
dark: $link__color--dark
15+
),
16+
person-card-contact-link-hover-color: (
17+
_var: --person-card-contact-link-hover-color,
18+
light: $link__color__hover--light,
19+
dark: $link__color__hover--dark
20+
)
21+
);
22+
23+
@include create-themes($contact-theme);

‎packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts‎ renamed to ‎packages/mgt-components/src/components/mgt-contact/mgt-contact.ts‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ import { html, TemplateResult } from 'lit';
1010
import { TeamsHelper, customElement } from '@microsoft/mgt-element';
1111
import { classMap } from 'lit/directives/class-map.js';
1212

13-
import { getEmailFromGraphEntity } from '../../../../graph/graph.people';
13+
import { getEmailFromGraphEntity } from '../../graph/graph.people';
1414
import { BasePersonCardSection } from '../BasePersonCardSection';
15-
import { styles } from './mgt-person-card-contact-css';
16-
import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
15+
import { styles } from './mgt-contact-css';
16+
import { getSvg, SvgIcon } from '../../utils/SvgHelper';
1717
import { strings } from './strings';
1818

1919
/**
@@ -40,12 +40,12 @@ type Protocol = 'mailto:' | 'tel:';
4040
* The contact details subsection of the person card
4141
*
4242
* @export
43-
* @class MgtPersonCardProfile
43+
* @class MgtContact
4444
* @extends {MgtTemplatedComponent}
4545
*/
46-
@customElement('person-card-contact')
47-
// @customElement('mgt-person-card-contact')
48-
export class MgtPersonCardContact extends BasePersonCardSection {
46+
@customElement('contact')
47+
// @customElement('mgt-contact')
48+
export class MgtContact extends BasePersonCardSection {
4949
/**
5050
* Array of styles to apply to the element. The styles should be defined
5151
* using the `css` tag function.
@@ -143,7 +143,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
143143
*
144144
* @readonly
145145
* @type {string}
146-
* @memberof MgtPersonCardContact
146+
* @memberof MgtContact
147147
*/
148148
public get displayName(): string {
149149
return this.strings.contactSectionTitle;
@@ -155,7 +155,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
155155
* Render the icon for display in the navigation ribbon.
156156
*
157157
* @returns {TemplateResult}
158-
* @memberof MgtPersonCardContact
158+
* @memberof MgtContact
159159
*/
160160
public renderIcon(): TemplateResult {
161161
return getSvg(SvgIcon.Contact);
@@ -165,7 +165,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
165165
* Reset any state in the section
166166
*
167167
* @protected
168-
* @memberof MgtPersonCardContact
168+
* @memberof MgtContact
169169
*/
170170
public clearState() {
171171
super.clearState();
@@ -178,7 +178,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
178178
* Render the compact view
179179
*
180180
* @returns {TemplateResult}
181-
* @memberof MgtPersonCardContact
181+
* @memberof MgtContact
182182
*/
183183
protected renderCompactView(): TemplateResult {
184184
let contentTemplate: TemplateResult;
@@ -214,7 +214,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
214214
*
215215
* @protected
216216
* @returns {TemplateResult}
217-
* @memberof MgtPersonCardContact
217+
* @memberof MgtContact
218218
*/
219219
protected renderFullView(): TemplateResult {
220220
let contentTemplate: TemplateResult;
@@ -241,7 +241,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
241241
* @protected
242242
* @param {IContactPart} part
243243
* @returns {TemplateResult}
244-
* @memberof MgtPersonCardContact
244+
* @memberof MgtContact
245245
*/
246246
protected renderContactPart(part: IContactPart): TemplateResult {
247247
let isPhone = false;
@@ -270,9 +270,12 @@ export class MgtPersonCardContact extends BasePersonCardSection {
270270
<div class="part__title">${part.title}</div>
271271
<div class="part__value" title=${part.title}>${valueTemplate}</div>
272272
</div>
273-
<div class="part__copy" aria-role="button" aria-label=${this.strings.copyToClipboardButton} title=${
274-
this.strings.copyToClipboardButton
275-
}>
273+
<div
274+
class="part__copy"
275+
aria-role="button"
276+
aria-label=${this.strings.copyToClipboardButton}
277+
title=${this.strings.copyToClipboardButton}
278+
>
276279
${getSvg(SvgIcon.Copy)}
277280
</div>
278281
</div>
@@ -283,7 +286,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
283286
* Handle the click event for contact parts
284287
*
285288
* @protected
286-
* @memberof MgtPersonCardContact
289+
* @memberof MgtContact
287290
*/
288291
protected handlePartClick(e: MouseEvent, value: string): void {
289292
if (value) {
@@ -303,7 +306,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
303306
* Send a chat message to the user
304307
*
305308
* @protected
306-
* @memberof MgtPersonCardContact
309+
* @memberof MgtContact
307310
*/
308311
protected sendChat(upn: string): void {
309312
if (!upn) {
@@ -329,7 +332,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
329332
* Send an email to the user
330333
*
331334
* @protected
332-
* @memberof MgtPersonCardContact
335+
* @memberof MgtContact
333336
*/
334337
protected sendEmail(email: string): void {
335338
this.sendLink('mailto:', email);
@@ -339,7 +342,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
339342
* Send a call to the user
340343
*
341344
* @protected
342-
* @memberof MgtPersonCardContact
345+
* @memberof MgtContact
343346
*/
344347
protected sendCall = (phone: string): void => {
345348
this.sendLink('tel:', phone);

‎packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/strings.ts‎ renamed to ‎packages/mgt-components/src/components/mgt-contact/strings.ts‎

File renamed without changes.

‎packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,18 @@ $progress-ring-size: var(--progress-ring-size, 24px);
3131
:host {
3232
font-family: $font-family;
3333
font-size: $font-size;
34+
35+
.title {
36+
font-size: 14px;
37+
font-weight: 600;
38+
color: set-var(title__color__subtitle, $theme-default, $common);
39+
padding: 20px 0 12px;
40+
line-height: 19px;
41+
}
42+
}
43+
44+
:host .root {
45+
padding-inline-start: 20px;
3446
}
3547

3648
:host .file-list-wrapper {
@@ -43,6 +55,12 @@ $progress-ring-size: var(--progress-ring-size, 24px);
4355
display: flex;
4456
flex-direction: column;
4557
border-radius: 8px;
58+
.title {
59+
font-size: 14px;
60+
font-weight: 600;
61+
color: set-var(title__color__subtitle, $theme-default, $common);
62+
margin: 0 20px -15px 20px;
63+
}
4664

4765
.file-list {
4866
display: flex;

0 commit comments

Comments
 (0)