Compare commits

...

2 Commits

Author SHA1 Message Date
Gorji 23d89c9322 some messga fixes 3 years ago
Gorji 93982e50aa fix suggest 3 years ago
  1. 2
      src/Redux/proxy.js
  2. BIN
      src/assets/images/chat.png
  3. BIN
      src/assets/images/chat2.png
  4. 6
      src/views/ChatRoom/Body/Body.js
  5. 3
      src/views/ChatRoom/Body/Body.scss
  6. 8
      src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
  7. 23
      src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
  8. 45
      src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
  9. 17
      src/views/ChatRoom/Body/Message/Message.js
  10. 27
      src/views/ChatRoom/Body/Message/Message2D/Message2D.js
  11. 8
      src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
  12. 38
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
  13. 22
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
  14. 27
      src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
  15. 27
      src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js

@ -1,6 +1,6 @@
import axios from 'axios';
import { toast } from 'react-toastify';
const baseURL = 'https://chatstory.ir/api/v1'; //"https://chatstory.ir/api/v1";
const baseURL = 'https://chatstory.ir/api/v1'; //'https://chatstory.ir/api/v1';
const token = '';
const loginURL = 'user/otp/login';
const logoutURL = 'user/logout';

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

@ -24,7 +24,7 @@ class Body extends Component {
video: null,
music: null,
document: null,
footer: 'suggest',
footer: 'normal',
suggest: [
[{ id: 0, text: 'سلام' }],
[{ id: 1, text: 'وقت بخیر' }],
@ -363,7 +363,7 @@ class Body extends Component {
style={{
overflowX: 'hidden',
overflowY: this.state.file !== null ? 'hidden' : 'scroll',
paddingBottom: this.state.footer === 'suggest' ? 110 : 70,
paddingBottom: this.state.footer === 'suggest' ? 150 : 70,
}}
>
{chatInfo.users &&
@ -372,7 +372,7 @@ class Body extends Component {
this.state.music === null &&
this.state.video === null ? (
<Message
isSelf={userId == item.userId}
isSelf={1 == item.userId}
key={i}
file={this.state.image}
document={this.state.document}

@ -91,13 +91,14 @@
z-index: 1000;
background-color: rgb(210, 196, 214);
background: url(../../../assets/images/chat.png);
box-shadow: 0px 0px 5px 2px #9d9595ad;
background-size: cover;
overflow-y: scroll;
overflow-x: hidden;
position: fixed;
bottom: 0px;
left: 0;
padding-top: 5px;
padding-bottom: 5px;
}
}

@ -16,15 +16,15 @@ export default function suggetbar({ suggest }) {
const Row = ({ row }) => {
return (
<div className="chat-suggest__row d-flex">
<Suggest item={row[0]} />
{/* {row.map((item, i) => (
{/* <Suggest item={row[0]} /> */}
{row.map((item, i) => (
<Suggest item={item} key={i} />
))} */}
))}
</div>
);
};
const Suggest = (item) => {
const Suggest = ({ item }) => {
console.log(item.text);
return <div className="chat-suggest__row--item d-flex">{item.text}</div>;
};

@ -1,25 +1,29 @@
@media screen and (max-width: 4500px) {
.chat-suggest {
& .rec-slider-container {
margin: 0 !important;
}
// border-bottom-right-radius: 40px;
// border-bottom-left-radius: 40px;
width: 100%;
// height : 40px;
padding: 2px 0px 0px;
align-items: flex-end;
&__row{
margin-top: 5px;
&__row {
width: 100%;
&--item {
padding: 8px 6px;
background-color: white;
border-radius: 5px;
margin: 5px;
margin: 0 2px;
width: 100% !important;
justify-content: center;
justify-content: right;
color: black;
min-height: 60px;
height: 90px;
text-align: right;
}
}
}
}
@ -27,8 +31,8 @@
width: 100% !important;
height: 100% !important;
position: relative;
padding: 20px 12px 0px;
margin-bottom: 10px;
padding: 0px 6px 0px;
margin-bottom: 2px;
justify-content: center !important;
}
@ -43,8 +47,9 @@
}
.rec-pagination {
z-index: 600;
position: absolute;
top: -12px;
margin-top: 2px !important;
// position: absolute;
// top: -12px;
// left: calc(50% - 20px) !important;
& button {
background-color: grey;

@ -5,51 +5,28 @@ import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import Avatar from '@material-ui/core/Avatar';
export default class DraggableMessage extends Component {
state = {
items: ['استقلال', 'پرسپولیس', 'سپاهان'],
};
constructor(props) {
super(props);
this.state = this.props.message;
}
onSortEnd = ({ oldIndex, newIndex }) => {
this.setState(({ items }) => ({
items: arrayMove(items, oldIndex, newIndex),
this.setState(({ options }) => ({
options: arrayMove(options, oldIndex, newIndex),
}));
};
render() {
const { message, user, isSelf } = this.props;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
marginRight: isSelf ? 0 : 70,
marginLeft: isSelf ? 70 : 0,
}}
>
<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' }}>
{message.text}
</p>
) : null}
</div>
<SortableList items={message.options} onSortEnd={this.onSortEnd} />
<SortableList items={this.state.options} onSortEnd={this.onSortEnd} />
<button className="message-2d__submit">
ثبت
<ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
@ -72,7 +49,7 @@ const SortableList = SortableContainer(({ items }) => {
const SortableItem = SortableElement(({ value }) => (
<div className="message-2d__options--row d-flex">
{value.map((item) => (
<div>{item.text}</div>
<div>{item.name}</div>
))}
</div>
));

@ -11,15 +11,14 @@ export default class Message extends Component {
const { message, user, isSelf, file, document } = this.props;
return (
<>
{message.type === 'normal' ? (
<NormalMessage
message={message}
user={user}
isSelf={isSelf}
file={file}
document={document}
/>
) : null}
<NormalMessage
message={message}
user={user}
isSelf={isSelf}
file={file}
document={document}
/>
{message.type === '2d' ? <Message2D message={message} user={user} isSelf={isSelf} /> : null}
{message.type === 'draggable' ? (
<DraggableMessage message={message} user={user} isSelf={isSelf} />

@ -10,33 +10,10 @@ export default class Message2D extends Component {
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
marginRight: isSelf ? 0 : 70,
marginLeft: isSelf ? 70 : 0,
}}
>
<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' }}>
{message.text}
</p>
) : null}
</div>
<div className="message-2d__options d-flex flex-column">
{message.options.map((option, i) => (
<div

@ -36,12 +36,14 @@
width: 100%;
justify-content: space-around;
div {
background-color: rgba(153, 153, 153, 0.47);
background-color: rgb(181 224 252 / 47%);
border-radius: 10px;
justify-content: center;
align-items: center;
margin: 2px 3px;
padding: 6px;
flex: 1;
text-align: center;
span {
font-size: 16px;
color: black;
@ -60,7 +62,7 @@
border-radius: 5px;
}
&--draggable {
background-color: rgba(153, 153, 153, 0.47);
background-color: rgb(181 224 252 / 47%);
border-radius: 10px;
justify-content: center;
align-items: center;
@ -90,7 +92,7 @@
display: flex !important;
width: 100% !important;
margin: 0px !important;
background-color: rgba(153, 153, 153, 0.47);
background-color: rgb(181 224 252 / 47%);
justify-content: center !important;
align-items: center !important;
border-radius: 10px;

@ -3,7 +3,11 @@ 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 moment from 'jalali-moment';
import DoneIcon from '@material-ui/icons/Done';
import DoneAllIcon from '@material-ui/icons/DoneAll';
import EditIcon from '@material-ui/icons/Edit';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import './NormalMessage.scss';
export default class NormalMessage extends Component {
@ -13,8 +17,8 @@ export default class NormalMessage extends Component {
<div
className="normal-message d-flex flex-column d-flex"
style={{
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
marginRight: isSelf ? 0 : 70,
marginLeft: isSelf ? 70 : 0,
filter: document !== null ? 'blur(16px)' : 'blur(0px)',
}}
>
@ -22,7 +26,7 @@ export default class NormalMessage extends Component {
alt={user.name}
src={window.baseURL + '/file/download/' + user.fileId}
className=""
style={{ backgroundColor: user.color }}
style={{ backgroundColor: user.color, alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
>
{user.name
.split(' ')
@ -55,15 +59,16 @@ export default class NormalMessage extends Component {
className="normal-message__box--detail d-flex"
style={{
top: 0,
right: isSelf ? 'auto' : 20,
left: isSelf ? 20 : 'auto',
direction: isSelf ? 'ltr' : 'rtl',
paddingRight: isSelf ? 90 : 'auto',
paddingLeft: isSelf ? 'auto' : 90,
paddingRight: isSelf ? 60 : 0,
paddingLeft: isSelf ? 15 : 70,
}}
>
<div style={{ color: isSelf ? '#aaa' : 'gray' }}>
<ExpandMoreIcon fontSize="small" />
</div>
<div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>
<span style={{ color: isSelf ? '#aaa' : 'gray' }}>{message.date}</span>
</div>
) : null}
@ -119,6 +124,21 @@ export default class NormalMessage extends Component {
<div>{message.document.name}</div>
</a>
) : null}
<div className="normal-message__box--dete d-flex">
<span style={{ color: isSelf ? '#aaa' : 'gray' }}>
{message.status == 1 && <DoneIcon fontSize="small" />}
{message.status == 2 && <DoneAllIcon fontSize="small" />}
{message.updatedAt ? (
<>
<span> ویرایش در</span>
{moment(message.updatedAt).format(' hh:mm jMM/jDD')}
</>
) : (
moment(message.createdAt).format('hh:mm')
)}
</span>
</div>
</div>
</div>
);

@ -2,11 +2,12 @@
.normal-message {
// width: 100%;
position: relative;
margin-bottom: 5px;
img {
width: 65px;
height: 65px;
object-fit: cover;
border-radius: 30px;
border-radius: 15px;
border: 3px solid rgba(201, 201, 201, 0.857);
position: relative;
top: 20px;
@ -15,15 +16,15 @@
&__box {
justify-content: flex-end;
width: 100%;
padding: 35px 15px 5px;
padding: 35px 7px 5px;
background-color: white;
border-radius: 30px;
border-radius: 15px;
position: relative;
p {
width: 100%;
text-align: right;
direction: rtl;
font-size: 17px;
font-size: 16px;
// font-family: IRANSansNumeral;
font-weight: 500;
}
@ -32,6 +33,19 @@
width: 100%;
top: 10px;
justify-content: space-between;
font-size: 12px;
span {
font-family: IRANSansNumeralLight;
}
}
&--dete {
position: absolute;
width: 100%;
padding-top: 20px;
padding-left: 20px;
bottom: 0px;
justify-content: space-between;
font-size: 11px;
span {
font-family: IRANSansNumeralLight;
}

@ -22,33 +22,10 @@ export default class RadioMessage extends Component {
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
marginRight: isSelf ? 0 : 70,
marginLeft: isSelf ? 70 : 0,
}}
>
<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' }}>
{message.text}
</p>
) : null}
</div>
<div className="message-2d__options d-flex flex-wrap justify-content-center">
{message.options.map((row) => (
<Row list={row} />

@ -37,33 +37,10 @@ export default class SliderMessage extends Component {
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
marginRight: isSelf ? 0 : 70,
marginLeft: isSelf ? 70 : 0,
}}
>
<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' }}>
{message.text}
</p>
) : null}
</div>
<Grid container spacing={2} alignItems="center">
<Grid item xs>
<Slider

Loading…
Cancel
Save