You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

353 lines
13 KiB

import React, { Component } from "react";
import FileTabs from "./FileTabs";
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 KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardBackspaceIcon from "@material-ui/icons/KeyboardBackspace";
import CloseIcon from "@material-ui/icons/Close";
import user2 from "../../../assets/images/user2.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
h2: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
h3: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20,
h2: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 23,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
},
};
export default class ChatInfo extends Component {
constructor(props) {
super(props);
this.state = {
gallery: false,
alarms: false,
buttons: [
{
icon: (
<CallOutlinedIcon
style={{ color: "white", width: 40, height: 40 }}
/>
),
backgroundColor: "#00CC69",
},
{
icon: (
<VideocamOutlinedIcon
style={{ color: "white", width: 40, height: 40 }}
/>
),
backgroundColor: "blue",
},
{
icon: (
<MoreHorizOutlinedIcon
style={{ color: "black", width: 40, height: 40 }}
/>
),
backgroundColor: "grey",
},
],
user: {
profileImages: [
{ id: 0, src: user2 },
{ id: 1, src: user2 },
{ id: 2, src: user2 },
{ id: 3, src: user2 },
],
username: "MohammadReza",
educationalInfo: [
window.t("استاد علوم طبیعی پایه دوازدهم"),
window.t("کارشناس ارشد علوم و فنون از دانشگاه تهران"),
],
name: window.t("محسن محمدی"),
lastAct: window.t("2 دقیقه پیش آنلاین بوده"),
bio: window.t(
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنام"
),
},
};
}
setGallery = (val) => {
this.setState({
gallery: val,
});
};
handleChange = () => {
this.setState((prevState) => ({
alarms: !prevState.alarms,
}));
};
render() {
const { user, buttons, alarms } = this.state;
return (
<>
{window.innerWidth > 1000 ? (
<section className="desktop-contact-info d-flex flex-column">
<header className="desktop-contact-info__header d-flex align-items-center justify-content-center">
{this.state.gallery ? (
<KeyboardBackspaceIcon
onClick={() => this.setState({ gallery: false })}
style={{
cursor: "pointer",
width: 35,
height: 35,
position: "absolute",
left: 10,
top: 10,
}}
/>
) : (
<CloseIcon
onClick={() => this.props.parent.handleDrawerClose()}
style={{
cursor: "pointer",
width: 35,
height: 35,
position: "absolute",
left: 10,
top: 10,
}}
/>
)}
</header>
{!this.state.gallery ? (
<div className="desktop-contact-info__body d-flex flex-column align-items-center">
<img
className="desktop-contact-info__body--profileImage"
src={user.profileImages[0].src}
alt={window.t("عکس کاربر")}
/>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{user.name}</h1>
<div className="desktop-contact-info__body--bio d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>اطلاعات</h2>
<p style={{ fontSize: fontSize.desktop.p }}>{user.bio}</p>
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
مشخصات تحصیلی
</h2>
<ul>
{user.educationalInfo.map((item, i) => (
<li key={i} style={{ fontSize: fontSize.desktop.p }}>
{item}
</li>
))}
</ul>
</div>
<div className="desktop-contact-info__body--buttons d-flex justify-content-around mt-3">
{buttons.map((item, i) => (
<li
style={{ backgroundColor: item.backgroundColor }}
key={i}
>
{item.icon}
</li>
))}
</div>
<div className="desktop-contact-info__body--options d-flex justify-content-between">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>نام کاربری</h3>
<span style={{ fontSize: fontSize.desktop.span }}>
{user.username}@
</span>
</div>
<div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center">
<div>
<h3 style={{ fontSize: fontSize.desktop.h3 }}>اعلانات</h3>
<span style={{ fontSize: fontSize.desktop.span }}>
{alarms ? "روشن " : window.t("خاموش")}
</span>
</div>
<AntSwitch
checked={alarms}
onChange={() => this.handleChange()}
/>
</div>
<div
className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center"
onClick={() => this.setState({ gallery: true })}
>
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
رسانه,فیلم,عکس
</h3>
<KeyboardArrowLeftIcon
style={{ width: 30, height: 30, color: "grey" }}
/>
</div>
<div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center">
<h3 style={{ color: "red", fontSize: fontSize.desktop.h3 }}>
مسدود سازی مخاطب
</h3>
<BlockIcon style={{ width: 30, height: 30, color: "red" }} />
</div>
</div>
) : (
<FileTabs />
)}
</section>
) : null}
{window.innerWidth < 1000 ? (
<section className="desktop-contact-info d-flex flex-column">
<header className="desktop-contact-info__header d-flex align-items-center justify-content-center">
{this.state.gallery ? (
<KeyboardBackspaceIcon
onClick={() => this.setState({ gallery: false })}
style={{
cursor: "pointer",
width: 35,
height: 35,
position: "absolute",
left: 10,
top: 10,
}}
/>
) : (
<CloseIcon
onClick={() =>
window.innerWidth > 1000
? this.props.parent.handleDrawerClose()
: this.props.parent.setState({ page: "chatroom" })
}
style={{
cursor: "pointer",
width: 35,
height: 35,
position: "absolute",
left: 10,
top: 10,
}}
/>
)}
</header>
{!this.state.gallery ? (
<div className="desktop-contact-info__body d-flex flex-column align-items-center">
<img
className="desktop-contact-info__body--profileImage"
src={user.profileImages[0].src}
alt={window.t("عکس کاربر")}
/>
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{user.name}</h1>
<div className="desktop-contact-info__body--bio d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>اطلاعات</h2>
<p style={{ fontSize: fontSize.mobile.p }}>{user.bio}</p>
<h2 style={{ fontSize: fontSize.mobile.h2 }}>
مشخصات تحصیلی
</h2>
<ul>
{user.educationalInfo.map((item, i) => (
<li key={i} style={{ fontSize: fontSize.mobile.p }}>
{item}
</li>
))}
</ul>
</div>
<div className="desktop-contact-info__body--buttons d-flex justify-content-around">
{buttons.map((item, i) => (
<li
style={{ backgroundColor: item.backgroundColor }}
key={i}
>
{item.icon}
</li>
))}
</div>
<div className="desktop-contact-info__body--options d-flex justify-content-between">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>نام کاربری</h3>
<span style={{ fontSize: fontSize.mobile.span }}>
{user.username}@
</span>
</div>
<div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center">
<div>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>اعلانات</h3>
<span style={{ fontSize: fontSize.mobile.span }}>
{alarms ? "روشن " : window.t("خاموش")}
</span>
</div>
<AntSwitch
checked={alarms}
onChange={() => this.handleChange()}
/>
</div>
<div
className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center"
onClick={() => this.setState({ gallery: true })}
>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>
رسانه,فیلم,عکس
</h3>
<KeyboardArrowLeftIcon
style={{ width: 30, height: 30, color: "grey" }}
/>
</div>
<div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center">
<h3 style={{ color: "red", fontSize: fontSize.mobile.h3 }}>
مسدود سازی مخاطب
</h3>
<BlockIcon style={{ width: 30, height: 30, color: "red" }} />
</div>
</div>
) : (
<FileTabs />
)}
</section>
) : 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);