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

Merge branch 'master' of https://codefirst.iut.uca.fr/git/maxence.lanone/JTT_CrM

Browse Source
master
Théo DUPIN 3 years ago
parent f69162fb3d aafbe769a2
commit 3a0a4cb534
5 changed files with 386 additions and 59 deletions
Show Stats Download Patch File Download Diff File

15
package-lock.json generated
Unescape View File

@ -24,6 +24,7 @@
"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",
"darkreader": "^4.9.58",
"date-fns": "^2.29.3", "date-fns": "^2.29.3",
"fullcalendar": "^5.11.3", "fullcalendar": "^5.11.3",
"pg": "^8.8.0", "pg": "^8.8.0",
@ -6908,6 +6909,15 @@
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
"integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==" "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
}, },
"node_modules/darkreader": {
"version": "4.9.58",
"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.58.tgz",
"integrity": "sha512-D/JGoJqW3m2AWBLhO+Pev+eThfs+CwRT4bcLb/1zKjql2yVwG0lx8C2XRDdSVGHw4y11n26W7syWoBpUfuhMqQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/darkreader/donate"
}
},
"node_modules/data-urls": { "node_modules/data-urls": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@ -22739,6 +22749,11 @@
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
"integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==" "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
}, },
"darkreader": {
"version": "4.9.58",
"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.58.tgz",
"integrity": "sha512-D/JGoJqW3m2AWBLhO+Pev+eThfs+CwRT4bcLb/1zKjql2yVwG0lx8C2XRDdSVGHw4y11n26W7syWoBpUfuhMqQ=="
},
"data-urls": { "data-urls": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",

1
package.json
Unescape View File

@ -19,6 +19,7 @@
"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",
"darkreader": "^4.9.58",
"date-fns": "^2.29.3", "date-fns": "^2.29.3",
"fullcalendar": "^5.11.3", "fullcalendar": "^5.11.3",
"pg": "^8.8.0", "pg": "^8.8.0",

101
src/pages/Dashboard.js
Unescape View File

@ -1,75 +1,74 @@
import React from 'react'; import React from 'react';
import NavigationDashboard from '../components/NavigationDashboard'; import NavigationDashboard from '../components/NavigationDashboard';
const Dashboard = () => { const Dashboard = () => {
return ( return (
<body> <body>
<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>
<div className="page_dashboard"> <div className="page_dashboard">
{/* Create an account page */} {/* Create an account page */}
<div className="haut_de_page"> <div className="haut_de_page">
<h2 className="titre">Dashboard</h2> <h2 className="titre">Dashboard</h2>
<div className="rechLogo"> <div className="rechLogo">
<div className="input_box"> <div className="input_box">
<input type="search" placeholder="Rechercher..."/> <input type="search" placeholder="Rechercher..."/>
<span className="search"> <span className="search">
<i class="uil uil-search search-icon"></i> <i class="uil uil-search search-icon"></i>
</span> </span>
</div>
<img className="logo" srcSet="./LogoApp.svg"/>
</div> </div>
<img className="logo" srcSet="./LogoApp.svg"/>
</div> </div>
</div> <div className="bas_de_page">
<div className="bas_de_page"> <NavigationDashboard />
<NavigationDashboard /> <div className="Dashboard">
<div className="Dashboard"> <div className="_gauche">
<div className="_gauche"> <div className="_haut">
<div className="_haut"> <div className="Mes_infos">
<div className="Mes_infos"> Mes infos
Mes infos </div>
</div> <div className="Alertes">
<div className="Alertes"> Alertes
Alertes </div>
</div>
</div>
<div className="_bas">
<div className="Mes_prochaines_activités">
Mes prochaines activités
</div> </div>
<div className="Chiffre_clés"> <div className="_bas">
<div className="Ch_Clé_gauche"> <div className="Mes_prochaines_activités">
<div className="Ch_Clé_gauche_haut"> Mes prochaines activités
Chiffre_clés
</div>
<div className="Ch_Clé_gauche_bas">
Chiffre_clés
</div>
</div> </div>
<div className="Ch_Clé_droite"> <div className="Chiffre_clés">
<div className="Ch_Clé_droite_haut"> <div className="Ch_Clé_gauche">
Chiffre_clés <div className="Ch_Clé_gauche_haut">
Chiffre_clés
</div>
<div className="Ch_Clé_gauche_bas">
Chiffre_clés
</div>
</div> </div>
<div className="Ch_Clé_droite_bas"> <div className="Ch_Clé_droite">
Chiffre_clés <div className="Ch_Clé_droite_haut">
Chiffre_clés
</div>
<div className="Ch_Clé_droite_bas">
Chiffre_clés
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="_droite">
<div className="_droite"> <div className="clients_important">
<div className="clients_important"> clients important
clients important </div>
</div> <div className="contacts_ajouté_récemment">
<div className="contacts_ajouté_récemment"> contacts ajouté récemment
contacts ajouté récemment </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </body>
</body>
); );
}; };

17
src/pages/Parametres.js
Unescape View File

@ -1,17 +1,25 @@
import React from 'react'; import React, { useState } from 'react';
import NavigationDashboard from '../components/NavigationDashboard'; import NavigationDashboard from '../components/NavigationDashboard';
import { createContext } from 'react';
export const ThemeContext = createContext(null);
const Parametre = () => { const Parametre = () => {
const [theme, setTheme] = useState("light");
const toggleTheme = () => {
setTheme((curr) => (curr === "light" ? "dark" : "light"));
}
return ( return (
<body> <ThemeContext.Provider value={{ theme, setTheme}}>
<body className={theme}>
<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>
<div className="page_parametre"> <div className="page_parametre">
{/* Create an account page */} {/* Create an account page */}
<div className="haut_de_page"> <div className="haut_de_page">
<h2 className="titre">Paramètre</h2> <h2 className="titre">Paramètres</h2>
<div className="rechLogo"> <div className="rechLogo">
<div className="input_box"> <div className="input_box">
<input type="search" placeholder="Rechercher..."/> <input type="search" placeholder="Rechercher..."/>
@ -49,7 +57,7 @@ const Parametre = () => {
<div className="two_bas"> <div className="two_bas">
<p className="text_two_bas">Mode sombre</p> <p className="text_two_bas">Mode sombre</p>
<div className="center"> <div className="center">
<input type="checkbox" name=""/> <input type="checkbox" onChange={toggleTheme} checked={theme === "dark"}/>
</div> </div>
</div> </div>
</div> </div>
@ -60,6 +68,7 @@ const Parametre = () => {
</div> </div>
</div> </div>
</body> </body>
</ThemeContext.Provider>
); );
}; };

305
src/styles/components/_parametre.scss
Unescape View File

@ -1,5 +1,308 @@
body { .light {
background-color: $alice-blue; background-color: $alice-blue;
color: black;
.page_parametre {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: auto;
height: 100vh;
.haut_de_page {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 50px;
width: auto;
height: 10%;
align-items: center;
margin: 10px 10px 5px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.titre {
font-size: 40px;
}
.rechLogo {
display: flex;
flex-direction: row;
justify-content: space-between;
.input_box {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 40px;
max-width: 350px;
width: 100%;
margin: 30px 30px;
border-radius: 25px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
input {
position: relative;
width: 100%;
height: 100%;
padding: 0 15px 0 65px;
outline: none;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: 400;
color: #333;
}
.search {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 60px;
border-radius: 25px 0 0 25px;
.search-icon {
font-size: 30px;
color: black;
}
}
}
.logo {
display: flex;
width: 100px;
height: 100px;
}
}
}
.bas_de_page {
display: flex;
flex-direction: row;
justify-content: space-between;
width: auto;
height: 86%;
.nav_bar_verticale {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 5%;
margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.button {
display: flex;
object-fit: cover;
background-color: transparent;
border: none;
cursor: pointer;
.logo_nav_bar{
display: flex;
margin: 10px;
height: 50px;
width: 50px;
}
}
}
.Parametre {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 94.3%;
height: auto;
margin: 5px 10px 10px 5px;
.one {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: auto;
height: 28.5%;
padding: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.one_haut {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 50%;
border-bottom: 1px solid black;
}
.one_milieu {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 9px;
height: 25%;
border-bottom: 1px solid black;
.bouton_submit {
display: flex;
margin-left: 30px;
align-items: center;
cursor: pointer;
.bouton_signalerPB {
width: 75px;
height: 20px;
background-color: rgb(190, 189, 189);
border-radius: 5px;
border-radius: 5px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
cursor: pointer;
&:hover{
background-color: lightgrey;
}
}
}
}
.one_bas {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 9px;
height: 25%;
.bouton_submit {
display: flex;
margin-left: 30px;
align-items: center;
cursor: pointer;
.bouton_modifierMDP {
width: 75px;
height: 20px;
background-color: rgb(190, 189, 189);
border-radius: 5px;
border-radius: 5px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
cursor: pointer;
&:hover{
background-color: lightgrey;
}
}
}
}
}
.two {
display: flex;
flex-direction: column;
justify-content: space-between;
width: auto;
height: 28.5%;
padding: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.two_haut {
display: flex;
height: 75%;
border-bottom: 1px solid black;
}
.two_bas {
display: flex;
flex-direction: row;
padding: 9px;
height: 25%;
.center {
position: absolute;
top: 84%;
right: 0.5%;
transform: translate(-50%,-50%);
input[type="checkbox"] {
position: relative;
width: 50px;
height: 25px;
-webkit-appearance: none;
background-color: #e2e2e2;
outline: none;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(0,0,0,.5);
transition: .5s;
cursor: pointer;
}
input:checked[type="checkbox"] {
background-color: rgb(51, 75, 172);
}
input[type="checkbox"]:before {
content: '';
position: absolute;
width: 18px;
height: 18px;
border-radius: 20px;
top: 12%;
left: 10%;
background-color: white;
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
transition: .5s;
}
input:checked[type="checkbox"]:before {
left: 27px;
}
}
}
}
.three {
display: flex;
width: auto;
height: 40%;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
}
}
}
}
.dark {
background-color: $xiketic;
color: white;
.page_parametre { .page_parametre {
display: flex; display: flex;

Write Preview
Loading…
Cancel
Save