From 422e4ae6fb59924b8c05f9dedad70e5dd965bbe9 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Mon, 5 Jul 2021 07:21:19 +0430 Subject: [PATCH] set drawer --- src/views/ChatList/index.js | 3 + src/views/ChatList/index.scss | 16 +- src/views/ChatRoom/Body/index.js | 533 +++++++++++++++++---------- src/views/ChatRoom/Body/index.scss | 134 ++++++- src/views/ChatRoom/Drawer/index.js | 83 +---- src/views/ChatRoom/Drawer/index.scss | 34 +- src/views/ChatRoom/Header/index.js | 21 +- src/views/ChatRoom/Info/index.js | 212 +++++++++-- src/views/ChatRoom/Info/index.scss | 79 ++++ src/views/ChatRoom/index.js | 62 ++-- src/views/ChatRoom/index.scss | 33 +- 11 files changed, 877 insertions(+), 333 deletions(-) diff --git a/src/views/ChatList/index.js b/src/views/ChatList/index.js index ceac7ef..cf0837f 100644 --- a/src/views/ChatList/index.js +++ b/src/views/ChatList/index.js @@ -38,6 +38,9 @@ class ChatList extends Component { { window.innerWidth > 1000 ?
+
+ +
{this.props.chat_list.map((item, i) => ( diff --git a/src/views/ChatList/index.scss b/src/views/ChatList/index.scss index 41b128b..8eb0f4d 100644 --- a/src/views/ChatList/index.scss +++ b/src/views/ChatList/index.scss @@ -27,9 +27,19 @@ .desktop-chat{ width: 100vw; - height: 100vh; + height: 90vh; max-width: 1250px; - margin: 0px auto; + margin:5vh auto; + box-shadow: 0px 0px 10px rgb(209, 209, 209); + overflow: hidden; + &__banner{ + position: fixed; + left: 0px; + top: 0px; + width: 100vw; + height: 150px; + background-color: #7dc241; + } &__list{ width: cacl(100% / 3); min-width: 350px; @@ -39,6 +49,8 @@ box-shadow: 0px 0px 5px rgb(230, 230, 230); position: relative; padding: 10px; + z-index: 10; + background-color:white; &::-webkit-scrollbar{ display: none; } diff --git a/src/views/ChatRoom/Body/index.js b/src/views/ChatRoom/Body/index.js index 652c093..398df89 100644 --- a/src/views/ChatRoom/Body/index.js +++ b/src/views/ChatRoom/Body/index.js @@ -1,26 +1,29 @@ -import React, { Component } from 'react'; -import Message from './Message'; -import ChatInputs from './Input'; -import Keyboard from './Keyboard'; -import { RecordState } from 'audio-react-recorder'; -import ReactPlayer from 'react-player'; -import ReactAudioPlayer from 'react-audio-player'; -import { ToastContainer } from 'react-toastify'; -import { list, send, sendKeys } from '../../../Redux/actions/message'; -import { info, bio } from '../../../Redux/actions/chat'; -import { connect } from 'react-redux'; -import Emoji from './Emoji/index'; +import React, { Component } from "react"; +import Message from "./Message"; +import ChatInputs from "./Input"; +import Keyboard from "./Keyboard"; +import { RecordState } from "audio-react-recorder"; +import ReactPlayer from "react-player"; +import ReactAudioPlayer from "react-audio-player"; +import { ToastContainer } from "react-toastify"; +import { list, send, sendKeys } from "../../../Redux/actions/message"; +import { info, bio } from "../../../Redux/actions/chat"; +import { connect } from "react-redux"; +import Emoji from "./Emoji/index"; -import './index.scss'; +import "./index.scss"; class List extends Component { constructor(props) { super(props); this.state = { emoji: false, counter: 1, - id: window.innerWidth < 1000 ? window.location.href.split('/').pop() * 1 : this.props.id, + id: + window.innerWidth < 1000 + ? window.location.href.split("/").pop() * 1 + : this.props.id, data: {}, - message: '', + message: "", voice: null, file: null, image: null, @@ -30,15 +33,15 @@ class List extends Component { }; } addcounter(type) { - if (type === 'parent') { - if (localStorage.getItem('tapType') === 'nothing') { - localStorage.removeItem('tapType'); + if (type === "parent") { + if (localStorage.getItem("tapType") === "nothing") { + localStorage.removeItem("tapType"); return; } else { this.setState({ counter: this.state.counter + 1 }); } } else { - localStorage.setItem('tapType', 'nothing'); + localStorage.setItem("tapType", "nothing"); return; } } @@ -69,67 +72,64 @@ class List extends Component { }); }; - typeText = (type,val) => { - if(type === 'text'){ + typeText = (type, val) => { + if (type === "text") { this.setState({ message: val, }); - } - else{ - this.setState(prevState => ({ - message: prevState.message + val , + } else { + this.setState((prevState) => ({ + message: prevState.message + val, })); } }; - - addFile = async (e) => { if ( - e.target.files[0].type === 'image/apng' || - e.target.files[0].type === 'image/avif' || - e.target.files[0].type === 'image/gif' || - e.target.files[0].type === 'image/jpeg' || - e.target.files[0].type === 'image/png' || - e.target.files[0].type === 'image/svg+xml' || - e.target.files[0].type === 'image/webp' + e.target.files[0].type === "image/apng" || + e.target.files[0].type === "image/avif" || + e.target.files[0].type === "image/gif" || + e.target.files[0].type === "image/jpeg" || + e.target.files[0].type === "image/png" || + e.target.files[0].type === "image/svg+xml" || + e.target.files[0].type === "image/webp" ) { this.setState({ image: URL.createObjectURL(e.target.files[0]), - file: 'fill', + file: "fill", video: null, document: null, music: null, }); } else if ( - e.target.files[0].type === 'video/3gpp' || - e.target.files[0].type === 'video/mpeg' || - e.target.files[0].type === 'video/mp4' || - e.target.files[0].type === 'video/ogg' || - e.target.files[0].type === 'video/quicktime' || - e.target.files[0].type === 'video/webm' + e.target.files[0].type === "video/3gpp" || + e.target.files[0].type === "video/mpeg" || + e.target.files[0].type === "video/mp4" || + e.target.files[0].type === "video/ogg" || + e.target.files[0].type === "video/quicktime" || + e.target.files[0].type === "video/webm" ) { this.setState({ image: null, - file: 'fill', + file: "fill", video: URL.createObjectURL(e.target.files[0]), document: null, music: null, }); } else if ( - e.target.files[0].type === 'audio/3gpp' || - e.target.files[0].type === 'audio/aac' || - e.target.files[0].type === 'audio/flac' || - e.target.files[0].type === 'audio/mpeg' || - e.target.files[0].type === 'audio/mp3' || - e.target.files[0].type === 'audio/mp4' || - e.target.files[0].type === 'audio/ogg' || - e.target.files[0].type === 'audio/wav' || - e.target.files[0].type === 'audio/webm' + e.target.files[0].type === "audio/3gpp" || + e.target.files[0].type === "audio/aac" || + e.target.files[0].type === "audio/flac" || + e.target.files[0].type === "audio/mpeg" || + e.target.files[0].type === "audio/mp3" || + e.target.files[0].type === "audio/mp4" || + e.target.files[0].type === "audio/ogg" || + e.target.files[0].type === "audio/wav" || + e.target.files[0].type === "audio/webm" ) { this.setState({ image: null, - file: 'fill', + file: "fill", video: null, document: null, music: URL.createObjectURL(e.target.files[0]), @@ -137,10 +137,13 @@ class List extends Component { } else { this.setState({ image: null, - file: 'fill', + file: "fill", video: null, music: null, - document: { data: URL.createObjectURL(e.target.files[0]), name: e.target.files[0].name }, + document: { + data: URL.createObjectURL(e.target.files[0]), + name: e.target.files[0].name, + }, }); } }; @@ -157,8 +160,8 @@ class List extends Component { messages: [ ...prevState.data.messages, { - id: 'm12', - type: 'normal', + id: "m12", + type: "normal", text: prevState.message, voice: null, image: null, @@ -168,15 +171,15 @@ class List extends Component { document: null, createdAt: now.toString(), user: { - id: 'u1', - name: 'علی', + id: "u1", + name: "علی", }, }, ], }, })); this.setState({ - message: '', + message: "", }); } }; @@ -189,9 +192,9 @@ class List extends Component { messages: [ ...prevState.data.messages, { - id: 'm9', + id: "m9", text: null, - type: 'normal', + type: "normal", voice: audioData, createdAt: now.toString(), image: null, @@ -199,8 +202,8 @@ class List extends Component { document: null, music: null, user: { - id: 'u1', - name: 'علی', + id: "u1", + name: "علی", }, }, ], @@ -221,8 +224,8 @@ class List extends Component { messages: [ ...prevState.data.messages, { - id: 'm8', - type: 'normal', + id: "m8", + type: "normal", text: prevState.message, voice: null, createdAt: now.toString(), @@ -231,8 +234,8 @@ class List extends Component { document: null, music: null, user: { - id: 'u1', - name: 'علی', + id: "u1", + name: "علی", }, }, ], @@ -241,7 +244,7 @@ class List extends Component { this.setState({ file: null, image: null, - message: '', + message: "", }); } else if (video !== null) { this.setState((prevState) => ({ @@ -250,8 +253,8 @@ class List extends Component { messages: [ ...prevState.data.messages, { - id: 'm8', - type: 'normal', + id: "m8", + type: "normal", text: prevState.message, voice: null, createdAt: now.toString(), @@ -260,8 +263,8 @@ class List extends Component { document: null, music: null, user: { - id: 'u1', - name: 'علی', + id: "u1", + name: "علی", }, }, ], @@ -270,7 +273,7 @@ class List extends Component { this.setState({ file: null, video: null, - message: '', + message: "", }); } else if (music !== null) { this.setState((prevState) => ({ @@ -279,9 +282,9 @@ class List extends Component { messages: [ ...prevState.data.messages, { - id: 'm8', + id: "m8", text: prevState.message, - type: 'normal', + type: "normal", voice: null, createdAt: now.toString(), image: null, @@ -289,8 +292,8 @@ class List extends Component { document: null, music: music, user: { - id: 'u1', - name: 'علی', + id: "u1", + name: "علی", }, }, ], @@ -299,7 +302,7 @@ class List extends Component { this.setState({ file: null, music: null, - message: '', + message: "", }); } else if (document !== null) { this.setState((prevState) => ({ @@ -308,9 +311,9 @@ class List extends Component { messages: [ ...prevState.data.messages, { - id: 'm8', + id: "m8", text: prevState.message, - type: 'normal', + type: "normal", voice: null, createdAt: now.toString(), @@ -319,8 +322,8 @@ class List extends Component { document: document, music: null, user: { - id: 'u1', - name: 'علی', + id: "u1", + name: "علی", }, }, ], @@ -329,7 +332,7 @@ class List extends Component { this.setState({ file: null, document: null, - message: '', + message: "", }); } }; @@ -338,7 +341,7 @@ class List extends Component { this.setState({ file: null, document: null, - message: '', + message: "", image: null, video: null, voice: null, @@ -353,19 +356,29 @@ class List extends Component { } componentDidUpdate(prevProps) { - let chatroom = document.getElementById('chatroom'); + let chatroom = document.getElementById("chatroom"); chatroom.scrollTop = chatroom.scrollHeight + 40; - if(prevProps.id !== this.props.id){ - this.props.info({ id: window.innerWidth < 1000 ? window.location.href.split('/').pop() * 1 : this.props.id }); + if (prevProps.id !== this.props.id) { + this.props.info({ + id: + window.innerWidth < 1000 + ? window.location.href.split("/").pop() * 1 + : this.props.id, + }); - this.props.list({ chatId: window.innerWidth < 1000 ? window.location.href.split('/').pop() * 1 : this.props.id }); + this.props.list({ + chatId: + window.innerWidth < 1000 + ? window.location.href.split("/").pop() * 1 + : this.props.id, + }); } } randomColor() { let hex = Math.floor(Math.random() * 0x999999); - let color = '#' + hex.toString(16); + let color = "#" + hex.toString(16); return color; } @@ -375,115 +388,261 @@ class List extends Component { const last = messageList.slice(-1)[0] || {}; const userIdx = this.userIdx || {}; if (Object.keys(userIdx).length == 0) { - chatInfo.users.map((e) => (userIdx[e.id] = { ...e, color: this.randomColor() })); + chatInfo.users.map( + (e) => (userIdx[e.id] = { ...e, color: this.randomColor() }) + ); this.userIdx = userIdx; } return ( -
this.addcounter('parent')} - > -
- {chatInfo.users && - messageList.map((message, i) => - this.state.image === null && - this.state.music === null && - this.state.video === null ? ( - + {window.innerWidth < 1000 ? ( +
this.addcounter("parent")} + > +
+ {chatInfo.users && + messageList.map((message, i) => + this.state.image === null && + this.state.music === null && + this.state.video === null ? ( + this.addcounter()} + isActive={message.id == last.id} + prevUserId={i > 0 ? messageList[i - 1].userId : 0} + isSelf={new Set([101, 103, 106, 108, 110]).has( + message.userId * 1 + )} + key={message.id} + file={this.state.image} + document={this.state.document} + message={message} + user={ + userIdx[message.userId] || { + id: 0, + fileId: 0, + name: "null", + } + } + /> + ) : null + )} + {this.state.image !== null ? ( +
+ +
+ ) : null} + {this.state.video !== null ? ( +
+ +
+ ) : null} + {this.state.music !== null ? ( +
+ +
+ ) : null} + {this.state.document !== null ? ( +
+
+

{`ارسال (${this.state.document.name}) به ${this.props.info.title}؟`}

+
+ + +
+
+
+ ) : null} +
+
this.addcounter("nothing")} + > + {last.action == "text" ? ( + this.addcounter()} - isActive={message.id == last.id} - prevUserId={i > 0 ? messageList[i - 1].userId : 0} - isSelf={new Set([101, 103, 106, 108, 110]).has(message.userId * 1)} - key={message.id} - file={this.state.image} - document={this.state.document} - message={message} - user={userIdx[message.userId] || { id: 0, fileId: 0, name: 'null' }} + onStop={this.onStop} + stop={this.stop} + start={this.start} + cancel={this.cancel} + message={this.state.message} + recordState={this.state.voice} + typeText={this.typeText} + sendMessage={this.sendMessage} + addFile={this.addFile} + file={this.state.file} + parent={this} /> - ) : null - )} - {this.state.image !== null ? ( -
- -
- ) : null} - {this.state.video !== null ? ( -
- + ) : null} + {last.action === "keyboard" ? ( + this.addcounter()} + /> + ) : null} + {this.state.emoji ? ( +
+ +
+ ) : null}
- ) : null} - {this.state.music !== null ? ( -
- + +
+ ) : null} + {window.innerWidth > 1000 ? ( +
this.addcounter("parent")} + > +
+ {chatInfo.users && + messageList.map((message, i) => + this.state.image === null && + this.state.music === null && + this.state.video === null ? ( + this.addcounter()} + isActive={message.id == last.id} + prevUserId={i > 0 ? messageList[i - 1].userId : 0} + isSelf={new Set([101, 103, 106, 108, 110]).has( + message.userId * 1 + )} + key={message.id} + file={this.state.image} + document={this.state.document} + message={message} + user={ + userIdx[message.userId] || { + id: 0, + fileId: 0, + name: "null", + } + } + /> + ) : null + )} + {this.state.image !== null ? ( +
+ +
+ ) : null} + {this.state.video !== null ? ( +
+ +
+ ) : null} + {this.state.music !== null ? ( +
+ +
+ ) : null} + {this.state.document !== null ? ( +
+
+

{`ارسال (${this.state.document.name}) به ${this.props.info.title}؟`}

+
+ + +
+
+
+ ) : null}
- ) : null} - {this.state.document !== null ? ( -
-
-

{`ارسال (${this.state.document.name}) به ${this.props.info.title}؟`}

-
- - +
this.addcounter("nothing")} + > + {last.action == "text" ? ( + this.addcounter()} + onStop={this.onStop} + stop={this.stop} + start={this.start} + cancel={this.cancel} + message={this.state.message} + recordState={this.state.voice} + typeText={this.typeText} + sendMessage={this.sendMessage} + addFile={this.addFile} + file={this.state.file} + parent={this} + /> + ) : null} + {last.action === "keyboard" ? ( + this.addcounter()} + /> + ) : null} + {this.state.emoji ? ( +
+
-
+ ) : null}
- ) : null} -
-
this.addcounter('nothing')} - > - {last.action == 'text' ? ( - this.addcounter()} - onStop={this.onStop} - stop={this.stop} - start={this.start} - cancel={this.cancel} - message={this.state.message} - recordState={this.state.voice} - typeText={this.typeText} - sendMessage={this.sendMessage} - addFile={this.addFile} - file={this.state.file} - parent={this} + - ) : null} - {last.action === 'keyboard' ? ( - this.addcounter()} /> - ) : null} - {this.state.emoji ? ( -
- -
- ) : null} -
- -
+
+ ) : null} + ); } } diff --git a/src/views/ChatRoom/Body/index.scss b/src/views/ChatRoom/Body/index.scss index 17e2071..b351011 100644 --- a/src/views/ChatRoom/Body/index.scss +++ b/src/views/ChatRoom/Body/index.scss @@ -23,7 +23,7 @@ background: url(../../../assets/images/whatsapp.png); background-size: cover; padding: 0px 10px 0px; - height: calc(100vh); + height: 100vh; position: relative; &--preview { position: absolute; @@ -144,3 +144,135 @@ } } } + +.desktop-chat-body { + background-color: rgb(210, 196, 214); + // justify-content: flex-start; + width: 100%; + height: 100%; + overflow-x: hidden; + font-family: numeralLight; + &__content { + background: url(../../../assets/images/whatsapp.png); + background-size: cover; + padding: 0px 10px 0px; + height: 90vh; + position: relative; + &--preview { + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + background-color: rgb(210, 196, 214); + z-index: 1000; + & img { + width: 100%; + max-height: 400px; + object-fit: scale-down; + } + } + &--confirm { + width: 100vw; + height: 100vh; + position: fixed; + top: 0px; + left: 0px; + justify-content: center; + align-items: center; + z-index: 300; + &___box { + position: relative; + bottom: 50px; + width: 100%; + max-width: 250px; + padding: 10px; + // background: rgb(139, 73, 186); + // background: linear-gradient(180deg, rgb(144, 73, 186) 0%, #64cd82 95%); + text-align: right; + direction: rtl; + color: white; + border-radius: 5px; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); + font-size: 16px; + &---options { + justify-self: flex-end; + align-self: flex-start; + width: 110px; + height: 40px; + justify-content: space-between; + & button { + background-color: inherit; + border: none; + font-size: 14px; + &:focus { + outline: none; + } + } + } + } + } + &::-webkit-scrollbar{ + width: 0px; + display: none; + } + } + &__footer { + width: 100%; + z-index: 1000; + background-color: rgb(210, 196, 214); + background: url(../../../assets/images/whatsapp.png); + // box-shadow: 0px 0px 5px 2px #9d9595ad; + background-size: cover; + overflow-y: hidden; + overflow-x: hidden; + padding-bottom: 15px; + &::-webkit-scrollbar{ + width: 0px; + display: none; + } + &--emoji{ + margin-top: 5px; + width: 100%; + background-color: red; + height: 250px; + &::-webkit-scrollbar{ + width: 0px; + display: none; + } + // justify-self: flex-end; + // position: absolute; + // bottom: 0px; + // left: 0px; + .MuiBox-root{ + max-height : 202px; + min-height: 160px; + overflow-y: scroll; + padding: 10px 10px 0px !important; + } + + .MuiTab-root{ + padding: 2px !important; + min-height: 22px !important; + min-width: 34px !important; + font-size: 24px !important; + margin-right: 10px !important; + } + + .MuiTabs-root{ + min-height: 28px !important; + } + + .PrivateTabIndicator-colorPrimary-7{ + width : 34px !important; + background-color: green !important; + } + + .MuiPaper-elevation4{ + box-shadow: none !important; + } + } + } +} diff --git a/src/views/ChatRoom/Drawer/index.js b/src/views/ChatRoom/Drawer/index.js index 2fba026..293f32b 100644 --- a/src/views/ChatRoom/Drawer/index.js +++ b/src/views/ChatRoom/Drawer/index.js @@ -1,90 +1,13 @@ import React from 'react'; -import clsx from 'clsx'; -import { makeStyles, useTheme } from '@material-ui/core/styles'; -import Drawer from '@material-ui/core/Drawer'; import Info from '../Info/index'; import './index.scss'; -const drawerWidth = 350; - -const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - }, - appBar: { - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - }, - appBarShift: { - width: `calc(100% - ${drawerWidth}px)`, - marginLeft: drawerWidth, - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - }, - menuButton: { - marginRight: theme.spacing(2), - }, - hide: { - display: 'none', - }, - drawer: { - width: drawerWidth, - flexShrink: 0, - }, - drawerPaper: { - width: drawerWidth, - }, - drawerHeader: { - display: 'flex', - alignItems: 'center', - padding: theme.spacing(0, 1), - // necessary for content to be below app bar - ...theme.mixins.toolbar, - justifyContent: 'flex-end', - }, - content: { - flexGrow: 1, - padding: theme.spacing(3), - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - marginLeft: -drawerWidth, - }, - contentShift: { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginLeft: 0, - }, -})); - export default function PersistentDrawerLeft(props) { - const classes = useStyles(); - const theme = useTheme(); - - + console.log(props.open); return ( -
- - - - - +
+
); } \ No newline at end of file diff --git a/src/views/ChatRoom/Drawer/index.scss b/src/views/ChatRoom/Drawer/index.scss index 9d3d106..5df9f7f 100644 --- a/src/views/ChatRoom/Drawer/index.scss +++ b/src/views/ChatRoom/Drawer/index.scss @@ -1,4 +1,32 @@ -.MuiDrawer-paper{ - position: absolute !important; - +.custom-drawer{ + // width: 350px; + height: 100%; + width: 0px; + position: relative; + display: none; +} + + +@keyframes drawerActive { + 0% { + width: 0px; + } + 100% { + width: 350px; + } +} + +// @keyframes drawerDeactivate { +// 0% { +// width: 350px; +// } +// 100% { +// width: 0px; +// } +// } + +.custom-drawer-active{ + width: 350px; + animation-name: drawerActive; + animation-duration: 0.3s; } \ No newline at end of file diff --git a/src/views/ChatRoom/Header/index.js b/src/views/ChatRoom/Header/index.js index 4190d06..70ef9fe 100644 --- a/src/views/ChatRoom/Header/index.js +++ b/src/views/ChatRoom/Header/index.js @@ -33,19 +33,26 @@ class Header extends Component { window.history.back(); }; render() { - const { page, setPage, chatInfo,parent } = this.props; + const { page, setPage, chatInfo, parent } = this.props; const { anchorEl } = this.state; return (
- + page === "chatroom" ? this.back() : setPage("chatroom") + } + style={{ color: "grey", width: 29, height: 29, marginTop: 4 }} + /> + ) : null} + +
- page === "chatroom" ? this.back() : setPage("chatroom") + window.innerWidth < 1000 + ? setPage("info") + : parent.handleDrawerOpen() } - style={{ color: "grey", width: 29, height: 29, marginTop: 4 }} - /> -
window.innerWidth < 1000 ? setPage("info") : parent.handleDrawerOpen()} className="chat-header__info d-flex mr-1" > diff --git a/src/views/ChatRoom/Info/index.js b/src/views/ChatRoom/Info/index.js index ac07b94..0c4ebb8 100644 --- a/src/views/ChatRoom/Info/index.js +++ b/src/views/ChatRoom/Info/index.js @@ -1,14 +1,60 @@ -import React, { Component } from 'react'; -import ChatIcon from '@material-ui/icons/Chat'; -import FileTabs from './FileTabs'; -import Gallery from './Gallery'; -import user2 from '../../../assets/images/user2.png'; +import React, { Component } from "react"; +import ChatIcon from "@material-ui/icons/Chat"; +import FileTabs from "./FileTabs"; +import Gallery from "./Gallery"; +import VideocamOutlinedIcon from "@material-ui/icons/VideocamOutlined"; +import CallOutlinedIcon from "@material-ui/icons/CallOutlined"; +import MoreHorizOutlinedIcon from "@material-ui/icons/MoreHorizOutlined"; +import Switch from "@material-ui/core/Switch"; +import { withStyles } from "@material-ui/core/styles"; +import BlockIcon from '@material-ui/icons/Block'; -import './index.scss'; +import user2 from "../../../assets/images/user2.png"; + +import "./index.scss"; + +const maxDesktopSize = 1250; + +const fontSize = { + desktop: { + h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, + h2: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80, + p: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, + h3: window.innerWidth > maxDesktopSize ? 17 : window.innerWidth / 85, + span: window.innerWidth > maxDesktopSize ? 17 : window.innerWidth / 85, + }, +}; export default class ChatInfo extends Component { constructor(props) { super(props); this.state = { + alarms: false, + buttons: [ + { + icon: ( + + ), + backgroundColor: "#00CC69", + }, + { + icon: ( + + ), + backgroundColor: "blue", + }, + { + icon: ( + + ), + backgroundColor: "grey", + }, + ], gallery: null, user: { profileImages: [ @@ -17,9 +63,14 @@ export default class ChatInfo extends Component { { id: 2, src: user2 }, { id: 3, src: user2 }, ], - name: 'محسن محمدی', - lastAct: '2 دقیقه پیش آنلاین بوده', - bio: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد ', + username: "MohammadReza", + educationalInfo: [ + "استاد علوم طبیعی پایه دوازدهم", + "کارشناس ارشد علوم و فنون از دانشگاه تهران", + ], + name: "محسن محمدی", + lastAct: "2 دقیقه پیش آنلاین بوده", + bio: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنام", }, }; } @@ -30,31 +81,132 @@ export default class ChatInfo extends Component { }); }; + handleChange = () => { + this.setState((prevState) => ({ + alarms: !prevState.alarms, + })); + }; + render() { - const { user, gallery } = this.state; + const { user, gallery, buttons, alarms } = this.state; return ( -
-
- this.setGallery('profile')} alt="" /> -
- -
-
-
-
-

{user.name}

-

{user.lastAct}

-
-
-

{user.bio}

+ <> + {window.innerWidth > 1000 ? ( +
+
+
+ عکس کاربر +

{user.name}

+
+

اطلاعات

+

{user.bio}

+

مشخصات تحصیلی

+
    + {user.educationalInfo.map((item, i) => ( +
  • {item}
    • + ))} +
+
+
+ {buttons.map((item, i) => ( +
  • + {item.icon} +
    • + ))} +
    +
    +

    نام کاربری

    + + {user.username}@ + +
    +
    +
    +

    اعلانات

    + {alarms ? 'روشن ': 'خاموش'} +
    + this.handleChange()} + /> +
    +
    + مسدود سازی مخاطب + +
    +
    +
    + ) : null} + {window.innerWidth < 1000 ? ( +
    +
    + this.setGallery("profile")} + alt="" + /> +
    this.props.parent.handleDrawerClose()} + > + +
    +
    +
    +
    +

    {user.name}

    +

    {user.lastAct}

    +
    +
    +

    {user.bio}

    +
    + +
    + {gallery === "profile" ? ( + + ) : null} + {gallery === "media" ? : null}
    - -
    - {gallery === 'profile' ? ( - ) : null} - {gallery === 'media' ? : null} -
    + ); } } + +const AntSwitch = withStyles((theme) => ({ + root: { + width: 28, + height: 16, + padding: 0, + display: "flex", + }, + switchBase: { + padding: 2, + color: "", + "&$checked": { + transform: "translateX(12px)", + color: theme.palette.common.white, + "& + $track": { + opacity: 1, + backgroundColor: "#00CC69", + borderColor: "#00CC69", + }, + }, + }, + thumb: { + width: 12, + height: 12, + boxShadow: "none", + }, + track: { + border: `1px solid ${theme.palette.grey[500]}`, + borderRadius: 16 / 2, + opacity: 1, + backgroundColor: theme.palette.common.white, + }, + checked: {}, +}))(Switch); diff --git a/src/views/ChatRoom/Info/index.scss b/src/views/ChatRoom/Info/index.scss index 0bb73d2..e7db2af 100644 --- a/src/views/ChatRoom/Info/index.scss +++ b/src/views/ChatRoom/Info/index.scss @@ -80,3 +80,82 @@ } } } + + +.desktop-contact-info{ + width: 100%; + height: 100%; + overflow-y: scroll; + box-shadow: 0px 0px 7px rgb(214, 214, 214); + background-color:white; + &::-webkit-scrollbar{ + display: none; + width: 0px; + } + &__header{ + height: 55px; + width : 100%; + border-bottom: 1px solid rgb(224, 224, 224); + } + &__body{ + width: 100%; + height: calc(100% - 55px); + padding-top: 20px; + &--profileImage{ + width: 100px; + height: 100px; + border-radius: 50%; + } + h1{ + color: #6F7074; + margin-top: 10px; + font-family: numeralBold; + } + &--bio{ + width: 100%; + padding: 0px 10px; + h2{ + font-family: numeralMedium; + color: #00CC69; + } + p{ + font-family: numeralLight; + color: #6F7074; + text-align: justify; + letter-spacing: -1px; + } + ul{ + padding: 0px; + list-style: none; + li{ + font-family: numeralLight; + color: #6F7074; + text-align: justify; + letter-spacing: -1px; + } + } + } + &--buttons{ + width: 80%; + margin-bottom: 15px; + li{ + list-style: none; + padding: 10px; + border-radius: 50%; + } + } + &--options{ + width: calc(100% - 20px); + padding: 15px 0px; + border-bottom: 1px solid rgb(224, 224, 224); + h3{ + font-family: numeralMedium; + color: #6F7074; + } + span{ + font-family: numeralLight; + color: #6F7074; + } + } + } +} \ No newline at end of file diff --git a/src/views/ChatRoom/index.js b/src/views/ChatRoom/index.js index c792fd4..aee56f2 100644 --- a/src/views/ChatRoom/index.js +++ b/src/views/ChatRoom/index.js @@ -1,16 +1,16 @@ -import React, { Component } from 'react'; -import Header from './Header'; -import Body from './Body'; -import Info from './Info'; -import Drawer from './Drawer/index'; +import React, { Component } from "react"; +import Header from "./Header"; +import Body from "./Body"; +import Info from "./Info"; +import Drawer from "./Drawer/index"; -import './index.scss'; +import "./index.scss"; export default class ChatRoom extends Component { constructor(props) { super(props); window.nav = this.nav.bind(this); this.state = { - page: 'chatroom', + page: "chatroom", open: false, }; } @@ -19,15 +19,15 @@ export default class ChatRoom extends Component { }; handleDrawerOpen = () => { - this.setState({ + this.setState({ open: true, - }) + }); }; handleDrawerClose = () => { - this.setState({ + this.setState({ open: false, - }) + }); }; setPage = (val) => { @@ -37,19 +37,39 @@ export default class ChatRoom extends Component { }; render() { return ( -
    -
    - {this.state.page === 'chatroom' ? ( + <> + {window.innerWidth > 1000 ? ( <> - +
    +
    + +
    - ) : ( - <> - - - )} -
    + ) : null} + {window.innerWidth < 1000 ? ( +
    +
    + {this.state.page === "chatroom" ? ( + <> + + + ) : ( + <> + + + )} +
    + ) : null} + ); } } diff --git a/src/views/ChatRoom/index.scss b/src/views/ChatRoom/index.scss index 6f6d96d..32b5e3b 100644 --- a/src/views/ChatRoom/index.scss +++ b/src/views/ChatRoom/index.scss @@ -1,8 +1,6 @@ @media screen and (max-width: 4500px) { .chat-room { flex: 1; - background: rgb(139, 73, 186); - background: linear-gradient(180deg, rgb(144, 73, 186) 0%, #64cd82 22%); height: 100vh; overflow: hidden; width: 100vw; @@ -31,3 +29,34 @@ } } } + +.desktop-chat-room { + flex: 1; + height: 100%; + overflow: hidden; + width: 100vw; + position: relative; + overflow-x: hidden; + &__status { + border-top-left-radius: 40px; + border-top-right-radius: 40px; + height: 150px; + background: rgb(106, 103, 250); + position: relative; + align-items: center; + justify-content: flex-start; + h1 { + font-size: 18px; + margin: 0; + letter-spacing: -1px; + font-family: IRANSansNumeralLight; + color: white; + font-weight: 100; + } + p { + font-size: 12px; + color: white; + margin: 0px; + } + } +} \ No newline at end of file