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

Amélioration bouton pageadmin + flex-box page admin

Browse Source
master
Clément VERDOIRE 3 years ago
parent 8c29a1ecee
commit f3cbe7acc4
6 changed files with 49 additions and 44 deletions
Show Stats Download Patch File Download Diff File

14
package-lock.json generated
Unescape View File

@ -20,7 +20,7 @@
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"addeventlistener": "^2.0.0", "addeventlistener": "^2.0.0",
"axios": "^1.1.3", "axios": "^1.2.0",
"chart": "^0.1.2", "chart": "^0.1.2",
"chart.js": "^3.9.1", "chart.js": "^3.9.1",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
@ -5489,9 +5489,9 @@
} }
}, },
"node_modules/axios": { "node_modules/axios": {
"version": "1.1.3", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz", "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.0.tgz",
"integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==", "integrity": "sha512-zT7wZyNYu3N5Bu0wuZ6QccIf93Qk1eV8LOewxgjOZFd2DenOs98cJ7+Y6703d0wkaXGY6/nZd4EweJaHz9uzQw==",
"dependencies": { "dependencies": {
"follow-redirects": "^1.15.0", "follow-redirects": "^1.15.0",
"form-data": "^4.0.0", "form-data": "^4.0.0",
@ -21701,9 +21701,9 @@
"integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==" "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
}, },
"axios": { "axios": {
"version": "1.1.3", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz", "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.0.tgz",
"integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==", "integrity": "sha512-zT7wZyNYu3N5Bu0wuZ6QccIf93Qk1eV8LOewxgjOZFd2DenOs98cJ7+Y6703d0wkaXGY6/nZd4EweJaHz9uzQw==",
"requires": { "requires": {
"follow-redirects": "^1.15.0", "follow-redirects": "^1.15.0",
"form-data": "^4.0.0", "form-data": "^4.0.0",

2
package.json
Unescape View File

@ -15,7 +15,7 @@
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"addeventlistener": "^2.0.0", "addeventlistener": "^2.0.0",
"axios": "^1.1.3", "axios": "^1.2.0",
"chart": "^0.1.2", "chart": "^0.1.2",
"chart.js": "^3.9.1", "chart.js": "^3.9.1",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",

12
src/components/NavigationAdmin.js
Unescape View File

@ -8,22 +8,16 @@ const NavigationAdmin = (props) => {
<div className="nav_bar_verticale"> <div className="nav_bar_verticale">
<img className="logo" srcSet="./LogoApp.svg"></img> <img className="logo" srcSet="./LogoApp.svg"></img>
<NavLink className="create_user" to="/Admin_create"> <NavLink className="create_user" to="/Admin_create">
<button id="bouton_créer" className="bouton" type="button" value="Créer un utilisateur" onClick={changeColor}>Créer utilisateur</button> <button id="bouton_créer" className="bouton" type="button" value="Créer un utilisateur">Créer utilisateur</button>
</NavLink> </NavLink>
<NavLink className="modify_user" to="/Admin_modif" state={{ iduser: props.iduser }}> <NavLink className="modify_user" to="/Admin_modif" state={{ iduser: props.iduser }}>
<button id="bouton_modif" className="bouton" type="button" value="Modifier un utilisateur" onClick={changeColor}>Modifier utilisateur</button> <button id="bouton_modif" className="bouton" type="button" value="Modifier un utilisateur">Modifier utilisateur</button>
</NavLink> </NavLink>
<NavLink className="delete_user" to="/Admin_supp"> <NavLink className="delete_user" to="/Admin_supp">
<button id="bouton_sup" className="bouton" type="button" value="Supprimer un utilisateur" onClick={changeColor}>Supprimer utilisateur</button> <button id="bouton_sup" className="bouton" type="button" value="Supprimer un utilisateur">Supprimer utilisateur</button>
</NavLink> </NavLink>
</div> </div>
); );
}; };
function changeColor() {
let b1 = document.querySelector('button');
b1.style.backgroundColor = "rgb(170,170,170)";
}
export default NavigationAdmin; export default NavigationAdmin;

3
src/pages/Admin_create.js
Unescape View File

@ -58,8 +58,7 @@ function Admin_create() {
return ( return (
<div className="page_admin"> <div className="page_admin">
{/*<NavigationAdmin />*/} <NavigationAdmin />
{/* Create a admin page */}
<div className="Titre_Formulaire"> <div className="Titre_Formulaire">
<p className="Titre">Admin</p> <p className="Titre">Admin</p>
<p className="Sous-titre">Création d'utilisateur</p> <p className="Sous-titre">Création d'utilisateur</p>

10
src/pages/Admin_list.js
Unescape View File

@ -10,6 +10,11 @@ const api = axios.create({
function Admin_list() { function Admin_list() {
const [theme, setTheme] = useState("light");
if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
setTheme(localStorage.getItem("theme"))
}
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
const [selectedIdUser, setSelectedIdUser] = useState(); const [selectedIdUser, setSelectedIdUser] = useState();
@ -24,8 +29,9 @@ function Admin_list() {
setSelectedIdUser(iduser); setSelectedIdUser(iduser);
}; };
return ( return (
<div className="page_admin"> <body className="page_admin">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link> <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
{/* Create a page to delete an user in the admin page*/} {/* Create a page to delete an user in the admin page*/}
<NavigationAdmin iduser={selectedIdUser}/> <NavigationAdmin iduser={selectedIdUser}/>
@ -94,7 +100,7 @@ function Admin_list() {
</TableContainer> </TableContainer>
</div> </div>
</div> </div>
</div> </body>
); );
}; };

52
src/styles/components/_admin.scss
Unescape View File

@ -1,3 +1,8 @@
.dark{
background-color: $xiketic;
color: white;
}
body { body {
.page_admin { .page_admin {
@ -74,14 +79,14 @@ body {
.Titre_Formulaire{ .Titre_Formulaire{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 10px 10px 10px 0px;
padding: 10px;
flex-basis: 100%; flex-basis: 100%;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
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);
margin: 10px;
padding: 10px;
.Titre { .Titre {
display: flex; display: flex;
@ -198,42 +203,43 @@ body {
margin-top: 5%; margin-top: 5%;
.bouton_val{ .bouton_val{
//display: flex; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
font-size: 20px;
text-decoration: none;
color: white;
background-color: grey; background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 15px;
border-radius: 15px; border-radius: 15px;
width: 20%; border: 0;
&:hover { &:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white; color: white;
background-color: rgba(114, 114, 114, 0.371); background-color: rgba(114, 114, 114, 0.371);
} }
&:active { &:active {
background-color: rgba(68, 68, 68, 0.972); background-color: rgba(68, 68, 68, 0.972);
} }
} }
.bouton_ann{ .bouton_ann{
//display: flex; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
font-size: 20px;
text-decoration: none;
color: white;
background-color: grey; background-color: grey;
border: 0px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 15px;
border-radius: 15px; border-radius: 15px;
width: 20%;
text-decoration: none;
text-align: center;
&:hover { &:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white; color: white;
background-color: rgba(114, 114, 114, 0.371); background-color: rgba(114, 114, 114, 0.371);
} }
@ -248,14 +254,14 @@ body {
.Titre_Formulaire_Rech{ .Titre_Formulaire_Rech{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 10px 10px 10px 0px;
padding: 10px;
flex-basis: 100%; flex-basis: 100%;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
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);
margin: 10px;
padding: 10px;
.Titre { .Titre {
display: flex; display: flex;

Write Preview
Loading…
Cancel
Save