From 562be40a2af196793b52ca040eb373c99bbffdd5 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 13 Sep 2023 09:27:31 +0000
Subject: [PATCH] feat(ecogestures): animate ecogesture details
---
.../EcogestureModal/EcogestureModal.tsx | 26 +++++++------------
.../EcogestureModal/ecogestureModal.scss | 6 +----
.../Ecogesture/SingleEcogestureView.tsx | 8 +++---
3 files changed, 15 insertions(+), 25 deletions(-)
diff --git a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
index 1a01d8272..7fa5418c0 100644
--- a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
@@ -1,9 +1,9 @@
+import { Collapse } from '@material-ui/core'
import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import IconButton from '@material-ui/core/IconButton'
import CloseIcon from 'assets/icons/ico/close.svg'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
-import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useExploration from 'components/Hooks/useExploration'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -34,12 +34,10 @@ const EcogestureModal = ({
const { t } = useI18n()
const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
const [ecogestureIcon, setEcogestureIcon] = useState('')
- const [isMoreDetail, setIsMoreDetail] = useState(false)
+ const [showDetails, setShowDetails] = useState(false)
const [, setValidExploration] = useExploration()
- const toggleMoreDetail = () => {
- setIsMoreDetail(prev => !prev)
- }
+
useEffect(() => {
async function handleEcogestureIcon() {
const icon = await importIconById(ecogesture.id, 'ecogesture')
@@ -124,26 +122,22 @@ const EcogestureModal = ({
</Button>
) : (
<>
- <div
- className={classNames('em-description text-16-normal-150', {
- ['block']: isMoreDetail === true,
- })}
- >
- {ecogesture.longDescription}
- </div>
+ <Collapse in={showDetails}>
+ <div className="em-description text-16-normal-150">
+ {ecogesture.longDescription}
+ </div>
+ </Collapse>
<Button
aria-label={t(
'ecogesture_modal.accessibility.button_see_more_detail'
)}
- onClick={toggleMoreDetail}
+ onClick={() => setShowDetails(prev => !prev)}
classes={{
root: 'btn-secondary-negative',
label: 'text-14-normal',
}}
>
- {isMoreDetail
- ? t('ecogesture_modal.show_less')
- : t('ecogesture_modal.show_more')}
+ {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
</Button>
</>
)}
diff --git a/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss b/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss
index 1e95283c9..1be2ce155 100644
--- a/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss
+++ b/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss
@@ -84,11 +84,7 @@
text-align: center;
margin: 1.5rem 0 1rem;
}
- .em-description {
- display: none;
- margin: 0.5rem;
- text-align: left;
- }
+
button.btn-action-launch {
background: $blue-radial-gradient;
border: none;
diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx
index dbc9023cf..6db69d518 100644
--- a/src/components/Ecogesture/SingleEcogestureView.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.tsx
@@ -29,7 +29,7 @@ const SingleEcogestureView = () => {
const client = useClient()
const [ecogesture, setEcogesture] = useState<Ecogesture>()
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
- const [isMoreDetail, setIsMoreDetail] = useState<boolean>(false)
+ const [showDetails, setShowDetails] = useState<boolean>(false)
const [isDoing, setIsDoing] = useState<boolean>(false)
const [isObjective, setIsObjective] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState<boolean>(true)
@@ -152,13 +152,13 @@ const SingleEcogestureView = () => {
</div>
<div
className="showMore text-15-normal"
- onClick={() => setIsMoreDetail(prev => !prev)}
+ onClick={() => setShowDetails(prev => !prev)}
role="button"
>
- {t(`ecogesture_modal.show_${isMoreDetail ? 'less' : 'more'}`)}
+ {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
</div>
- <Collapse in={isMoreDetail}>
+ <Collapse in={showDetails}>
<div className="longDescription text-16-normal-150">
{ecogesture.longDescription}
</div>
--
GitLab