بهطثس

src/Redux/proxy.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 = 'http://localhost:4040/api/v1'; //'https://chatstory.ir/api/v1';
 const token = '';
 const loginURL = 'user/otp/login';
 const logoutURL = 'user/logout';

src/views/ChatRoom/Body/Body.js

@@ -350,12 +350,11 @@ class Body extends Component {
     const { setPage, chatInfo, messageList, userId } = this.props;
     const userIdx = {};
     chatInfo.users.map((e) => (userIdx[e.id] = { ...e, color: this.randomColor() }));
-    console.log({ userId });
     return (
       <div className="chat-body d-flex flex-column">
         <div className="chat-room__status d-flex flex-column" onClick={() => setPage('info')}>
           <h1>{chatInfo.title}</h1>
-          <p>{chatInfo.subtitle}</p>
+          <p>{chatInfo.subTitle}</p>
         </div>
         <div
           className="chat-body__content d-flex flex-column"
@@ -372,6 +371,8 @@ class Body extends Component {
               this.state.music === null &&
               this.state.video === null ? (
                 <Message
+                  isActive={i == messageList.length - 1}
+                  prevUserId={i > 0 ? messageList[i - 1].userId : 0}
                   isSelf={1 == item.userId}
                   key={i}
                   file={this.state.image}
@@ -446,7 +447,6 @@ class Body extends Component {
 }
 export default connect(
   (state) => {
-    console.log(state);
     return {
       chatInfo: state.chat.info,
       userId: state.user.isLogin.id,

src/views/ChatRoom/Body/Body.scss

@@ -11,6 +11,7 @@
       font-family: 'IRANSansNumeralBold';
     }
   }
+
   .chat-body {
     background-color: rgb(210, 196, 214);
     justify-content: flex-start;
@@ -18,6 +19,7 @@
     height: 100%;
     border-top-left-radius: 40px;
     border-top-right-radius: 40px;
+
     &__content {
       background: url(../../../assets/images/chat.png);
       background-size: cover;

src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js

@@ -24,6 +24,7 @@ export default class DraggableMessage extends Component {
         style={{
           marginRight: isSelf ? 0 : 70,
           marginLeft: isSelf ? 70 : 0,
+          maxWidth: 400,
         }}
       >
         <SortableList items={this.state.options} onSortEnd={this.onSortEnd} />

src/views/ChatRoom/Body/Message/Message.js

@@ -8,10 +8,11 @@ import RadioMessage from './RadioMessage/RadioMessage.js';
 
 export default class Message extends Component {
   render() {
-    const { message, user, isSelf, file, document } = this.props;
+    const { message, user, isSelf, file, document, prevUserId, isActive } = this.props;
     return (
-      <>
+      <div style={{ marginTop: 5 }}>
         <NormalMessage
+          prevUserId={prevUserId}
           message={message}
           user={user}
           isSelf={isSelf}
@@ -19,17 +20,19 @@ export default class Message extends Component {
           document={document}
         />
 
-        {message.type === '2d' ? <Message2D message={message} user={user} isSelf={isSelf} /> : null}
+        {message.type === '2d' ? (
+          <Message2D message={message} user={user} isSelf={isSelf} isActive={isActive} />
+        ) : null}
         {message.type === 'draggable' ? (
-          <DraggableMessage message={message} user={user} isSelf={isSelf} />
+          <DraggableMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
         ) : null}
         {message.type === 'slider' ? (
-          <SliderMessage message={message} user={user} isSelf={isSelf} />
+          <SliderMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
         ) : null}
         {message.type === 'radio' ? (
-          <RadioMessage message={message} user={user} isSelf={isSelf} />
+          <RadioMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
         ) : null}
-      </>
+      </div>
     );
   }
 }

src/views/ChatRoom/Body/Message/Message2D/Message2D.js

@@ -12,6 +12,7 @@ export default class Message2D extends Component {
         style={{
           marginRight: isSelf ? 0 : 70,
           marginLeft: isSelf ? 70 : 0,
+          maxWidth: 400,
         }}
       >
         <div className="message-2d__options d-flex flex-column">

src/views/ChatRoom/Body/Message/Message2D/Message2D.scss

@@ -47,7 +47,7 @@
           span {
             font-size: 16px;
             color: black;
-            font-weight: 600;
+            font-weight: 400;
           }
         }
       }

src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js

@@ -9,135 +9,218 @@ import DoneAllIcon from '@material-ui/icons/DoneAll';
 import EditIcon from '@material-ui/icons/Edit';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import './NormalMessage.scss';
-
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ReplyIcon from '@material-ui/icons/Reply';
+import ForwardIcon from '@material-ui/icons/Forward';
+import DeleteIcon from '@material-ui/icons/Delete';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import TextsmsIcon from '@material-ui/icons/Textsms';
 export default class NormalMessage extends Component {
+  state = { messageMenu: null };
+  handleClose = () => {
+    this.setState({
+      messageMenu: null,
+    });
+  };
+  handleClick = (event) => {
+    this.setState({
+      messageMenu: event.currentTarget,
+    });
+  };
   render() {
-    const { message, user, document, isSelf } = this.props;
+    const { message, user, document, isSelf, prevUserId } = this.props;
+    const { messageMenu } = this.state;
+    const hasavatar = prevUserId != message.userId;
     return (
       <div
         className="normal-message d-flex flex-column d-flex"
         style={{
-          marginRight: isSelf ? 0 : 70,
-          marginLeft: isSelf ? 70 : 0,
           filter: document !== null ? 'blur(16px)' : 'blur(0px)',
         }}
       >
-        <Avatar
-          alt={user.name}
-          src={window.baseURL + '/file/download/' + user.fileId}
-          className=""
-          style={{ backgroundColor: user.color, alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
-        >
-          {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 &&
+        {hasavatar && (
+          <Avatar
+            alt={user.name}
+            src={window.baseURL + '/file/download/' + user.fileId}
+            className=""
+            style={{ backgroundColor: user.color, alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
+          >
+            {user.name
+              .split(' ')
+              .map((e) => e.slice(0, 1))
+              .join(' ')}
+          </Avatar>
+        )}
+
+        <div className="d-flex" style={{ direction: isSelf ? 'rtl' : 'ltr' }}>
+          <div
+            className={
+              message.voice === null &&
+              message.video === null &&
+              message.image === null &&
+              message.music === null &&
+              message.document === null
+                ? `normal-message__box `
+                : `normal-message__box  normal-message__box--file`
+            }
+            style={{
+              paddingTop: hasavatar ? 25 : 10,
+              backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white',
+              width: 'calc(100%-70px)',
+            }}
+          >
+            {message.voice === null &&
             message.video === null &&
             message.image === null &&
             message.music === null &&
-            message.document === null
-              ? `normal-message__box d-flex`
-              : `normal-message__box d-flex normal-message__box--file`
-          }
-          style={{ backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white' }}
-        >
-          {message.voice === null &&
-          message.video === null &&
-          message.image === null &&
-          message.music === null &&
-          message.document === null ? (
-            <div
-              className="normal-message__box--detail d-flex"
-              style={{
-                top: 0,
+            message.document === null ? (
+              <div
+                className="normal-message__box--detail d-flex"
+                style={{
+                  top: 0,
 
-                direction: isSelf ? 'ltr' : 'rtl',
-                paddingRight: isSelf ? 60 : 0,
-                paddingLeft: isSelf ? 15 : 70,
-              }}
-            >
-              <div style={{ color: isSelf ? '#aaa' : 'gray' }}>
-                <ExpandMoreIcon fontSize="small" />
+                  direction: isSelf ? 'ltr' : 'rtl',
+                  paddingRight: isSelf ? 70 : 0,
+                  paddingLeft: isSelf ? 0 : 70,
+                }}
+              >
+                <div style={{ color: isSelf ? '#aaa' : 'gray' }}>
+                  <ExpandMoreIcon fontSize="small" onClick={this.handleClick} />
+                </div>
+                <Menu
+                  id="simple-menu"
+                  anchorEl={messageMenu}
+                  keepMounted
+                  open={Boolean(messageMenu)}
+                  onClose={() => this.handleClose()}
+                  style={{ direction: 'rtl', fontFamily: 'IRANSansNumeralLight' }}
+                >
+                  <MenuItem
+                    style={{ fontFamily: 'IRANSansNumeralLight' }}
+                    onClick={() => this.handleClose()}
+                  >
+                    <ReplyIcon fontSize="samall" />
+                    پاسخ
+                  </MenuItem>
+
+                  <MenuItem
+                    style={{ fontFamily: 'IRANSansNumeralLight' }}
+                    onClick={() => this.handleClose()}
+                  >
+                    <ForwardIcon fontSize="samall" />
+                    باز ارسال به
+                  </MenuItem>
+                  <MenuItem
+                    style={{ fontFamily: 'IRANSansNumeralLight' }}
+                    onClick={() => this.handleClose()}
+                  >
+                    <EditIcon fontSize="samall" />
+                    ویرایش
+                  </MenuItem>
+                  <MenuItem
+                    style={{ fontFamily: 'IRANSansNumeralLight' }}
+                    onClick={() => this.handleClose()}
+                  >
+                    <DeleteIcon fontSize="samall" />
+                    حذف
+                  </MenuItem>
+                </Menu>
+                {hasavatar && <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>}
               </div>
-              <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>
-            </div>
-          ) : null}
+            ) : null}
 
-          {message.text !== null &&
-          message.video === null &&
-          message.image === null &&
-          message.music === null &&
-          message.document === null ? (
-            <p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
-              {message.text}
-            </p>
-          ) : null}
-          {message.voice !== null ? <ReactAudioPlayer src={message.voice.url} controls /> : null}
-          {message.image !== null ? (
-            <div className="normal-message__box--caption">
-              <a href={message.image} download>
-                <img src={message.image} download alt="" />
-              </a>
-              <p id="2" style={{ color: isSelf ? 'white' : 'black' }}>
-                {message.text}
-              </p>
-            </div>
-          ) : null}
-          {message.video !== null ? (
-            <div className="normal-message__box--caption">
-              <a href={message.video} download>
-                <ReactPlayer url={message.video} controls width={'100%'} height={250} />
-              </a>
-              <p id="1" style={{ color: isSelf ? 'white' : 'black' }}>
+            {message.text !== null &&
+            message.video === null &&
+            message.image === null &&
+            message.music === null &&
+            message.document === null ? (
+              <p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
                 {message.text}
               </p>
-            </div>
-          ) : null}
-          {message.music !== null ? <ReactAudioPlayer src={message.music} controls /> : null}
-          {message.document !== null ? (
-            <a
-              href={message.document.data}
-              download
-              className="normal-message__box--document d-flex"
-              style={{
-                backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white',
-                color: isSelf ? 'white' : 'black',
-              }}
-            >
-              <CloudDownloadIcon
+            ) : null}
+            {message.voice !== null ? <ReactAudioPlayer src={message.voice.url} controls /> : null}
+            {message.image !== null ? (
+              <div className="normal-message__box--caption">
+                <a href={message.image} download>
+                  <img src={message.image} download alt="" />
+                </a>
+                <p
+                  id="2"
+                  style={{
+                    color: isSelf ? 'white' : 'black',
+                  }}
+                >
+                  {message.text}
+                </p>
+              </div>
+            ) : null}
+            {message.video !== null ? (
+              <div className="normal-message__box--caption">
+                <a href={message.video} download>
+                  <ReactPlayer url={message.video} controls width={'100%'} height={250} />
+                </a>
+                <p
+                  id="1"
+                  style={{
+                    color: isSelf ? 'white' : 'black',
+                  }}
+                >
+                  {message.text}
+                </p>
+              </div>
+            ) : null}
+            {message.music !== null ? <ReactAudioPlayer src={message.music} controls /> : null}
+            {message.document !== null ? (
+              <a
+                href={message.document.data}
+                download
+                className="normal-message__box--document d-flex"
                 style={{
+                  backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white',
                   color: isSelf ? 'white' : 'black',
-                  width: 32,
-                  height: 32,
-                  marginRight: 10,
                 }}
-              />
-              <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>
+              >
+                <CloudDownloadIcon
+                  style={{
+                    color: isSelf ? 'white' : 'black',
+                    width: 32,
+                    height: 32,
+                    marginRight: 10,
+                  }}
+                />
+                <div>{message.document.name}</div>
+              </a>
+            ) : null}
+            <div className="normal-message__box--date 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>
+                    {moment(message.updatedAt).format(' hh:mm jMM/jDD')}
+                  </>
+                ) : (
+                  moment(message.createdAt).format('hh:mm')
+                )}
+              </span>
+            </div>
+          </div>
+          <div className={isSelf ? 'icons self' : 'icons'}>
+            <div>
+              <FavoriteIcon fontSize="samall" color="primary" />
+              <span> {10}</span>
+            </div>
+
+            {/* <div>
+              <TextsmsIcon fontSize="samall" color="secondary" />
+              <span> {10}</span>
+            </div>
+            <div>
+              <span> {'+5 اعتماد به نفس'}</span>
+            </div> */}
           </div>
         </div>
       </div>

src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss

@@ -1,8 +1,43 @@
 @media screen and (max-width: 4500px) {
+  .icons {
+    //position: absolute;
+    width: 90px;
+    padding: 0 5px;
+    display: inline-block !important;
+    // top: 55px;
+    // right: -35px;
+    direction: ltr;
+    & .MuiSvgIcon-root {
+      font-size: 18px !important;
+      opacity: 0.8;
+    }
+    & span {
+      font-size: 11px !important;
+      opacity: 0.8;
+    }
+  }
+  .self {
+    direction: rtl;
+    text-align: right;
+    // left: -35px;
+    // right: none;
+  }
+  .MuiMenuItem-root {
+    min-height: 10px !important;
+    font-size: 12px !important;
+    color: grey;
+    padding: 5px 10px !important;
+    & .MuiSvgIcon-root {
+      font-size: 16px !important;
+      padding: 2px;
+      color: grey;
+    }
+  }
+
   .normal-message {
     // width: 100%;
     position: relative;
-    margin-bottom: 5px;
+    margin-bottom: 2px;
     img {
       width: 65px;
       height: 65px;
@@ -14,9 +49,12 @@
       z-index: 50;
     }
     &__box {
+      line-height: 1em;
+      max-width: 400px;
+      display: flex;
       justify-content: flex-end;
       width: 100%;
-      padding: 35px 7px 5px;
+      padding: 20px 7px 5px;
       background-color: white;
       border-radius: 15px;
       position: relative;
@@ -38,13 +76,12 @@
           font-family: IRANSansNumeralLight;
         }
       }
-      &--dete {
+      &--date {
         position: absolute;
         width: 100%;
-        padding-top: 20px;
-        padding-left: 20px;
+        padding: 20px 50px 0;
         bottom: 0px;
-        justify-content: space-between;
+        justify-content: flex-end;
         font-size: 11px;
         span {
           font-family: IRANSansNumeralLight;

src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js

@@ -24,6 +24,7 @@ export default class RadioMessage extends Component {
         style={{
           marginRight: isSelf ? 0 : 70,
           marginLeft: isSelf ? 70 : 0,
+          maxWidth: 400,
         }}
       >
         <div className="message-2d__options d-flex flex-wrap justify-content-center">

src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js

@@ -37,8 +37,11 @@ export default class SliderMessage extends Component {
       <div
         className="message-2d d-flex flex-column d-flex"
         style={{
+          marginTop: 5,
+          marginBottom: 5,
           marginRight: isSelf ? 0 : 70,
           marginLeft: isSelf ? 70 : 0,
+          maxWidth: 400,
         }}
       >
         <Grid container spacing={2} alignItems="center">

src/views/ChatRoom/Header/Header.js

@@ -59,19 +59,19 @@ export default class Header extends Component {
             style={{ direction: 'rtl', fontFamily: 'IRANSansNumeralLight' }}
           >
             <MenuItem
-              style={{ color: 'white', fontFamily: 'IRANSansNumeralLight' }}
+              style={{ fontFamily: 'IRANSansNumeralLight' }}
               onClick={() => this.handleClose()}
             >
               پروفایل
             </MenuItem>
             <MenuItem
-              style={{ color: 'white', fontFamily: 'IRANSansNumeralLight' }}
+              style={{ fontFamily: 'IRANSansNumeralLight' }}
               onClick={() => this.handleClose()}
             >
               حساب کاربری
             </MenuItem>
             <MenuItem
-              style={{ color: 'white', fontFamily: 'IRANSansNumeralLight' }}
+              style={{ fontFamily: 'IRANSansNumeralLight' }}
               onClick={() => this.handleClose()}
             >
               خروج

src/views/Home/Header/NavbarDrawer/NavbarDrawer.scss

@@ -1,3 +1,10 @@
+.MuiDrawer-paperAnchorRight {
+  background: linear-gradient(180deg, rgb(144, 73, 186) 20%, rgb(111, 108, 255) 72%) !important;
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0px;
+  }
+}
 .navbar-drawer {
   // background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important;
   text-align: right !important;
@@ -74,14 +81,6 @@
   }
 }
 
-.MuiPaper-root {
-  background: linear-gradient(180deg, rgb(144, 73, 186) 20%, rgb(111, 108, 255) 72%) !important;
-  &::-webkit-scrollbar {
-    display: none;
-    width: 0px;
-  }
-}
-
 .navbar-drawer__bottom a {
   width: 100%;
   height: 100px;