Skip to content

Commit c16f6c1

Browse files
vogtnvogtn
authored
Merge branch 'master' into nivogt/people-picker-flyout
2 parents be7caad + cb5ddd3 commit c16f6c1

File tree

4 files changed

+185
-90
lines changed

4 files changed

+185
-90
lines changed

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

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,16 +111,60 @@ mgt-people-picker .people-selected-list {
111111
padding-left: 8px;
112112
font-style: normal;
113113
font-weight: normal;
114+
overflow: hidden;
115+
}
116+
117+
.overflow-gradient,
118+
mgt-people-picker .overflow-gradient {
119+
content: '';
120+
position: absolute;
121+
width: 15px;
122+
height: 90%;
123+
top: 0;
124+
right: 22px;
125+
background-image: linear-gradient(
126+
to right,
127+
rgba(255, 255, 255, 0) 0%,
128+
rgba(255, 255, 255, 0) 60%,
129+
rgb(241, 241, 241) 100%
130+
);
131+
background-image: -moz-linear-gradient(
132+
left,
133+
rgba(255, 255, 255, 0) 0%,
134+
rgba(255, 255, 255, 0) 60%,
135+
rgb(241, 241, 241) 100%
136+
);
137+
background-image: -o-linear-gradient(
138+
left,
139+
rgba(255, 255, 255, 0) 0%,
140+
rgba(255, 255, 255, 0) 60%,
141+
rgb(241, 241, 241) 100%
142+
);
143+
background-image: -ms-linear-gradient(
144+
left,
145+
rgba(255, 255, 255, 0) 0%,
146+
rgba(255, 255, 255, 0) 60%,
147+
rgb(241, 241, 241) 100%
148+
);
149+
background-image: -webkit-linear-gradient(
150+
left,
151+
rgba(255, 255, 255, 0) 0%,
152+
rgba(255, 255, 255, 0) 60%,
153+
rgb(241, 241, 241) 100%
154+
);
114155
}
156+
115157
.CloseIcon,
116158
mgt-people-picker .CloseIcon {
117159
line-height: normal;
118160
font-family: 'FabricMDL2Icons';
119161
padding-right: 8px;
120-
padding-left: 4px;
121162
margin-top: 0px;
122163
cursor: pointer;
123164
color: $font-color;
165+
background-color: rgb(241, 241, 241);
166+
position: absolute;
167+
right: 0px;
124168
}
125169

126170
:host .people-person,
@@ -133,6 +177,8 @@ mgt-people-picker .people-person {
133177
height: 24px;
134178
white-space: nowrap;
135179
text-overflow: ellipsis;
180+
overflow: hidden;
181+
position: relative;
136182
}
137183

138184
:host .list-person,
@@ -230,6 +276,7 @@ mgt-person {
230276
--color: $font-color;
231277
color: $font-color;
232278
margin-bottom: 1px;
279+
margin-right: 26px;
233280
}
234281

