reza added Files view

front
Reza_ashrafi 3 years ago
parent de82826d86
commit 72ff8b2ba8
  1. 4
      src/App.css
  2. 2
      src/Router.js
  3. 3
      src/assets/icons/pencil.svg
  4. BIN
      src/assets/images/Clip.jpg
  5. 8
      src/views/ChatRoom/Body/Body.js
  6. 20
      src/views/ChatRoom/Body/Body.scss
  7. 30
      src/views/ChatRoom/ChatInfo/ChatInfo.js
  8. 79
      src/views/ChatRoom/ChatInfo/ChatInfo.scss
  9. 75
      src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js
  10. 30
      src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss
  11. 32
      src/views/ChatRoom/ChatRoom.js
  12. 29
      src/views/ChatRoom/ChatRoom.scss
  13. 3
      src/views/ChatRoom/Header/Header.js
  14. 6
      src/views/ChatRoom/Header/Header.scss
  15. 2
      src/views/Home/Body/Body.scss
  16. 4
      src/views/Home/Body/ChatList/ChatList.js
  17. 18
      src/views/Home/Body/ChatList/ChatList.scss
  18. 3
      src/views/Home/Home.scss
  19. 2
      src/views/Home/TabBar/TabBar.scss

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

@ -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>

@ -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>

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

@ -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__header d-flex flex-column mt-2">
<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'}}>
<div className="chat-body d-flex flex-column">
<div className="chat-body__content d-flex flex-column" 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]} />

@ -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);

@ -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>
);
}
}

@ -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;
}
}
}
}
}

@ -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>
);
}
}

@ -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;
}
}
}
}

@ -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">
<Header />
<Body />
<div className="chat-room d-flex flex-column" style={{borderBottomRightRadius : this.state.page === 'info' ? '0px' : '40px', borderBottomLeftRadius : this.state.page === 'info' ? '0px' : '40px'}}>
<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>
);
}

@ -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;
}
}
}
}

@ -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}} />

@ -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;
}
}

@ -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;

@ -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>
);
}

@ -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;
}
}
}
}

@ -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;
}

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

Loading…
Cancel
Save