dimension, ajout params conv, retrait bar scroll
This commit is contained in:
Little Dipper
parent
ce88b4e163
commit
196f2a5e88
@ -15,11 +15,13 @@ import { TbSend } from 'react-icons/tb';
|
||||
import { ImBlocked } from 'react-icons/im';
|
||||
import { MdOutlineGroupAdd } from 'react-icons/md';
|
||||
import { GrAdd } from 'react-icons/gr';
|
||||
import { RiListSettingsLine } from 'react-icons/ri'
|
||||
|
||||
import { Rank } from "../../DataBase/DataRank";
|
||||
import GreenAlert from "../Alert/GreenAlert";
|
||||
import RedAlert from "../Alert/RedAlert";
|
||||
import YellowAlert from "../Alert/YellowAlert";
|
||||
import ModalSetting from "./ModalSetting";
|
||||
|
||||
|
||||
const TouchDiv = styled.div`
|
||||
@ -228,10 +230,12 @@ function Chats(){
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [addFriend, setAddFriend] = useState(false);
|
||||
const [block, setBlock] = useState(false);
|
||||
const [setting, setSetting] = useState(false);
|
||||
const close = () => setModalOpen(false);
|
||||
const open = () => setModalOpen(true);
|
||||
const closeAddFriend = () => setAddFriend(false);
|
||||
const closeBlock = () => setBlock(false);
|
||||
const closeSetting = () => setSetting(false);
|
||||
|
||||
|
||||
const handleFriend = e => {
|
||||
@ -319,6 +323,22 @@ function Chats(){
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
</TouchDiv>
|
||||
{currentChat ? (
|
||||
|
||||
<TouchDiv>
|
||||
<motion.div
|
||||
onClick={() => (setting ? setSetting(false) : setSetting(true))}
|
||||
>
|
||||
<RiListSettingsLine/>
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
onExitComplete={() => null}
|
||||
>
|
||||
{setting && <ModalSetting handleClose={closeSetting}/>}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
</TouchDiv>
|
||||
):("")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="messages_box">
|
||||
|
||||
158
containers/react/src/components/Messages/ModalSetting.jsx
Normal file
158
containers/react/src/components/Messages/ModalSetting.jsx
Normal file
@ -0,0 +1,158 @@
|
||||
import { motion } from "framer-motion";
|
||||
import Backdrop from "../Sidebar/Backdrop";
|
||||
import { Rank } from "../../DataBase/DataRank"
|
||||
import '../../styles/Messages.css'
|
||||
import { useState } from "react";
|
||||
import { GrAdd } from "react-icons/gr";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const dropIn = {
|
||||
hidden:{y:"-100vh",
|
||||
opacity: 0,},
|
||||
visible:{y: "0",
|
||||
opacity: 0,
|
||||
transotion:{
|
||||
duration:0.1,
|
||||
type:"spring",
|
||||
damping: 100,
|
||||
stiffness: 500,
|
||||
}},
|
||||
exit:{y: "100vh",
|
||||
opacity: 0,},
|
||||
|
||||
};
|
||||
|
||||
const ModalSetting = ({handleClose, text}) => {
|
||||
const [password, setPassword] = useState(false);
|
||||
|
||||
const handleCheckpass = (e) => {
|
||||
setPassword(e.target.checked);
|
||||
}
|
||||
const [multi, setMulti] = useState(false);
|
||||
const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
|
||||
const [selectedOptionArray, setSelectedOptionArray] = useState([]);
|
||||
|
||||
const handleOptionChange = (selectId, selectedOption) => {
|
||||
setSelectTag((prevTags) =>
|
||||
prevTags.map((tag) =>
|
||||
tag.id === selectId ? { ...tag, selectedOption } : tag
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const addNewSelectedTag = () => {
|
||||
const newSelectedId = Math.max (...selectTags.map((tag) => tag.id)) + 1;
|
||||
setSelectTag([...selectTags, { id: newSelectedId, selectedOption: ''}]);
|
||||
};
|
||||
|
||||
const saveSelectedOptions = () => {
|
||||
const selectedOptions = selectTags.map((tag) => tag.selectedOption);
|
||||
setSelectedOptionArray(selectedOptions);
|
||||
}
|
||||
let new_name;
|
||||
return (
|
||||
<Backdrop>
|
||||
<motion.div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="modalSetting"
|
||||
variant={dropIn}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
>
|
||||
{/* <p>New Convewrstion</p> */}
|
||||
|
||||
{/* First selection */}
|
||||
<div className="settingFirstPart">
|
||||
<div>
|
||||
<p className="checkbox">Private <input class="check"type="checkbox" value="private"/></p>
|
||||
<p className="checkbox">PassW <input type="checkbox" value="password" checked={password} onChange={handleCheckpass}/> </p>
|
||||
{password ? (<input type="text" className="in" placeholder="password"/>):("")}
|
||||
</div>
|
||||
<div className="forName">
|
||||
<input type="text" className="in" placeholder="group name"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <select
|
||||
onChange={(e) => {
|
||||
const selection = e.target.value;
|
||||
selection === "group" ? setMulti(true) : setMulti(false)
|
||||
}}>
|
||||
<option value="1v1">1v1</option>
|
||||
<option value="group">Group</option>
|
||||
</select> */}
|
||||
|
||||
{/* Second selection */}
|
||||
|
||||
<div className="settingSecondPart">
|
||||
<Link to="#" className="submit" onClick={handleClose}>Send</Link>
|
||||
|
||||
{selectTags.map((selectTag) =>(
|
||||
<div key={selectTag.id}>
|
||||
|
||||
<select
|
||||
value={selectTag.selectedOption}
|
||||
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}>
|
||||
{Rank.map((item, index) => {
|
||||
return (
|
||||
<>
|
||||
<option >Select a name</option>
|
||||
<option value={new_name}>{item.name}</option>
|
||||
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div>
|
||||
<Link to="#" className="submit">Ban</Link>
|
||||
<Link to="#" className="submit">Mute</Link>
|
||||
<Link to="#" className="submit">Admin</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* {selectTags.map((selectTag) =>(
|
||||
<div key={selectTag.id}>
|
||||
|
||||
<select
|
||||
value={selectTag.selectedOption}
|
||||
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}>
|
||||
{Rank.map((item, index) => {
|
||||
return (
|
||||
<>
|
||||
<option value={new_name}>{item.name}</option>
|
||||
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div>
|
||||
<h3>Selected Option:</h3>
|
||||
<ul>
|
||||
{selectedOptionArray.map((option, index) => (
|
||||
<li key={index}>{option}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
{multi === true ? (
|
||||
<GrAdd onClick={addNewSelectedTag}/>) : " "}
|
||||
</div>
|
||||
<div className="div_submit">
|
||||
<Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link>
|
||||
|
||||
<Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
|
||||
</div> */}
|
||||
|
||||
</motion.div>
|
||||
</Backdrop>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModalSetting
|
||||
@ -1,5 +1,5 @@
|
||||
.home{
|
||||
background-color: black;
|
||||
background-color: rgb(0, 0, 0);
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -38,6 +38,10 @@ select{
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.newMessage{
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
@ -46,14 +50,14 @@ select{
|
||||
.contact{
|
||||
background-color: rgb(46, 46, 46);
|
||||
align-items: left;
|
||||
height: 29.7rem;
|
||||
height: 30.2rem;
|
||||
overflow: scroll;
|
||||
/* width: 2rem; */
|
||||
/* height: 4rem; */
|
||||
}
|
||||
|
||||
.messages_box{
|
||||
background-color: black;
|
||||
background-color: rgb(0, 0, 0);
|
||||
/* height: 90vh; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -73,7 +77,7 @@ select{
|
||||
.sidebar{
|
||||
flex:1;
|
||||
border-right: 1px solid #3e3c61;
|
||||
background-color: #060b26;
|
||||
background-color: #a2a3ac;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -95,6 +99,7 @@ select{
|
||||
color: white;
|
||||
padding: 3px;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.pic{
|
||||
@ -122,9 +127,9 @@ select{
|
||||
}
|
||||
|
||||
.messages{
|
||||
background-color: black;
|
||||
background-color: rgb(26, 26, 26);
|
||||
/* height: calc(100% - 118px); */
|
||||
width: 40rem;
|
||||
width: 70%;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@ -185,6 +190,7 @@ input{
|
||||
font-size: 1.2rem;
|
||||
text-decoration: none;
|
||||
font-weight:lighter;
|
||||
margin: 1%;
|
||||
}
|
||||
|
||||
.div_submit {
|
||||
@ -261,3 +267,41 @@ input{
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.modalSetting{
|
||||
width: clamp(50%, 700px, 90%);
|
||||
height: min(50%, 300px);
|
||||
|
||||
margin: auto;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
/* align-items: center; */
|
||||
background-color: #3e3c61;
|
||||
}
|
||||
|
||||
.settingFirstPart{
|
||||
margin-top: 10%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.settingSecondPart{
|
||||
margin-top: 10%;
|
||||
margin-left: 10%;
|
||||
|
||||
/* margin-left: 20%; */
|
||||
}
|
||||
|
||||
.checkbox{
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
}
|
||||
|
||||
input.in{
|
||||
margin-top: 5%;
|
||||
margin-left: 0px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
width: 70%;
|
||||
}
|
||||
@ -15,6 +15,10 @@
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.scroll::-webkit-scrollbar{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.elements {
|
||||
/* display: flex; */
|
||||
border-width:1px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user