235282
:host .search-error-text,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -439,6 +439,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
439439
<div class="people-person">
440440
${this.renderTemplate('selected-person', { person }, `selected-${person.id}`) ||
441441
this.renderSelectedPerson(person)}
442+
443+
<div class="overflow-gradient"></div>
442444
<div class="CloseIcon" @click="${e => this.removePerson(person, e)}">\uE711</div>
443445
</div>
444446
`

‎src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss‎

Lines changed: 110 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,18 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
3737
position: relative;
3838

3939
.input-wrapper {
40+
font-family: var(--default-font-family, 'Segoe UI');
4041
display: flex;
41-
order: 2;
42+
flex-wrap: wrap;
43+
align-items: center;
44+
padding: 4px 10px;
45+
position: relative;
4246
background-color: $input-background-color;
4347
font-size: 14px;
4448
color: $font-color;
49+
min-height: 29px;
4550
line-height: 19px;
4651
cursor: text;
47-
padding-bottom: 5px;
4852
border: $input-border;
4953
border-bottom: $input-border-bottom;
5054
border-left: $input-border-left;
@@ -58,98 +62,130 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
5862
border-color: $input-focus-color;
5963
}
6064

61-
.search-icon {
62-
display: inline-block;
63-
padding-top: 9px;
64-
padding-left: 9px;
65+
.selected-team {
66+
padding-right: 10px;
67+
border: none;
68+
display: flex;
69+
position: relative;
70+
overflow: hidden;
71+
text-overflow: ellipsis;
72+
white-space: nowrap;
73+
align-items: center;
74+
height: 24px;
75+
white-space: nowrap;
76+
overflow: hidden;
77+
text-overflow: ellipsis;
78+
.arrow {
79+
margin-left: 8px;
80+
margin-right: 8px;
81+
}
82+
.selected-team-name {
83+
font-weight: bold;
84+
}
6585
}
6686

67-
.channel-chosen-list {
68-
min-height: 29px;
87+
.search-wrapper {
6988
display: flex;
7089
flex-wrap: nowrap;
71-
vertical-align: middle;
72-
margin: 0 0 0 0;
73-
list-style-type: none;
74-
padding-left: 5px;
90+
align-items: center;
91+
margin-right: 30px;
92+
}
93+
94+
.team-chosen-input {
95+
display: inline-block;
96+
border: none;
97+
line-height: normal;
98+
outline: none;
7599
font-family: var(--default-font-family, 'Segoe UI');
76100
font-style: normal;
77101
font-weight: normal;
102+
font-size: 14px;
103+
line-height: 19px;
104+
background-color: transparent;
78105
color: $font-color;
79-
.selected-team {
80-
padding-top: 1px;
81-
padding-right: 6px;
82-
border: none;
83-
display: flex;
84-
margin: 4px 5px 0 0;
85-
align-items: center;
86-
height: 24px;
87-
white-space: nowrap;
88-
overflow: hidden;
89-
text-overflow: ellipsis;
90-
.arrow {
91-
margin-left: 8px;
92-
margin-right: 8px;
93-
}
94-
.selected-team-name {
95-
font-weight: bold;
96-
}
97-
}
98-
99-
.team-chosen-input {
100-
position: relative;
101-
border: none;
102-
line-height: normal;
103-
outline: none;
104-
font-family: var(--default-font-family, 'Segoe UI');
105-
font-style: normal;
106-
font-weight: normal;
107-
font-size: 14px;
108-
line-height: 19px;
109-
background-color: transparent;
110-
color: $font-color;
111-
padding-left: 5px;
112-
&::placeholder {
113-
color: $placeholder-default-color;
114-
}
115-
&:focus::placeholder {
116-
color: $placeholder-focus-color;
117-
}
118-
}
119-
120-
.close-icon {
121-
display: inline-block;
122-
position: absolute;
123-
right: 0;
124-
padding: 10px;
125-
line-height: normal;
126-
font-family: 'FabricMDL2Icons';
127-
margin-bottom: 1px;
128-
cursor: pointer;
106+
padding-left: 5px;
107+
&::placeholder {
129108
color: $placeholder-default-color;
130-
&:hover {
131-
color: $font-color;
132-
}
133109
}
134-
135-
.search-icon {
136-
padding-top: 9px;
137-
padding-left: 5px;
138-
font-family: 'FabricMDL2Icons';
139-
color: $accent-color;
110+
&:focus::placeholder {
111+
color: $placeholder-focus-color;
140112
}
141113
}
114+
.team-chosen-input[contenteditable]:empty::after {
115+
content: attr(data-placeholder);
116+
display: inline-block;
117+
color: $placeholder-default-color;
118+
}
119+
.team-chosen-input[contenteditable]:empty:focus::after {
120+
content: attr(data-placeholder);
121+
color: $placeholder-focus-color;
122+
}
142123

143-
.input-search {
144-
margin: 7px 2px 0px 0px;
124+
.search-icon {
125+
align-self: flex-start;
126+
font-family: 'FabricMDL2Icons';
127+
color: $accent-color;
145128
}
146129

147130
.input-search-start {
148-
margin: 7px 3px 0px 0px;
149131
line-height: normal;
150132
margin-inline-start: 0px;
151133
margin-inline-end: 0px;
152134
}
135+
136+
&::after {
137+
content: '';
138+
position: absolute;
139+
width: 100%;
140+
height: 90%;
141+
top: 2px;
142+
right: 2px;
143+
background-image: linear-gradient(
144+
to right,
145+
rgba(255, 255, 255, 0) 0%,
146+
rgba(255, 255, 255, 0) 80%,
147+
$input-background-color 100%
148+
);
149+
background-image: -moz-linear-gradient(
150+
left,
151+
rgba(255, 255, 255, 0) 0%,
152+
rgba(255, 255, 255, 0) 80%,
153+
$input-background-color 100%
154+
);
155+
background-image: -o-linear-gradient(
156+
left,
157+
rgba(255, 255, 255, 0) 0%,
158+
rgba(255, 255, 255, 0) 80%,
159+
$input-background-color 100%
160+
);
161+
background-image: -ms-linear-gradient(
162+
left,
163+
rgba(255, 255, 255, 0) 0%,
164+
rgba(255, 255, 255, 0) 80%,
165+
$input-background-color 100%
166+
);
167+
background-image: -webkit-linear-gradient(
168+
left,
169+
rgba(255, 255, 255, 0) 0%,
170+
rgba(255, 255, 255, 0) 80%,
171+
$input-background-color 100%
172+
);
173+
}
174+
}
175+
176+
.close-icon {
177+
display: inline-block;
178+
position: absolute;
179+
right: 10px;
180+
top: 12px;
181+
line-height: normal;
182+
font-family: 'FabricMDL2Icons';
183+
cursor: pointer;
184+
color: $placeholder-default-color;
185+
background-color: $input-background-color;
186+
&:hover {
187+
color: $font-color;
188+
}
153189
}
154190

155191
.dropdown {

0 commit comments

Comments
 (0)