Danovin
/
danovin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza completed chatroom and start product

Browse Source
master
ravino 3 years ago
parent 422e4ae6fb
commit b94acb6143
9 changed files with 323 additions and 257 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 114
      src/views/ChatRoom/Info/FileTabs/index.js
  2. 64
      src/views/ChatRoom/Info/FileTabs/index.scss
  3. 118
      src/views/ChatRoom/Info/index.js
  4. 16
      src/views/ChatRoom/Info/index.scss
  5. 6
      src/views/ChatRoom/index.js
  6. 38
      src/views/Product/BreadCrumb/index.js
  7. 5
      src/views/Product/BreadCrumb/index.scss
  8. 4
      src/views/Product/index.js
  9. 133
      src/views/Product/index.scss

114
src/views/ChatRoom/Info/FileTabs/index.js
Unescape View File

@ -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,49 +36,28 @@ export default class FileTabs extends Component {
};
render() {
return (
<>
{
window.innerWidth < 1000 ?
<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>
<ul className="file-tabs__types d-flex flex-row-reverse">
{
this.state.tabs.map((item,i) => (
<li
style={{
borderBottom: this.state.type === 'voice' ? '2px solid rgb(13, 84, 150)' : 'none',
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('voice')}
onClick={() => this.setType(item.value)}
key={i}
>
Voice
{item.name}
</li>
</div>
))
}
</ul>
{this.state.type === 'media' ? (
<div className="file-tabs__media d-flex flex-wrap">
<div className="file-tabs__media--item"></div>
@ -84,7 +83,48 @@ export default class FileTabs extends Component {
<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
}
</>
);
}
}

64
src/views/ChatRoom/Info/FileTabs/index.scss
Unescape View File

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

118
src/views/ChatRoom/Info/index.js
Unescape View File

@ -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,7 +104,16 @@ 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>
<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"
@ -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 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 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>
<FileTabs onClick={this.setGallery} />
<AntSwitch
checked={alarms}
onChange={() => this.handleChange()}
/>
</div>
{gallery === "profile" ? (
<Gallery data={user.profileImages} onClick={this.setGallery} />
) : null}
{gallery === "media" ? <Gallery data={null} /> : null}
<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}
</>
);

16
src/views/ChatRoom/Info/index.scss
Unescape View File

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

6
src/views/ChatRoom/index.js
Unescape View File

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

38
src/views/Product/BreadCrumb/index.js
Unescape View File

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

5
src/views/Product/BreadCrumb/index.scss
Unescape View File

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

4
src/views/Product/index.js
Unescape View File

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

133
src/views/Product/index.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save