maxence.lanone
/
JTT_CrM_test_ci
forked from CRM_Production/JTT_CrM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout de l'image dans la page mon compte (Terminé)

Browse Source
master
Théo DUPIN 3 years ago
parent bd9f2ed464
commit 93aba8e766
3 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File

29
src/pages/Compte.js
Unescape View File

@ -1,12 +1,20 @@
import { Component } from '@fullcalendar/core'; import { Component } from '@fullcalendar/core';
import { render } from '@testing-library/react'; import React, { useState } from 'react';
import { click } from '@testing-library/user-event/dist/click';
import React from 'react';
import NavigationDashboard from '../components/NavigationDashboard'; import NavigationDashboard from '../components/NavigationDashboard';
import img1 from '../img/logo_personEntouré.svg';
const Compte = () => {
function Compte() {
const [file, setFile] = useState();
function handleChange(e) {
console.log(e.target.files);
setFile(URL.createObjectURL(e.target.files[0]));
}
return ( return (
<body> <body>
@ -31,9 +39,16 @@ const Compte = () => {
<div className="Compte"> <div className="Compte">
<div className="name_picture"> <div className="name_picture">
<div className="picture"> <div className="picture">
<div id="display_image"></div> <div id="display_image">
<img src={img1} srcSet={file} id="img" className="img"></img>
</div>
<div className='bouton_submit'> <div className='bouton_submit'>
<input type="file" name="fileUpload" id="fileUpload" accept="image/*"/> <input type="file" name="fileUpload" id="input" accept="image/" onChange={handleChange} />
<div className="label">
<label className="fileUpload" htmlFor="input">
Ajoutez votre photo
</label>
</div>
</div> </div>
</div> </div>
<div className="name"> <div className="name">
@ -81,8 +96,8 @@ const Compte = () => {
</div> </div>
</body> </body>
); );
}; };
export default Compte; export default Compte;

33
src/styles/components/_compte.scss
Unescape View File

@ -199,10 +199,15 @@ body {
height: 135px; height: 135px;
width: 135px; width: 135px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-radius: 15px; border-radius: 100px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
.img {
border-radius: 100px;
object-fit: cover;
}
} }
.figure{ .figure{
@ -220,7 +225,9 @@ body {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.bouton_ajoutPhoto {
/*.bouton_ajoutPhoto {
height: 40px; height: 40px;
width: 150px; width: 150px;
background-color: rgb(190, 189, 189); background-color: rgb(190, 189, 189);
@ -231,7 +238,7 @@ body {
&:hover{ &:hover{
background-color: lightgrey; background-color: lightgrey;
} }
} }*/
} }
} }
@ -432,3 +439,23 @@ body {
} }
} }
} }
#input[type="file"] {
display: none;
}
.fileUpload{
width: 100%;
margin-top: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
width: 150px;
height: 50px;
color: white;
border-radius: 10px;
background-color: $xiketic;
cursor: pointer;
}

2
src/styles/settings.scss
Unescape View File

@ -26,7 +26,7 @@ $alice-blue: rgba(232, 238, 242, 1);
$blue-munsell: rgba(0, 136, 163, 1); $blue-munsell: rgba(0, 136, 163, 1);
$malachite: rgba(50, 232, 117, 1); $malachite: rgba(50, 232, 117, 1);
$rufous: rgba(155, 41, 21, 1); $rufous: rgba(155, 41, 21, 1);
$xiketic: rgba(2, 1, 20, 1); $xiketic: rgb(21, 18, 75);
/* SCSS Gradient */ /* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff); $gradient-top: linear-gradient(0deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);

Write Preview
Loading…
Cancel
Save