Commit 8660adc6 authored by Guilhem CARRON's avatar Guilhem CARRON
Browse files

feat(conso): Display timestep names in timeStepSelector except for very small screens

parent 758b9fb5
...@@ -33,7 +33,7 @@ import Icon from 'cozy-ui/transpiled/react/Icon' ...@@ -33,7 +33,7 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
import ExpansionPanel from '@material-ui/core/ExpansionPanel' import ExpansionPanel from '@material-ui/core/ExpansionPanel'
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary' import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails' import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
import failurePicto from 'assets/png/picto/picto-failure.png' import ErrorNotif from 'assets/icons/ico/notif_error.svg'
import ConnectionNotFound from 'components/Connection/ConnectionNotFound' import ConnectionNotFound from 'components/Connection/ConnectionNotFound'
import ConnectionForm from 'components/Connection/ConnectionForm' import ConnectionForm from 'components/Connection/ConnectionForm'
import ConnectionResult from 'components/Connection/ConnectionResult' import ConnectionResult from 'components/Connection/ConnectionResult'
...@@ -49,6 +49,7 @@ import { ...@@ -49,6 +49,7 @@ import {
import { DateTime } from 'luxon' import { DateTime } from 'luxon'
import { setSelectedDate } from 'store/chart/chart.actions' import { setSelectedDate } from 'store/chart/chart.actions'
import DateChartService from 'services/dateChart.service' import DateChartService from 'services/dateChart.service'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
interface KonnectorViewerCardProps { interface KonnectorViewerCardProps {
fluidStatus: FluidStatus fluidStatus: FluidStatus
...@@ -313,12 +314,12 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({ ...@@ -313,12 +314,12 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
) : ( ) : (
<Icon icon={iconAddType} size={49} /> <Icon icon={iconAddType} size={49} />
)} )}
{fluidStatus.status === FluidState.ERROR ? ( {fluidStatus.status === FluidState.ERROR || isOutdatedData ? (
<img <StyledIcon
icon={ErrorNotif}
size={24}
className="konnector-state-picto" className="konnector-state-picto"
src={failurePicto} />
alt={t('konnector_options.accessibility.label_ko_status')}
></img>
) : null} ) : null}
</div> </div>
<div <div
......
...@@ -76,7 +76,6 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({ ...@@ -76,7 +76,6 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
dispatch(setCurrentTimeStep(targetTimestep)) dispatch(setCurrentTimeStep(targetTimestep))
dispatch(setCurrentIndex(index)) dispatch(setCurrentIndex(index))
} }
return ( return (
<div className={'timestep-selector'}> <div className={'timestep-selector'}>
<Button <Button
...@@ -89,7 +88,10 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({ ...@@ -89,7 +88,10 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
{t('timestep.today')} {t('timestep.today')}
</Button> </Button>
<div className={'timestep-container'}> <div className={'timestep-container'}>
<ul className={'timestep-bar'}> <ul
className={`timestep-bar ${fluidType === FluidType.ELECTRICITY &&
'elec-bar'}`}
>
{timeStepArray.map((step, key) => { {timeStepArray.map((step, key) => {
return ( return (
<React.Fragment key={key}> <React.Fragment key={key}>
......
...@@ -25,12 +25,15 @@ ...@@ -25,12 +25,15 @@
width: 100%; width: 100%;
} }
.timestep-bar { .timestep-bar {
margin: 0 2.344rem; margin: 0 1rem 0 1.7rem;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
height: 3rem; height: 3rem;
&.elec-bar {
margin-left: 1rem;
}
.circle { .circle {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -53,14 +56,17 @@ ...@@ -53,14 +56,17 @@
} }
} }
.text { .text {
opacity: 0;
position: relative; position: relative;
display: block; display: block;
top: 15px; top: 15px;
left: -20px; left: -20px;
text-align: center; text-align: center;
color: $grey-bright; color: $grey-dark;
width: 50px; width: 50px;
overflow: visible;
@media only screen and (max-width: 355px) {
opacity: 0;
}
} }
.bar { .bar {
width: 100%; width: 100%;
...@@ -81,7 +87,8 @@ ...@@ -81,7 +87,8 @@
height: 10px; height: 10px;
.text { .text {
opacity: 1; opacity: 1;
overflow: visible; top: 16px;
color: white;
transition: 300ms ease; transition: 300ms ease;
} }
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment