reza completed chatroom and start product

master
ravino 3 years ago
parent 422e4ae6fb
commit b94acb6143
  1. 178
      src/views/ChatRoom/Info/FileTabs/index.js
  2. 64
      src/views/ChatRoom/Info/FileTabs/index.scss
  3. 128
      src/views/ChatRoom/Info/index.js
  4. 16
      src/views/ChatRoom/Info/index.scss
  5. 12
      src/views/ChatRoom/index.js
  6. 38
      src/views/Product/BreadCrumb/index.js
  7. 5
      src/views/Product/BreadCrumb/index.scss
  8. 6
      src/views/Product/index.js
  9. 133
      src/views/Product/index.scss

@ -1,12 +1,32 @@
import React, { Component } from 'react';
import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
},
mobile: {
li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
},
};
export default class FileTabs extends Component {
constructor(props) {
super(props);
this.state = {
type: 'media',
tabs : [
{id : 0, value: 'media', name: 'رسانه'},
{id : 1, value: 'video', name: 'ویدیو'},
{id : 2, value: 'voice', name: 'صوت'},
{id : 3, value: 'link', name: 'لینک'},
{id : 4, value: 'file', name: 'فایل'},
],
};
}
setType = (val) => {
@ -16,75 +36,95 @@ export default class FileTabs extends Component {
};
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 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>
<>
{
window.innerWidth < 1000 ?
<div className="file-tabs d-flex flex-column">
<ul className="file-tabs__types d-flex flex-row-reverse">
{
this.state.tabs.map((item,i) => (
<li
style={{
borderBottom: this.state.type === item.value ? '3px solid #00CC69' : 'none',
fontSize: fontSize.mobile.li,
color: this.state.type === item.value ? '#00CC69' : '#000'
}}
onClick={() => this.setType(item.value)}
key={i}
>
{item.name}
</li>
))
}
</ul>
{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 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> : null
}
{
window.innerWidth > 1000 ?
<div className="desktop-file-tabs d-flex flex-column">
<ul className="desktop-file-tabs__types d-flex flex-row-reverse">
{
this.state.tabs.map((item,i) => (
<li
style={{
borderBottom: this.state.type === item.value ? '3px solid #00CC69' : 'none',
fontSize: fontSize.desktop.li,
color: this.state.type === item.value ? '#00CC69' : '#000'
}}
onClick={() => this.setType(item.value)}
key={i}
>
{item.name}
</li>
))
}
</ul>
{this.state.type === 'media' ? (
<div className="desktop-file-tabs__media d-flex flex-wrap">
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
</div>
) : null}
</div> : null
}
</>
);
}
}

@ -1,24 +1,23 @@
@media screen and (max-width: 4500px) {
.file-tabs {
width: 100%;
height: 100%;
height: calc(100% - 55px);
position: relative;
direction: rtl;
position: sticky;
top: 0-5px;
overflow-y: scroll;
font-family: numeralLight;
&__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);
margin-top: 20px;
background-color: #128c7e;
margin-left: auto;
margin-right:auto;
padding: 0px 10px;
& li {
font-size: 16px;
list-style: none;
font-weight: 600;
}
}
&__media {
@ -26,11 +25,54 @@
overflow-y: scroll;
padding-bottom: 52px;
&--item {
width: calc(100% / 3);
height: calc(100vw / 3);
border: 2px solid rgb(200, 183, 232);
background-color: red;
width: calc(100% / 3.6);
height: calc(100vw / 3.6);
margin: 10px;
background-color: #eee;
}
}
}
}
.desktop-file-tabs {
width: 100%;
position: relative;
direction: rtl;
position: sticky;
min-height: 150px;
top: -5px;
&__types {
text-align: right;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 0px;
padding: 0px;
direction: ltr;
margin-top: 20px;
padding: 5px 10px;
& li {
font-family: numeralLight;
font-size: 16px;
list-style: none;
padding: 0px 0px 7px 0px;
cursor: pointer;
}
}
&__media {
width: 100%;
overflow-y: scroll;
padding-bottom: 52px;
&::-webkit-scrollbar{
display: none;
width: 0px;
}
&--item {
width: calc(100% / 3.35);
height: 120px;
background-color: #eee;
margin: 5px;
cursor: pointer;
}
}
}

