+
{
this.state.data.messages.map(item => this.state.file === null ? (
diff --git a/src/views/ChatRoom/Body/Body.scss b/src/views/ChatRoom/Body/Body.scss
index 3402d86..a2a8426 100644
--- a/src/views/ChatRoom/Body/Body.scss
+++ b/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);
- &__header{
- align-items: center;
- 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;
- }
- }
+ max-height: calc(100vh - 160px);
+ border-top-left-radius: 40px;
+ border-top-right-radius: 40px;
&__content{
padding : 0px 20px 40px;
height : calc(100vh - 268px);
diff --git a/src/views/ChatRoom/ChatInfo/ChatInfo.js b/src/views/ChatRoom/ChatInfo/ChatInfo.js
new file mode 100644
index 0000000..6435def
--- /dev/null
+++ b/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 (
+
+
+ {/*
*/}
+
+
+
+
+
+
+
محسن محمدی
+
2 دقیقه پیش آنلاین بوده
+
+
+
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
+
+
+
+
+ );
+ }
+}
diff --git a/src/views/ChatRoom/ChatInfo/ChatInfo.scss b/src/views/ChatRoom/ChatInfo/ChatInfo.scss
new file mode 100644
index 0000000..4552dd8
--- /dev/null
+++ b/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;
+ }
+ }
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js b/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js
new file mode 100644
index 0000000..feee43a
--- /dev/null
+++ b/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(
+
+
+
this.setType('media')}>Media
+ this.setType('file')}>Files
+ this.setType('link')}>Links
+ this.setType('music')}>Music
+ this.setType('voice')}>Voice
+
+ {
+ this.state.type === 'media' ?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
: null
+ }
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss b/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss
new file mode 100644
index 0000000..ba91f90
--- /dev/null
+++ b/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;
+ }
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/src/views/ChatRoom/ChatRoom.js b/src/views/ChatRoom/ChatRoom.js
index 04cebb3..6b3d3e1 100644
--- a/src/views/ChatRoom/ChatRoom.js
+++ b/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 (
-
-
-
+
+
+ {
+ this.state.page === 'chatroom' ?
+ <>
+
this.setPage('info')}>
+
محسن محمدی
+
2 دقیقه پیش آنلاین بوده
+
+
+ > :
+ <>
+
+ >
+ }
+
);
}
diff --git a/src/views/ChatRoom/ChatRoom.scss b/src/views/ChatRoom/ChatRoom.scss
index 677d803..65824d3 100644
--- a/src/views/ChatRoom/ChatRoom.scss
+++ b/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;
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/views/ChatRoom/Header/Header.js b/src/views/ChatRoom/Header/Header.js
index 5f68498..b058e6e 100644
--- a/src/views/ChatRoom/Header/Header.js
+++ b/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 (
-
this.back()}>
+
page === 'chatroom' ? this.back() : setPage('chatroom')}>
diff --git a/src/views/ChatRoom/Header/Header.scss b/src/views/ChatRoom/Header/Header.scss
index 1a05070..61bda8a 100644
--- a/src/views/ChatRoom/Header/Header.scss
+++ b/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;
- padding : 0px 15px;
+ align-items: flex-start;
+ padding : 30px 22px 0px;
}
}
\ No newline at end of file
diff --git a/src/views/Home/Body/Body.scss b/src/views/Home/Body/Body.scss
index a170587..b9f79e2 100644
--- a/src/views/Home/Body/Body.scss
+++ b/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;
diff --git a/src/views/Home/Body/ChatList/ChatList.js b/src/views/Home/Body/ChatList/ChatList.js
index ce2c4ac..9cd5927 100644
--- a/src/views/Home/Body/ChatList/ChatList.js
+++ b/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 {
))
}
+
+
+
);
}
diff --git a/src/views/Home/Body/ChatList/ChatList.scss b/src/views/Home/Body/ChatList/ChatList.scss
index de3f0f4..081ceef 100644
--- a/src/views/Home/Body/ChatList/ChatList.scss
+++ b/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;
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/views/Home/Home.scss b/src/views/Home/Home.scss
index 4def151..eef6ef7 100644
--- a/src/views/Home/Home.scss
+++ b/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;
}
diff --git a/src/views/Home/TabBar/TabBar.scss b/src/views/Home/TabBar/TabBar.scss
index dadd698..882d4c6 100644
--- a/src/views/Home/TabBar/TabBar.scss
+++ b/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)
}
}
}