reza added Files view

src/App.css

@@ -4,6 +4,10 @@
   text-align: center;
 }
 
+#root{
+
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;

src/Router.js

@@ -11,7 +11,7 @@ import Auth from "./views/Auth/Auth";
 export default class AppRouter extends Component {
 	render() {
 		let home;
-		if(localStorage.getItem("access_token")){
+		if(!localStorage.getItem("access_token")){
 			home = <Route exact path={'/'}>			
 			<Home />	
 		</Route> 

src/assets/icons/pencil.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="117" height="117" viewBox="0 0 117 117">
+  <image id="Layer_19" data-name="Layer 19" width="117" height="117" xlink:href="data:image/png;base64,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"/>
+</svg>

src/views/ChatRoom/Body/Body.js

@@ -339,12 +339,8 @@ export default class Body extends Component {
 
   render(){
     return (
-      <div className="chat-body d-flex flex-column mt-3">
+      <div className="chat-body d-flex flex-column">
-        <div className="chat-body__header d-flex flex-column mt-2">
+        <div className="chat-body__content d-flex flex-column" id="chatroom"  style={{overflowY : this.state.file !== null ? 'hidden' : 'scroll'}}>
-          <h1>محسن محمدی</h1>
-          <p>2 دقیقه پیش آنلاین بوده</p>
-        </div>
-        <div className="chat-body__content d-flex flex-column mt-2" id="chatroom"  style={{overflowY : this.state.file !== null ? 'hidden' : 'scroll'}}>
           {
             this.state.data.messages.map(item => this.state.file === null ? (
               <Message key={item.id} file={this.state.image} message={item} user1={this.state.data.users[0]} user2={this.state.data.users[1]} />

src/views/ChatRoom/Body/Body.scss

@@ -3,23 +3,9 @@
     background-color: rgb(210, 196, 214);
     justify-content:flex-start;
     flex : 1;
-    max-height: calc(100vh - 82px);
+    max-height: calc(100vh - 160px);
-    &__header{
+    border-top-left-radius: 40px;
-      align-items: center;
+    border-top-right-radius: 40px;
-      height: 50px;
-      h1{
-        font-size: 24px;
-        margin: 0;
-        letter-spacing:-1px;
-        font-family: IRANSansNumeralBold;
-      }
-      
-      p{
-        font-size: 16px;
-        color: rgb(101, 2, 182);
-        letter-spacing:-1px;
-      }
-    }
     &__content{
       padding : 0px 20px 40px;
       height : calc(100vh - 268px);

src/views/ChatRoom/ChatInfo/ChatInfo.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import ChatIcon from '@material-ui/icons/Chat';
+
+import FileTabs from './FileTabs/FileTabs';
+
+import './ChatInfo.scss';
+export default class ChatInfo extends Component {
+  render(){
+    return (
+      <div className="chat-info d-flex flex-column">
+        <div className="chat-info__image d-flex">
+          {/* <img src={} /> */}
+          <div className="chat-info__image--float d-flex">
+            <ChatIcon style={{color : "white", width : 46, height : 46}} />
+          </div>
+        </div>
+        <div className="chat-info__box d-flex flex-column">
+          <div className="chat-info__box--status d-flex flex-column">
+            <h1>محسن محمدی</h1>
+            <p>2 دقیقه پیش آنلاین بوده</p>
+          </div>
+          <div className="chat-info__box--description d-flex">
+            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد </p>
+          </div>
+          <FileTabs />
+        </div>
+      </div>
+    );
+  }
+}

src/views/ChatRoom/ChatInfo/ChatInfo.scss

@@ -0,0 +1,79 @@
+@media screen and (max-width: 450px){
+  .chat-info{
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+    direction : rtl;
+    &__image{
+      width: 100%;
+      background-color: rgb(82, 82, 82);
+      justify-content: center;
+      align-items: center;
+      height: 290px;
+      position: relative;
+      &--float{
+        position: absolute;
+        width:65px;
+        height : 65px;
+        bottom: +8px;
+        right : 40px;
+        background-color: rgb(139, 73, 186);
+        background: linear-gradient(180deg, rgb(186, 73, 182) 0%, rgb(76, 74, 189) 92%);
+        padding : 5px;
+        border-radius: 100px;
+        z-index: 200;
+        justify-content:center;
+        align-items:center;
+        box-shadow: 0px 0px 50px rgba(36, 0, 72, 0.8);
+      }
+    }
+    &__box{
+      width: 100%;
+      z-index: 100;
+      height :  calc(100% - 250px);
+      background-color: rgb(200, 183, 232);
+      border-top-left-radius: 40px;
+      border-top-right-radius: 40px;
+      direction: rtl;
+      padding : 20px 0px 0px 0px;
+      position: sticky;
+      transform: translateY(-40px);
+      top : -150px;
+      overflow-y: scroll;
+      &::-webkit-scrollbar{
+        display: none;
+      }
+      &--status{
+        width: 100%;
+        align-items: flex-end;
+        padding : 0px 30px;
+        h1{
+          font-size: 19px;
+          margin: 0;
+          letter-spacing:-1px;
+          font-family: IRANSansNumeralLight;
+          color: black;
+          font-weight: 100;
+        }
+        p{
+          font-size: 14px;
+          color: rgb(104, 42, 135);
+          margin : 0px;
+        }
+      }
+      &--description{
+        width: 100%;
+        justify-content:center;
+        align-items: center;
+        margin-top: 20px;
+        & p{
+          width: 100%;
+          max-width: 310px;
+          text-align: justify;
+          font-size: 12px;
+        }
+      }
+      
+    }
+  }
+}

src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+
+import './FileTabs.scss';
+export default class FileTabs extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      type : 'media',
+
+    }
+  }
+
+  setType = (val) => {
+    this.setState({
+      type : val,
+    })
+  }
+  render(){
+    return(
+      <div className="file-tabs d-flex flex-column">
+        <div className="file-tabs__types d-flex">
+          <li style={{borderBottom : this.state.type === 'media' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('media')}>Media</li>
+          <li style={{borderBottom : this.state.type === 'file' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('file')}>Files</li>
+          <li style={{borderBottom : this.state.type === 'link' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('link')}>Links</li>
+          <li style={{borderBottom : this.state.type === 'music' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('music')}>Music</li>
+          <li style={{borderBottom : this.state.type === 'voice' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('voice')}>Voice</li>
+        </div>
+        {
+          this.state.type === 'media' ? 
+          <div className="file-tabs__media d-flex flex-wrap">
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+            <div className="file-tabs__media--item">
+
+            </div>
+          </div> : null
+        }
+      </div>
+    );
+  }
+}

src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss

@@ -0,0 +1,30 @@
+@media screen and (max-width: 450px){
+  .file-tabs{
+    width: 100%;
+    position: relative;
+    direction : rtl;
+    &__types{
+      width: 100%;
+      justify-content: space-between;
+      align-items:center;
+      padding : 3px  calc((100vw - 310px)/2) 3px calc((100vw - 310px)/2);
+      direction : ltr;
+      border-top : 8px solid  rgb(13, 84, 150);
+      & li{
+        font-size: 16px;
+        list-style : none;
+        font-weight: 600;
+      }
+    }
+    &__media{
+      width: 100%;
+      &--item{
+        width : calc(100% / 3);
+        height: 150px;
+        border : 2px solid rgb(200, 183, 232);
+        background-color : red;
+      }
+    }
+
+  }
+}

src/views/ChatRoom/ChatRoom.js

@@ -2,14 +2,40 @@ import React, { Component } from 'react';
 
 import Header from './Header/Header';
 import Body from './Body/Body';
+import ChatInfo from './ChatInfo/ChatInfo';
 
 import './ChatRoom.scss';
 export default class ChatRoom extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 'chatroom',
+    }
+  }
+
+  setPage = (val) => {
+    this.setState({
+      page : val,
+    })
+  }
   render(){
     return (
-      <div className="chat-room d-flex flex-column">
+      <div className="chat-room d-flex flex-column" style={{borderBottomRightRadius : this.state.page === 'info' ? '0px' : '40px', borderBottomLeftRadius : this.state.page === 'info' ? '0px' : '40px'}}>
-        <Header />
+        <Header page={this.state.page} setPage={this.setPage} />
+        {
+          this.state.page === 'chatroom' ? 
+          <>
+            <div className="chat-room__status d-flex flex-column" onClick={() => this.setPage('info')}>
+              <h1>محسن محمدی</h1>
+              <p>2 دقیقه پیش آنلاین بوده</p>
+            </div> 
             <Body />
+          </> : 
+          <>
+            <ChatInfo />
+          </>
+        }
+        
       </div>
     );
   }

src/views/ChatRoom/ChatRoom.scss

@@ -1,9 +1,34 @@
 @media screen and (max-width: 450px){
   .chat-room{
     flex : 1;
-    background-color: rgb(15, 93, 209);
+    background: rgb(139, 73, 186);
+    background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%);
     border-radius: 40px;
-    max-height: 100vh;
+    height: 100vh;
     overflow-y: hidden;
+    width:  100vw;
+    box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8);
+    &__status{
+      border-top-left-radius: 40px;
+      border-top-right-radius: 40px;
+      height: 70px;
+      background : rgb(106, 103, 250);
+      position: relative;
+      align-items: center;
+      justify-content:center;
+      h1{
+        font-size: 21px;
+        margin: 0;
+        letter-spacing:-1px;
+        font-family: IRANSansNumeralLight;
+        color: white;
+        font-weight: 100;
+      }
+      p{
+        font-size: 14px;
+        color: white;
+        margin : 0px;
+      }
+    }
   }
 }

src/views/ChatRoom/Header/Header.js

@@ -8,9 +8,10 @@ export default class Header extends Component {
     window.history.back();
   }
   render(){
+    const {page, setPage} = this.props;
     return (
       <div className="header d-flex">
-        <div onClick={() => this.back()}>
+        <div onClick={() => page === 'chatroom' ? this.back() : setPage('chatroom')}>
           <ArrowBackIosIcon style={{color : "white" , width : 32, height : 32}} />
         </div>
         <MoreVertIcon style={{color : "white" , width : 38, height : 38}} />

src/views/ChatRoom/Header/Header.scss

@@ -2,10 +2,10 @@
   .header{
     border-top-right-radius: 40px;
     border-top-left-radius: 40px;
-    height: 70px;
+    height: 90px;
     width: 100%;
     justify-content : space-between;
-    align-items: flex-end;
+    align-items: flex-start;
-    padding : 0px 15px;
+    padding : 30px 22px 0px;
   }
 }

src/views/Home/Body/Body.scss

@@ -1,6 +1,6 @@
 @media screen and (max-width: 450px){
   .body{
-    background-color: rgb(240, 240, 240);
+    background-color: rgb(255, 255, 255);
     flex : 1;
     border-radius: 40px;
     z-index: 10;

src/views/Home/Body/ChatList/ChatList.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import Chat from './Chat/Chat';
 
 import photo from '../../../../assets/images/reza.png';
+import pencil from '../../../../assets/icons/pencil.svg';
 
 import './ChatList.scss';
 export default class ChatList extends Component {
@@ -80,6 +81,9 @@ export default class ChatList extends Component {
             <Chat key={item.id} data={item}  />
           ))
         }
+        <div className="chat-list__float d-flex">
+          <img src={pencil} />
+        </div>
       </div>
     );
   }

src/views/Home/Body/ChatList/ChatList.scss

@@ -4,6 +4,22 @@
     border-radius: 40px;
     padding: 40px 14px;
     position: relative;
-     
+    &__float{
+      position: fixed;
+      height: 70px;
+      width: 70px;
+      bottom: 20px;
+      left: 20px;
+      justify-content: center;
+      align-items: center;
+      background-color: rgb(77, 21, 220);
+      border-radius: 100px;
+      border :2px solid white;
+      box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
+      & img{
+        width: 40px;
+        height : 40px;
+      }
+    }
   }
 }

src/views/Home/Home.scss

@@ -1,7 +1,8 @@
 @media screen and (max-width: 450px){
   .home{
     flex : 1;
-    background-color: rgb(15, 93, 209);
+    background: rgb(139, 73, 186);
+    background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%);
     border-radius: 40px;
     height: 100vh;
   }

src/views/Home/TabBar/TabBar.scss

@@ -16,7 +16,7 @@
         top : 58px;
         left: 0px;
         z-index: 0px;
-        background-color: rgb(240, 240, 240)
+        background-color: rgb(255, 255, 255)
       }
     }
   }