From 4cff5d7ea41927e29481b09722b793dd88035569 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Mon, 24 May 2021 17:08:17 +0430 Subject: [PATCH] reza added Gallery --- src/views/ChatRoom/Body/Body.js | 1 + src/views/ChatRoom/Body/Body.scss | 2 +- .../Body/ChatSuggest/ChatSuggest.scss | 7 +- .../Body/Message/Message2D/Message2D.scss | 4 +- .../Message/NormalMessage/NormalMessage.js | 14 +++- .../Message/NormalMessage/NormalMessage.scss | 8 ++- src/views/ChatRoom/ChatInfo/ChatInfo.js | 46 +++++++++++-- src/views/ChatRoom/ChatInfo/ChatInfo.scss | 5 ++ .../ChatRoom/ChatInfo/Gallery/Gallery.js | 32 +++++++++ .../ChatRoom/ChatInfo/Gallery/Gallery.scss | 66 +++++++++++++++++++ src/views/ChatRoom/Header/Header.js | 46 ++++++++++++- src/views/Home/Body/Location/Location.js | 24 +++++-- src/views/Home/Header/Header.js | 3 + src/views/Home/Header/Header.scss | 9 +++ .../Home/Header/NavbarDrawer/NavbarDrawer.js | 39 ++++++++++- 15 files changed, 278 insertions(+), 28 deletions(-) create mode 100644 src/views/ChatRoom/ChatInfo/Gallery/Gallery.js create mode 100644 src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss diff --git a/src/views/ChatRoom/Body/Body.js b/src/views/ChatRoom/Body/Body.js index d81dfc2..986ef65 100644 --- a/src/views/ChatRoom/Body/Body.js +++ b/src/views/ChatRoom/Body/Body.js @@ -507,6 +507,7 @@ export default class Body extends Component {
{ diff --git a/src/views/ChatRoom/Body/Body.scss b/src/views/ChatRoom/Body/Body.scss index 076185a..b6430b6 100644 --- a/src/views/ChatRoom/Body/Body.scss +++ b/src/views/ChatRoom/Body/Body.scss @@ -9,7 +9,7 @@ &__content{ background: url(../../../assets/images/chat.png); background-size: cover; - padding : 0px 10px 70px; + padding : 0px 10px 0px; height : 100%; min-height: 200px; position: relative; diff --git a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss b/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss index a1dbda2..11a10e6 100644 --- a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss +++ b/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss @@ -8,12 +8,13 @@ align-items : flex-end; &__item{ padding : 8px 6px; - background-color : rgb(13, 214, 20); + background-color : white; border-radius: 5px; margin : 5px; width :100% !important; justify-content : center; - color : white; + color : black; + min-height: 60px; } } } @@ -41,7 +42,7 @@ .rec-pagination{ z-index: 600; position: absolute; - top: -12px !important; + top: -12px; // left: calc(50% - 20px) !important; & button{ background-color: grey; diff --git a/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss b/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss index f79bf27..02f741a 100644 --- a/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss +++ b/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss @@ -25,8 +25,8 @@ p{ width: 100%; text-align: right; - font-size: 17px; - font-family: IRANSansNumeralBold; + font-size: 16px; + // font-family: IRANSansNumeralBold; } } diff --git a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js index 4553db7..f1a84ba 100644 --- a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js +++ b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js @@ -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.user.name} +
+ + 12:14
: null } diff --git a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss index 5f083ce..9dddfec 100644 --- a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss +++ b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss @@ -23,14 +23,16 @@ width: 100%; text-align: right; font-size: 17px; - font-family: IRANSansNumeralBold; + // font-family: IRANSansNumeral; + font-weight: 500; } &--detail{ position: absolute; + width: 100%; top : 10px; + justify-content: space-between; span{ - font-family: IRANSansNumeralBold; - color: rgb(155, 155, 155); + font-family: IRANSansNumeralLight; } } &--caption{ diff --git a/src/views/ChatRoom/ChatInfo/ChatInfo.js b/src/views/ChatRoom/ChatInfo/ChatInfo.js index 6435def..840c99a 100644 --- a/src/views/ChatRoom/ChatInfo/ChatInfo.js +++ b/src/views/ChatRoom/ChatInfo/ChatInfo.js @@ -2,28 +2,64 @@ import React, { Component } from 'react'; import ChatIcon from '@material-ui/icons/Chat'; import FileTabs from './FileTabs/FileTabs'; +import Gallery from './Gallery/Gallery.js'; + +import user2 from '../../../assets/images/user2.png'; import './ChatInfo.scss'; 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(){ + const {user, gallery} = this.state; return (
- {/* */} + this.setGallery('profile')} />
-

محسن محمدی

-

2 دقیقه پیش آنلاین بوده

+

{user.name}

+

{user.lastAct}

-

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد

+

{user.bio}

