Skip to content

Commit 90faa5a

Browse files
shweaver-MSFTnmetulev
shweaver-MSFT
and
nmetulev
authored
Person card redesign (#583)
* Updated with new sections * Added comment headers to methods/classes * Removed unused functions * Import updates * Fixed paths * Added loading state and styles to person card * Reintegrated presence icon color * Bug fixes * Handle message click in person card * Fix presence * Integrated mgt-element * Added wip docs * Stripped out unused svgs in svgHelper * Using SvgHelper in person card * Migrated person card svgs to SvgHelper * Removed erroneous div * PR fixes * Moved thumbnail code into graph file and migrated ANOTHER svg Co-authored-by: Nikola Metulev <[email protected]>
1 parent 165072b commit 90faa5a

File tree

25 files changed

+3832
-305
lines changed

25 files changed

+3832
-305
lines changed

‎docs/preview/mgt-person-card.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# MgtPersonCard Component
2+
3+
The Person Card has been heavily redesigned to pack in even more Graph features. In V2, the MgtPersonCard includes sections for:
4+
5+
* Section Overview with a Teams quick messenger and compact views for each other section.
6+
* Contact details - email, phone, office, etc.
7+
* Organization - Managers and coworkers
8+
* Emails - where both users are participants
9+
* Shared files *(work in progress)*
10+
* Personal profile - languages, education, interests, birthday, etc.
11+
12+
## Additional Details (work in progress)
13+
14+
The V1 Person Card provided an additional details area below the contact details to show custom third-party content. Going forward, we've expanded this small area into an entire custom section. The custom section tab will be hidden by default, but when the additional details templates are provided a new section will appear.
15+
16+
Specify the following templates to light up a custom section:
17+
18+
| Data type | Data context | Description |
19+
| - | - | - |
20+
| additional-details-compact | `person`: The person details object | The template used to specify the compact view of the custom section in the overview section. |
21+
| additional-details-full | `person`: The person details object | The template used to specify the full view of the custom section. |
22+
| additional-details-icon | `person`: The person details object | The template used to specify the tab icon of the custom section. |
23+
24+
## Templates (work in progress)
25+
26+
The Person-Card component uses [templates](../templates.md) that allow you to add or replace portions of the component. To specify a template, include a `<template>` element inside of a component and set the `data-type` value to one of the following.
27+
28+
| Data type | Data context | Description |
29+
| - | - | - |
30+
| no-data | null | The template used when no data is available.
31+
| default | `person`: The person details object <br> `personImage`: The URL of the image | The default template replaces the entire component with your own. |
32+
| person-details | `person`: The person details object <br> `personImage`: The URL of the image | The template used to render the top part of the person card. |
33+
| contact-section | `person`: The person details object | The template used to override the contact details section. |
34+
| organization-section | `person`: The person details object | The template used to override the organization section. |
35+
| messages-section | `person`: The person details object | The template used to override the email messages section. |
36+
| files-section | `person`: The person details object | The template used to override the files section. |
37+
| profile-section | `person`: The person details object | The template used to override the profile section. |

‎packages/mgt-react/src/generated/react.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,9 @@ export type PeopleProps = {
7878
}
7979

8080
export type PersonCardProps = {
81+
personDetails?: IDynamicPerson;
8182
personQuery?: string;
8283
userId?: string;
83-
personDetails?: IDynamicPerson;
8484
personImage?: string;
8585
fetchImage?: boolean;
8686
isExpanded?: boolean;

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

Lines changed: 199 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,52 @@
88
@import '../../styles/shared-styles.scss';
99
@import '../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
1010

11-
$person-card-display-name-font-size: var(--person-card-display-name-font-size, 27.3103px);
12-
$person-card-title-font-size: var(--person-card-title-font-size, 18.2069px);
13-
$person-card-subtitle-font-size: var(--person-card-subtitle-font-size, 15.1724px);
11+
$person-card-display-name-font-size: var(--person-card-display-name-font-size, 20px);
12+
$person-card-title-font-size: var(--person-card-title-font-size, 14px);
13+
$person-card-subtitle-font-size: var(--person-card-subtitle-font-size, 12px);
1414
$person-card-details-title-font-size: var(--person-card-details-title-font-size, 14px);
1515
$person-card-details-item-font-size: var(--person-card-details-item-font-size, 15px);
1616
$person-card-display-name-color: var(--person-card-display-name-color, #333333);
17-
$person-card-title-color: var(--person-card-title-color, #767676);
18-
$person-card-subtitle-color: var(--person-card-subtitle-color, #767676);
17+
$person-card-title-color: var(--person-card-title-color, #797775);
18+
$person-card-subtitle-color: var(--person-card-subtitle-color, #797775);
1919
$person-card-details-title-color: var(--person-card-details-title-color, #000000);
2020
$person-card-details-item-color: var(--person-card-details-item-color, #201f1e);
2121
$person-card-background-color: var(--person-card-background-color, #ffffff);
2222

23-
:host .root {
24-
position: relative;
23+
:host {
2524
background: $person-card-background-color;
2625
width: var(--mgt-flyout-set-width, 340px);
2726
font-family: var(--default-font-family);
27+
overflow: hidden;
2828

29-
.person-details-container {
29+
.nav {
3030
display: flex;
31-
padding: 18px 14px;
31+
32+
.nav__back {
33+
padding: 10px;
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
38+
svg {
39+
fill: #0078d4;
40+
}
41+
42+
&:hover {
43+
cursor: pointer;
44+
45+
svg {
46+
fill: #000000;
47+
}
48+
}
49+
}
50+
}
51+
52+
.person-details-container {
53+
display: grid;
54+
grid-template-rows: auto 1fr;
55+
grid-template-columns: auto 1fr;
56+
padding: 15px 15px 20px 15px;
3257

3358
.person-image {
3459
--presence-background-color: var(--person-card-background-color, #ffffff);
@@ -39,54 +64,31 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
3964
.details {
4065
margin-left: 14px;
4166
line-height: 1.15;
42-
display: grid;
67+
display: flex;
68+
flex-direction: column;
4369
position: relative;
4470
overflow: hidden;
45-
text-overflow: ellipsis;
71+
text-overflow: ellipse;
4672
white-space: nowrap;
4773
background-color: transparent;
4874
width: 100%;
75+
margin-top: 5px;
76+
4977
.display-name {
5078
font-size: $person-card-display-name-font-size;
5179
color: $person-card-display-name-color;
5280
&::after {
53-
pointer-events: none;
5481
content: '';
5582
position: absolute;
5683
width: 100%;
5784
height: 100%;
5885
top: 0;
5986
right: 0;
60-
background-image: linear-gradient(
61-
to right,
62-
rgba(255, 255, 255, 0) 0%,
63-
rgba(255, 255, 255, 0) 80%,
64-
$person-card-background-color 100%
65-
);
66-
background-image: -moz-linear-gradient(
67-
left,
68-
rgba(255, 255, 255, 0) 0%,
69-
rgba(255, 255, 255, 0) 80%,
70-
$person-card-background-color 100%
71-
);
72-
background-image: -o-linear-gradient(
73-
left,
74-
rgba(255, 255, 255, 0) 0%,
75-
rgba(255, 255, 255, 0) 80%,
76-
$person-card-background-color 100%
77-
);
78-
background-image: -ms-linear-gradient(
79-
left,
80-
rgba(255, 255, 255, 0) 0%,
81-
rgba(255, 255, 255, 0) 80%,
82-
$person-card-background-color 100%
83-
);
84-
background-image: -webkit-linear-gradient(
85-
left,
86-
rgba(255, 255, 255, 0) 0%,
87-
rgba(255, 255, 255, 0) 80%,
88-
$person-card-background-color 100%
89-
);
87+
background: linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
88+
background: -moz-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
89+
background: -o-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
90+
background: -ms-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
91+
background: -webkit-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
9092
}
9193
}
9294

@@ -99,32 +101,52 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
99101
font-size: $person-card-subtitle-font-size;
100102
color: $person-card-subtitle-color;
101103
}
104+
}
102105

103-
.base-icons {
104-
margin-top: 14px;
106+
.base-icons {
107+
display: flex;
108+
-webkit-align-items: center;
109+
align-items: center;
110+
max-width: 120px;
111+
112+
.icon {
105113
display: flex;
106-
-webkit-align-items: center;
107114
align-items: center;
108-
max-width: 120px;
115+
cursor: pointer;
116+
font-size: 12px;
117+
white-space: nowrap;
109118

110-
.icon {
111-
margin: 0 22px 0 0;
112-
cursor: pointer;
119+
&:not(:last-child) {
120+
margin-right: 20px;
113121
}
114-
.icon:hover {
115-
opacity: 0.6;
122+
123+
svg {
124+
fill: #605e5c;
116125
}
126+
127+
span {
128+
margin-left: 8px;
129+
color: #0078d4;
130+
}
131+
}
132+
.icon:hover {
133+
color: #004578;
117134
}
118135
}
119136
}
120137

121138
.expanded-details-container {
139+
display: flex;
140+
flex-direction: column;
141+
position: relative;
142+
122143
.expanded-details-button {
123144
display: flex;
124145
justify-content: center;
125146
align-items: center;
126147
height: 28px;
127-
background: rgba(196, 196, 196, 0.1);
148+
background: #f3f2f1;
149+
border-top: 1px solid rgba(196, 196, 196, 0.4);
128150
.expanded-details-svg {
129151
margin-bottom: 3px;
130152
}
@@ -133,8 +155,7 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
133155
background-color: rgba(0, 0, 0, 0.068);
134156
}
135157
.expanded-details-info {
136-
margin: 0 0 0 20px;
137-
padding-bottom: 18px;
158+
padding: 18px;
138159
display: flex;
139160
flex-direction: column;
140161

@@ -181,8 +202,131 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
181202
}
182203
.section-divider {
183204
width: 96%;
184-
height: 1px;
205+
min-height: 1px;
185206
background: #eaeaea;
207+
align-self: center;
208+
}
209+
}
210+
211+
.section-nav {
212+
display: flex;
213+
padding: 0 14px;
214+
border-bottom: 1px solid #edebe9;
215+
216+
.section-nav__icon {
217+
all: initial;
218+
box-sizing: border-box;
219+
width: 48px;
220+
padding: 12px;
221+
display: flex;
222+
align-items: center;
223+
justify-content: center;
224+
border-bottom: 2px solid transparent;
225+
margin-bottom: -1px;
226+
cursor: pointer;
227+
228+
svg {
229+
width: 20px;
230+
height: 20px;
231+
fill: #605e5c;
232+
}
233+
234+
&:hover {
235+
background: #f3f2f1;
236+
border-color: #a19f9d;
237+
}
238+
239+
&.active {
240+
border-color: #0078d4;
241+
242+
svg {
243+
fill: #0078d4;
244+
}
245+
}
246+
}
247+
}
248+
249+
.section-host {
250+
max-height: 600px;
251+
overflow-y: auto;
252+
overflow-x: hidden;
253+
}
254+
255+
.quick-message {
256+
display: flex;
257+
flex-direction: row;
258+
padding: 8px 10px;
259+
border-bottom: 1px solid #e8e8e8;
260+
261+
.quick-message__input {
262+
flex-grow: 1;
263+
padding-left: 8px;
264+
border: 2px solid #f3f2f1;
265+
border-radius: 2px;
266+
background-color: #f3f2f1;
267+
}
268+
269+
.quick-message__send {
270+
all: initial;
271+
height: 32px;
272+
width: 32px;
273+
display: flex;
274+
align-items: center;
275+
justify-content: center;
276+
277+
svg {
278+
fill: #605e5c;
279+
height: 18px;
280+
width: 18px;
281+
}
282+
283+
&:hover {
284+
svg {
285+
fill: #000000;
286+
}
287+
}
288+
}
289+
}
290+
291+
.sections {
292+
.section {
293+
padding: 14px 0;
294+
display: flex;
295+
flex-direction: column;
296+
position: relative;
297+
298+
&:not(:last-child) {
299+
border-bottom: 1px solid #eaeaea;
300+
}
301+
302+
.section__header {
303+
display: flex;
304+
flex-direction: row;
305+
padding: 0 20px;
306+
}
307+
308+
.section__title {
309+
flex-grow: 1;
310+
color: #323130;
311+
font-size: 14px;
312+
font-weight: 600;
313+
}
314+
315+
.section__show-more {
316+
color: #0078d4;
317+
font-size: 12px;
318+
font-weight: 600;
319+
align-self: center;
320+
321+
&:hover {
322+
cursor: pointer;
323+
color: #004578;
324+
}
325+
}
326+
327+
.section__content {
328+
margin-top: 14px;
329+
}
186330
}
187331
}
188332
}

0 commit comments

Comments
 (0)