noan.randon
/
Favor
3
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

avancement configuration
continuous-integration/drone/push Build encountered an error Details

Browse Source
master
Darius BERTRAND 2 years ago
parent 9d3ff5636a
commit 6e3b1aaaec
10 changed files with 271 additions and 72 deletions
Show Stats Download Patch File Download Diff File

BIN
Site Web/client/src/assets/img/plus.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

6
Site Web/client/src/components/Configurations/ConfigurationDuCompte.js
Unescape View File

@ -15,7 +15,7 @@ const ConfigurationDuCompte =()=>{
<div> <div>
<h2 className='ligneHorizontal'>Modifucation information du compte</h2> <h2 className='ligneHorizontal'>Modifucation information du compte</h2>
<div className="ModifucationInformationDuCompte"> <form className="ModifucationInformationDuCompte">
<div className='ModificationInformationDuCompteText'> <div className='ModificationInformationDuCompteText'>
<span>email</span> <span>email</span>
@ -46,7 +46,7 @@ const ConfigurationDuCompte =()=>{
value={controlPassword}/> value={controlPassword}/>
<div className='password error'></div> <div className='password error'></div>
</div> </div>
</div> </form>
<div /> <div />
<h2 className='ligneHorizontal'>Suppression du compte</h2> <h2 className='ligneHorizontal'>Suppression du compte</h2>
<div className='buttonSuppressionCompte'> <div className='buttonSuppressionCompte'>
@ -54,7 +54,7 @@ const ConfigurationDuCompte =()=>{
<button> <button>
supprimer votre compte supprimer votre compte
</button> </button>
<span>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</span> <p className='buttonSuppressionText'>Note : action irreversible qui vous fera perdre toutes les données du compte en conséquence</p>
</div> </div>
</div> </div>
) )

80
Site Web/client/src/components/Configurations/ConfigurationDuProfil.js
Unescape View File

@ -1,53 +1,85 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import PP from "../../assets/img/unknown.png"; import PP from "../../assets/img/unknown.png";
import PLUS from "../../assets/img/plus.png";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
const ConfigurationDuProfil = ()=>{ const ConfigurationDuProfil = ()=>{
const userData = useSelector((state) => state.user.user); const userData = useSelector((state) => state.user.user);
const [pseudo, setPseudo] = useState(''); const [pseudo, setPseudo] = useState('');
const [nomUtilisateur, setNomUtilisateur] = useState(''); const [nomUtilisateur, setNomUtilisateur] = useState('');
const [displayAdd, setDisplayAdd] = useState(false);
const handleModals=()=>{
};
return(
return(
<div className='modificationDuProfilBackgroud'> <div className='modificationDuProfilBackgroud'>
<h2 className='ligneHorizontal' >Modifucation du Profil</h2> <h2 className='ligneHorizontal' >Modifucation du Profil</h2>
<div className='modificationDuProfil' > <div className='modificationDuProfil' >
<img src={PP} className="imageDeProfilConfiguration imageDeProfil"/> <button className='imageDeProfilConfigurationPlus imageDeProfil' >
<img src={PLUS} className="plusButton "/>
<div className='modificationDuProfilText'> <img src={PP} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
</button>
<div className='modificationDuProfilText'>
<span>Pseudo: </span> <span>Pseudo: </span>
<span>Nom d'utilisateur:</span> <span>Nom d'utilisateur:</span>
</div> </div>
<div className='modificationDuProfilText'> <div className='modificationDuProfilText'>
<input
type="nomUtilisateur"
name="nomUtilisateur"
id="nomUtilisateur"
onChange={(e) => setNomUtilisateur (e.target.value)}
value={pseudo}
/>
<input
type="pseudo"
name="pseudo"
id="pseudo"
value={pseudo}
onChange={(e) => setPseudo (e.target.value)}
/>
</div>
<input className='inputConfiguration'
type="nomUtilisateur"
name="nomUtilisateur"
id="nomUtilisateur"
onChange={(e) => setNomUtilisateur (e.target.value)}
value={nomUtilisateur}
/>
<input className='inputConfiguration'
type="pseudo"
name="pseudo"
id="pseudo"
value={pseudo}
onChange={(e) => setPseudo (e.target.value)}
/>
</div>
</div> </div>
<h2 className='ligneHorizontal' >Acces au dossiers personnel</h2> <h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
<div className='accesDossiersPerso'> <div className='accesDossiersPerso'>
<div className='accesDossiersPersoValidation'>
<input type="checkbox" name='cocher' /> <input type="checkbox" name='cocher' />
<label for="cocher" class='textAccesDossiersPerso'>Cocher si oui</label> <label for="cocher" class='textAccesDossiersPerso'>Cocher si oui</label>
</div>
<div className='dossierPersonnel'>
<span>dossiers</span>
</div>
</div> </div>
{displayAdd && (
<div className='popup-modificationProfil'>
<div className="modal">
<div className='imagesPopup'>
<img src={PP} className="imageDeProfilConfigurationPlus imageDeProfil"/>
<img src={PLUS} className="imageDeProfilConfigurationPlus imageDeProfil" onClick={handleModals}/>
</div >
<div className='buttonPopup'>
<button onClick={() => setDisplayAdd(false)}>Retour</button>
<button /*onClick={handlePost} */>Valider</button>
</div>
</div>
</div>
)}
</div> </div>
) )
} }
export default ConfigurationDuProfil; export default ConfigurationDuProfil;

14
Site Web/client/src/pages/Configuration.js
Unescape View File

@ -30,22 +30,24 @@ const Configuration = () => {
return( return(
<main className='mainConfig'> <main className='mainConfig'>
<Navbar /> <Navbar />
<div className='configuration'>
<div className='boutonDeConfigurations'> <div className='boutonDeConfigurations'>
<button onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} > <a onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} >
Configuration du profil Configuration du profil
</button> </a>
<button onClick={handleModals} id="ConfigurationDuCompte" className={ConfigurationCompte}> <a onClick={handleModals} id="ConfigurationDuCompte" className={ConfigurationCompte}>
Configuration du compte Configuration du compte
</button> </a>
<button onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}> <a onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}>
Politique de confidentialite Politique de confidentialite
</button> </a>
</div> </div>
{ConfigurationProfil &&<ConfigurationDuProfil/>} {ConfigurationProfil &&<ConfigurationDuProfil/>}
{ConfigurationCompte &&<ConfigurationDuCompte/>} {ConfigurationCompte &&<ConfigurationDuCompte/>}
{PolitiqueConfidentialite &&<PolitiqueDeConfidentialite/>} {PolitiqueConfidentialite &&<PolitiqueDeConfidentialite/>}
</div>
</main> </main>
); );
} }