- +
+ { + gallery === 'profile' ? + : null + } + { + gallery === 'media' ? + : null + }
); } diff --git a/src/views/ChatRoom/ChatInfo/ChatInfo.scss b/src/views/ChatRoom/ChatInfo/ChatInfo.scss index 4552dd8..487c53d 100644 --- a/src/views/ChatRoom/ChatInfo/ChatInfo.scss +++ b/src/views/ChatRoom/ChatInfo/ChatInfo.scss @@ -11,6 +11,11 @@ align-items: center; height: 290px; position: relative; + & img{ + width: 100%; + height: 100%; + object-fit: cover + } &--float{ position: absolute; width:65px; diff --git a/src/views/ChatRoom/ChatInfo/Gallery/Gallery.js b/src/views/ChatRoom/ChatInfo/Gallery/Gallery.js new file mode 100644 index 0000000..d97e1cc --- /dev/null +++ b/src/views/ChatRoom/ChatInfo/Gallery/Gallery.js @@ -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 ( +
+
props.onClick(null)}> + + +
+ + { + props.data.map(item => ( + + )) + } + +
+ ); +} + +const Image = (props) => { + return ( + + ); +} \ No newline at end of file diff --git a/src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss b/src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss new file mode 100644 index 0000000..44ae8af --- /dev/null +++ b/src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/views/ChatRoom/Header/Header.js b/src/views/ChatRoom/Header/Header.js index dae757f..c4bc593 100644 --- a/src/views/ChatRoom/Header/Header.js +++ b/src/views/ChatRoom/Header/Header.js @@ -1,14 +1,36 @@ import React, { Component } from 'react'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; import './Header.scss'; 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 = () => { window.history.back(); } render(){ const {page, setPage} = this.props; + const {anchorEl} = this.state; return (
page === 'chatroom' ? this.back() : setPage('chatroom')}> @@ -19,7 +41,29 @@ export default class Header extends Component {

داستانبازی

- +
+
+ +
+ this.handleClose()} + style={{direction : 'rtl'}} + > + this.handleClose()}>پروفایل + this.handleClose()}>حساب کاربری + this.handleClose()}>خروج + +
+
); } diff --git a/src/views/Home/Body/Location/Location.js b/src/views/Home/Body/Location/Location.js index 56db90f..efd518a 100644 --- a/src/views/Home/Body/Location/Location.js +++ b/src/views/Home/Body/Location/Location.js @@ -23,19 +23,27 @@ const blue = new L.Icon({ popupAnchor: [-0, -0], iconSize: [25,38], }); + export default class Location extends Component { 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(){ return (
{ - this.map=map; - map.locate({setView:true}) - map.on('locationfound',(e)=>{ - this.setState({lat:e.latitude,lng:e.longitude,accuracy:e.accuracy}) - }) - } } + this.currentLocation(map) + }} ref={this.myRef} center={[35.73366050852552, 51.414611756817976]} zoom={14} @@ -97,7 +105,9 @@ export default class Location extends Component { }
-
+
{ + this.currentLocation(this.state.map) + }}>
10 کیلومتر diff --git a/src/views/Home/Header/Header.js b/src/views/Home/Header/Header.js index 50b3b6c..81d4388 100644 --- a/src/views/Home/Header/Header.js +++ b/src/views/Home/Header/Header.js @@ -74,6 +74,9 @@ export default function Header(props) { ref={inputRef5} placeholder="بنویس ..." /> +
+ +
: <>
setState({ ...state, ['searchFlag']: !state['searchFlag']})}> diff --git a/src/views/Home/Header/Header.scss b/src/views/Home/Header/Header.scss index 165e5e7..daa5e07 100644 --- a/src/views/Home/Header/Header.scss +++ b/src/views/Home/Header/Header.scss @@ -16,6 +16,9 @@ left : 0px; height : 60px; z-index: 550; + animation-duration: 0.3s; + animation-name: search; + animation-iteration-count: 1; input{ width: 100%; position: relative; @@ -36,4 +39,10 @@ } } } +} + + +@keyframes search{ + 0% {left : -100vw; top : 0px} + 100% {left : 0px; top : 0px} } \ No newline at end of file diff --git a/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js b/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js index 37b9984..8e15f36 100644 --- a/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js +++ b/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js @@ -1,16 +1,19 @@ import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import {toast} from 'react-toastify'; + import HomeIcon from '@material-ui/icons/Home'; 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 './NavbarDrawer.scss'; -import home from '../../../../assets/icons/home.png'; -import exit from '../../../../assets/icons/exit.png'; - class NavbarDrawer extends Component { constructor(props) { super(props); @@ -22,6 +25,36 @@ class NavbarDrawer extends Component { icon: , toast : '', }, + { + name: 'تنظیمات', + link: '/', + icon: , + toast : '', + }, + { + name: 'به روز رسانی', + link: '/', + icon: , + toast : '', + }, + { + name: 'همرسانی', + link: '/', + icon: , + toast : '', + }, + { + name: 'گزارش ایراد', + link: '/', + icon: , + toast : '', + }, + { + name: 'خروج', + link: '/', + icon: , + toast : '', + }, ], } }