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.id} -
- { - 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 ? -
- - - -

{message.text}

-
- : 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.id} +
+ { + + 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.id} +
+ { + 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 ? +
+ + + +

{message.text}

+
+ : 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