Skip to content

Commit fe4c88f

Browse files
esracoskunesracoskun
committed
meetingMessage style edited
1 parent e3882ff commit fe4c88f

5 files changed

Lines changed: 81 additions & 17 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ import { MeetingMessage } from 'react-chat-elements'
189189
subject={'New Release'}
190190
title={'in ullamco'}
191191
date={new Date()}
192-
altTitle={'Commodo aliquip'}
192+
collapseTitle={'Commodo aliquip'}
193193
participants={[
194194
{
195195
id: '1',
@@ -233,7 +233,7 @@ import { MeetingMessage } from 'react-chat-elements'
233233
| subject | none | string | Meeting messagee |
234234
| title | none | string | Meeting title |
235235
| date | new Date() | Date | Meeting date |
236-
| altTitle | none | string | Meeting subtitle |
236+
| collapseTitle | none | string | Meeting subtitle |
237237
| participants | [] | array | Meeting participant array |
238238
| dataSource | [] | array | meeting list array |
239239
| onMeetingMessageClick | none | function | meeting message on click event (message(object) is returned) |

‎example/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export class App extends Component {
111111
subject: loremIpsum({ count: 2, units: 'words' }),
112112
title: loremIpsum({ count: 2, units: 'words' }),
113113
date: +new Date(),
114-
altTitle: loremIpsum({ count: 2, units: 'words' }),
114+
collapseTitle: loremIpsum({ count: 2, units: 'words' }),
115115
participants: Array(this.token() + 6).fill(1).map(x => ({
116116
id: parseInt(Math.random() * 10 % 6),
117117
title: loremIpsum({ count: 1, units: 'words' }),

‎src/MeetingMessage/MeetingMessage.css‎

Lines changed: 56 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
justify-content: center;
55
align-content: center;
66
padding-bottom: 13px;
7-
min-width: 500px;
8-
max-width: 500px;
7+
min-width: 425px;
8+
max-width: 425px;
99
}
1010

1111
.rce-mtmg {
@@ -19,6 +19,13 @@
1919
border-radius: 2px;
2020
}
2121

22+
.rce-mtmg-title {
23+
text-overflow: ellipsis;
24+
white-space: nowrap;
25+
overflow: hidden;
26+
width: 300px;
27+
}
28+
2229
.rce-mtmg-subject {
2330
text-align: start;
2431
display: inline-block;
@@ -54,7 +61,6 @@
5461
.rce-mtmg-item > svg {
5562
width: 23px;
5663
height: 23px;
57-
padding: 10px;
5864
}
5965

6066
.rce-mtmg-content {
@@ -83,14 +89,11 @@
8389
align-items: center;
8490
}
8591

86-
.rce-mtmg-bottom--tptitle > svg{
92+
.rce-mtmg-bottom--tptitle > svg,
93+
.rce-mtmg-body-bottom--bttitle > svg {
8794
color: #6264a7a1;
8895
}
8996

90-
.rce-mtmg-body-bottom--bttitle > span {
91-
padding: 0 0 0 6px;
92-
}
93-
9497
.rce-mtmg-toogleContent {
9598
display: none;
9699
height: auto;
@@ -117,6 +120,7 @@
117120

118121
.rce-mitem {
119122
display: flex;
123+
padding: 10px 8px;
120124
}
121125

122126
.rce-mitem:hover,
@@ -129,7 +133,12 @@
129133
justify-content: center;
130134
align-items: flex-start;
131135
flex-direction: column;
132-
padding: 8px;
136+
}
137+
138+
.rce-mitem-body-content {
139+
display: flex;
140+
align-items: flex-start;
141+
justify-content: flex-start;
133142
}
134143

135144
.rce-mitem-body--top {
@@ -149,7 +158,6 @@
149158
.rce-mitem-body--top-title:hover {
150159
cursor: pointer;
151160
text-decoration: underline;
152-
color: #6264a7;
153161
}
154162

155163
.rce-mitem-body--bottom-title {
@@ -165,13 +173,50 @@
165173

166174
.rce-mitem-bottom-body {
167175
padding: 10px 8px;
176+
display: flex;
177+
align-items: flex-start;
178+
justify-content: flex-start;
179+
}
180+
181+
.rce-mitem-body.avatar {
182+
padding: 8px 10px 0 0;
183+
}
184+
185+
.rce-mitem.avatar {
186+
padding: 8px 5px 0 0;
187+
}
188+
189+
.rce-mitem.no-avatar {
190+
padding: 8px 10px 0 0;
191+
}
192+
193+
.rce-mitem.no-avatar > svg {
194+
width: 19px;
195+
height: 19px;
196+
}
197+
198+
.rce-mitem.avatar img {
199+
width: 22px;
200+
height: 22px;
201+
border: none !important;
202+
background: #ccc;
203+
border-radius: 100%;
204+
}
205+
206+
.rce-mitem-body.avatar > svg {
207+
width: 19px;
208+
height: 19px;
168209
}
169210

170211
.rce-mitem-bottom-body-top {
171212
display: flex;
172213
flex-direction: column;
173214
}
174215

216+
.rce-mitem-bottom-body-top-title > svg {
217+
padding: 0 7px 0 0;
218+
}
219+
175220
.rce-mitem-avatar-content {
176221
position: absolute;
177222
right: 10px;
@@ -214,6 +259,7 @@
214259
width: 100% !important;
215260
height: 100% !important;
216261
background: #ccc;
262+
cursor: pointer;
217263
}
218264

219265
.rce-mtmg-call-body-title {

‎src/MeetingMessage/MeetingMessage.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import './MeetingMessage.css';
44
import FaCalendar from 'react-icons/lib/fa/calendar';
55
import MdMoreHoriz from 'react-icons/lib/md/more-horiz';
66
import FaCaretDown from 'react-icons/lib/fa/caret-down';
7+
import FaCaretRight from 'react-icons/lib/fa/caret-right';
8+
import IoVideo from 'react-icons/lib/io/ios-videocam-outline';
9+
import IoChatboxes from 'react-icons/lib/io/ios-chatboxes-outline';
710

811
import {
912
format,
@@ -35,7 +38,7 @@ export class MeetingMessage extends Component {
3538
title,
3639
subject,
3740
onClick,
38-
altTitle,
41+
collapseTitle,
3942
dataSource,
4043
participants,
4144
onMeetingTitleClick,
@@ -78,10 +81,11 @@ export class MeetingMessage extends Component {
7881
this.state.toogle === true ?
7982
<div className="rce-mtmg-bottom--tptitle">
8083
<FaCaretDown/>
81-
<span>{altTitle}</span>
84+
<span>{collapseTitle}</span>
8285
</div>
8386
:
8487
<div className="rce-mtmg-body-bottom--bttitle">
88+
<FaCaretRight/>
8589
<span>
8690
{
8791
participants.slice(0, PARTICIPANT_LIMIT).map(x => x.title || 'Unknow').join(', ')
@@ -107,6 +111,17 @@ export class MeetingMessage extends Component {
107111
{
108112
!x.event &&
109113
<div className="rce-mitem">
114+
<div
115+
className={classNames(
116+
'rce-mitem avatar',
117+
{'rce-mitem no-avatar': !x.avatar}
118+
)}>
119+
{
120+
x.avatar ?
121+
<Avatar src={x.avatar}/>
122+
: <IoChatboxes />
123+
}
124+
</div>
110125
<div className="rce-mitem-body">
111126
<div className="rce-mitem-body--top">
112127
<div
@@ -136,6 +151,9 @@ export class MeetingMessage extends Component {
136151
x.event &&
137152
<div className="rce-mitem-event">
138153
<div className="rce-mitem-bottom-body">
154+
<div className="rce-mitem-body avatar">
155+
<IoVideo />
156+
</div>
139157
<div className="rce-mitem-bottom-body-top">
140158
{x.event.title}
141159
<div className="rce-mitem-body--top-time">
@@ -201,7 +219,7 @@ MeetingMessage.defaultProps = {
201219
dateString: '',
202220
title: '',
203221
subject: '',
204-
altTitle: '',
222+
collapseTitle: '',
205223
participantsLimit: 3,
206224
avatarFlexible: false,
207225
dataSource: [],

‎src/MessageBox/MessageBox.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ export class MessageBox extends Component {
194194
title={this.props.meeting.title}
195195
date={this.props.meeting.date}
196196
dateString={this.props.meeting.dateString}
197-
altTitle={this.props.meeting.altTitle}
197+
collapseTitle={this.props.meeting.collapseTitle}
198198
participants={this.props.meeting.participants}
199199
dataSource={this.props.meeting.dataSource}
200200
onMeetingMessageClick={this.props.onMeetingMessageClick}

0 commit comments

Comments
 (0)