6
Site Web/client/src/styles/_settings.scss
Unescape View File

@ -5,6 +5,8 @@ $color-2: #CCF2F4;
$color-3: #F4F9F9; $color-3: #F4F9F9;
$color-4: #AAAAAA; $color-4: #AAAAAA;
$color-5: #AABBCC; $color-5: #AABBCC;
$color-6: #5499c7 ;
$color-7: #1b4f72 ;
@ -17,6 +19,8 @@ $color-5: #AABBCC;
// $color-6: yellow; // $color-6: yellow;
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -24,7 +28,7 @@ $color-5: #AABBCC;
} }
.imageDeProfil{ .imageDeProfil{
object-fit: none; object-fit: cover;
clip-path:circle(50%); clip-path:circle(50%);
} }

15
Site Web/client/src/styles/component/_configurationDuCompte.scss
Unescape View File

@ -25,9 +25,24 @@
margin-left: 6%; margin-left: 6%;
width: 16%; width: 16%;
max-width: 160px; max-width: 160px;
min-width: 120px;
background-color: $color-3; background-color: $color-3;
border: 2px solid $color-4; border: 2px solid $color-4;
border-radius: 20px; border-radius: 20px;
}
.buttonSuppressionText{
margin-left: 2%;
max-width: 400px;
min-width: 200px;
width: 35%;
font-style: italic;
color: red;
opacity: 70%;
background-color: $color-3;
height: fit-content;
padding: 1%;
} }
button:hover { button:hover {
background-color: $color-1; background-color: $color-1;

130
Site Web/client/src/styles/component/_configurationDuProfil.scss
Unescape View File

@ -1,8 +1,4 @@
.modificationDuProfilBackgroud{
// background: $color-6;
}
.modificationDuProfil{ .modificationDuProfil{
display: flex; display: flex;
@ -25,13 +21,38 @@ span{
} }
.imageDeProfilConfiguration{
.plusButton{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.5s;
}
.imageDeProfilConfigurationPlus {
position: relative;
width: 15%; width: 15%;
max-width: 180px;
min-width: 130px;
border: none;
}
.imageDeProfilConfigurationPlus:hover .plusButton {
opacity:0.70;
} }
.imageDeProfilConfiguration:hover{ .imageDeProfilConfiguration:hover{
filter: blur(1px); filter: blur(1px);
opacity: 0.2;
transition: opacity 1s;
} }
.accesDossiersPerso{ .accesDossiersPerso{
display: flex; display: flex;
align-items: row; align-items: row;
@ -46,12 +67,111 @@ input{
margin-bottom: 2%; margin-bottom: 2%;
} }
.accesDossiersPerso{ .accesDossiersPerso{
display: flex; display: flex;
flex-direction: column;
} }
.accesDossiersPersoValidation{
flex-direction: row;
}
.textAccesDossiersPerso{ .textAccesDossiersPerso{
margin-left:18px; margin-left:18px;
font-size: medium;
font-style: italic;
opacity: 70%;
} }
.popup-modificationProfil{
z-index: 100;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
animation: popup 1s forwards;
@keyframes popup {
to {
backdrop-filter: blur(2px);
}
}
.modal {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-100%);
background: $color-2;
padding: 25px;
border-radius: 20px;
box-shadow: 0 0 2px rgba(131, 130, 130, 0.356);
overflow: auto;
transform: scaleY(0);
transform-origin: center;
animation: modal .5s forwards;
max-width: 360px;
min-width: 320px;
border: 2px solid $color-4;
border-bottom-right-radius: 50px;
@keyframes modal {
to {
transform: scale(1) translate(-50%);
}
}
&:hover {
transform: scale(1.07);
}
}
&::-webkit-scrollbar {
width: 2px;
}
&::-webkit-scrollbar-track {
background: $color-4;
}
&::-webkit-scrollbar-thumb {
background: $color-1;
}
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
.imagesPopup{
display: flex;
justify-content: space-between;
flex-direction: row;
}
.imagesPopup{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.buttonPopup {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 5%;
margin-left: 8%;
margin-right: 8%;
button{
background: $color-4;
border-radius: 20px;
&:hover {
color: $color-3;
transform: translateX(2px);
}
}
}
}

46
Site Web/client/src/styles/component/_politiqueDeConfidentialite.scss
Unescape View File

@ -1,30 +1,30 @@
.PolitiqueDeConfidentialiteText{ .PolitiqueDeConfidentialiteText{
margin-top: 2%; margin-top: 2%;
text-indent: 1%; text-indent: 1%;
text-align: justify; text-align: justify;
display: flex; display: flex;
justify-content: center; justify-content: center;
p{ p{
max-width:85% ; max-width:85% ;
min-width: 380px; min-width: 380px;
animation-duration: 3s; animation-duration: 2s;
animation-name: slidein; animation-name: slide;
@keyframes slide {
@keyframes slidein { from {
from { margin-top: 100%;
margin-top: 100%; width: 50%;
width: 50%;
}
to {
margin-top: 0%;
width: 100%;
}
} }
} to {
margin-top: 0%;
width: 100%;
}
}
}
} }

1
Site Web/client/src/styles/index.scss
Unescape View File

@ -10,6 +10,7 @@
@import'./component/politiqueDeConfidentialite'; @import'./component/politiqueDeConfidentialite';
@import './component/newPoste'; @import './component/newPoste';
@import './component/notif'; @import './component/notif';
@import './component/trends'; @import './component/trends';

45
Site Web/client/src/styles/pages/_configuration.scss
Unescape View File

@ -1,28 +1,46 @@
.boutonDeConfigurations{ .boutonDeConfigurations{
display: flex; display: flex;
justify-content: center; justify-content: space-between;
flex-direction: row; flex-direction: row;
background-color: $color-7;
margin-left: -1%;
margin-right: 1%;
button{ a{
transition: margin-right 2s,1s;
transition: background-color linear 1s,1s;
padding: 1%; padding: 1%;
margin-bottom: 1%; margin-bottom: 1%;
margin-top: 2%; margin-top: 1%;
margin-left: 6%; margin-left: 3%;
width: 16%; margin-right: 3%;
max-width: 200px; width: 30%;
min-width: 140px;
background-color: $color-3; background-color: $color-3;
border: 2px solid $color-4; border: 2px solid $color-4;
border-radius: 20px; border-radius: 20px;
text-align: center;
height: px;
} }
button:hover { a:hover {
background-color: $color-1; background-color: $color-6;
border-color: black; padding-right:14%;
color:$color-3;
} }
} }
.configuration{
input:focus{
background-color:$color-3;
}
margin-left: 1%;
}
.ligneHorizontal{ .ligneHorizontal{
border-bottom: thick solid $color-1; border-bottom: thick solid $color-1;
@ -32,6 +50,13 @@
margin-top: 2%; margin-top: 2%;
} }
// body{
// background-color: gray;
// }
.mainConfig{ .mainConfig{
display: flex; display: flex;
flex-direction: column; flex-direction: column;

Write Preview
Loading…
Cancel
Save