From adaa05b1ae4887cae6c6e738cfbbd97af8e0081d Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Wed, 14 Mar 2018 18:20:09 +0100
Subject: [PATCH] Tentative de :art

---
 source/components/TargetSelection.css | 69 ++++++++++++++++-----------
 source/components/TargetSelection.js  | 59 +++++++++++++----------
 source/règles/base.yaml               |  2 +-
 3 files changed, 75 insertions(+), 55 deletions(-)

diff --git a/source/components/TargetSelection.css b/source/components/TargetSelection.css
index 6278c9d03..b3eabaa00 100644
--- a/source/components/TargetSelection.css
+++ b/source/components/TargetSelection.css
@@ -1,28 +1,41 @@
-#targetSelection {
+#targetsContainer {
 	max-width: 860px;
+	width: 35em;
 
-	padding: 0.3em 2em;
+	padding: 0.2em .5em;
 
 	border-radius: 0.6em;
+	font-size: 85%;
+	box-shadow: 0px 0px 13px 3px rgba(0, 0, 0, 0.25)
 }
 
-#targetSelection > div {
+#targetsContainer > div {
 	width: 100%;
 }
 
 #targetSelection h1 {
 	margin: 0.3em;
 	color: inherit;
+	text-align: center;
 }
 #targetSelection #targets {
-	margin: 1em auto;
+	margin: .3em auto;
 	/* For the checkbox that will appear */
-	padding: 0 2em;
+	padding: 0;
 }
 #targetSelection #targets > div {
-	margin-bottom: 2em;
+	margin-bottom: .4em;
+	background: rgba(0, 0, 0, 0.2);
+
+    padding: .6em 1em;
+    border-radius: .3em;
 }
 
+#targetSelection #targets > div p {
+	margin: 0;
+	opacity: .75
+	}
+
 #targetSelection .main {
 	display: flex;
 	justify-content: space-between;
@@ -34,18 +47,15 @@
 }
 #targetSelection label i {
 	font-size: 170%;
-
-	margin-left: -1.6em;
+	font-width: 600;
+	color: #4b4b66;
+	margin-left: -2em;
 }
 
 #targetSelection .optionTitle {
-	font-size: 120%;
+	font-size: 130%;
 	margin-left: 1em;
-}
-#targetSelection p {
-	margin: 0;
-	font-weight: 400;
-	font-size: 90%;
+	font-weight: 600;
 }
 
 #targetSelection input[type='checkbox'] {
@@ -64,40 +74,43 @@
 }
 
 #targetSelection #action p {
-	font-size: 80%;
-	border-bottom: #4b4b66 solid 2px;
 	color: #4b4b66;
+	margin-bottom: 1em;
+}
+
+#targetSelection .targetInputOrValue
+{
+	font-size: 120%;
+	text-align: right;
 }
 
 #targetSelection .targetValue {
-	display: inline-block;
-	border: 1px solid #ccc;
-}
+border-bottom: 1px dashed #ffffff91}
 
-#targetSelection .targetValue,
+#targetSelection .targetValue.attractClick,
 #targetSelection input[type='text'] {
-	width: 4.5em !important;
+	width: 5em !important;
 	display: inline-block;
 	height: 1.4em;
+	text-align: right;
+	font-weight: 600;
 	padding: 0;
-	font-size: 120%;
 	padding: 0em 0.3em;
 	background: white;
 	border-radius: 0.1em;
 	border: none;
 	color: #4b4b66;
-	text-align: right;
+	font-size: inherit
 }
 
 #targetSelection input[type='text'] {
-	border: 3px solid #4b4b66;
 }
 
-#targetSelection .fa-calculator {
+#targetSelection .valueTypeIcon {
+		display: none;
 	margin: 0 0.4em;
-	font-size: 90%;
-
-	opacity: 0.85;
+	font-size: 80%;
+	opacity: 0.5;
 }
 
 /* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */
diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js
index 3115f41a0..f908a953e 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@@ -21,6 +21,7 @@ import BlueButton from './BlueButton'
 import { Field, reduxForm, formValueSelector } from 'redux-form'
 import { connect } from 'react-redux'
 import { RuleValue } from './rule/RuleValueVignette'
+import classNames from 'classnames'
 
 export let salaries = ['salaire net', 'salaire de base', 'salaire total']
 export let popularTargetNames = [...salaries, 'aides employeur']
@@ -48,10 +49,13 @@ export default class TargetSelection extends Component {
 	}
 
 	render() {
+		let firstEstimationComplete =
+			this.state.activeInput && this.props.targets.length > 0
 		return (
-			<>
+			<div id="targetSelection">
+				{!firstEstimationComplete && <h1>Entrez un salaire mensuel</h1>}
 				<section
-					id="targetSelection"
+					id="targetsContainer"
 					style={{
 						background: this.props.colours.colour,
 						color: this.props.colours.textColour
@@ -60,9 +64,7 @@ export default class TargetSelection extends Component {
 					{this.renderOutputList()}
 				</section>
 
-				{!this.state.activeInput || !this.props.targets.length ? (
-					<h1>Entrez un salaire mensuel</h1>
-				) : (
+				{firstEstimationComplete && (
 					<div id="action">
 						{this.props.selectingTargets ? (
 							!this.props.conversationVisible && (
@@ -82,7 +84,7 @@ export default class TargetSelection extends Component {
 						)}
 					</div>
 				)}
-			</>
+			</div>
 		)
 	}
 
@@ -158,21 +160,27 @@ export default class TargetSelection extends Component {
 								<span className="targetInputOrValue">
 									{s.name.includes('salaire') &&
 									this.state.activeInput === s.dottedName ? (
-										<Field
-											name={s.dottedName}
-											component="input"
-											type="text"
-											placeholder="mon salaire"
-											autoFocus
-										/>
+										<>
+											<Field
+												name={s.dottedName}
+												component="input"
+												type="text"
+												placeholder="mon salaire"
+												autoFocus
+											/>
+											{this.props.targets.length > 0 && (
+												<i
+													className="fa fa-pencil-o valueTypeIcon"
+													aria-hidden="true"
+												/>
+											)}
+										</>
 									) : (
 										<>
-											{this.state.activeInput && (
-												<i className="fa fa-calculator" aria-hidden="true" />
-											)}
 											<span
-												className="targetValue"
-												style={{ width: '6em' }}
+												className={classNames('targetValue', {
+													attractClick: this.props.targets.length === 0
+												})}
 												onClick={() => {
 													//													this.props.setConversationTargets(
 													//														reject(equals(s.name), popularTargetNames)
@@ -188,19 +196,18 @@ export default class TargetSelection extends Component {
 														value = rule && rule.nodeValue
 													;<RuleValue value={value} />
 												}}
+												{this.props.targets.length > 0 && (
+													<i
+														className="fa fa-calculator valueTypeIcon"
+														aria-hidden="true"
+													/>
+												)}
 											</span>
 										</>
 									)}
 								</span>
 							</div>
-							<p
-								style={
-									optionIsChecked(s)
-										? { color: textColourOnWhite }
-										: { color: '#4b4b66' }
-								}>
-								{s['résumé']}
-							</p>
+							<p>{s['résumé']}</p>
 						</div>
 					))}
 				</div>
diff --git a/source/règles/base.yaml b/source/règles/base.yaml
index 5fb897621..7523b3bfa 100644
--- a/source/règles/base.yaml
+++ b/source/règles/base.yaml
@@ -671,7 +671,7 @@
 - espace: contrat salarié
   nom: salaire de base
   titre: Salaire de base
-  résumé: Salaire brut régulier inscrit dans le contrat de travail.
+  résumé: Brut régulier inscrit dans le contrat de travail.
   type: salaire
   question: Quel est le salaire de base mensuel ?
   description: |