Skip to content

Commit b823d38

Browse files
abdurrahmanekrabdurrahmanekr
authored
Time class compressed. (#35)
* Time class compressed. Title class compressed for text Spotify message margin changed. * rce-mbox-forward-right padding improved. * snapshots added. * version changed.
1 parent 8ac79b5 commit b823d38

11 files changed

Lines changed: 247 additions & 167 deletions

File tree

‎example/App.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
import FaSearch from 'react-icons/lib/fa/search';
1818
import FaComments from 'react-icons/lib/fa/comments';
1919
import FaClose from 'react-icons/lib/fa/close';
20+
import FaMenu from 'react-icons/lib/md/more-vert';
2021

2122
const loremIpsum = require('lorem-ipsum');
2223
const Identicon = require('identicon.js')
@@ -62,7 +63,7 @@ export class App extends Component {
6263
case 'message':
6364
var type = this.token();
6465
var statu = 'waiting';
65-
switch(type) {
66+
switch (type) {
6667
case 0:
6768
type = 'photo';
6869
statu = 'sent';
@@ -122,12 +123,29 @@ export class App extends Component {
122123
date: new Date(),
123124
subtitle: loremIpsum({ count: 1, units: 'sentences' }),
124125
unread: parseInt(Math.random() * 10 % 3),
126+
dropdownMenu: (
127+
<Dropdown
128+
animationPosition="norteast"
129+
buttonProps={{
130+
type: "transparent",
131+
color: "#cecece",
132+
icon: {
133+
component: <FaMenu />,
134+
size: 24,
135+
}
136+
}}
137+
items={[
138+
'Menu Item1',
139+
'Menu Item2',
140+
'Menu Item3',
141+
]} />
142+
),
125143
dateString: moment(new Date()).format('HH:mm'),
126144
};
127145
}
128146
}
129147

130-
addMessage()  {
148+
addMessage() {
131149
var list = this.state.messageList;
132150
list.push(this.random('message'));
133151
this.setState({

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-chat-elements",
3-
"version": "0.5.2",
3+
"version": "0.6.0",
44
"description": "Reactjs chat components",
55
"author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
66
"main": "dist/main.js",

‎src/FileMessage/FileMessage.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
.rce-mbox-file {
2+
padding-bottom: 13px;
3+
}
4+
5+
.rce-mbox-file > button {
26
background: #e9e9e9;
37
display: flex;
48
border-radius: 5px;
@@ -15,7 +19,7 @@
1519
border:none;
1620
}
1721

18-
.rce-mbox-file > * {
22+
.rce-mbox-file > button > * {
1923
padding: 0px 10px;
2024
}
2125

‎src/FileMessage/FileMessage.js‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -38,41 +38,43 @@ export class FileMessage extends Component {
3838
};
3939

4040
return (
41-
<button className="rce-mbox-file" onClick={this.onClick.bind(this)}>
42-
<div className="rce-mbox-file--icon">
43-
<FaFile
44-
color='#aaa'/>
45-
<div className="rce-mbox-file--size">
46-
{this.props.data.size}
47-
</div>
48-
</div>
49-
<div className="rce-mbox-file--text">
50-
{this.props.text}
51-
</div>
52-
<div className="rce-mbox-file--buttons">
53-
{
54-
this.props.data.status &&
55-
!this.props.data.status.download &&
56-
!this.props.data.status.click &&
57-
<FaCloudDownload
41+
<div className='rce-mbox-file'>
42+
<button onClick={this.onClick.bind(this)}>
43+
<div className="rce-mbox-file--icon">
44+
<FaFile
5845
color='#aaa'/>
59-
}
60-
{
61-
this.props.data.status &&
62-
typeof this.props.data.status.loading === 'number' &&
63-
this.props.data.status.loading !== 0 &&
64-
<Circle
65-
progress={this.props.data.status.loading}
66-
options={progressOptions}
67-
initialAnimate={true}
68-
containerStyle={{
69-
width: '40px',
70-
height: '40px',
71-
}}
72-
containerClassName={'rce-mbox-file--loading'} />
73-
}
74-
</div>
75-
</button>
46+
<div className="rce-mbox-file--size">
47+
{this.props.data.size}
48+
</div>
49+
</div>
50+
<div className="rce-mbox-file--text">
51+
{this.props.text}
52+
</div>
53+
<div className="rce-mbox-file--buttons">
54+
{
55+
this.props.data.status &&
56+
!this.props.data.status.download &&
57+
!this.props.data.status.click &&
58+
<FaCloudDownload
59+
color='#aaa'/>
60+
}
61+
{
62+
this.props.data.status &&
63+
typeof this.props.data.status.loading === 'number' &&
64+
this.props.data.status.loading !== 0 &&
65+
<Circle
66+
progress={this.props.data.status.loading}
67+
options={progressOptions}
68+
initialAnimate={true}
69+
containerStyle={{
70+
width: '40px',
71+
height: '40px',
72+
}}
73+
containerClassName={'rce-mbox-file--loading'} />
74+
}
75+
</div>
76+
</button>
77+
</div>
7678
);
7779
}
7880
}

‎src/FileMessage/__tests__/__snapshots__/FileMessage.js.snap‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`FileMessage component should render without issues 1`] = `
4-
<button
4+
<div
55
className="rce-mbox-file"
6-
onClick={[Function]}
76
>
8-
<div
9-
className="rce-mbox-file--icon"
7+
<button
8+
onClick={[Function]}
109
>
11-
<FaFile
12-
color="#aaa"
10+
<div
11+
className="rce-mbox-file--icon"
12+
>
13+
<FaFile
14+
color="#aaa"
15+
/>
16+
<div
17+
className="rce-mbox-file--size"
18+
/>
19+
</div>
20+
<div
21+
className="rce-mbox-file--text"
1322
/>
1423
<div
15-
className="rce-mbox-file--size"
24+
className="rce-mbox-file--buttons"
1625
/>
17-
</div>
18-
<div
19-
className="rce-mbox-file--text"
20-
/>
21-
<div
22-
className="rce-mbox-file--buttons"
23-
/>
24-
</button>
26+
</button>
27+
</div>
2528
`;

‎src/MessageBox/MessageBox.css‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@
2828
display: flex;
2929
opacity: 0;
3030
visibility: hidden;
31-
left: -40px;
31+
left: -50px;
3232
}
3333

3434
.rce-mbox-forward-right {
3535
display: flex;
3636
opacity: 0;
3737
visibility: hidden;
38-
right: -40px;
38+
right: -50px;
3939
}
4040

4141
.rce-container-mbox:hover .rce-mbox-forward-left {
@@ -57,7 +57,6 @@
5757
margin-left: 20px;
5858
margin-right: 5px;
5959
margin-top: 3px;
60-
display: flex;
6160
flex-direction: column;
6261
margin-bottom: 3px;
6362
padding: 6px 9px 8px 9px;
@@ -66,6 +65,12 @@
6665
max-width: 70%;
6766
}
6867

68+
.rce-mbox-body {
69+
margin: 0;
70+
padding: 0;
71+
position: relative;
72+
}
73+
6974
.rce-mbox.rce-mbox-right {
7075
float: right;
7176
margin-left: 5px;
@@ -79,10 +84,37 @@
7984
word-break: break-word;
8085
}
8186

87+
.rce-mbox-text:after {
88+
content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
89+
}
90+
8291
.rce-mbox-time {
8392
text-align: right;
8493
color: rgba(0, 0, 0, 0.45);
8594
font-size: 12px;
95+
position: absolute;
96+
right: -4px;
97+
bottom: -5px;
98+
}
99+
100+
.rce-mbox-time-block {
101+
/*position: relative;*/
102+
right: 0;
103+
bottom: 0;
104+
left: 0;
105+
margin-right: -6px;
106+
margin-left: -6px;
107+
padding-top: 5px;
108+
padding-right: 3px;
109+
padding-bottom: 2px;
110+
background: linear-gradient(to top, rgba(0,0,0,0.33), transparent);
111+
border-bottom-left-radius: 5px;
112+
border-bottom-right-radius: 5px;
113+
color: #fff;
114+
}
115+
116+
.rce-mbox--clear-padding {
117+
padding-bottom: 3px;
86118
}
87119

88120
.rce-mbox-right-notch {
@@ -118,6 +150,10 @@
118150
text-decoration: underline;
119151
}
120152

153+
.rce-mbox-title--clear {
154+
margin-bottom: 5px;
155+
}
156+
121157
.rce-mbox-statu {
122158
margin-left: 3px;
123159
font-size: 15px;

0 commit comments

Comments
 (0)