Skip to content

Commit 8a4e759

Browse files
shweaver-MSFTelisenyangElise Yangvogtnnmetulev
authored
Merging in release 1.3.2 (#526)
* add person card with presence sample to mgt.dev (#498) Co-authored-by: Elise Yang <[email protected]> * mgt-teams-channel-picker changes event to @keyup for input change (#494) * changes event to @keyup for input change * escape search if input value hasn't changed Co-authored-by: Nikola Metulev <[email protected]> * fixed bug where msal options are not passed to msal in the teams provider (#497) Co-authored-by: Shane Weaver <[email protected]> * handling picker y-overflow in ie11 (#501) * Add background color custom css property for people list items (#503) * Add background color custom css property for people list items * Update css var name * Change name for css var in people picker * Update css var in story and ts file * channel picker keydown enter with no new line (#506) * Add background color custom css property for people list items * Update enter keydown logic to prevent new line * Merge branches * Merge branches * allows for scrolling yoverflow (#507) * added msal 1.3.2 (#508) * Removed license shield from readme (#500) * Authority mgtteamsprovider simon (#510) * Removed license shield from readme (#500) * Added authority parameter to mgt-teams-provider * Fixed linting issues Co-authored-by: Shane Weaver <[email protected]> Co-authored-by: Ågren <[email protected]> Co-authored-by: Nikola Metulev <[email protected]> * polyfills and config necessary for spfx ie11 support (#514) * Add css custom property to change mgt person background color (#513) * Add css custom property to change mgt person background color and presence colors * Add background color css var to mgt-person-card Co-authored-by: Shane Weaver <[email protected]> * Fix indentation (#517) Co-authored-by: Nikola Metulev <[email protected]> * Updated to version 1.3.1 (#516) * prevents graident from overflowing into buttons (#521) * Update mgt-person background color css custom property (#520) * Fix for people-picker background color * Update background color css property to only apply to presence * Add comment to ts file * update css Co-authored-by: Nikola Metulev <[email protected]> * Version updated to 1.3.2 * Updated package-lock Co-authored-by: Elise Yang <[email protected]> Co-authored-by: Elise Yang <[email protected]> Co-authored-by: Nicolas Vogt <[email protected]> Co-authored-by: Nikola Metulev <[email protected]> Co-authored-by: Beth Pan <[email protected]> Co-authored-by: Simon Ågren <[email protected]> Co-authored-by: Ågren <[email protected]>
1 parent 5a339d4 commit 8a4e759

File tree

6 files changed

+558
-560
lines changed

6 files changed

+558
-560
lines changed

‎packages/mgt/package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/mgt/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@microsoft/mgt",
3-
"version": "1.3.1",
3+
"version": "1.3.2",
44
"description": "The Microsoft Graph Toolkit",
55
"keywords": [
66
"microsoft graph",

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

Lines changed: 181 additions & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -5,185 +5,184 @@
55
* -------------------------------------------------------------------------------------------
66
*/
77

8-
@import '../../styles/shared-styles.scss';
9-
@import '../../../node_modules/office-ui-fabric-core/dist/sass/References';
10-
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);
14-
$person-card-details-title-font-size: var(--person-card-details-title-font-size, 14px);
15-
$person-card-details-item-font-size: var(--person-card-details-item-font-size, 15px);
16-
$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);
19-
$person-card-details-title-color: var(--person-card-details-title-color, #000000);
20-
$person-card-details-item-color: var(--person-card-details-item-color, #201f1e);
21-
$person-card-background-color: var(--person-card-background-color, #ffffff);
22-
23-
:host .root {
24-
position: relative;
25-
background: $person-card-background-color;
26-
width: var(--mgt-flyout-set-width, 340px);
27-
font-family: var(--default-font-family);
28-
29-
.person-details-container {
30-
display: flex;
31-
padding: 18px 14px;
32-
33-
mgt-person {
34-
--background-color: var(--person-card-background-color, #ffffff);
35-
36-
&.person-image {
37-
--avatar-size: 75px;
38-
}
39-
}
40-
41-
.details {
42-
margin-left: 14px;
43-
line-height: 1.15;
44-
display: grid;
45-
position: relative;
46-
overflow: hidden;
47-
text-overflow: ellipsis;
48-
white-space: nowrap;
49-
background-color: transparent;
50-
width: 100%;
51-
.display-name {
52-
font-size: $person-card-display-name-font-size;
53-
color: $person-card-display-name-color;
54-
&::after {
55-
content: '';
56-
position: absolute;
57-
width: 100%;
58-
height: 100%;
59-
top: 0;
60-
right: 0;
61-
background-image: linear-gradient(
62-
to right,
63-
rgba(255, 255, 255, 0) 0%,
64-
rgba(255, 255, 255, 0) 80%,
65-
$person-card-background-color 100%
66-
);
67-
background-image: -moz-linear-gradient(
68-
left,
69-
rgba(255, 255, 255, 0) 0%,
70-
rgba(255, 255, 255, 0) 80%,
71-
$person-card-background-color 100%
72-
);
73-
background-image: -o-linear-gradient(
74-
left,
75-
rgba(255, 255, 255, 0) 0%,
76-
rgba(255, 255, 255, 0) 80%,
77-
$person-card-background-color 100%
78-
);
79-
background-image: -ms-linear-gradient(
80-
left,
81-
rgba(255, 255, 255, 0) 0%,
82-
rgba(255, 255, 255, 0) 80%,
83-
$person-card-background-color 100%
84-
);
85-
background-image: -webkit-linear-gradient(
86-
left,
87-
rgba(255, 255, 255, 0) 0%,
88-
rgba(255, 255, 255, 0) 80%,
89-
$person-card-background-color 100%
90-
);
91-
}
92-
}
93-
94-
.job-title {
95-
font-size: $person-card-title-font-size;
96-
color: $person-card-title-color;
97-
}
98-
99-
.department {
100-
font-size: $person-card-subtitle-font-size;
101-
color: $person-card-subtitle-color;
102-
}
103-
104-
.base-icons {
105-
margin-top: 14px;
106-
display: flex;
107-
-webkit-align-items: center;
108-
align-items: center;
109-
max-width: 120px;
110-
111-
.icon {
112-
margin: 0 22px 0 0;
113-
cursor: pointer;
114-
}
115-
.icon:hover {
116-
opacity: 0.6;
117-
}
118-
}
119-
}
120-
}
121-
122-
.expanded-details-container {
123-
.expanded-details-button {
124-
display: flex;
125-
justify-content: center;
126-
align-items: center;
127-
height: 28px;
128-
background: rgba(196, 196, 196, 0.1);
129-
.expanded-details-svg {
130-
margin-bottom: 3px;
131-
}
132-
}
133-
.expanded-details-button:hover {
134-
background-color: rgba(0, 0, 0, 0.068);
135-
}
136-
.expanded-details-info {
137-
margin: 0 0 0 20px;
138-
padding-bottom: 18px;
139-
display: flex;
140-
flex-direction: column;
141-
142-
.contact-text {
143-
margin: 0 0 24px 0;
144-
font-weight: 600;
145-
font-size: $person-card-details-title-font-size;
146-
color: $person-card-details-title-color;
147-
}
148-
149-
.icons {
150-
line-height: normal;
151-
font-style: normal;
152-
font-weight: normal;
153-
font-size: $person-card-details-item-font-size;
154-
color: $person-card-details-item-color;
155-
text-align: left;
156-
157-
.details-icon {
158-
margin: 0 0 10px 0;
159-
display: flex;
160-
flex-direction: row;
161-
align-items: center;
162-
}
163-
}
164-
.data {
165-
display: block;
166-
margin: 0 0 0px 10px;
167-
white-space: nowrap;
168-
overflow: hidden;
169-
text-overflow: ellipsis;
170-
width: 280px;
171-
}
172-
.normal-subtitle {
173-
padding-top: 2px;
174-
}
175-
.link-subtitle {
176-
color: #3078cd;
177-
cursor: pointer;
178-
}
179-
.link-subtitle:hover {
180-
opacity: 0.6;
181-
}
182-
}
183-
.section-divider {
184-
width: 96%;
185-
height: 1px;
186-
background: #eaeaea;
187-
}
188-
}
189-
}
8+
@import '../../styles/shared-styles.scss';
9+
@import '../../../node_modules/office-ui-fabric-core/dist/sass/References';
10+
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);
14+
$person-card-details-title-font-size: var(--person-card-details-title-font-size, 14px);
15+
$person-card-details-item-font-size: var(--person-card-details-item-font-size, 15px);
16+
$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);
19+
$person-card-details-title-color: var(--person-card-details-title-color, #000000);
20+
$person-card-details-item-color: var(--person-card-details-item-color, #201f1e);
21+
$person-card-background-color: var(--person-card-background-color, #ffffff);
22+
23+
:host .root {
24+
position: relative;
25+
background: $person-card-background-color;
26+
width: var(--mgt-flyout-set-width, 340px);
27+
font-family: var(--default-font-family);
28+
29+
.person-details-container {
30+
display: flex;
31+
padding: 18px 14px;
32+
33+
mgt-person {
34+
&.person-image {
35+
--avatar-size: 75px;
36+
}
37+
}
38+
39+
.details {
40+
margin-left: 14px;
41+
line-height: 1.15;
42+
display: grid;
43+
position: relative;
44+
overflow: hidden;
45+
text-overflow: ellipsis;
46+
white-space: nowrap;
47+
background-color: transparent;
48+
width: 100%;
49+
.display-name {
50+
font-size: $person-card-display-name-font-size;
51+
color: $person-card-display-name-color;
52+
&::after {
53+
pointer-events: none;
54+
content: '';
55+
position: absolute;
56+
width: 100%;
57+
height: 100%;
58+
top: 0;
59+
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+
);
90+
}
91+
}
92+
93+
.job-title {
94+
font-size: $person-card-title-font-size;
95+
color: $person-card-title-color;
96+
}
97+
98+
.department {
99+
font-size: $person-card-subtitle-font-size;
100+
color: $person-card-subtitle-color;
101+
}
102+
103+
.base-icons {
104+
margin-top: 14px;
105+
display: flex;
106+
-webkit-align-items: center;
107+
align-items: center;
108+
max-width: 120px;
109+
110+
.icon {
111+
margin: 0 22px 0 0;
112+
cursor: pointer;
113+
}
114+
.icon:hover {
115+
opacity: 0.6;
116+
}
117+
}
118+
}
119+
}
120+
121+
.expanded-details-container {
122+
.expanded-details-button {
123+
display: flex;
124+
justify-content: center;
125+
align-items: center;
126+
height: 28px;
127+
background: rgba(196, 196, 196, 0.1);
128+
.expanded-details-svg {
129+
margin-bottom: 3px;
130+
}
131+
}
132+
.expanded-details-button:hover {
133+
background-color: rgba(0, 0, 0, 0.068);
134+
}
135+
.expanded-details-info {
136+
margin: 0 0 0 20px;
137+
padding-bottom: 18px;
138+
display: flex;
139+
flex-direction: column;
140+
141+
.contact-text {
142+
margin: 0 0 24px 0;
143+
font-weight: 600;
144+
font-size: $person-card-details-title-font-size;
145+
color: $person-card-details-title-color;
146+
}
147+
148+
.icons {
149+
line-height: normal;
150+
font-style: normal;
151+
font-weight: normal;
152+
font-size: $person-card-details-item-font-size;
153+
color: $person-card-details-item-color;
154+
text-align: left;
155+
156+
.details-icon {
157+
margin: 0 0 10px 0;
158+
display: flex;
159+
flex-direction: row;
160+
align-items: center;
161+
}
162+
}
163+
.data {
164+
display: block;
165+
margin: 0 0 0px 10px;
166+
white-space: nowrap;
167+
overflow: hidden;
168+
text-overflow: ellipsis;
169+
width: 280px;
170+
}
171+
.normal-subtitle {
172+
padding-top: 2px;
173+
}
174+
.link-subtitle {
175+
color: #3078cd;
176+
cursor: pointer;
177+
}
178+
.link-subtitle:hover {
179+
opacity: 0.6;
180+
}
181+
}
182+
.section-divider {
183+
width: 96%;
184+
height: 1px;
185+
background: #eaeaea;
186+
}
187+
}
188+
}

0 commit comments

Comments
 (0)