Skip to content

Commit cb5ddd3

Browse files
nmetulevnmetulev
authored
Merge pull request #488 from microsoftgraph/bethpan/more-channelpicker-fixes
Fix bug for channel picker again :D
2 parents c6c2fb5 + 0b3e20a commit cb5ddd3

File tree

4 files changed

+184
-90
lines changed

4 files changed

+184
-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
@@ -106,16 +106,60 @@ mgt-people-picker .people-selected-list {
106106
padding-left: 8px;
107107
font-style: normal;
108108
font-weight: normal;
109+
overflow: hidden;
110+
}
111+
112+
.overflow-gradient,
113+
mgt-people-picker .overflow-gradient {
114+
content: '';
115+
position: absolute;
116+
width: 15px;
117+
height: 90%;
118+
top: 0;
119+
right: 22px;
120+
background-image: linear-gradient(
121+
to right,
122+
rgba(255, 255, 255, 0) 0%,
123+
rgba(255, 255, 255, 0) 60%,
124+
rgb(241, 241, 241) 100%
125+
);
126+
background-image: -moz-linear-gradient(
127+
left,
128+
rgba(255, 255, 255, 0) 0%,
129+
rgba(255, 255, 255, 0) 60%,
130+
rgb(241, 241, 241) 100%
131+
);
132+
background-image: -o-linear-gradient(
133+
left,
134+
rgba(255, 255, 255, 0) 0%,
135+
rgba(255, 255, 255, 0) 60%,
136+
rgb(241, 241, 241) 100%
137+
);
138+
background-image: -ms-linear-gradient(
139+
left,
140+
rgba(255, 255, 255, 0) 0%,
141+
rgba(255, 255, 255, 0) 60%,
142+
rgb(241, 241, 241) 100%
143+
);
144+
background-image: -webkit-linear-gradient(
145+
left,
146+
rgba(255, 255, 255, 0) 0%,
147+
rgba(255, 255, 255, 0) 60%,
148+
rgb(241, 241, 241) 100%
149+
);
109150
}
151+
110152
.CloseIcon,
111153
mgt-people-picker .CloseIcon {
112154
line-height: normal;
113155
font-family: 'FabricMDL2Icons';
114156
padding-right: 8px;
115-
padding-left: 4px;
116157
margin-top: 0px;
117158
cursor: pointer;
118159
color: $font-color;
160+
background-color: rgb(241, 241, 241);
161+
position: absolute;
162+
right: 0px;
119163
}
120164

121165
:host .people-person,
@@ -128,6 +172,8 @@ mgt-people-picker .people-person {
128172
height: 24px;
129173
white-space: nowrap;
130174
text-overflow: ellipsis;
175+
overflow: hidden;
176+
position: relative;
131177
}
132178

133179
:host .list-person,
@@ -224,6 +270,7 @@ mgt-person {
224270
--color: $font-color;
225271
color: $font-color;
226272
margin-bottom: 1px;
273+
margin-right: 26px;
227274
}
228275

229276
:host .search-error-text,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -454,6 +454,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
454454
<div class="people-person">
455455
${this.renderTemplate('selected-person', { person }, `selected-${person.id}`) ||
456456
this.renderSelectedPerson(person)}
457+
<div class="overflow-gradient"></div>
457458
<div class="CloseIcon" @click="${() => this.removePerson(person)}">\uE711</div>
458459
</div>
459460
`

‎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)