Skip to content
Snippets Groups Projects
Commit 61481f3f authored by Hugo SUBTIL's avatar Hugo SUBTIL
Browse files

Merge branch 'feat/US848-consents-page-css' into 'dev'

Feat/us848 consents page css

See merge request web-et-numerique/llle_project/backoffice-client!67
parents a9f9bc6d fa4fc0eb
Branches
Tags
6 merge requests!96Deploy OpenShift v2,!95MEP fix liens undefined,!91MEP: removed Meilisearch,!79Fix: nginx unprivileged image,!77Back-office SGE before canary release,!67Feat/us848 consents page css
Pipeline #43087 passed
...@@ -254,10 +254,10 @@ const Consents: React.FC = () => { ...@@ -254,10 +254,10 @@ const Consents: React.FC = () => {
return ( return (
<> <>
<div className={styles.header + ' header'}> <div className="header">
<p className="title pagetitle">Gestion des consentements Enedis</p> <p className="title pagetitle">Gestion des consentements Enedis</p>
</div> </div>
<div className={styles.content + ' content'}> <div className={styles.content}>
<div className={styles.searchField}> <div className={styles.searchField}>
<div className={styles.inputGroup}> <div className={styles.inputGroup}>
<label htmlFor="search">Recherche</label> <label htmlFor="search">Recherche</label>
...@@ -276,7 +276,7 @@ const Consents: React.FC = () => { ...@@ -276,7 +276,7 @@ const Consents: React.FC = () => {
</div> </div>
<div <div
className="ag-theme-alpine-dark" className="ag-theme-alpine-dark"
style={{ width: '100%', height: '65vh' }} style={{ width: '100%', height: '80vh' }}
> >
<AgGridReact <AgGridReact
onGridReady={onGridReady} onGridReady={onGridReady}
...@@ -305,31 +305,6 @@ const Consents: React.FC = () => { ...@@ -305,31 +305,6 @@ const Consents: React.FC = () => {
rowsPerPageOptions={[10, 25, 50, 100]} rowsPerPageOptions={[10, 25, 50, 100]}
/> />
)} )}
<div className={styles.footerButtons}>
<button
className="btnDelete"
onClick={isShowingSelection ? continueSelection : resetSelection}
disabled={
!isShowingSelection &&
selectedNodes &&
selectedNodes.length === 0
}
>
{isShowingSelection
? 'Continuer ma sélection'
: 'Tout déselectionner'}
</button>
<button
className={styles.btnSelection + ' btnValid'}
onClick={
!isShowingSelection ? showCurrentSelection : toggleOpenModal
}
disabled={selectedNodes && selectedNodes.length <= 0}
>
{!isShowingSelection ? 'Voir mes sélections' : 'Télécharger'}
<span>{selectedNodes?.length}</span>
</button>
</div>
</div> </div>
{openDowloadModal && ( {openDowloadModal && (
<DowloadModal <DowloadModal
...@@ -338,6 +313,27 @@ const Consents: React.FC = () => { ...@@ -338,6 +313,27 @@ const Consents: React.FC = () => {
/> />
)} )}
</div> </div>
<div className={styles.footerButtons}>
<button
className="btnDelete"
onClick={isShowingSelection ? continueSelection : resetSelection}
disabled={
!isShowingSelection && selectedNodes && selectedNodes.length === 0
}
>
{isShowingSelection
? 'Continuer ma sélection'
: 'Tout déselectionner'}
</button>
<button
className={styles.btnSelection + ' btnValid'}
onClick={!isShowingSelection ? showCurrentSelection : toggleOpenModal}
disabled={selectedNodes && selectedNodes.length <= 0}
>
{!isShowingSelection ? 'Voir mes sélections' : 'Télécharger'}
<span>{selectedNodes?.length}</span>
</button>
</div>
</> </>
) )
} }
......
/* eslint-disable react/no-unescaped-entities */
import React from 'react' import React from 'react'
import styles from './consents.module.scss'
import Modal from '../Modal/Modal' import Modal from '../Modal/Modal'
import dowloadIcon from '../../assets/icons/ico-download.svg' import dowloadIcon from '../../assets/icons/ico-download.svg'
import styles from './DownloadModal.module.scss'
interface DowloadModalProps { interface DowloadModalProps {
toggleOpenModal: () => void toggleOpenModal: () => void
...@@ -28,10 +27,10 @@ const DowloadModal: React.FC<DowloadModalProps> = ({ ...@@ -28,10 +27,10 @@ const DowloadModal: React.FC<DowloadModalProps> = ({
</div> </div>
<div className={styles.text2}> <div className={styles.text2}>
Attention ce fichier contient des données personnelles. Veillez à ne Attention ce fichier contient des données personnelles. Veillez à ne
l'utiliser qu'en cas de contrôle de la part d'Enedis et à supprimer ce l&apos;utiliser qu&apos;en cas de contrôle de la part d&apos;Enedis et
fichier ensuite de tout ordinateur. à supprimer ce fichier ensuite de tout ordinateur.
</div> </div>
<div className="buttons"> <div className={styles.buttons}>
<button className="btnCancel2" onClick={toggleOpenModal}> <button className="btnCancel2" onClick={toggleOpenModal}>
Annuler Annuler
</button> </button>
......
@import '../../styles/config/colors';
.modalContent {
padding: 0 1rem;
text-align: center;
font-size: 0.875rem;
div {
margin: 0.875rem 0;
}
.modalTitle {
font-size: 1rem;
font-weight: 700;
color: $gold;
}
.text1 {
color: $text-grey;
}
.text2 {
color: $text-dark;
}
.buttons {
margin-top: 1rem;
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
button {
margin: 0;
}
}
}
...@@ -3,12 +3,10 @@ ...@@ -3,12 +3,10 @@
@import '../../styles/config/breakpoints'; @import '../../styles/config/breakpoints';
@import '../../styles/config/typography'; @import '../../styles/config/typography';
.header {
height: $small-nav-height !important;
}
.content { .content {
background: $dark-bg; padding: 1rem;
} }
.searchField { .searchField {
max-width: 750px; max-width: 750px;
width: 100%; width: 100%;
...@@ -39,13 +37,19 @@ ...@@ -39,13 +37,19 @@
} }
} }
@include customCheckBox(1.45rem); @include customCheckBox(1.45rem);
.footerButtons { .footerButtons {
margin: auto; padding: 1rem 0;
padding: 1.5rem 0;
width: fit-content;
display: flex; display: flex;
justify-content: center; gap: 1rem;
align-items: center; position: fixed;
bottom: 0;
left: 50%;
transform: translate(-25%);
button {
margin: 0;
}
.btnSelection { .btnSelection {
position: relative; position: relative;
span { span {
...@@ -63,22 +67,3 @@ ...@@ -63,22 +67,3 @@
} }
} }
} }
.modalContent {
padding: 0 1rem;
text-align: center;
font-size: 0.875rem;
div {
margin: 0.875rem 0;
}
.modalTitle {
font-size: 1rem;
font-weight: 700;
color: $gold;
}
.text1 {
color: $text-grey;
}
.text2 {
color: $text-dark;
}
}
...@@ -113,3 +113,10 @@ h2.title { ...@@ -113,3 +113,10 @@ h2.title {
width: 34px; width: 34px;
} }
} }
.customInfo {
.switch_div {
padding-top: 0;
margin-bottom: 1rem;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment