[cdd] possibilité de fermer l'aide

source/components/Aide.css

@@ -0,0 +1,37 @@
+
+#sim #help {
+	box-shadow: -1px 1px 15px 1px #eee;
+	border: 1px solid;
+	border-radius: 2px;
+	border-color: #ccc;
+	font-style: italic;
+	margin: 3em;
+  padding: 1em;
+	min-width: 30%;
+	color: #444;
+	transition: opacity .4s;
+	opacity: 0;
+  position: relative;
+}
+
+#sim #help.active {
+	opacity: 1
+}
+
+#sim #help i.fa-info-circle {
+  margin-right: .3em;
+  float: left;
+  top: .05em;
+  right: .1em;
+  font-size: 300%;
+  color: #333350;
+}
+
+#sim #help i.fa-times-circle {
+  color: #4a89dc;
+  font-size: 120%;
+  position: absolute;
+  top: .6em;
+  right: .6em;
+  cursor: pointer;
+}

source/components/Aide.js

@@ -1,15 +1,20 @@
 import React, {Component} from 'react'
 import {connect} from 'react-redux'
 import {findRuleByName} from '../engine/rules'
-
+import './Aide.css'
+import {EXPLAIN_VARIABLE} from '../actions'
 
 @connect(
 	state =>
-		({explained: state.explainedVariable})
+		({explained: state.explainedVariable}),
+	dispatch => ({
+		stopExplaining: () => dispatch(
+			{type: EXPLAIN_VARIABLE})
+	})
 )
 export default class Aide extends Component {
 	render() {
-		let {explained} = this.props
+		let {explained, stopExplaining} = this.props
 
 		if (!explained) return <section id="help" />
 
@@ -20,6 +25,10 @@ export default class Aide extends Component {
 
 		return (
 			<section id="help" className="active">
+				<i className="fa fa-info-circle"></i>
+				<i
+					className="fa fa-times-circle"
+					onClick={stopExplaining} ></i>
 				<p>
 					{text}
 				</p>

source/components/CDD.css

@@ -34,25 +34,6 @@
 	transition: width 1s;
 }
 
-#sim #help {
-	box-shadow: -1px 1px 15px 1px #eee;
-	border: 1px solid;
-	border-radius: 2px;
-	border-color: #ccc;
-	font-style: italic;
-	margin: 3em;
-	padding-left: 3em;
-	min-width: 30%;
-	color: #444;
-	transition: opacity .4s;
-	opacity: 0;
-}
-
-#sim #help.active {
-	opacity: 1
-}
-
-
 
 .dependency-of {
 }

source/components/conversation/Explicable.css

@@ -5,7 +5,7 @@
   border-radius: .2em;
   display: inline-block;
   margin-left: .8em;
-  opacity: .3;
+  opacity: .4;
   border: 1px solid transparent;
 }
 

source/reducers.js

@@ -35,10 +35,13 @@ function themeColours(state = computeThemeColours(), {type, colour}) {
 let situationGate = state =>
 	name => formValueSelector('conversation')(state, name)
 
-function explainedVariable(state = null, {type, variableName}) {
-	if (type == EXPLAIN_VARIABLE)
+function explainedVariable(state = null, {type, variableName=null}) {
+	switch (type) {
+	case EXPLAIN_VARIABLE:
 		return variableName
-	else return state
+	default:
+		return state
+	}
 }
 
 export default reduceReducers(