Délai d'apparition du contrôle

Pour ne pas qu'il occulte l'apparition des options de simulation et
l'explication de la distribution
pull/385/head
Mael 2018-09-12 17:33:27 +02:00
parent ca747a622f
commit f0baa1caa1
2 changed files with 42 additions and 44 deletions

View File

@ -16,7 +16,7 @@
font-size: 90%;
}
p#controlExplanation {
#controlExplanation {
margin: 0.3em 0 0.6em;
display: flex;
justify-content: center;

View File

@ -7,54 +7,52 @@ import { animated, Spring } from 'react-spring'
import { makeJsx } from 'Engine/evaluation'
function Controls({ blockingInputControls, controls, startConversation }) {
let control = !blockingInputControls && controls?.[0]
return (
<div id="controlsBlock">
{blockingInputControls && (
<p className="blockingControl">{blockingInputControls[0].message}</p>
)}
{!blockingInputControls && (
<Spring
to={{
height: controls?.length ? 'auto' : 0,
opacity: controls?.length ? 1 : 0
}}
native>
{styles =>
controls?.length ? (
<animated.div id="control" style={styles}>
<div id="controlContent">
{do {
let { level, solution, evaluated } = controls[0]
;<>
<h3
style={{
borderBottomColor:
level === 'avertissement' ? '#e67e22' : '#34495e'
}}>
{level === 'avertissement'
? 'Attention'
: 'Information'}
</h3>
<p id="controlExplanation">{makeJsx(evaluated)}</p>
{solution && (
<div id="solution">
{emoji('💡')}
<button
key={solution.cible}
className="ui__ link-button"
onClick={() => startConversation(solution.cible)}>
{solution.texte}
</button>
</div>
)}
</>
}}
</div>
</animated.div>
) : null
}
</Spring>
)}
<Spring
to={{
height: control ? 'auto' : 0,
opacity: control ? 1 : 0
}}
delay={2000}
native>
{styles =>
!control ? null : (
<animated.div id="control" style={styles}>
<div id="controlContent">
{do {
let { level, solution, evaluated } = control
;<>
<h3
style={{
borderBottomColor:
level === 'avertissement' ? '#e67e22' : '#34495e'
}}>
{level === 'avertissement' ? 'Attention' : 'Information'}
</h3>
<div id="controlExplanation">{makeJsx(evaluated)}</div>
{solution && (
<div id="solution">
{emoji('💡')}
<button
key={solution.cible}
className="ui__ link-button"
onClick={() => startConversation(solution.cible)}>
{solution.texte}
</button>
</div>
)}
</>
}}
</div>
</animated.div>
)
}
</Spring>
</div>
)
}