From 44f8cdb007ee43fdc09861a2b376b14c81f67d6a Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Fri, 26 Mar 2021 16:56:02 +0100
Subject: [PATCH] feat: change ecogesture modal
---
src/components/Action/ActionCard.tsx | 3 +-
src/components/Action/ActionOnGoing.tsx | 13 ++--
src/components/CommonKit/Modal/Modal.tsx | 2 +-
.../Connection/ConnectionFormOAuth.tsx | 2 +-
src/components/Connection/OAuthForm.tsx | 2 +-
src/components/Ecogesture/EcogestureList.tsx | 3 +-
src/components/Ecogesture/EcogestureModal.tsx | 61 ++++++++++++++-----
.../Ecogesture/ecogestureModal.scss | 2 +-
src/components/Feedback/FeedbackModal.tsx | 12 ++--
src/components/Header/CozyBar.tsx | 4 +-
src/components/Header/Header.tsx | 4 +-
src/locales/fr.json | 37 ++++++-----
src/styles/components/_dialog.scss | 3 +
13 files changed, 96 insertions(+), 52 deletions(-)
diff --git a/src/components/Action/ActionCard.tsx b/src/components/Action/ActionCard.tsx
index 6e53ee2d1..ec510ca4a 100644
--- a/src/components/Action/ActionCard.tsx
+++ b/src/components/Action/ActionCard.tsx
@@ -46,8 +46,9 @@ const ActionCard: React.FC<ActionCardProps> = ({
<div className="action-title text-18-bold">{action.shortName}</div>
</Button>
)}
- {openEcogestureModal && action && (
+ {action && (
<EcogestureModal
+ open={openEcogestureModal}
ecogesture={action}
isAction={true}
handleCloseClick={toggleModal}
diff --git a/src/components/Action/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing.tsx
index cf11105fb..cb7a95266 100644
--- a/src/components/Action/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing.tsx
@@ -103,13 +103,12 @@ const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
>
{t('action.details')}
</Button>
- {openEcogestureModal && (
- <EcogestureModal
- ecogesture={userAction.ecogesture}
- isAction={false}
- handleCloseClick={toggleEcogestureModal}
- />
- )}
+ <EcogestureModal
+ open={openEcogestureModal}
+ ecogesture={userAction.ecogesture}
+ isAction={false}
+ handleCloseClick={toggleEcogestureModal}
+ />
</>
)}
</div>
diff --git a/src/components/CommonKit/Modal/Modal.tsx b/src/components/CommonKit/Modal/Modal.tsx
index 0956960a8..64386e829 100644
--- a/src/components/CommonKit/Modal/Modal.tsx
+++ b/src/components/CommonKit/Modal/Modal.tsx
@@ -59,7 +59,7 @@ const Modal: React.FC<ModalProps> = ({
>
{displayCloseButton && (
<StyledIconButton
- aria-label={t('modal.accessibility.close')}
+ aria-label={t('modal.accessibility.button_close')}
className="modal-close-button"
icon={CloseIcon}
onClick={closeClick}
diff --git a/src/components/Connection/ConnectionFormOAuth.tsx b/src/components/Connection/ConnectionFormOAuth.tsx
index a4f7e187c..74b190355 100644
--- a/src/components/Connection/ConnectionFormOAuth.tsx
+++ b/src/components/Connection/ConnectionFormOAuth.tsx
@@ -88,7 +88,7 @@ const ConnectionFormOAuth: React.FC<ConnectionFormOAuthProps> = ({
</div>
<div className="koauthform-button">
<MuiButton
- aria-label={t('auth.accessibility.create_account')}
+ aria-label={t('auth.accessibility.button_create_account')}
onClick={() => window.open(siteLink, '_blank')}
classes={{
root: 'btn-secondary-positive',
diff --git a/src/components/Connection/OAuthForm.tsx b/src/components/Connection/OAuthForm.tsx
index 364681ded..9299ceef2 100644
--- a/src/components/Connection/OAuthForm.tsx
+++ b/src/components/Connection/OAuthForm.tsx
@@ -71,7 +71,7 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
return !konnector ? null : (
<>
<MuiButton
- aria-label={t('auth.accessibility.connect')}
+ aria-label={t('auth.accessibility.button_connect')}
onClick={
konnector.slug === fluidconfig[FluidType.GAS].konnectorConfig.slug
? toggleGRDFModal
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index 0f543a6b1..98f2563d1 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -225,8 +225,9 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
</div>
</>
- {openEcogestureModal && selectedEcogesture && (
+ {selectedEcogesture && (
<EcogestureModal
+ open={openEcogestureModal}
ecogesture={selectedEcogesture}
isAction={false}
handleCloseClick={handleCloseClick}
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index c8982edb7..627454176 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -1,22 +1,26 @@
import React, { useState, useEffect } from 'react'
+import './ecogestureModal.scss'
+import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { AppStore } from 'store'
+import { useSelector } from 'react-redux'
import { getPicto } from 'utils/picto'
+import useExploration from 'components/Hooks/useExploration'
+import { importIconbyId } from 'utils/utils'
import { Ecogesture } from 'models'
-import Modal from 'components/CommonKit/Modal/Modal'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { importIconbyId } from 'utils/utils'
-import './ecogestureModal.scss'
-import useExploration from 'components/Hooks/useExploration'
-import { AppStore } from 'store'
-import { useSelector } from 'react-redux'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import MuiDialog from '@material-ui/core/Dialog'
+import IconButton from '@material-ui/core/IconButton'
import MuiButton from '@material-ui/core/Button'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import EfficientyRating from './EfficientyRating'
-import classNames from 'classnames'
+import CloseIcon from 'assets/icons/ico/close.svg'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
interface EcogestureModalProps {
+ open: boolean
ecogesture: Ecogesture
isAction: boolean
handleCloseClick: () => void
@@ -24,6 +28,7 @@ interface EcogestureModalProps {
}
const EcogestureModal: React.FC<EcogestureModalProps> = ({
+ open,
ecogesture,
isAction,
handleCloseClick,
@@ -55,10 +60,32 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
}, [ecogesture, setValidExploration, currentChallenge])
return (
- <Modal border={true} handleCloseClick={handleCloseClick}>
+ <MuiDialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-label={t(
+ `ecogesture_modal.accessibility.window_title_${
+ isAction ? 'action' : 'ecogesture'
+ }`
+ )}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper no-padding blue-border',
+ }}
+ >
+ <IconButton
+ aria-label={t('ecogesture_modal.accessibility.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={16} />
+ </IconButton>
<div className="em-header text-14-normal-uppercase">
- {isAction ? t('action.title_action') : t('ECOGESTURE.TITLE_ECOGESTURE')}
+ {isAction
+ ? t('action.title_action')
+ : t('ecogesture_modal.title_ecogesture')}
</div>
+
<div className="em-root ecogesture-modal">
<div className="em-content">
<div className="em-content-box-img">
@@ -70,7 +97,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
<div className="em-detail">
<div className="em-detail-efficiency">
<span className="em-efficiency">
- {t('ECOGESTURE.EFFICIENCY')}
+ {t('ecogesture_modal.efficiency')}
</span>
<EfficientyRating result={Math.round(ecogesture.efficiency)} />
</div>
@@ -89,6 +116,9 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
<div className="long-name">{ecogesture.longName}</div>
{isAction ? (
<MuiButton
+ aria-label={t(
+ 'ecogesture_modal.accessibility.button_select_action'
+ )}
classes={{
root: 'btn-action-launch',
label: 'text-16-bold',
@@ -107,6 +137,9 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
{ecogesture.longDescription}
</div>
<MuiButton
+ aria-label={t(
+ 'ecogesture_modal.accessibility.button_see_more_detail'
+ )}
onClick={toggleMoreDetail}
classes={{
root: 'btn-secondary-negative',
@@ -114,14 +147,14 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
}}
>
{isMoreDetail
- ? t('ECOGESTURE.SHOW_LESS')
- : t('ECOGESTURE.SHOW_MORE')}
+ ? t('ecogesture_modal.show_less')
+ : t('ecogesture_modal.show_more')}
</MuiButton>
</>
)}
</div>
</div>
- </Modal>
+ </MuiDialog>
)
}
diff --git a/src/components/Ecogesture/ecogestureModal.scss b/src/components/Ecogesture/ecogestureModal.scss
index 66dc80630..ec332bd67 100644
--- a/src/components/Ecogesture/ecogestureModal.scss
+++ b/src/components/Ecogesture/ecogestureModal.scss
@@ -4,7 +4,7 @@
.em-header {
color: $grey-bright;
border-bottom: 1px solid rgba(163, 163, 163, 0.4);
- padding-bottom: 1em;
+ padding: 1em 0;
width: 100%;
display: flex;
justify-content: center;
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index 4b325c051..a18613c66 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -169,14 +169,14 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
disableBackdropClick
disableEscapeKeyDown
onClose={closeModal}
- aria-labelledby="feedback-title"
+ aria-label={t('feedback.accessibility.title')}
classes={{
root: 'modal-root',
paper: 'modal-paper yellow-border',
}}
>
<IconButton
- aria-label={t('feedback.accessibility.close')}
+ aria-label={t('feedback.accessibility.button_close')}
className="modal-paper-close-button"
onClick={closeModal}
>
@@ -203,7 +203,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
</div>
)}
<MuiButton
- aria-label={t('feedback.accessibility.ok')}
+ aria-label={t('feedback.accessibility.button_ok')}
onClick={validResult}
variant={'contained'}
classes={{
@@ -217,9 +217,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
</>
) : (
<>
- <div id="feedback-title" className="fb-header text-18-bold">
- {t('feedback.title')}
- </div>
+ <div className="fb-header text-18-bold">{t('feedback.title')}</div>
<form className="fb-content">
<label htmlFor="feedbackType" className="fb-label text-16-bold">
{t('feedback.type')}
@@ -246,7 +244,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
value={description}
></textarea>
<MuiButton
- aria-label={t('feedback.accessibility.send')}
+ aria-label={t('feedback.accessibility.button_send')}
onClick={sendEmail}
disabled={sending}
classes={{
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index 57865e72d..4923fc898 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -41,7 +41,7 @@ const CozyBar = ({
{displayBackArrow && (
<BarLeft>
<StyledIconButton
- aria-label={t('header.accessibility.back')}
+ aria-label={t('header.accessibility.button_back')}
className="cv-button"
icon={BackArrowIcon}
onClick={handleClickBack}
@@ -55,7 +55,7 @@ const CozyBar = ({
</BarCenter>
<BarRight>
<StyledIconButton
- aria-label={t('header.accessibility.open_feedbacks')}
+ aria-label={t('header.accessibility.button_open_feedbacks')}
className="cv-button"
icon={FeedbacksIcon}
size={40}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index ce5163125..ed0434e2c 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -89,7 +89,7 @@ const Header: React.FC<HeaderProps> = ({
>
{displayBackArrow && (
<StyledIconButton
- aria-label={t('header.accessibility.back')}
+ aria-label={t('header.accessibility.button_back')}
className="header-back-button"
icon={BackArrowIcon}
onClick={handleClickBack}
@@ -99,7 +99,7 @@ const Header: React.FC<HeaderProps> = ({
</div>
)}
<StyledIconButton
- aria-label={t('header.accessibility.open_feedbacks')}
+ aria-label={t('header.accessibility.button_open_feedbacks')}
className={
!textKey && !desktopTitleKey
? 'header-feedbacks-button right'
diff --git a/src/locales/fr.json b/src/locales/fr.json
index f5dd92863..b34ea43a0 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -33,13 +33,13 @@
},
"header": {
"accessibility" : {
- "back": "Retour à la page précédente",
- "open_feedbacks": "Ouvrir le partage de retours"
+ "button_back": "Retour à la page précédente",
+ "button_open_feedbacks": "Ouvrir le partage de retours"
}
},
"modal": {
"accessibility": {
- "close": "Fermer cette fenètre"
+ "button_close": "Fermer cette fenètre"
}
},
"welcome_modal": {
@@ -175,7 +175,6 @@
"ECOGESTURE": {
"FILTER_TITLE": "Tous les ecogestes",
"SECOND_TAB": "Ecogestes adaptés à votre profil",
- "TITLE_ECOGESTURE": "Ecogeste",
"ALL": "Tous les usages",
"HEATING": "Chauffage",
"AIR_CONDITIONING": "Climatisation",
@@ -184,10 +183,6 @@
"ELECTRICITY_SPECIFIC": "Electricité courante",
"COOKING": "Cuisson",
"NO_ECOGESTURE": "Aucun écogeste ne correspond à votre filtre",
- "QUESTION_NEGAWATT": "nWh ?",
- "EFFICIENCY": "Efficacité",
- "SHOW_LESS": "Je veux moins d’infos",
- "SHOW_MORE": "Je veux plus d’infos",
"ADJUST_PROFIL": {
"DESCRIPTION": "Pour une sélection d’écogestes appropriés à votre consommation, vous pouvez ajuster votre profil.",
"BTN_TEXT": "Ajuster mon profil"
@@ -202,6 +197,19 @@
"BUTTONTEXT": "J'ai compris"
}
},
+ "ecogesture_modal": {
+ "title_ecogesture": "Ecogeste",
+ "efficiency": "Efficacité",
+ "show_less": "Je veux moins d’infos",
+ "show_more": "Je veux plus d’infos",
+ "accessibility": {
+ "window_title_ecogesture": "Fenètre ecogeste",
+ "window_action": "Fenètre action",
+ "button_close": "Fermer la fenètre",
+ "button_select_action": "Selectionner cette action",
+ "button_see_more_detail": "Afficher plus de détail"
+ }
+ },
"auth": {
"enedisgrandlyon": {
"connect": {
@@ -254,9 +262,9 @@
},
"password_label": "Mot de passe",
"accessibility": {
- "reveal_password": "Afficher le mot de passe",
- "connect": "Se connecter",
- "create_account" : "Se créer un compte"
+ "button_reveal_password": "Afficher le mot de passe",
+ "button_connect": "Se connecter",
+ "button_create_account" : "Se créer un compte"
}
},
"oauth": {
@@ -287,12 +295,13 @@
"error_empty_description": "Le champ de description est vide.",
"error_sending": "Erreur lors de l'envoi, veuillez essayer ultérieurement.",
"accessibility": {
+ "title": "Fenètre de partage de retours",
"select_type_bug": "Sélectionner le motif bug",
"select_type_idea": "Sélectionner le motif idée",
"select_type_other": "Sélectionner le motif autre",
- "send": "Envoyer le retour",
- "ok": "Valider",
- "close": "Fermer la fenêtre de retours"
+ "button_send": "Envoyer le retour",
+ "button_ok": "Valider",
+ "button_close": "Fermer la fenêtre de partage de retours"
}
},
"modalOldData": {
diff --git a/src/styles/components/_dialog.scss b/src/styles/components/_dialog.scss
index 4654d1cd2..ab7ac5a74 100644
--- a/src/styles/components/_dialog.scss
+++ b/src/styles/components/_dialog.scss
@@ -27,6 +27,9 @@ div.modal-paper{
max-width: 35rem;
margin: 0;
}
+ &.no-padding {
+ padding: 0;
+ }
&.blue-border {
border: 1px solid $blue-40;
}
--
GitLab