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