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

@ -1,4 +1,16 @@
@media screen and (max-width: 4500px) { @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 { .chat-body {
background-color: rgb(210, 196, 214); background-color: rgb(210, 196, 214);
justify-content: flex-start; justify-content: flex-start;

@ -1,31 +1,30 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Carousel from 'react-elastic-carousel'; import Carousel from 'react-elastic-carousel';
import './ChatSuggest.scss'; import './ChatSuggest.scss';
export default class ChatSuggest extends Component { export default function suggetbar({ suggest }) {
render() { return (
const { suggest } = this.props; <div className="chat-suggest portrait-slider d-flex flex-column">
return ( <Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}>
<div className="chat-suggest portrait-slider d-flex flex-column"> {suggest.map((row, i) => (
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}> <Row row={row} key={i} />
{suggest.map((row, i) => ( ))}
<Row row={row} key={i} /> </Carousel>
))} </div>
</Carousel> );
</div>
);
}
} }
const Row = (row) => { const Row = ({ row }) => {
return ( return (
<div className="chat-suggest__row d-flex"> <div className="chat-suggest__row d-flex">
{row.map((item, i) => ( <Suggest item={row[0]} />
{/* {row.map((item, i) => (
<Suggest item={item} key={i} /> <Suggest item={item} key={i} />
))} ))} */}
</div> </div>
); );
}; };
const Suggest = (item) => { const Suggest = (item) => {
console.log(item.text);
return <div className="chat-suggest__row--item d-flex">{item.text}</div>; 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 { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move'; import arrayMove from 'array-move';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import Avatar from '@material-ui/core/Avatar';
export default class DraggableMessage extends Component { export default class DraggableMessage extends Component {
state = { state = {
@ -24,11 +25,23 @@ export default class DraggableMessage extends Component {
marginLeft: isSelf ? 40 : 0, 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} src={window.baseURL + '/file/download/' + user.fileId}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }} style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id} alt={message.id}
/> /> */}
<div className="message-2d__text d-flex"> <div className="message-2d__text d-flex">
{message.text !== null ? ( {message.text !== null ? (
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}> <p id="3" style={{ color: isSelf ? 'white' : 'black' }}>

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

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

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

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

Loading…
Cancel
Save