diff --git a/src/views/ChatRoom/Body/Body.js b/src/views/ChatRoom/Body/Body.js
index 9dccdb5..24f57bb 100644
--- a/src/views/ChatRoom/Body/Body.js
+++ b/src/views/ChatRoom/Body/Body.js
@@ -25,6 +25,7 @@ export default class Body extends Component {
}],
messages: [{
id: 'm1',
+ type : 'normal',
text: 'How are you, Lukas!',
voice: null,
image: null,
@@ -38,6 +39,7 @@ export default class Body extends Component {
},
}, {
id: 'm2',
+ type : 'normal',
text: 'I am good, good',
voice: null,
image: null,
@@ -51,6 +53,7 @@ export default class Body extends Component {
},
}, {
id: 'm3',
+ type : 'normal',
text: 'What about you?',
voice: null,
image: null,
@@ -64,6 +67,7 @@ export default class Body extends Component {
},
}, {
id: 'm4',
+ type : 'normal',
text: 'Good as well, preparing for the stream now.',
voice: null,
image: null,
@@ -77,6 +81,7 @@ export default class Body extends Component {
},
}, {
id: 'm5',
+ type : 'normal',
text: 'How is your uni going?',
voice: null,
image: null,
@@ -90,6 +95,7 @@ export default class Body extends Component {
},
}, {
id: 'm6',
+ type : 'normal',
text: 'It is a bit tough, as I have 2 specializations. How about yours? Do you enjoy it?',
voice: null,
image: null,
@@ -103,6 +109,7 @@ export default class Body extends Component {
},
}, {
id: 'm7',
+ type : 'normal',
text: 'Big Data is really interesting. Cannot wait to go through all the material.',
voice: null,
image: null,
@@ -114,7 +121,41 @@ export default class Body extends Component {
id: 'u1',
name: 'Vadim',
},
- }]
+ },{
+ id: 'm7',
+ type: 'normal',
+ text: 'Big Data is really interesting. Cannot wait to go through all the material.',
+ voice: null,
+ image: null,
+ video : null,
+ music: null,
+ document : null,
+ createdAt: '2020-10-03T14:53:00.000Z',
+ user: {
+ id: 'u1',
+ name: 'Vadim',
+ },
+ },{
+ id: 'm10',
+ type: '2d',
+ options: [
+ [{id : 0, name : 'تکنولوژی'}],
+ [{id : 1, name : 'ورزشی'},{id : 2, name : 'علمی'}],
+ [{id : 3, name : 'مذهبی'},{id : 4, name : 'اجتماعی'},{id : 5, name : 'سیاسی'}]
+ ],
+ text: 'به دنبال چی میگردی؟',
+ voice: null,
+ image: null,
+ video : null,
+ music: null,
+ document : null,
+ createdAt: '2020-10-03T14:53:00.000Z',
+ user: {
+ id: 'u2',
+ name: 'Lukas',
+ },
+ }
+ ]
},
message : '',
voice : null,
diff --git a/src/views/ChatRoom/Body/Message/Message.js b/src/views/ChatRoom/Body/Message/Message.js
index 14b6952..824224d 100644
--- a/src/views/ChatRoom/Body/Message/Message.js
+++ b/src/views/ChatRoom/Body/Message/Message.js
@@ -1,103 +1,24 @@
import React, { Component } from 'react';
-import ReactAudioPlayer from 'react-audio-player';
-import ReactPlayer from 'react-player';
-import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
-import './Message.scss';
+import NormalMessage from './NormalMessage/NormalMessage';
+import Message2D from './Message2D/Message2D';
+
export default class Message extends Component {
render(){
const {message, user1, user2,file,document} = this.props;
return (
-
-
-
- {
- message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ?
-
-
- {message.user.name}
-
-
: null
- }
-
- {
- message.text !== null && message.video === null && message.image === null && message.music === null && message.document === null ?
-
{message.text}
: null
- }
- {
- message.voice !== null ?
-
: null
- }
- {
- message.image !== null ?
-
-
-
{message.text}
-
- : null
- }
- {
- message.video !== null ?
-
- : null
- }
- {
- message.music !== null ?
-
: null
- }
- {
- message.document !== null ?
-
-
- {message.document.name}
- : null
- }
-
-
-
+ <>
+ {
+ message.type === 'normal' ?
+ : null
+ }
+ {
+ message.type === '2d' ?
+ : null
+ }
+ >
);
}
}
\ No newline at end of file
diff --git a/src/views/ChatRoom/Body/Message/Message2D/Message2D.js b/src/views/ChatRoom/Body/Message/Message2D/Message2D.js
new file mode 100644
index 0000000..a97b1e4
--- /dev/null
+++ b/src/views/ChatRoom/Body/Message/Message2D/Message2D.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+
+import './Message2D.scss';
+
+export default class Message2D extends Component {
+
+ render(){
+ const {message, user1, user2} = this.props;
+ return (
+
+
+
+ {
+
+ message.text !== null ?
+
{message.text}
: null
+ }
+
+
+ {
+ message.options.map(option => (
+
+ {
+ option.map(
+ item => (
+
+ {item.name}
+
+ )
+ )
+ }
+
+ ))
+ }
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss b/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
new file mode 100644
index 0000000..4f0b3c7
--- /dev/null
+++ b/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
@@ -0,0 +1,54 @@
+@media screen and (max-width: 450px){
+ .message-2d{
+ // width: 100%;
+ position: relative;
+ img{
+ width: 65px;
+ height:65px;
+ object-fit: cover;
+ border-radius: 30px;
+ border : 3px solid rgba(201, 201, 201, 0.857);
+ position: relative;
+ top: 20px;
+ z-index: 50;
+ }
+ &__text{
+ justify-content:flex-end;
+ width: 100%;
+ padding : 15px 15px 5px;
+ background-color:white;
+ border-radius: 5px;
+ position: relative;
+ margin-bottom: 5px;
+ p{
+ width: 100%;
+ text-align: right;
+ font-size: 17px;
+ font-family: IRANSansNumeralBold;
+ }
+
+ }
+ &__options{
+ width: 100%;
+ z-index: 1000;
+ &--row{
+ width: 100%;
+ justify-content: space-around;
+ div{
+ background-color: white;
+ border-radius: 10px;
+ justify-content: center;
+ align-items: center;
+ margin : 5px 3px;
+ padding : 10px;
+ span{
+ font-size: 16px;
+ color : black;
+ font-weight: 600;
+ }
+ }
+ }
+ }
+
+ }
+}
diff --git a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
new file mode 100644
index 0000000..4553db7
--- /dev/null
+++ b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import ReactAudioPlayer from 'react-audio-player';
+import ReactPlayer from 'react-player';
+import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
+
+import './NormalMessage.scss';
+
+export default class NormalMessage extends Component {
+
+ render(){
+ const {message, user1, user2,file,document} = this.props;
+ return (
+
+
+
+ {
+ message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ?
+
+
+ {message.user.name}
+
+
: null
+ }
+
+ {
+ message.text !== null && message.video === null && message.image === null && message.music === null && message.document === null ?
+
{message.text}
: null
+ }
+ {
+ message.voice !== null ?
+
: null
+ }
+ {
+ message.image !== null ?
+
+
+
{message.text}
+
+ : null
+ }
+ {
+ message.video !== null ?
+
+ : null
+ }
+ {
+ message.music !== null ?
+
: null
+ }
+ {
+ message.document !== null ?
+
+
+ {message.document.name}
+ : null
+ }
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/ChatRoom/Body/Message/Message.scss b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
similarity index 97%
rename from src/views/ChatRoom/Body/Message/Message.scss
rename to src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
index cd23f81..bd6acaf 100644
--- a/src/views/ChatRoom/Body/Message/Message.scss
+++ b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
@@ -1,5 +1,5 @@
@media screen and (max-width: 450px){
- .message{
+ .normal-message{
// width: 100%;
position: relative;
img{
@@ -77,9 +77,6 @@
}
}
-a:focus{
- text-decoration: none;
-}
.react-audio-player{
width: 100% !important;
diff --git a/src/views/Home/Body/Body.scss b/src/views/Home/Body/Body.scss
index b9f79e2..d94a07d 100644
--- a/src/views/Home/Body/Body.scss
+++ b/src/views/Home/Body/Body.scss
@@ -6,4 +6,12 @@
z-index: 10;
overflow-y : scroll;
}
+}
+
+a:focus{
+ text-decoration: none !important;
+}
+
+a:hover{
+ text-decoration: none !important;
}
\ No newline at end of file
diff --git a/src/views/Home/Body/ChatList/Chat/Chat.scss b/src/views/Home/Body/ChatList/Chat/Chat.scss
index 4ed4171..6765671 100644
--- a/src/views/Home/Body/ChatList/Chat/Chat.scss
+++ b/src/views/Home/Body/ChatList/Chat/Chat.scss
@@ -49,4 +49,8 @@
}
}
}
+}
+
+a:focus{
+ text-decoration: normal;
}
\ No newline at end of file
diff --git a/src/views/Home/Home.scss b/src/views/Home/Home.scss
index eef6ef7..e8b2299 100644
--- a/src/views/Home/Home.scss
+++ b/src/views/Home/Home.scss
@@ -5,5 +5,6 @@
background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%);
border-radius: 40px;
height: 100vh;
+ box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8);
}
}
\ No newline at end of file