From b3d93575518cfa56d22decf1494355563f3a7df5 Mon Sep 17 00:00:00 2001 From: ravino Date: Sat, 3 Jul 2021 16:58:41 +0430 Subject: [PATCH] reza added desktop chat --- src/views/Auth/Login/index.js | 13 ++-- src/views/ChatList/Chat/index.js | 36 ++++++++--- src/views/ChatList/Chat/index.scss | 1 + src/views/ChatList/Search/index.js | 21 +++++++ src/views/ChatList/Search/index.scss | 26 ++++++++ src/views/ChatList/index.js | 52 ++++++++++++---- src/views/ChatList/index.scss | 37 ++++++++++++ src/views/ChatRoom/Body/index.js | 11 +++- src/views/ChatRoom/Body/index.scss | 25 +++++--- src/views/ChatRoom/Drawer/index.js | 90 ++++++++++++++++++++++++++++ src/views/ChatRoom/Drawer/index.scss | 4 ++ src/views/ChatRoom/Header/index.js | 8 +-- src/views/ChatRoom/Header/index.scss | 6 +- src/views/ChatRoom/index.js | 21 ++++++- src/views/ChatRoom/index.scss | 2 +- 15 files changed, 309 insertions(+), 44 deletions(-) create mode 100644 src/views/ChatList/Search/index.js create mode 100644 src/views/ChatList/Search/index.scss create mode 100644 src/views/ChatRoom/Drawer/index.js create mode 100644 src/views/ChatRoom/Drawer/index.scss diff --git a/src/views/Auth/Login/index.js b/src/views/Auth/Login/index.js index d27f4c6..3ce594f 100644 --- a/src/views/Auth/Login/index.js +++ b/src/views/Auth/Login/index.js @@ -2,8 +2,11 @@ import React, { Component } from "react"; import Cellphone from "./Cellphone/index"; import Code from "./Code/index"; +import { otp } from '../../../Redux/actions/public'; +import { login } from '../../../Redux/actions/user'; +import { connect } from 'react-redux'; -export default class Login extends Component { +class Login extends Component { constructor(props) { super(props); this.state = { @@ -12,9 +15,9 @@ export default class Login extends Component { } async componentDidUpdate() { - const { cellphone, otp, section } = this.state; - // if (cellphone && !otp) this.props.otp({ cellphone }); - // if (section && cellphone && otp) this.props.login({ cellphone, otp }); + const { cellphone, otp, page } = this.state; + if (cellphone && !otp) this.props.otp({ cellphone }); + if (page && cellphone && otp) this.props.login({ cellphone, otp }); } resend = () => { @@ -26,3 +29,5 @@ export default class Login extends Component { return <>{this.state.page === 0 ? : }; } } + +export default connect((state) => ({ isLogin: state.user.isLogin }), { otp, login })(Login); diff --git a/src/views/ChatList/Chat/index.js b/src/views/ChatList/Chat/index.js index 8697ef4..36fdae1 100644 --- a/src/views/ChatList/Chat/index.js +++ b/src/views/ChatList/Chat/index.js @@ -8,15 +8,33 @@ export default class Chat extends Component { render() { const { data } = this.props; return ( - - -
-

{data.name}

-

{data.lastMessage.slice(0, 40) + '...'}

- {data.badge} -
{moment(data.date || new Date()).format('jD/jM hh:mm')}
-
- + <> + { + window.innerWidth < 1000 ? + + +
+

{data.name}

+

{data.lastMessage.slice(0, 40) + '...'}

+ {data.badge} +
{moment(data.date || new Date()).format('jD/jM hh:mm')}
+
+ : null + } + { + window.innerWidth > 1000 ? +
this.props.parent.setState({ selectedUser : data.id })}> + +
+

{data.name}

+

{data.lastMessage.slice(0, 40) + '...'}

+ {data.badge} +
{moment(data.date || new Date()).format('jD/jM hh:mm')}
+
+
: null + } + + ); } } diff --git a/src/views/ChatList/Chat/index.scss b/src/views/ChatList/Chat/index.scss index 9e79cd4..6b255a2 100644 --- a/src/views/ChatList/Chat/index.scss +++ b/src/views/ChatList/Chat/index.scss @@ -7,6 +7,7 @@ position: relative; padding: 0px 0px 0px; text-decoration: none; + cursor: pointer; .avatar { background-color: #b4b4b4; width: 55px; diff --git a/src/views/ChatList/Search/index.js b/src/views/ChatList/Search/index.js new file mode 100644 index 0000000..94240f8 --- /dev/null +++ b/src/views/ChatList/Search/index.js @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; +import navbarSearch from "../../../assets/icons/navbarSearch.png"; + +import './index.scss'; + +const maxDesktopSize = 1250; + +const fontSize = { + desktop: { + input: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 70, + }, +}; + +export default function Search(props){ + return( +
+ + جستجو +
+ ); +} \ No newline at end of file diff --git a/src/views/ChatList/Search/index.scss b/src/views/ChatList/Search/index.scss new file mode 100644 index 0000000..67cad22 --- /dev/null +++ b/src/views/ChatList/Search/index.scss @@ -0,0 +1,26 @@ +.desktop-chat-search{ + width: 100%; + position: relative; + margin: 10px 0px; + img{ + position: absolute; + left: 7px; + top: 6px; + width: 20px; + } + input{ + width: 100%; + padding: 5px 10px 5px 35px; + font-family: numeralMedium; + border-radius: 5px; + background-color: #ebebeb; + color: #6f7074; + border: 0px; + &:focus{ + outline: 0px + } + &::placeholder{ + color: #bfbfbf; + } + } +} \ No newline at end of file diff --git a/src/views/ChatList/index.js b/src/views/ChatList/index.js index a331790..ceac7ef 100644 --- a/src/views/ChatList/index.js +++ b/src/views/ChatList/index.js @@ -5,25 +5,57 @@ import { connect } from 'react-redux'; import ChatIcon from '@material-ui/icons/Chat'; import Chat from './Chat/index'; import Navbar from '../Home/Navbar/index'; - +import Search from './Search/index'; +import Chatroom from '../ChatRoom/index'; import './index.scss'; +import { DesktopWindowsRounded } from '@material-ui/icons'; class ChatList extends Component { + state = { + selectedUser: null, + } + + componentDidMount() { this.props.list(); } render() { return ( -
- - {this.props.chat_list.map((item, i) => ( - - ))} - - - -
+ <> + { + window.innerWidth < 1000 ? +
+ + {this.props.chat_list.map((item, i) => ( + + ))} + + + +
: null + } + { + window.innerWidth > 1000 ? +
+
+ + {this.props.chat_list.map((item, i) => ( + + ))} + + + +
+ { + this.state.selectedUser ? + : null + } + +
: null + } + + ); } } diff --git a/src/views/ChatList/index.scss b/src/views/ChatList/index.scss index eb2b27d..41b128b 100644 --- a/src/views/ChatList/index.scss +++ b/src/views/ChatList/index.scss @@ -24,3 +24,40 @@ } } } + +.desktop-chat{ + width: 100vw; + height: 100vh; + max-width: 1250px; + margin: 0px auto; + &__list{ + width: cacl(100% / 3); + min-width: 350px; + height: 100%; + overflow-y: scroll; + scrollbar-width: 0px; + box-shadow: 0px 0px 5px rgb(230, 230, 230); + position: relative; + padding: 10px; + &::-webkit-scrollbar{ + display: none; + } + &--float { + position: absolute; + height: 50px; + width: 50px; + bottom: 20px; + left: 20px; + justify-content: center; + align-items: center; + background-color: #01db38; + border-radius: 100px; + box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.4); + & svg { + color: white; + width: 25px; + height: 25px; + } + } + } +} diff --git a/src/views/ChatRoom/Body/index.js b/src/views/ChatRoom/Body/index.js index 2e38970..652c093 100644 --- a/src/views/ChatRoom/Body/index.js +++ b/src/views/ChatRoom/Body/index.js @@ -18,7 +18,7 @@ class List extends Component { this.state = { emoji: false, counter: 1, - id: window.location.href.split('/').pop() * 1, + id: window.innerWidth < 1000 ? window.location.href.split('/').pop() * 1 : this.props.id, data: {}, message: '', voice: null, @@ -352,10 +352,17 @@ class List extends Component { // this.componentDidUpdate(); } - componentDidUpdate() { + componentDidUpdate(prevProps) { 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 }); + + 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); diff --git a/src/views/ChatRoom/Body/index.scss b/src/views/ChatRoom/Body/index.scss index 88161cc..17e2071 100644 --- a/src/views/ChatRoom/Body/index.scss +++ b/src/views/ChatRoom/Body/index.scss @@ -15,7 +15,7 @@ .chat-body { background-color: rgb(210, 196, 214); // justify-content: flex-start; - flex: 1; + width: 100%; height: 100%; overflow-x: hidden; font-family: numeralLight; @@ -23,9 +23,7 @@ background: url(../../../assets/images/whatsapp.png); background-size: cover; padding: 0px 10px 0px; - margin-bottom: 55px; - height: 100%; - min-height: 200px; + height: calc(100vh); position: relative; &--preview { position: absolute; @@ -83,6 +81,10 @@ } } } + &::-webkit-scrollbar{ + width: 0px; + display: none; + } } &__footer { width: 100%; @@ -91,17 +93,22 @@ background: url(../../../assets/images/whatsapp.png); // box-shadow: 0px 0px 5px 2px #9d9595ad; background-size: cover; - overflow-y: scroll; + overflow-y: hidden; overflow-x: hidden; - position: fixed; - bottom: 0px; - left: 0; - padding-bottom: 5px; + 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; diff --git a/src/views/ChatRoom/Drawer/index.js b/src/views/ChatRoom/Drawer/index.js new file mode 100644 index 0000000..2fba026 --- /dev/null +++ b/src/views/ChatRoom/Drawer/index.js @@ -0,0 +1,90 @@ +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(); + + + return ( +
+ + + + + +
+ ); +} \ No newline at end of file diff --git a/src/views/ChatRoom/Drawer/index.scss b/src/views/ChatRoom/Drawer/index.scss new file mode 100644 index 0000000..9d3d106 --- /dev/null +++ b/src/views/ChatRoom/Drawer/index.scss @@ -0,0 +1,4 @@ +.MuiDrawer-paper{ + position: absolute !important; + +} \ No newline at end of file diff --git a/src/views/ChatRoom/Header/index.js b/src/views/ChatRoom/Header/index.js index ccae44c..4190d06 100644 --- a/src/views/ChatRoom/Header/index.js +++ b/src/views/ChatRoom/Header/index.js @@ -33,7 +33,7 @@ class Header extends Component { window.history.back(); }; render() { - const { page, setPage, chatInfo } = this.props; + const { page, setPage, chatInfo,parent } = this.props; const { anchorEl } = this.state; return (
@@ -42,10 +42,10 @@ class Header extends Component { onClick={() => page === "chatroom" ? this.back() : setPage("chatroom") } - style={{ color: "white", width: 29, height: 29, marginTop: 4 }} + style={{ color: "grey", width: 29, height: 29, marginTop: 4 }} />
setPage("info")} + onClick={() => window.innerWidth < 1000 ? setPage("info") : parent.handleDrawerOpen()} className="chat-header__info d-flex mr-1" > @@ -61,7 +61,7 @@ class Header extends Component { aria-controls="simple-menu" aria-haspopup="true" onClick={this.handleClick} - style={{ color: "white", width: 32, height: 32 }} + style={{ color: "grey", width: 32, height: 32 }} /> {/* */} diff --git a/src/views/ChatRoom/Header/index.scss b/src/views/ChatRoom/Header/index.scss index a300095..e120497 100644 --- a/src/views/ChatRoom/Header/index.scss +++ b/src/views/ChatRoom/Header/index.scss @@ -6,19 +6,19 @@ align-items: flex-end; padding: 5px 5px 5px; position: relative; - background-color: #128c7e; + background-color: #d4d4d4; &__info { text-align: right; & h1 { font-size: 16px; - color: white; + color: black; margin: 0px; margin-bottom: 5px; font-weight: 600; } & span { - color: white; + color: #464646; font-size: 11px; } } diff --git a/src/views/ChatRoom/index.js b/src/views/ChatRoom/index.js index d702040..c792fd4 100644 --- a/src/views/ChatRoom/index.js +++ b/src/views/ChatRoom/index.js @@ -2,6 +2,8 @@ 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'; export default class ChatRoom extends Component { constructor(props) { @@ -9,11 +11,25 @@ export default class ChatRoom extends Component { window.nav = this.nav.bind(this); this.state = { page: 'chatroom', + open: false, }; } nav = (url) => { this.props.history.push(url); }; + + handleDrawerOpen = () => { + this.setState({ + open: true, + }) + }; + + handleDrawerClose = () => { + this.setState({ + open: false, + }) + }; + setPage = (val) => { this.setState({ page: val, @@ -22,10 +38,11 @@ export default class ChatRoom extends Component { render() { return (
-
+
{this.state.page === 'chatroom' ? ( <> - + + ) : ( <> diff --git a/src/views/ChatRoom/index.scss b/src/views/ChatRoom/index.scss index e4bf0ac..6f6d96d 100644 --- a/src/views/ChatRoom/index.scss +++ b/src/views/ChatRoom/index.scss @@ -6,7 +6,7 @@ height: 100vh; overflow: hidden; width: 100vw; - box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8); + position: relative; &__status { border-top-left-radius: 40px; border-top-right-radius: 40px;