reza added Gallery

front
Reza_ashrafi 4 years ago
parent af0ac4d462
commit 4cff5d7ea4
  1. 1
      src/views/ChatRoom/Body/Body.js
  2. 2
      src/views/ChatRoom/Body/Body.scss
  3. 7
      src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
  4. 4
      src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
  5. 14
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
  6. 8
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
  7. 46
      src/views/ChatRoom/ChatInfo/ChatInfo.js
  8. 5
      src/views/ChatRoom/ChatInfo/ChatInfo.scss
  9. 32
      src/views/ChatRoom/ChatInfo/Gallery/Gallery.js
  10. 66
      src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss
  11. 46
      src/views/ChatRoom/Header/Header.js
  12. 24
      src/views/Home/Body/Location/Location.js
  13. 3
      src/views/Home/Header/Header.js
  14. 9
      src/views/Home/Header/Header.scss
  15. 39
      src/views/Home/Header/NavbarDrawer/NavbarDrawer.js

@ -507,6 +507,7 @@ export default class Body extends Component {
<div className="chat-body__content d-flex flex-column" id="chatroom" <div className="chat-body__content d-flex flex-column" id="chatroom"
style={{ style={{
overflowY : this.state.file !== null ? 'hidden' : 'scroll', overflowY : this.state.file !== null ? 'hidden' : 'scroll',
paddingBottom : this.state.footer === 'suggest' ? 110 : 70
}} }}
> >
{ {

@ -9,7 +9,7 @@
&__content{ &__content{
background: url(../../../assets/images/chat.png); background: url(../../../assets/images/chat.png);
background-size: cover; background-size: cover;
padding : 0px 10px 70px; padding : 0px 10px 0px;
height : 100%; height : 100%;
min-height: 200px; min-height: 200px;
position: relative; position: relative;

@ -8,12 +8,13 @@
align-items : flex-end; align-items : flex-end;
&__item{ &__item{
padding : 8px 6px; padding : 8px 6px;
background-color : rgb(13, 214, 20); background-color : white;
border-radius: 5px; border-radius: 5px;
margin : 5px; margin : 5px;
width :100% !important; width :100% !important;
justify-content : center; justify-content : center;
color : white; color : black;
min-height: 60px;
} }
} }
} }
@ -41,7 +42,7 @@
.rec-pagination{ .rec-pagination{
z-index: 600; z-index: 600;
position: absolute; position: absolute;
top: -12px !important; top: -12px;
// left: calc(50% - 20px) !important; // left: calc(50% - 20px) !important;
& button{ & button{
background-color: grey; background-color: grey;

@ -25,8 +25,8 @@
p{ p{
width: 100%; width: 100%;
text-align: right; text-align: right;
font-size: 17px; font-size: 16px;
font-family: IRANSansNumeralBold; // font-family: IRANSansNumeralBold;
} }
} }

@ -30,16 +30,24 @@ export default class NormalMessage extends Component {
{ {
message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ? message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ?
<div <div
className="normal-message__box--detail" className="normal-message__box--detail d-flex"
style={{ style={{
right : message.user.id === user1.id ? "auto" : 20 , right : message.user.id === user1.id ? "auto" : 20 ,
left : message.user.id === user1.id ? 20 : "auto" left : message.user.id === user1.id ? 20 : "auto",
direction : message.user.id === user1.id ? 'ltr' : 'rtl',
paddingRight : message.user.id === user1.id ? 90 : 'auto',
paddingLeft : message.user.id === user1.id ? 'auto' : 90,
}} }}
> >
<span <div
style={{color: message.user.id === user1.id ? "white" : "black" }} style={{color: message.user.id === user1.id ? "white" : "black" }}
> >
{message.user.name} {message.user.name}
</div>
<span
style={{color: message.user.id === user1.id ? "gray" : "gray" }}
>
12:14
</span> </span>
</div> : null </div> : null
} }

@ -23,14 +23,16 @@
width: 100%; width: 100%;
text-align: right; text-align: right;
font-size: 17px; font-size: 17px;
font-family: IRANSansNumeralBold; // font-family: IRANSansNumeral;
font-weight: 500;
} }
&--detail{ &--detail{
position: absolute; position: absolute;
width: 100%;
top : 10px; top : 10px;
justify-content: space-between;
span{ span{
font-family: IRANSansNumeralBold; font-family: IRANSansNumeralLight;
color: rgb(155, 155, 155);
} }
} }
&--caption{ &--caption{

@ -2,28 +2,64 @@ import React, { Component } from 'react';
import ChatIcon from '@material-ui/icons/Chat'; import ChatIcon from '@material-ui/icons/Chat';
import FileTabs from './FileTabs/FileTabs'; import FileTabs from './FileTabs/FileTabs';
import Gallery from './Gallery/Gallery.js';
import user2 from '../../../assets/images/user2.png';
import './ChatInfo.scss'; import './ChatInfo.scss';
export default class ChatInfo extends Component { export default class ChatInfo extends Component {
constructor(props) {
super(props);
this.state = {
gallery : null,
user : {
profileImages : [
{id : 0, src : user2},
{id : 1, src : user2},
{id : 2, src : user2},
{id : 3, src : user2}
],
name : 'محسن محمدی',
lastAct : '2 دقیقه پیش آنلاین بوده',
bio : 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد '
}
}
}
setGallery = (val) => {
this.setState({
gallery : val,
})
}
render(){ render(){
const {user, gallery} = this.state;
return ( return (
<div className="chat-info d-flex flex-column"> <div className="chat-info d-flex flex-column">
<div className="chat-info__image d-flex"> <div className="chat-info__image d-flex">
{/* <img src={} /> */} <img src={user.profileImages[0].src} onClick={() => this.setGallery('profile')} />
<div className="chat-info__image--float d-flex"> <div className="chat-info__image--float d-flex">
<ChatIcon style={{color : "white", width : 46, height : 46}} /> <ChatIcon style={{color : "white", width : 46, height : 46}} />
</div> </div>
</div> </div>
<div className="chat-info__box d-flex flex-column"> <div className="chat-info__box d-flex flex-column">
<div className="chat-info__box--status d-flex flex-column"> <div className="chat-info__box--status d-flex flex-column">
<h1>محسن محمدی</h1> <h1>{user.name}</h1>
<p>2 دقیقه پیش آنلاین بوده</p> <p>{user.lastAct}</p>
</div> </div>
<div className="chat-info__box--description d-flex"> <div className="chat-info__box--description d-flex">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد </p> <p>{user.bio}</p>
</div> </div>
<FileTabs /> <FileTabs onClick={this.setGallery}/>
</div> </div>
{
gallery === 'profile' ?
<Gallery data={user.profileImages} onClick={this.setGallery} /> : null
}
{
gallery === 'media' ?
<Gallery data={null} /> : null
}
</div> </div>
); );
} }

@ -11,6 +11,11 @@
align-items: center; align-items: center;
height: 290px; height: 290px;
position: relative; position: relative;
& img{
width: 100%;
height: 100%;
object-fit: cover
}
&--float{ &--float{
position: absolute; position: absolute;
width:65px; width:65px;

@ -0,0 +1,32 @@
import React, { Component, useState } from 'react';
import Carousel from 'react-elastic-carousel';
import CloseIcon from '@material-ui/icons/Close';
import './Gallery.scss';
export default function Gallery(props) {
const [state,setState] = useState({
});
return (
<div className="gallery-modal d-flex justify-content align-items-center">
<div onClick={() => props.onClick(null)}>
<CloseIcon style={{color : "red", width : 46, height : 46,position : 'absolute', right :5, top :20}} />
</div>
<Carousel itemsToShow={1} isRTL={true} enableTilt={false} showArrows={true}>
{
props.data.map(item => (
<Image item={item} key={item.id} />
))
}
</Carousel>
</div>
);
}
const Image = (props) => {
return (
<img style={{maxHeight : '50%', maxWidth : '100vw'}} src={props.item.src} />
);
}

@ -0,0 +1,66 @@
@media screen and (max-width: 450px){
.gallery-modal{
width: 100%;
height: 100%;
background-color: #383737f1;
position: absolute;
left: 0;
top: 0;
z-index: 700;
.rec-carousel-wrapper{
position: relative;
bottom:70px;
}
.rec-arrow{
position: absolute;
background : none;
box-shadow:none;
&:hover:enabled{
background : none;
box-shadow:none;
color: black;
}
}
.rec-arrow-right{
top : calc(50% - 20px);
left: 0px;
z-index: 800;
}
.rec-arrow-left{
top : calc(50% - 20px);
right: 0px;
z-index: 800;
}
.rec-pagination{
// display:none;
z-index: 600;
position: absolute;
top: auto;
bottom: -30px !important;
// left: calc(50% - 20px) !important;
& button{
background-color: grey;
margin : 2px !important;
box-shadow: 0px 0px 0px rgba(255,255,255,1);
}
}
}
.rec-dot_active{
background-color: white !important;
color: white !important;
// box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important;
}
.Carousel-button-10{
background-color: white !important;
}
.rec-pagination{
img{
// width: 100vw;
// max-height: 200px;
// height: 100vh;
}
}
}

@ -1,14 +1,36 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import MoreVertIcon from '@material-ui/icons/MoreVert'; import MoreVertIcon from '@material-ui/icons/MoreVert';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import './Header.scss'; import './Header.scss';
export default class Header extends Component { export default class Header extends Component {
constructor(props) {
super(props);
this.state = {
anchorEl : null,
}
}
handleClick = (event) => {
this.setState({
anchorEl : event.currentTarget
});
};
handleClose = () => {
this.setState({
anchorEl : null,
})
}
back = () => { back = () => {
window.history.back(); window.history.back();
} }
render(){ render(){
const {page, setPage} = this.props; const {page, setPage} = this.props;
const {anchorEl} = this.state;
return ( return (
<div className="chat-header d-flex"> <div className="chat-header d-flex">
<div onClick={() => page === 'chatroom' ? this.back() : setPage('chatroom')}> <div onClick={() => page === 'chatroom' ? this.back() : setPage('chatroom')}>
@ -19,7 +41,29 @@ export default class Header extends Component {
<span></span> <span></span>
<h1 style={{fontSize :17}}>داستانبازی</h1> <h1 style={{fontSize :17}}>داستانبازی</h1>
</div> </div>
<MoreVertIcon style={{color : "white" , width : 38, height : 38}} /> <div>
<div>
<MoreVertIcon
aria-controls="simple-menu"
aria-haspopup="true"
onClick={this.handleClick}
style={{color : "white" , width : 38, height : 38}}
/>
</div>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={() => this.handleClose()}
style={{direction : 'rtl'}}
>
<MenuItem style={{color : "white"}} onClick={() => this.handleClose()}>پروفایل</MenuItem>
<MenuItem style={{color : "white"}} onClick={() => this.handleClose()}>حساب کاربری</MenuItem>
<MenuItem style={{color : "white"}} onClick={() => this.handleClose()}>خروج</MenuItem>
</Menu>
</div>
</div> </div>
); );
} }

@ -23,19 +23,27 @@ const blue = new L.Icon({
popupAnchor: [-0, -0], popupAnchor: [-0, -0],
iconSize: [25,38], iconSize: [25,38],
}); });
export default class Location extends Component { export default class Location extends Component {
state = {}; state = {};
currentLocation = (map) => {
this.setState({
map : map,
})
this.map=map;
map.locate({setView:true})
map.on('locationfound',(e)=>{
this.setState({lat:e.latitude,lng:e.longitude,accuracy:e.accuracy})
})
}
render(){ render(){
return ( return (
<div className="location" style={{display: 'block !important' , height:"100%", }}> <div className="location" style={{display: 'block !important' , height:"100%", }}>
<MapContainer <MapContainer
whenCreated={(map) =>{ whenCreated={(map) =>{
this.map=map; this.currentLocation(map)
map.locate({setView:true}) }}
map.on('locationfound',(e)=>{
this.setState({lat:e.latitude,lng:e.longitude,accuracy:e.accuracy})
})
} }
ref={this.myRef} ref={this.myRef}
center={[35.73366050852552, 51.414611756817976]} center={[35.73366050852552, 51.414611756817976]}
zoom={14} zoom={14}
@ -97,7 +105,9 @@ export default class Location extends Component {
} }
</MapContainer> </MapContainer>
<div className="location__footer d-flex flex-row-reverse"> <div className="location__footer d-flex flex-row-reverse">
<div className="location__footer--icon"> <div className="location__footer--icon" onClick={(map) =>{
this.currentLocation(this.state.map)
}}>
<NavigationIcon style={{color : "white" , width : 35, height : 35}} /> <NavigationIcon style={{color : "white" , width : 35, height : 35}} />
</div> </div>
<span>10 کیلومتر</span> <span>10 کیلومتر</span>

@ -74,6 +74,9 @@ export default function Header(props) {
ref={inputRef5} ref={inputRef5}
placeholder="بنویس ..." placeholder="بنویس ..."
/> />
<div>
<SearchIcon style={{color : "gray" , width : 38, height : 38,marginLeft : 15}} />
</div>
</div> : </div> :
<> <>
<div onClick={() => setState({ ...state, ['searchFlag']: !state['searchFlag']})}> <div onClick={() => setState({ ...state, ['searchFlag']: !state['searchFlag']})}>

@ -16,6 +16,9 @@
left : 0px; left : 0px;
height : 60px; height : 60px;
z-index: 550; z-index: 550;
animation-duration: 0.3s;
animation-name: search;
animation-iteration-count: 1;
input{ input{
width: 100%; width: 100%;
position: relative; position: relative;
@ -36,4 +39,10 @@
} }
} }
} }
}
@keyframes search{
0% {left : -100vw; top : 0px}
100% {left : 0px; top : 0px}
} }

@ -1,16 +1,19 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {toast} from 'react-toastify'; import {toast} from 'react-toastify';
import HomeIcon from '@material-ui/icons/Home'; import HomeIcon from '@material-ui/icons/Home';
import CloseIcon from '@material-ui/icons/Close'; import CloseIcon from '@material-ui/icons/Close';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import SettingsIcon from '@material-ui/icons/Settings';
import UpdateIcon from '@material-ui/icons/Update';
import ReportIcon from '@material-ui/icons/Report';
import ShareIcon from '@material-ui/icons/Share';
// import {connect} from 'react-redux'; // import {connect} from 'react-redux';
import './NavbarDrawer.scss'; import './NavbarDrawer.scss';
import home from '../../../../assets/icons/home.png';
import exit from '../../../../assets/icons/exit.png';
class NavbarDrawer extends Component { class NavbarDrawer extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -22,6 +25,36 @@ class NavbarDrawer extends Component {
icon: <HomeIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />, icon: <HomeIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
toast : '', toast : '',
}, },
{
name: 'تنظیمات',
link: '/',
icon: <SettingsIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
toast : '',
},
{
name: 'به روز رسانی',
link: '/',
icon: <UpdateIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
toast : '',
},
{
name: 'همرسانی',
link: '/',
icon: <ShareIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
toast : '',
},
{
name: 'گزارش ایراد',
link: '/',
icon: <ReportIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
toast : '',
},
{
name: 'خروج',
link: '/',
icon: <ExitToAppIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
toast : '',
},
], ],
} }
} }

Loading…
Cancel
Save