Skip to content

Commit fae1f4e

Browse files
Merge pull request #133 from Detaysoft/meeting-message-title
Meeting message avatar limit has been added.
2 parents 374ab5e + 8360d31 commit fae1f4e

4 files changed

Lines changed: 90 additions & 8 deletions

File tree

example/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,9 @@ export class App extends Component {
127127
title: loremIpsum({ count: 2, units: 'words' }),
128128
avatars: Array(this.token() + 2).fill(1).map(x => ({
129129
src: `data:image/png;base64,${this.photo()}`,
130+
title: "react, rce"
130131
})),
132+
avatarsLimit: 5,
131133
},
132134
record: {
133135
avatar: `data:image/png;base64,${this.photo()}`,

src/MeetingMessage/MeetingMessage.css

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,74 @@
229229

230230
.rce-mitem-avatar {
231231
padding: 0 3px 0 0;
232+
display: flex;
233+
}
234+
235+
.rce-mitem-tooltip {
236+
display: inline;
237+
position: relative;
238+
}
239+
240+
.rce-mitem-tooltip-text {
241+
margin: 5px
242+
}
243+
244+
.rce-mitem-tooltip-text:after{
245+
content: "";
246+
left: 15%;
247+
top: 29px;
248+
position: absolute;
249+
border-left: 8px solid transparent;
250+
border-right: 8px solid transparent;
251+
border-bottom: 11px solid #444;
252+
opacity: 0;
253+
transition: opacity 0.8s linear 0.2s;
254+
}
255+
256+
.rce-mitem-tooltip[tooltip]:after {
257+
display: flex;
258+
justify-content: center;
259+
background: #444;
260+
border-radius: 8px;
261+
color: #fff;
262+
content: attr(tooltip);
263+
font-size: 14px;
264+
padding: 5px;
265+
position: absolute;
266+
opacity: 0;
267+
transition: opacity 0.8s linear 0.2s;
268+
min-width: 415px;
269+
max-width: 415px;
270+
top: 40px;
271+
right: -13px;
272+
z-index: 1;
273+
}
274+
275+
.rce-mitem-tooltip-text:hover:after {
276+
opacity: 1;
277+
transition: opacity 0.8s linear;
278+
}
279+
280+
.rce-mitem-tooltip[tooltip]:hover:after {
281+
opacity: 1;
282+
transition: opacity 0.8s linear 0.1s;
283+
}
284+
285+
.rce-mitem-tooltip[tooltip]:hover .rce-mitem-tooltip-text:after {
286+
opacity: 1;
287+
}
288+
289+
.rce-mitem-length {
290+
color: #fff;
291+
font-size: 14px;
292+
background: #e48989;
293+
display: flex;
294+
align-items: center;
295+
text-align: center;
296+
width: 25px;
297+
height: 25px;
298+
display: flex;
299+
border-radius: 50%;
232300
}
233301

234302
.rce-mitem-avatar img {

src/MeetingMessage/MeetingMessage.js

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -165,13 +165,25 @@ export class MeetingMessage extends Component {
165165
</div>
166166
<div className="rce-mitem-avatar-content">
167167
{
168-
x.event.avatars &&
169-
x.event.avatars.map((x, i) => x instanceof Avatar ? x : (
170-
<div key={i} className="rce-mitem-avatar">
171-
<Avatar
172-
src={x.src}/>
173-
</div>
174-
))
168+
<div className="rce-mitem-avatar">
169+
{
170+
x.event.avatars &&
171+
x.event.avatars.slice(0, x.event.avatarsLimit).map((x, i) => x instanceof Avatar ? x : (
172+
<Avatar
173+
key={i}
174+
src={x.src} />
175+
))
176+
}
177+
{
178+
x.event.avatars && x.event.avatarsLimit &&
179+
x.event.avatars.length > x.event.avatarsLimit &&
180+
<div className='rce-mitem-length rce-mitem-tooltip' tooltip={x.event.avatars.slice(x.event.avatarsLimit, x.event.avatars.length).map(avatar => avatar.title).join(",")}>
181+
<span className="rce-mitem-tooltip-text" >
182+
{'+' + (x.event.avatars.length - x.event.avatarsLimit)}
183+
</span>
184+
</div>
185+
}
186+
</div>
175187
}
176188
</div>
177189
{

src/MessageBox/MessageBox.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.rce-container-mbox {
22
flex-direction: column;
33
display: block;
4-
overflow: hidden;
4+
overflow-x: hidden;
55
min-width: 200px;
66
}
77

0 commit comments

Comments
 (0)