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

Merge branch '520-astuces-probleme-de-chargement' into 'dev' 

fix(ecogesture): display loader correctly

See merge request !958
parents 09589fc9 5d6f7f32
No related branches found
No related tags found
2 merge requests!9702.6 Release,!958fix(ecogesture): display loader correctly
Hide whitespace changes
Inline Side-by-side
src/components/Ecogesture/SingleEcogesture.tsx
+ 99
− 106
View file @ 20b5a3dc
...@@ -115,118 +115,111 @@ const SingleEcogesture = () => { ...@@ -115,118 +115,111 @@ const SingleEcogesture = () => {
setValidExploration, setValidExploration,
]) ])
if (ecogesture) { return (
return ( <>
<> <CozyBar titleKey={'common.title_ecogesture'} displayBackArrow={true} />
<CozyBar titleKey={'common.title_ecogesture'} displayBackArrow={true} /> <Header
<Header setHeaderHeight={setHeaderHeight}
setHeaderHeight={setHeaderHeight} desktopTitleKey={'common.title_ecogesture'}
desktopTitleKey={'common.title_ecogesture'} displayBackArrow={true}
displayBackArrow={true} />
/> <Content heightOffset={headerHeight}>
<Content heightOffset={headerHeight}> {isLoading && (
{isLoading && ( <div className="loaderContainer">
<div className="loaderContainer"> <Loader />
<Loader /> </div>
)}
{!isLoading && !ecogesture && (
<ErrorPage
text={t('error_page.no_ecogesture')}
returnPage={'ecogestures'}
/>
)}
{!isLoading && ecogesture && (
<div className="single-ecogesture">
<div className="icon-container">
{ecogestureIcon && (
<StyledIcon
className="icon-big"
icon={ecogestureIcon}
size={220}
/>
)}
</div> </div>
)} <div className="details">
{!isLoading && ( <div className="text-22 title">{ecogesture.shortName}</div>
<div className="single-ecogesture"> <div className="efficiency">
<div className="icon-container"> <span className="text text-14-normal">
{ecogestureIcon && ( {t('ecogesture_modal.efficiency')}
<StyledIcon </span>
className="icon-big" <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
icon={ecogestureIcon}
size={220}
/>
)}
</div> </div>
<div className="details"> </div>
<div className="text-22 title">{ecogesture.shortName}</div> <div className="styled-container">
<div className="efficiency"> <div className="long-name text-18-bold">
<span className="text text-14-normal"> {ecogesture.longName}
{t('ecogesture_modal.efficiency')} </div>
</span> <div
<EfficiencyRating className="toggle-text text-15-normal"
result={Math.round(ecogesture.efficiency)} onClick={toggleMoreDetail}
/> role="button"
</div> >
{isMoreDetail
? t('ecogesture_modal.show_less')
: t('ecogesture_modal.show_more')}
</div> </div>
<div className="styled-container"> <div
<div className="long-name text-18-bold"> className={classNames('description text-16-normal-150', {
{ecogesture.longName} ['block']: isMoreDetail === true,
</div> })}
<div >
className="toggle-text text-15-normal" {ecogesture.longDescription}
onClick={toggleMoreDetail} </div>
role="button" </div>
{selectionCompleted && (
<div className="buttons-selection">
<IconButton
aria-label={t('ecogesture.objective')}
onClick={toggleObjective}
classes={{
root: `btn-secondary-negative objective-btn ${
isObjective && 'active'
}`,
label: 'text-15-normal',
}}
> >
{isMoreDetail <Icon
? t('ecogesture_modal.show_less') className="status-icon"
: t('ecogesture_modal.show_more')} icon={
</div> isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
<div }
className={classNames('description text-16-normal-150', { size={40}
['block']: isMoreDetail === true, />
})} <span>{t('ecogesture.objective')}</span>
</IconButton>
<IconButton
aria-label={t('ecogesture.doing')}
onClick={toggleDoing}
classes={{
root: `btn-secondary-negative doing-btn ${
isDoing && 'active'
}`,
label: 'text-15-normal',
}}
> >
{ecogesture.longDescription} <Icon
</div> className="status-icon"
icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
size={40}
/>
<span>{t('ecogesture.doing')}</span>
</IconButton>
</div> </div>
{selectionCompleted && ( )}
<div className="buttons-selection"> </div>
<IconButton )}
aria-label={t('ecogesture.objective')} </Content>
onClick={toggleObjective} </>
classes={{
root: `btn-secondary-negative objective-btn ${
isObjective && 'active'
}`,
label: 'text-15-normal',
}}
>
<Icon
className="status-icon"
icon={
isObjective
? objectiveEnabledIcon
: objectiveDisabledIcon
}
size={40}
/>
<span>{t('ecogesture.objective')}</span>
</IconButton>
<IconButton
aria-label={t('ecogesture.doing')}
onClick={toggleDoing}
classes={{
root: `btn-secondary-negative doing-btn ${
isDoing && 'active'
}`,
label: 'text-15-normal',
}}
>
<Icon
className="status-icon"
icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
size={40}
/>
<span>{t('ecogesture.doing')}</span>
</IconButton>
</div>
)}
</div>
)}
</Content>
</>
)
}
return (
<ErrorPage
text={t('error_page.no_ecogesture')}
returnPage={'ecogestures'}
/>
) )
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment