parent
50c5281e34
commit
af0ac4d462
45 changed files with 2442 additions and 1123 deletions
|
After Width: | Height: | Size: 642 B |
|
After Width: | Height: | Size: 686 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
@ -0,0 +1,70 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { makeStyles } from '@material-ui/core/styles'; |
||||||
|
import CircularProgress from '@material-ui/core/CircularProgress'; |
||||||
|
|
||||||
|
// Inspired by the former Facebook spinners.
|
||||||
|
const useStylesFacebook = makeStyles((theme) => ({ |
||||||
|
root: { |
||||||
|
position: 'relative', |
||||||
|
top: '2px', |
||||||
|
right: '2px', |
||||||
|
marginLeft: '6px', |
||||||
|
|
||||||
|
}, |
||||||
|
bottom: { |
||||||
|
color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], |
||||||
|
}, |
||||||
|
top: { |
||||||
|
color: '#1ED81E', |
||||||
|
animationDuration: '550ms', |
||||||
|
position: 'absolute', |
||||||
|
left: 0, |
||||||
|
}, |
||||||
|
circle: { |
||||||
|
strokeLinecap: 'round', |
||||||
|
}, |
||||||
|
})); |
||||||
|
|
||||||
|
function FacebookCircularProgress(props) { |
||||||
|
const classes = useStylesFacebook(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={classes.root}> |
||||||
|
<CircularProgress |
||||||
|
variant="determinate" |
||||||
|
className={classes.bottom} |
||||||
|
size={34} |
||||||
|
thickness={4} |
||||||
|
{...props} |
||||||
|
value={100} |
||||||
|
/> |
||||||
|
<CircularProgress |
||||||
|
variant="indeterminate" |
||||||
|
disableShrink |
||||||
|
className={classes.top} |
||||||
|
classes={{ |
||||||
|
circle: classes.circle, |
||||||
|
}} |
||||||
|
size={34} |
||||||
|
thickness={4} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const useStyles = makeStyles({ |
||||||
|
root: { |
||||||
|
// flexGrow: 1,
|
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export default function CustomizedProgressBars() { |
||||||
|
const classes = useStyles(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={classes.root}> |
||||||
|
<FacebookCircularProgress /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import Carousel from 'react-elastic-carousel'; |
||||||
|
|
||||||
|
import './ChatSuggest.scss'; |
||||||
|
|
||||||
|
export default class ChatSuggest extends Component { |
||||||
|
render(){ |
||||||
|
const {suggest} = this.props; |
||||||
|
return ( |
||||||
|
<div className="chat-suggest portrait-slider d-flex flex-column"> |
||||||
|
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}> |
||||||
|
{ |
||||||
|
suggest.map(item => ( |
||||||
|
<Suggest item={item} key={item.id} /> |
||||||
|
)) |
||||||
|
} |
||||||
|
</Carousel> |
||||||
|
|
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
class Suggest extends Component { |
||||||
|
render(){ |
||||||
|
const {item} = this.props; |
||||||
|
return( |
||||||
|
<div className="chat-suggest__item d-flex"> |
||||||
|
{item.text} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.chat-suggest{ |
||||||
|
// border-bottom-right-radius: 40px; |
||||||
|
// border-bottom-left-radius: 40px; |
||||||
|
width : 100%; |
||||||
|
// height : 40px; |
||||||
|
padding : 2px 0px 0px; |
||||||
|
align-items : flex-end; |
||||||
|
&__item{ |
||||||
|
padding : 8px 6px; |
||||||
|
background-color : rgb(13, 214, 20); |
||||||
|
border-radius: 5px; |
||||||
|
margin : 5px; |
||||||
|
width :100% !important; |
||||||
|
justify-content : center; |
||||||
|
color : white; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.portrait-slider{ |
||||||
|
width : 100% !important; |
||||||
|
height: 100% !important; |
||||||
|
position: relative; |
||||||
|
padding : 20px 12px 0px; |
||||||
|
margin-bottom: 10px; |
||||||
|
justify-content: center !important; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.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{ |
||||||
|
z-index: 600; |
||||||
|
position: absolute; |
||||||
|
top: -12px !important; |
||||||
|
// left: calc(50% - 20px) !important; |
||||||
|
& button{ |
||||||
|
background-color: grey; |
||||||
|
margin : 2px !important; |
||||||
|
box-shadow: 0px 0px 0px rgba(255,255,255,1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// .guuruq{ |
||||||
|
// box-shadow: 0 1px 2px rgba(0, 0, 0, 0%); |
||||||
|
// } |
||||||
|
|
||||||
|
// .cJeRRR{ |
||||||
|
// background-color: white !important; |
||||||
|
|
||||||
|
// } |
||||||
|
|
||||||
|
// .cJeRRR:hover, .cJeRRR:focus{ |
||||||
|
// cursor: pointer; |
||||||
|
// box-shadow: 0px 0px 0px rgba(255,255,255,1) !important; |
||||||
|
// background-color: white !important; |
||||||
|
// } |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
import React, {Component} from 'react'; |
||||||
|
import {SortableContainer, SortableElement} from 'react-sortable-hoc'; |
||||||
|
import arrayMove from 'array-move'; |
||||||
|
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; |
||||||
|
|
||||||
|
const SortableItem = SortableElement(({value}) => <div className="message-2d__options--draggable d-flex">{value}</div>); |
||||||
|
|
||||||
|
const SortableList = SortableContainer(({items}) => { |
||||||
|
return ( |
||||||
|
<div className="message-2d__options d-flex flex-column"> |
||||||
|
{items.map((value, index) => ( |
||||||
|
<SortableItem key={`item-${value}`} index={index} value={value} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
export default class DraggableMessage extends Component { |
||||||
|
state = { |
||||||
|
items: ['استقلال', 'پرسپولیس', 'سپاهان'], |
||||||
|
}; |
||||||
|
|
||||||
|
onSortEnd = ({oldIndex, newIndex}) => { |
||||||
|
this.setState(({items}) => ({ |
||||||
|
items: arrayMove(items, oldIndex, newIndex), |
||||||
|
})); |
||||||
|
}; |
||||||
|
render() { |
||||||
|
const {message, user1, user2} = this.props; |
||||||
|
return ( |
||||||
|
<div
|
||||||
|
className="message-2d d-flex flex-column d-flex" |
||||||
|
style={{
|
||||||
|
marginRight: message.user.id === user1.id ? 0 : 40, |
||||||
|
marginLeft: message.user.id === user1.id ? 40 : 0, |
||||||
|
}} |
||||||
|
> |
||||||
|
<img
|
||||||
|
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
|
||||||
|
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }} |
||||||
|
alt={message.id} |
||||||
|
/> |
||||||
|
<div
|
||||||
|
className='message-2d__text d-flex' |
||||||
|
> |
||||||
|
{ |
||||||
|
|
||||||
|
message.text !== null ? |
||||||
|
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null |
||||||
|
} |
||||||
|
</div> |
||||||
|
<SortableList items={this.state.items} onSortEnd={this.onSortEnd} /> |
||||||
|
<button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
import React, {Component} from 'react'; |
||||||
|
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default class RadioMessage extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
value : null, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
handleRadioChange = (newValue) => { |
||||||
|
this.setState({
|
||||||
|
value: newValue |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const {message, user1, user2} = this.props; |
||||||
|
return ( |
||||||
|
<div
|
||||||
|
className="message-2d d-flex flex-column d-flex" |
||||||
|
style={{
|
||||||
|
marginRight: message.user.id === user1.id ? 0 : 40, |
||||||
|
marginLeft: message.user.id === user1.id ? 40 : 0, |
||||||
|
}} |
||||||
|
> |
||||||
|
<img
|
||||||
|
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
|
||||||
|
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }} |
||||||
|
alt={message.id} |
||||||
|
/> |
||||||
|
<div
|
||||||
|
className='message-2d__text d-flex' |
||||||
|
> |
||||||
|
{ |
||||||
|
message.text !== null ? |
||||||
|
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null |
||||||
|
} |
||||||
|
</div> |
||||||
|
<div className="message-2d__options d-flex flex-wrap justify-content-center"> |
||||||
|
{ |
||||||
|
message.options.map(item => ( |
||||||
|
<div key={item.id} onClick={() => this.handleRadioChange(item.name)} className="message-2d__options--radio" style={{backgroundColor : item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',color : item.name === this.state.value ? 'white' : 'black'}}> |
||||||
|
{item.name} |
||||||
|
</div> |
||||||
|
)) |
||||||
|
} |
||||||
|
</div> |
||||||
|
<button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,94 @@ |
|||||||
|
import React, {Component} from 'react'; |
||||||
|
import Grid from '@material-ui/core/Grid'; |
||||||
|
import Slider from '@material-ui/core/Slider'; |
||||||
|
import Input from '@material-ui/core/Input'; |
||||||
|
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default class SliderMessage extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
value : 10, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
handleSliderChange = (event,newValue) => { |
||||||
|
this.setState({
|
||||||
|
value: newValue |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
handleInputChange = (event) => { |
||||||
|
this.setState({ |
||||||
|
value : event.target.value === '' ? '' : Number(event.target.value) |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
handleBlur = () => { |
||||||
|
if (this.state.value < 0) { |
||||||
|
this.setState({ value: 0}); |
||||||
|
} else if (this.state.value > 20) { |
||||||
|
this.setState({ value: 20}); |
||||||
|
} |
||||||
|
}; |
||||||
|
render() { |
||||||
|
const {message, user1, user2} = this.props; |
||||||
|
return ( |
||||||
|
<div
|
||||||
|
className="message-2d d-flex flex-column d-flex" |
||||||
|
style={{
|
||||||
|
marginRight: message.user.id === user1.id ? 0 : 40, |
||||||
|
marginLeft: message.user.id === user1.id ? 40 : 0, |
||||||
|
}} |
||||||
|
> |
||||||
|
<img
|
||||||
|
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
|
||||||
|
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }} |
||||||
|
alt={message.id} |
||||||
|
/> |
||||||
|
<div
|
||||||
|
className='message-2d__text d-flex' |
||||||
|
> |
||||||
|
{ |
||||||
|
|
||||||
|
message.text !== null ? |
||||||
|
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null |
||||||
|
} |
||||||
|
</div> |
||||||
|
<Grid container spacing={2} alignItems="center"> |
||||||
|
<Grid item xs> |
||||||
|
<Slider |
||||||
|
value={typeof this.state.value === 'number' ? this.state.value : 0} |
||||||
|
onChange={this.handleSliderChange} |
||||||
|
aria-labelledby="input-slider" |
||||||
|
style={{marginTop:10}} |
||||||
|
min={0} |
||||||
|
max={20} |
||||||
|
step={0.1} |
||||||
|
/> |
||||||
|
</Grid> |
||||||
|
<Grid item> |
||||||
|
<Input |
||||||
|
value={this.state.value} |
||||||
|
margin="dense" |
||||||
|
onChange={(e) => this.handleInputChange(e)} |
||||||
|
onBlur={() => this.handleBlur()} |
||||||
|
inputProps={{ |
||||||
|
step: 0.1, |
||||||
|
min: 0, |
||||||
|
max: 20, |
||||||
|
type: 'number', |
||||||
|
'aria-labelledby': 'input-slider', |
||||||
|
}} |
||||||
|
style={{width : 42, borderBottom : '2px solid #000099', paddingLeft :10,marginBottom :18, color : '#000099'}} |
||||||
|
/> |
||||||
|
</Grid> |
||||||
|
</Grid> |
||||||
|
<button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -1,11 +1,31 @@ |
|||||||
@media screen and (max-width: 450px){ |
@media screen and (max-width: 450px){ |
||||||
.header{ |
.chat-header{ |
||||||
border-top-right-radius: 40px; |
height: 70px; |
||||||
border-top-left-radius: 40px; |
|
||||||
height: 80px; |
|
||||||
width: 100%; |
width: 100%; |
||||||
justify-content : space-between; |
justify-content : space-between; |
||||||
align-items: flex-start; |
align-items: flex-start; |
||||||
padding : 30px 22px 0px; |
padding : 10px 18px 10px; |
||||||
|
position: relative; |
||||||
|
&__title{ |
||||||
|
direction:rtl; |
||||||
|
position: absolute; |
||||||
|
right: 10px; |
||||||
|
margin-top: 8px; |
||||||
|
align-items:center; |
||||||
|
right: 60px; |
||||||
|
& h1{ |
||||||
|
font-size: 23px; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
& span{ |
||||||
|
margin : 0px 5px; |
||||||
|
width: 2px; |
||||||
|
height:22px; |
||||||
|
background-color:white; |
||||||
|
position: relative; |
||||||
|
bottom: 5px; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
@ -1,12 +1,114 @@ |
|||||||
import React, { Component } from 'react'; |
import React, { Component } from 'react'; |
||||||
|
import { MapContainer, TileLayer, Marker, Popup, Tooltip,Circle } from "react-leaflet"; |
||||||
|
import L from 'leaflet'; |
||||||
|
import NavigationIcon from '@material-ui/icons/Navigation'; |
||||||
|
import DirectionsWalkIcon from '@material-ui/icons/DirectionsWalk'; |
||||||
|
import MyLocationIcon from '@material-ui/icons/MyLocation'; |
||||||
|
|
||||||
|
import blueM from '../../../../assets/icons/marker-blue.png'; |
||||||
|
import greenM from '../../../../assets/icons/marker-green.png'; |
||||||
|
|
||||||
import './Location.scss'; |
import './Location.scss'; |
||||||
|
const items = [{lat :35.73366050852552, lng : 51.414611756817976}]; |
||||||
|
const selected = {}; |
||||||
|
const green = new L.Icon({ |
||||||
|
iconUrl: greenM, |
||||||
|
iconRetinaUrl: greenM, |
||||||
|
popupAnchor: [-0, -0], |
||||||
|
iconSize: [25,38],
|
||||||
|
}); |
||||||
|
const blue = new L.Icon({ |
||||||
|
iconUrl: blueM, |
||||||
|
iconRetinaUrl: blueM, |
||||||
|
popupAnchor: [-0, -0], |
||||||
|
iconSize: [25,38],
|
||||||
|
}); |
||||||
export default class Location extends Component { |
export default class Location extends Component { |
||||||
|
state = {}; |
||||||
render(){ |
render(){ |
||||||
return ( |
return ( |
||||||
<div className="location d-flex"> |
<div className="location" style={{display: 'block !important' , height:"100%", }}> |
||||||
|
<MapContainer |
||||||
|
whenCreated={(map) =>{ |
||||||
|
this.map=map; |
||||||
|
map.locate({setView:true}) |
||||||
|
map.on('locationfound',(e)=>{ |
||||||
|
this.setState({lat:e.latitude,lng:e.longitude,accuracy:e.accuracy}) |
||||||
|
}) |
||||||
|
} } |
||||||
|
ref={this.myRef} |
||||||
|
center={[35.73366050852552, 51.414611756817976]} |
||||||
|
zoom={14} |
||||||
|
scrollWheelZoom={true} |
||||||
|
style={{ height: "100%", direction: "ltr" }} |
||||||
|
> |
||||||
|
{/* <LocateControlC > </LocateControlC> */} |
||||||
|
{/* {this.state.c ? <LocateControl options={locateOptions} startDirectly/>:null} */} |
||||||
|
<TileLayer |
||||||
|
attribution="" |
||||||
|
url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png" |
||||||
|
// https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
|
||||||
|
/> |
||||||
|
<Marker position={[35.73366050852552, 51.414611756817976]}
|
||||||
|
icon={blue} |
||||||
|
eventHandlers={{ |
||||||
|
// click: () => {
|
||||||
|
// this.seter("value",e.id)
|
||||||
|
// },
|
||||||
|
}} |
||||||
|
onClick={e=>console.log("sss")}> |
||||||
|
<Tooltip direction="top" opacity={1} > |
||||||
|
{'map'} |
||||||
|
|
||||||
|
</Tooltip> |
||||||
|
</Marker> |
||||||
|
{/* { |
||||||
|
items.map((e) => ( |
||||||
|
<Marker position={[e.lat, e.lon]}
|
||||||
|
icon={selected && e.id==selected.id?green:blue} |
||||||
|
eventHandlers={{ |
||||||
|
click: () => { |
||||||
|
this.seter("value",e.id) |
||||||
|
}, |
||||||
|
}} |
||||||
|
onClick={e=>console.log("sss")}> |
||||||
|
<Tooltip direction="top" opacity={1} > |
||||||
|
{e.name} |
||||||
|
|
||||||
|
</Tooltip> |
||||||
|
</Marker> |
||||||
|
))} */} |
||||||
|
{this.state.lat && this.state.lng && <> |
||||||
|
<Circle center={[this.state.lat, this.state.lng]} pathOptions={{ fillColor: 'blue' }} radius={this.state.accuracy} /> |
||||||
|
<Marker position={[this.state.lat, this.state.lng]}
|
||||||
|
icon={blue} |
||||||
|
eventHandlers={{ |
||||||
|
// click: () => {
|
||||||
|
// this.seter("value",e.id)
|
||||||
|
// },
|
||||||
|
}} |
||||||
|
onClick={e=>console.log("sss")}> |
||||||
|
<Tooltip direction="top" opacity={1} > |
||||||
|
{'map'} |
||||||
|
|
||||||
|
</Tooltip> |
||||||
|
</Marker> |
||||||
|
</> |
||||||
|
} |
||||||
|
</MapContainer> |
||||||
|
<div className="location__footer d-flex flex-row-reverse"> |
||||||
|
<div className="location__footer--icon"> |
||||||
|
<NavigationIcon style={{color : "white" , width : 35, height : 35}} /> |
||||||
|
</div> |
||||||
|
<span>10 کیلومتر</span> |
||||||
|
<div className="location__footer--time d-flex flex-row-reverse align-items-center"> |
||||||
|
<div>10 دقیقه</div> |
||||||
|
<DirectionsWalkIcon style={{color : "white" , width : 30, height : 30, marginRight :5,marginLeft :10}} /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="location__current d-flex justify-content-center align-items-center"> |
||||||
|
<MyLocationIcon style={{color : "white" , width : 35, height : 35}} /> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,49 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.location{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// filter : hue-rotate(360deg); |
||||||
|
position: relative; |
||||||
|
&__footer{ |
||||||
|
position: fixed; |
||||||
|
bottom: 10px; |
||||||
|
left: 5px; |
||||||
|
width: calc(100% - 10px); |
||||||
|
border-radius: 40px; |
||||||
|
background: linear-gradient(90deg, rgb(102, 99, 245) 20%, rgb(186, 85, 204) 140%); |
||||||
|
height: 66px; |
||||||
|
align-items: center; |
||||||
|
padding : 0px 7px; |
||||||
|
justify-content: space-between; |
||||||
|
color: white; |
||||||
|
z-index: 1000; |
||||||
|
&--icon{ |
||||||
|
padding : 10px; |
||||||
|
background-color: rgb(102, 33, 170); |
||||||
|
border-radius: 100px; |
||||||
|
} |
||||||
|
&--time{ |
||||||
|
font-size: 18px; |
||||||
|
div{ |
||||||
|
direction: rtl; |
||||||
|
} |
||||||
|
} |
||||||
|
span{ |
||||||
|
position: relative; |
||||||
|
right:15px; |
||||||
|
direction: rtl; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__current{ |
||||||
|
position: fixed; |
||||||
|
bottom: 84px; |
||||||
|
width: 70px; |
||||||
|
right: 5px; |
||||||
|
background : rgb(220, 220, 220); |
||||||
|
height:70px; |
||||||
|
border-radius: 100px; |
||||||
|
z-index: 1000; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1,15 +1,105 @@ |
|||||||
import React, { Component } from 'react'; |
import React, { Component,useEffect,useState,useRef } from 'react'; |
||||||
import MenuIcon from '@material-ui/icons/Menu'; |
import MenuIcon from '@material-ui/icons/Menu'; |
||||||
import SearchIcon from '@material-ui/icons/Search'; |
import SearchIcon from '@material-ui/icons/Search'; |
||||||
|
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; |
||||||
|
import { makeStyles } from '@material-ui/core/styles'; |
||||||
|
import { SwipeableDrawer } from '@material-ui/core'; |
||||||
|
import NavbarDrawer from './NavbarDrawer/NavbarDrawer.js'; |
||||||
|
import clsx from 'clsx'; |
||||||
|
|
||||||
import './Header.scss'; |
import './Header.scss'; |
||||||
export default class Header extends Component { |
|
||||||
render(){ |
const useStyles = makeStyles({ |
||||||
return ( |
list: { |
||||||
<div className="header d-flex"> |
width: window.innerWidth * 0.8, |
||||||
<SearchIcon style={{color : "white" , width : 38, height : 38}} /> |
}, |
||||||
<MenuIcon style={{color : "white" , width : 38, height : 38}} /> |
fullList: { |
||||||
</div> |
width: 'auto', |
||||||
); |
direction: 'rtl', |
||||||
} |
textAlign: 'right' |
||||||
} |
}, |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
export default function Header(props) { |
||||||
|
const classes = useStyles(); |
||||||
|
|
||||||
|
const [state, setState] = useState({ |
||||||
|
top: false, |
||||||
|
left: false, |
||||||
|
bottom: false, |
||||||
|
right: false, |
||||||
|
searchFlag : false, |
||||||
|
}); |
||||||
|
|
||||||
|
const inputRef5 = useRef(); |
||||||
|
|
||||||
|
useEffect(() =>{ |
||||||
|
if(state['searchFlag'] === true){ |
||||||
|
inputRef5.current.focus(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const list = (props, anchor) => ( |
||||||
|
<div |
||||||
|
className={clsx(classes.list, { |
||||||
|
[classes.fullList]: anchor === 'top' || anchor === 'bottom', |
||||||
|
})} |
||||||
|
role="presentation" |
||||||
|
onClick={toggleDrawer(anchor, false)} |
||||||
|
onKeyDown={toggleDrawer(anchor, false)} |
||||||
|
> |
||||||
|
<NavbarDrawer setShare={props.setShare} user={props.user} logout={props.logout} needUpdate={props.needUpdate} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
const toggleDrawer = (anchor, open) => (event) => { |
||||||
|
if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setState({ [anchor]: open }); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="header d-flex"> |
||||||
|
{ |
||||||
|
state['searchFlag'] === true ?
|
||||||
|
<div className="header__search d-flex"> |
||||||
|
<div onClick={() => setState({ ...state, ['searchFlag']: !state['searchFlag']})}> |
||||||
|
<ArrowRightAltIcon style={{color : "rgb(111,108,255)" , width : 38, height : 38}} /> |
||||||
|
</div> |
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
ref={inputRef5} |
||||||
|
placeholder="بنویس ..." |
||||||
|
/> |
||||||
|
</div> : |
||||||
|
<> |
||||||
|
<div onClick={() => setState({ ...state, ['searchFlag']: !state['searchFlag']})}> |
||||||
|
<SearchIcon style={{color : "white" , width : 38, height : 38}} /> |
||||||
|
</div> |
||||||
|
<div className="chat-header__title d-flex"> |
||||||
|
<h1 style={{fontFamily : 'IRANSansNumeralBold'}}>ایما</h1> |
||||||
|
<span style={{position : "relative", top : -3}}></span> |
||||||
|
<h1 style={{fontSize :17,position : "relative", top : 2}}>داستانبازی</h1> |
||||||
|
</div> |
||||||
|
<div onClick={toggleDrawer('right', true)}> |
||||||
|
<MenuIcon style={{color : "white" , width : 38, height : 38,position : "relative", top : 0}} /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<SwipeableDrawer |
||||||
|
anchor='right' |
||||||
|
open={state['right']} |
||||||
|
onClose={toggleDrawer('right', false)} |
||||||
|
onOpen={toggleDrawer('right', true)} |
||||||
|
> |
||||||
|
{list(props,'right')} |
||||||
|
</SwipeableDrawer> |
||||||
|
</> |
||||||
|
} |
||||||
|
|
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
|||||||
@ -1,11 +1,39 @@ |
|||||||
@media screen and (max-width: 450px){ |
@media screen and (max-width: 450px){ |
||||||
.header{ |
.header{ |
||||||
border-top-right-radius: 40px; |
height: 60px; |
||||||
border-top-left-radius: 40px; |
|
||||||
height: 70px; |
|
||||||
width: 100%; |
width: 100%; |
||||||
justify-content : space-between; |
justify-content : space-between; |
||||||
align-items: flex-end; |
align-items: center; |
||||||
padding : 0px 15px; |
padding : 0px 15px; |
||||||
|
position: relative; |
||||||
|
&__search{ |
||||||
|
width: 100vw; |
||||||
|
background-color: rgb(255, 255, 255); |
||||||
|
direction : rtl; |
||||||
|
align-items : center; |
||||||
|
position: fixed; |
||||||
|
top : 0px; |
||||||
|
left : 0px; |
||||||
|
height : 60px; |
||||||
|
z-index: 550; |
||||||
|
input{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
padding : 8px 10px 8px 10px; |
||||||
|
border : 0px; |
||||||
|
border-radius: 2px; |
||||||
|
color : black; |
||||||
|
font-size: 18px; |
||||||
|
text-align: right; |
||||||
|
background-color: inherit; |
||||||
|
&:focus{ |
||||||
|
outline:none; |
||||||
|
} |
||||||
|
&::placeholder{ |
||||||
|
color: grey; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
.navbar-drawer{ |
||||||
|
// background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important; |
||||||
|
text-align: right !important; |
||||||
|
direction: rtl; |
||||||
|
padding : 30px 10px 10px 10px; |
||||||
|
&__header{ |
||||||
|
height: 80px; |
||||||
|
width: 100%; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding : 0px 8px; |
||||||
|
&--right{ |
||||||
|
& h1{ |
||||||
|
margin-bottom: 0px; |
||||||
|
font-size: 24px; |
||||||
|
color : white; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
& div{ |
||||||
|
color : white; |
||||||
|
font-size: 12px; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
} |
||||||
|
& img{ |
||||||
|
width : 22px; |
||||||
|
height : 22px; |
||||||
|
position: relative; |
||||||
|
bottom :35px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__bottom{ |
||||||
|
width:100%; |
||||||
|
&--link{ |
||||||
|
width:100%; |
||||||
|
align-items: center; |
||||||
|
padding : 15px 10px; |
||||||
|
& img{ |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
& .badge{ |
||||||
|
background-color: rgb(160, 60, 209); |
||||||
|
margin:5px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--button{ |
||||||
|
width: 100%; |
||||||
|
height: 100px; |
||||||
|
color: white; |
||||||
|
padding : 15px 10px; |
||||||
|
cursor: pointer; |
||||||
|
& img{ |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
&--version{ |
||||||
|
position: absolute; |
||||||
|
bottom : 5px; |
||||||
|
left : 0px; |
||||||
|
width :100%; |
||||||
|
height : 32px; |
||||||
|
font-size: 14px; |
||||||
|
justify-content:center; |
||||||
|
align-items:center; |
||||||
|
& span{ |
||||||
|
color : #cfcfcf; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.MuiPaper-root{ |
||||||
|
background: linear-gradient(180deg, rgb(144, 73, 186) 20%, rgb(111,108,255) 72%) !important; |
||||||
|
&::-webkit-scrollbar{ |
||||||
|
display: none; |
||||||
|
width: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.navbar-drawer__bottom a{ |
||||||
|
width: 100%; |
||||||
|
height: 100px; |
||||||
|
color : white; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.navbar-drawer__bottom--link |
||||||
|
|
||||||
|
.navbar-drawer__bottom--link div{ |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
Loading…
Reference in new issue