From 0f56dcb370ec64b11477b8c0107ebe2344422843 Mon Sep 17 00:00:00 2001
From: Mael Thomas <mael.thomas@data.gouv.fr>
Date: Thu, 9 Feb 2017 18:38:51 +0100
Subject: [PATCH] =?UTF-8?q?[cdd]=20possibilit=C3=A9=20de=20fermer=20l'aide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/Aide.css                    | 37 +++++++++++++++++++
 source/components/Aide.js                     | 15 ++++++--
 source/components/CDD.css                     | 19 ----------
 source/components/conversation/Explicable.css |  2 +-
 source/reducers.js                            |  9 +++--
 5 files changed, 56 insertions(+), 26 deletions(-)
 create mode 100644 source/components/Aide.css

diff --git a/source/components/Aide.css b/source/components/Aide.css
new file mode 100644
index 000000000..44fb93f62
--- /dev/null
+++ b/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;
+}
diff --git a/source/components/Aide.js b/source/components/Aide.js
index 94eaab1f2..1cf759a85 100644
--- a/source/components/Aide.js
+++ b/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>
diff --git a/source/components/CDD.css b/source/components/CDD.css
index 5b23a72f1..302cba7d1 100644
--- a/source/components/CDD.css
+++ b/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 {
 }
diff --git a/source/components/conversation/Explicable.css b/source/components/conversation/Explicable.css
index e8cf7bfd6..5c14cdcd2 100644
--- a/source/components/conversation/Explicable.css
+++ b/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;
 }
 
diff --git a/source/reducers.js b/source/reducers.js
index 1f7b0d95d..730333914 100644
--- a/source/reducers.js
+++ b/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(