@ -8,26 +8,38 @@ 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 ? 16 : window.innerWidth / 85,
h3: window.innerWidth > maxDesktopSize ? 17 : window.innerWidth / 85,
span: window.innerWidth > maxDesktopSize ? 17 : window.innerWidth / 85,
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: [
{
@ -55,7 +67,6 @@ export default class ChatInfo extends Component {
backgroundColor: "grey",
},
],
gallery: null,
user: {
profileImages: [
{ id: 0, src: user2 },
@ -93,8 +104,17 @@ export default class ChatInfo extends Component {
<>
{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"></header>
<div className="desktop-contact-info__body d-flex flex-column align-items-center">
<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}
@ -107,7 +127,7 @@ export default class ChatInfo extends Component {
<h2 style={{ fontSize: fontSize.desktop.h2 }}>مشخصات تحصیلی</h2>
<ul>
{user.educationalInfo.map((item, i) => (
<li key={i}>{item}</li>
<li key={i} style={{ fontSize: fontSize.desktop.p}}>{item}</li>
))}
</ul>
</div>
@ -127,50 +147,88 @@ export default class ChatInfo extends Component {
<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={{color: alarms ? '#00CC69' : 'red'}}>{alarms ? 'روشن ': 'خاموش'}</span>
<span style={{ fontSize: fontSize.desktop.span }}>{alarms ? 'روشن ': 'خاموش'}</span>
</div>
<AntSwitch
checked={alarms}
onChange={() => this.handleChange()}
/>
</div>
<div className="desktop-contact-info__body--options d-flex justify-content-between">
<span style={{ color : 'red',fontSize: fontSize.desktop.h3 }}>مسدود سازی مخاطب</span>
<BlockIcon style={{width : 35, height : 35, color : 'red'}} />
<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>
<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 ? (
<div className="contact-info d-flex flex-column">
<div className="chat-info__image d-flex">
<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}
onClick={() => this.setGallery("profile")}
alt=""
alt="عکس کاربر"
/>
<div
className="chat-info__image--float d-flex"
onClick={() => this.props.parent.handleDrawerClose()}
>
<ChatIcon style={{ color: "white", width: 46, height: 46 }} />
<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>
<div className="chat-info__box d-flex flex-column">
<div className="chat-info__box--status d-flex flex-column">
<h1>{user.name}</h1>
<p>{user.lastAct}</p>
<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="chat-info__box--description d-flex">
<p>{user.bio}</p>
<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 ? 'روشن ': 'خاموش'}</span>
</div>
<AntSwitch
checked={alarms}
onChange={() => this.handleChange()}
/>
</div>
<FileTabs onClick={this.setGallery} />
</div>
{gallery === "profile" ? (
<Gallery data={user.profileImages} onClick={this.setGallery} />
) : null}
{gallery === "media" ? <Gallery data={null} /> : null}
</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}
</>
);

@ -93,17 +93,19 @@
width: 0px;
}
&__header{
height: 55px;
min-height: 55px;
width : 100%;
border-bottom: 1px solid rgb(224, 224, 224);
position: relative;
}
&__body{
width: 100%;
height: calc(100% - 55px);
padding-top: 20px;
overflow-x: hidden;
&--profileImage{
width: 100px;
height: 100px;
width: 140px;
min-height: 140px;
border-radius: 50%;
}
h1{
@ -114,9 +116,11 @@
&--bio{
width: 100%;
padding: 0px 10px;
margin-top: 10px;
h2{
font-family: numeralMedium;
color: #00CC69;
margin-top: 10px;
}
p{
font-family: numeralLight;
@ -138,6 +142,7 @@
&--buttons{
width: 80%;
margin-bottom: 15px;
margin-top: 25px;
li{
list-style: none;
padding: 10px;
@ -148,14 +153,19 @@
width: calc(100% - 20px);
padding: 15px 0px;
border-bottom: 1px solid rgb(224, 224, 224);
margin-top: 10px;
h3{
font-family: numeralMedium;
color: #6F7074;
margin: 0px;
}
span{
font-family: numeralLight;
color: #6F7074;
}
&__click{
cursor: pointer;
}
}
}
}

@ -53,18 +53,18 @@ export default class ChatRoom extends Component {
) : null}
{window.innerWidth < 1000 ? (
<div className="chat-room d-flex flex-column">
<Header
page={this.state.page}
setPage={this.setPage}
parent={this}
/>
{this.state.page === "chatroom" ? (
<>
<Header
page={this.state.page}
setPage={this.setPage}
parent={this}
/>
<Body id={this.props.id} setPage={this.setPage} />
</>
) : (
<>
<Info />
<Info parent={this} />
</>
)}
</div>

@ -0,0 +1,38 @@
import React from 'react';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import {Link} from 'react-router-dom';
import './index.scss';
function handleClick(event) {
event.preventDefault();
console.info('You clicked a breadcrumb.');
}
const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
desktop: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
mobile : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
};
export default function ActiveLastBreadcrumb() {
return (
<Breadcrumbs aria-label="breadcrumb">
<Link style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}} to={'/products'} onClick={handleClick}>
محصولات
</Link>
<Link style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}} to="/products" onClick={handleClick}>
پایه هفتم
</Link>
<Link
style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}}
to="/products/1"
onClick={handleClick}
>
زیست شناسی
</Link>
</Breadcrumbs>
);
}

