Skip to content
Snippets Groups Projects
Commit 07a1c535 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

wip

parent f25ed6de
No related branches found
No related tags found
1 merge request!118feat(ui): use mui components and upgrade to v5
Pipeline #73113 passed
Stage: quality
Stage: build
Show whitespace changes
Inline Side-by-side
src/App.tsx
+ 2
− 3
View file @ 07a1c535
import { ThemeProvider, createTheme } from '@mui/material'
import { ThemeProvider } from '@mui/material'
import { BrowserRouter } from 'react-router-dom'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import Layout from './components/Layout/Layout'
import Router from './components/Routes/Router'
import { theme } from './components/UI/theme'
import useFindUser from './hooks/useFindUser'
import { UserContext } from './hooks/userContext'
const theme = createTheme()
function App() {
const { user, setUser, isLoading } = useFindUser()
......
src/components/Popups/Popups.tsx
+ 100
− 73
View file @ 07a1c535
import {
Button,
FormControl,
FormControlLabel,
FormGroup,
NativeSelect,
Switch,
} from '@mui/material'
import { DateTime } from 'luxon'
import React, { useCallback, useContext, useEffect, useState } from 'react'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
......@@ -238,82 +246,83 @@ const Popups: React.FC = () => {
<h2 className="title">Affichage des pop-up de panne</h2>
<div className={customPopup.popupEnabled ? 'disabled' : ''}>
<p>Services concernés</p>
<div className="switch_div">
<span>Panne Enedis</span>
<input
type="checkbox"
id="switch_enedis"
<FormGroup style={{ flexDirection: 'row' }}>
<FormControlLabel
label="Panne Enedis"
labelPlacement="top"
control={
<Switch
disabled={customPopup.popupEnabled}
checked={partnersInfo.enedis_failure}
onChange={event => {
handleCheckboxChange(
event.currentTarget.checked,
event.target.checked,
CheckboxType.ENEDIS
)
}}
/>
<label htmlFor="switch_enedis" />
</div>
<div className="switch_div">
<span>Panne EGL</span>
<input
type="checkbox"
id="switch_egl"
}
/>
<FormControlLabel
label="Panne EGL"
labelPlacement="top"
control={
<Switch
disabled={customPopup.popupEnabled}
checked={partnersInfo.egl_failure}
onChange={event => {
handleCheckboxChange(
event.currentTarget.checked,
event.target.checked,
CheckboxType.EGL
)
}}
/>
<label htmlFor="switch_egl" />
</div>
<div className="switch_div">
<span>Panne GRDF</span>
<input
type="checkbox"
id="switch_grdf"
}
/>
<FormControlLabel
label="Panne GRDF"
labelPlacement="top"
control={
<Switch
disabled={customPopup.popupEnabled}
checked={partnersInfo.grdf_failure}
onChange={event => {
handleCheckboxChange(
event.currentTarget.checked,
event.target.checked,
CheckboxType.GRDF
)
}}
/>
<label htmlFor="switch_grdf" />
</div>
}
/>
</FormGroup>
</div>
</div>
<div className="customPopup">
<h2 className="title">Affichage de pop-up personnalisée</h2>
<div className={isPartnerNotificationOn() ? 'disabled' : ''}>
<div className="currentPopup">
<div className="switch_div">
<span>Pop-up active</span>
<input
type="checkbox"
id="switch_popup"
<FormGroup style={{ flexDirection: 'row' }}>
<FormControlLabel
label="Pop-up active"
labelPlacement="top"
control={
<Switch
disabled={isPartnerNotificationOn()}
checked={customPopup.popupEnabled}
onChange={event => {
handleCheckboxChange(
event.currentTarget.checked,
event.target.checked,
CheckboxType.CUSTOM
)
}}
/>
<label htmlFor="switch_popup" />
</div>
}
/>
{customPopup.popupEnabled &&
previousEndDate &&
getRemainingDuration(previousEndDate)}
</div>
</FormGroup>
<div className="popupTitle">
<label htmlFor="title">Titre</label>
......@@ -345,7 +354,26 @@ const Popups: React.FC = () => {
<div className="popupEndDate">
<label htmlFor="title">Nouvelle Durée</label>
<div className="durationInput">
<select
<FormControl>
<NativeSelect
defaultValue={30}
inputProps={{
name: 'age',
id: 'uncontrolled-native',
}}
>
{OPTIONS.map(option => (
<option
key={option.value}
value={option.value}
selected={popupDuration.type === option.value}
>
{option.label}
</option>
))}
</NativeSelect>
</FormControl>
{/* <select
value={popupDuration.type}
onChange={event => handleSelectChange(event)}
>
......@@ -358,7 +386,7 @@ const Popups: React.FC = () => {
{option.label}
</option>
))}
</select>
</select> */}
{popupDuration.type !== 'infinite' && (
<input
type="number"
......@@ -378,17 +406,16 @@ const Popups: React.FC = () => {
</div>
<div className="buttons">
<button className="btnCancel" onClick={handleCancel}>
<Button variant="outlined" onClick={handleCancel}>
Annuler
</button>
<button
className="btnValid"
onClick={handleSave}
</Button>
<Button
variant="contained"
disabled={!isPageValid()}
title="Un seul type de popup peut être activé"
onClick={handleSave}
>
Sauvegarder
</button>
</Button>
</div>
</>
)}
......
src/components/Popups/popups.scss
+ 4
− 67
View file @ 07a1c535
......@@ -23,20 +23,10 @@
}
}
.customPopup {
.currentPopup {
display: flex;
margin-bottom: 1rem;
.switch_div {
padding-top: 0;
}
p.endDate {
color: $gold-dark;
font-weight: bold;
}
}
}
.popupTitle {
margin-bottom: 1.5rem;
......@@ -105,6 +95,7 @@
}
.buttons {
margin-top: 1rem;
display: flex;
justify-content: center;
gap: 1rem;
......@@ -112,58 +103,4 @@
margin: 0;
}
}
.switch_div {
display: inline-block;
padding: 1rem 1rem;
min-width: 135px;
span {
color: $text-dark;
}
input[type='checkbox'] {
width: 0;
height: 0;
visibility: hidden;
margin-bottom: 15px;
}
label {
display: block;
width: 50px;
height: 20px;
background-color: grey;
border-radius: 15px;
position: relative;
cursor: pointer;
transition: 0.5s;
box-shadow: 0 0 20px #80808050;
}
label::after {
content: '';
width: 17px;
height: 17px;
background-color: #e8f5f7;
position: absolute;
border-radius: 13px;
top: 2px;
left: 2px;
transition: 0.5s;
}
input:checked + label:after {
left: calc(100% - 3px);
transform: translateX(-100%);
}
input:checked + label {
background-color: #e3b82a;
}
label:active:after {
width: 34px;
}
}
}
src/components/UI/theme.ts 0 → 100644
+ 48
− 0
View file @ 07a1c535
import { createTheme } from '@mui/material'
const primary = {
main: '#1976d2',
light: '#42a5f5',
dark: '#1565c0',
contrastText: '#fff',
}
export const theme = createTheme({
palette: {
primary: {
main: '#F1C017',
contrastText: '#000',
},
},
components: {
MuiFormGroup: {},
MuiFormControlLabel: {
styleOverrides: {
root: {
color: '#fff !important',
},
disabled: {
color: '#0f0 !important',
},
},
},
MuiButton: {
styleOverrides: {
root: {
fontWeight: 700,
},
},
},
MuiSwitch: {
styleOverrides: {
track: {
backgroundColor: '#7B7B7B',
'.Mui-checked.Mui-checked + &': {
backgroundColor: '#DCBA4A',
opacity: 1,
},
},
},
},
},
})
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment