بهطثس

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,19 +9,37 @@ 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)',
         }}
       >
+        {hasavatar && (
           <Avatar
             alt={user.name}
             src={window.baseURL + '/file/download/' + user.fileId}
@@ -33,11 +51,9 @@ export default class NormalMessage extends Component {
               .map((e) => e.slice(0, 1))
               .join(' ')}
           </Avatar>
-        {/* <img
+        )}
-          src={window.baseURL + '/file/download/' + user.fileId}
+
-          style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
+        <div className="d-flex" style={{ direction: isSelf ? 'rtl' : 'ltr' }}>
-          alt={message.id}
-        /> */}
           <div
             className={
               message.voice === null &&
@@ -45,10 +61,14 @@ export default class NormalMessage extends Component {
               message.image === null &&
               message.music === null &&
               message.document === null
-              ? `normal-message__box d-flex`
+                ? `normal-message__box `
-              : `normal-message__box d-flex normal-message__box--file`
+                : `normal-message__box  normal-message__box--file`
             }
-          style={{ backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white' }}
+            style={{
+              paddingTop: hasavatar ? 25 : 10,
+              backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white',
+              width: 'calc(100%-70px)',
+            }}
           >
             {message.voice === null &&
             message.video === null &&
@@ -61,14 +81,52 @@ export default class NormalMessage extends Component {
                   top: 0,
 
                   direction: isSelf ? 'ltr' : 'rtl',
-                paddingRight: isSelf ? 60 : 0,
+                  paddingRight: isSelf ? 70 : 0,
-                paddingLeft: isSelf ? 15 : 70,
+                  paddingLeft: isSelf ? 0 : 70,
                 }}
               >
                 <div style={{ color: isSelf ? '#aaa' : 'gray' }}>
-                <ExpandMoreIcon fontSize="small" />
+                  <ExpandMoreIcon fontSize="small" onClick={this.handleClick} />
                 </div>
-              <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</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>
             ) : null}
 
@@ -87,7 +145,12 @@ export default class NormalMessage extends Component {
                 <a href={message.image} download>
                   <img src={message.image} download alt="" />
                 </a>
-              <p id="2" style={{ color: isSelf ? 'white' : 'black' }}>
+                <p
+                  id="2"
+                  style={{
+                    color: isSelf ? 'white' : 'black',
+                  }}
+                >
                   {message.text}
                 </p>
               </div>
@@ -97,7 +160,12 @@ export default class NormalMessage extends Component {
                 <a href={message.video} download>
                   <ReactPlayer url={message.video} controls width={'100%'} height={250} />
                 </a>
-              <p id="1" style={{ color: isSelf ? 'white' : 'black' }}>
+                <p
+                  id="1"
+                  style={{
+                    color: isSelf ? 'white' : 'black',
+                  }}
+                >
                   {message.text}
                 </p>
               </div>
@@ -124,7 +192,7 @@ export default class NormalMessage extends Component {
                 <div>{message.document.name}</div>
               </a>
             ) : null}
-          <div className="normal-message__box--dete d-flex">
+            <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" />}
@@ -140,6 +208,21 @@ export default class NormalMessage extends Component {
               </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: 20px 50px 0;
-        padding-left: 20px;
         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;