@ -0,0 +1,5 @@
a {
text-decoration: none;
font-family: numeralLight;
color: #6F7074;
}

@ -4,6 +4,7 @@ import {Link} from 'react-router-dom';
import Footer from "../Home/Footer/index";
import Navbar from "../Home/Navbar/index";
import Comment from './Comment/index';
import Breadcrumbs from './BreadCrumb/index';
import book2 from "../../assets/images/book2.png";
@ -17,7 +18,10 @@ export default class Product extends Component {
<>
<div className="product d-flex flex-column">
<Navbar />
<Breadcrumbs />
<header class="product__header d-flex mt-4">
</header>
</div>
<Footer />
</>

@ -154,137 +154,6 @@
min-height: calc(100vh - 288px);
&__header{
width: 100%;
img{
height: calc(100vh / 2.7);
}
h1{
margin-top: 10px;
font-family: numeralBold;
font-size: calc(100vw / 20);
color: #7dc241;
letter-spacing: -1px;
}
h2{
font-family: numeralMedium;
font-size: calc(100vw / 28);
color: #6f7074;
}
a{
border: 0px;
font-family: numeralMedium;
font-size: calc(100vw / 25);
padding: 15px 0px;
width: 150px;
text-align: center;
letter-spacing: -1px;
text-decoration: none;
}
&--purchase{
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background-color: #00cc69;
color: white !important;
}
&--sampleButton{
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #efefef;
color: #6f7074 !important;
}
}
&__abstraction{
margin-top: 30px;
width: 100%;
h1{
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
}
p{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
&__modules{
margin-top: 20px;
width: 100%;
padding: 20px 10px;
background-color: #baffdc2f;
border-radius: 10px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 10px;
li{
font-family: numeralLight;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
}
}
&__tips{
margin-top: 20px;
width: 100%;
padding: 20px 10px;
background-color: #1f6fb528;
border-radius: 10px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #074f8b;
letter-spacing: -1px;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 10px;
li{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #074f8b;
letter-spacing: -1px;
margin-bottom: 3px;
}
}
}
&__description{
width: 100%;
margin-top: 20px;
p{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
&__comments{
max-width: 100%;
margin-top: 30px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
margin-bottom: 30px;
}
&--list{
width: 100vw;
overflow-x: scroll !important;
transform: translateX(10px);
}
padding: 0px 10px;
}
}

Loading…
Cancel
Save