front
Gorji 3 years ago
parent 70c6ebcc5c
commit 5d8b70920a
  1. 17
      src/views/ChatRoom/Body/Body.js
  2. 12
      src/views/ChatRoom/Body/Body.scss
  3. 31
      src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
  4. 17
      src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
  5. 16
      src/views/ChatRoom/Body/Message/Message2D/Message2D.js
  6. 16
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
  7. 34
      src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
  8. 17
      src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js

@ -24,12 +24,12 @@ class Body extends Component {
video: null,
music: null,
document: null,
footer: 'normal',
footer: 'suggest',
suggest: [
{ id: 0, text: 'سلام' },
{ id: 1, text: 'وقت بخیر' },
{ id: 2, text: 'لطفا بامن تماس بگیر' },
{ id: 3, text: 'متشکرم' },
[{ id: 0, text: 'سلام' }],
[{ id: 1, text: 'وقت بخیر' }],
[{ id: 2, text: 'لطفا بامن تماس بگیر' }],
[{ id: 3, text: 'متشکرم' }],
],
};
}
@ -340,11 +340,16 @@ class Body extends Component {
let chatroom = document.getElementById('chatroom');
chatroom.scrollTop = chatroom.scrollHeight + 40;
}
randomColor() {
let hex = Math.floor(Math.random() * 0x999999);
let color = '#' + hex.toString(16);
return color;
}
render() {
const { setPage, chatInfo, messageList, userId } = this.props;
const userIdx = {};
chatInfo.users.map((e) => (userIdx[e.id] = e));
chatInfo.users.map((e) => (userIdx[e.id] = { ...e, color: this.randomColor() }));
console.log({ userId });
return (
<div className="chat-body d-flex flex-column">

@ -1,4 +1,16 @@
@media screen and (max-width: 4500px) {
.chat-body .MuiAvatar-circle {
box-shadow: 0px 0px 0px 2px #fff;
border: 3px solid #ffffff66;
width: 60px;
height: 60px;
top: 20px;
z-index: 30;
font-family: 'IRANSansNumeralBold';
& div {
font-family: 'IRANSansNumeralBold';
}
}
.chat-body {
background-color: rgb(210, 196, 214);
justify-content: flex-start;

@ -1,31 +1,30 @@
import React, { Component } from 'react';
import Carousel from 'react-elastic-carousel';
import './ChatSuggest.scss';
export default class ChatSuggest extends Component {
render() {
const { suggest } = this.props;
return (
<div className="chat-suggest portrait-slider d-flex flex-column">
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}>
{suggest.map((row, i) => (
<Row row={row} key={i} />
))}
</Carousel>
</div>
);
}
export default function suggetbar({ suggest }) {
return (
<div className="chat-suggest portrait-slider d-flex flex-column">
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}>
{suggest.map((row, i) => (
<Row row={row} key={i} />
))}
</Carousel>
</div>
);
}
const Row = (row) => {
const Row = ({ row }) => {
return (
<div className="chat-suggest__row d-flex">
{row.map((item, i) => (
<Suggest item={row[0]} />
{/* {row.map((item, i) => (
<Suggest item={item} key={i} />
))}
))} */}
</div>
);
};
const Suggest = (item) => {
console.log(item.text);
return <div className="chat-suggest__row--item d-flex">{item.text}</div>;
};

@ -2,6 +2,7 @@ import React, { Component, useEffect } from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import Avatar from '@material-ui/core/Avatar';
export default class DraggableMessage extends Component {
state = {
@ -24,11 +25,23 @@ export default class DraggableMessage extends Component {
marginLeft: isSelf ? 40 : 0,
}}
>
<img
<Avatar
alt={user.name}
src={window.baseURL + '/file/download/' + user.fileId}
className=""
style={{ backgroundColor: user.color }}
>
{user.name
.split(' ')
.map((e) => e.slice(0, 1))
.join(' ')}
</Avatar>
{/* <img
src={window.baseURL + '/file/download/' + user.fileId}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
/> */}
<div className="message-2d__text d-flex">
{message.text !== null ? (
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>

@ -1,4 +1,5 @@
import React, { Component } from 'react';
import Avatar from '@material-ui/core/Avatar';
import './Message2D.scss';
@ -13,11 +14,22 @@ export default class Message2D extends Component {
marginLeft: isSelf ? 40 : 0,
}}
>
<img
<Avatar
alt={user.name}
src={window.baseURL + '/file/download/' + user.fileId}
className=""
style={{ backgroundColor: user.color }}
>
{user.name
.split(' ')
.map((e) => e.slice(0, 1))
.join(' ')}
</Avatar>
{/* <img
src={window.baseURL + '/file/download/' + user.fileId}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
/> */}
<div className="message-2d__text d-flex">
{message.text !== null ? (
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import ReactAudioPlayer from 'react-audio-player';
import ReactPlayer from 'react-player';
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import Avatar from '@material-ui/core/Avatar';
import './NormalMessage.scss';
@ -17,11 +18,22 @@ export default class NormalMessage extends Component {
filter: document !== null ? 'blur(16px)' : 'blur(0px)',
}}
>
<img
<Avatar
alt={user.name}
src={window.baseURL + '/file/download/' + user.fileId}
className=""
style={{ backgroundColor: user.color }}
>
{user.name
.split(' ')
.map((e) => e.slice(0, 1))
.join(' ')}
</Avatar>
{/* <img
src={window.baseURL + '/file/download/' + user.fileId}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
/> */}
<div
className={
message.voice === null &&

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import Avatar from '@material-ui/core/Avatar';
export default class RadioMessage extends Component {
constructor(props) {
@ -25,11 +26,22 @@ export default class RadioMessage extends Component {
marginLeft: isSelf ? 40 : 0,
}}
>
<img
<Avatar
alt={user.name}
src={window.baseURL + '/file/download/' + user.fileId}
className=""
style={{ backgroundColor: user.color }}
>
{user.name
.split(' ')
.map((e) => e.slice(0, 1))
.join(' ')}
</Avatar>
{/* <img
src={window.baseURL + '/file/download/' + user.fileId}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
/> */}
<div className="message-2d__text d-flex">
{message.text !== null ? (
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
@ -56,16 +68,16 @@ const Row = (props) => {
<div
onClick={() => this.handleRadioChange(item.name)}
className="message-2d__options--row d-flex"
style={{
// backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
// color: item.name === this.state.value ? 'white' : 'black',
}}
>
{
props.list.map((item) => (
<Item item={item} />
))
style={
{
// backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
// color: item.name === this.state.value ? 'white' : 'black',
}
}
>
{props.list.map((item) => (
<Item item={item} />
))}
</div>
);
};

@ -3,7 +3,7 @@ import Grid from '@material-ui/core/Grid';
import Slider from '@material-ui/core/Slider';
import Input from '@material-ui/core/Input';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import Avatar from '@material-ui/core/Avatar';
export default class SliderMessage extends Component {
constructor(props) {
super(props);
@ -41,11 +41,22 @@ export default class SliderMessage extends Component {
marginLeft: isSelf ? 40 : 0,
}}
>
<img
<Avatar
alt={user.name}
src={window.baseURL + '/file/download/' + user.fileId}
className=""
style={{ backgroundColor: user.color }}
>
{user.name
.split(' ')
.map((e) => e.slice(0, 1))
.join(' ')}
</Avatar>
{/* <img
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
/> */}
<div className="message-2d__text d-flex">
{message.text !== null ? (
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>

Loading…
Cancel
Save