From 3158bd1263addb8da108e052b1803ae7c38fe0be Mon Sep 17 00:00:00 2001 From: mama Date: Fri, 24 Nov 2017 12:35:10 +0100 Subject: [PATCH] :art: Nouveau style pour les boutons d'explication MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ils sont en dehors des éléments qu'ils décrivent, donc plus visibles. Suppression de constructStepMeta, inutile. --- source/components/Simulateur.js | 8 +- source/components/conversation/Explicable.css | 31 ++-- source/components/conversation/Explicable.js | 31 ++-- .../components/conversation/FormDecorator.js | 56 +++++-- source/components/conversation/Input.js | 18 +-- source/components/conversation/Question.js | 145 +++++++++++------- source/engine/generateQuestions.js | 31 +--- 7 files changed, 166 insertions(+), 154 deletions(-) diff --git a/source/components/Simulateur.js b/source/components/Simulateur.js index f04c4c75c..709bb3419 100644 --- a/source/components/Simulateur.js +++ b/source/components/Simulateur.js @@ -135,18 +135,18 @@ export default class extends Component { let fieldName = (unfolded && inputInversions && - R.path(step.name.split('.'), inputInversions)) || - step.name + R.path(step.dottedName.split('.'), inputInversions)) || + step.dottedName return ( ) } diff --git a/source/components/conversation/Explicable.css b/source/components/conversation/Explicable.css index b9ba3e2b4..0a0897ed8 100644 --- a/source/components/conversation/Explicable.css +++ b/source/components/conversation/Explicable.css @@ -5,37 +5,28 @@ border-radius: .2em; display: inline-block; margin-left: .8em; - opacity: .5; + padding: .15em; + opacity: .4; border: 1px solid transparent; + border-radius: 1em; cursor: pointer; vertical-align: baseline; - font-size: 85%; -} - -.explicable:hover .icon { - opacity: 1; - border-color: white; -} -.explicable.dark:hover .icon { - border-color: #333350; + font-size: 95%; } .explicable .icon:hover { opacity: 1; - background: white; - color: #4A89DC; } -.explicable.dark .icon:hover { - background: #333350; - color: white; +/* Add explanation text to icon, feels too heavy +.explicable .icon:hover::after { + content: '+ d\'infos'; + margin-left: .2em; + font-size: 90%; + opacity: .3 } - +*/ .explicable.explained .icon { opacity: 1; background: #4A89DC; color: white; } -.explicable.dark.explained .icon { - background: #333350; - color: white; -} diff --git a/source/components/conversation/Explicable.js b/source/components/conversation/Explicable.js index 461cf3a41..e16bac369 100644 --- a/source/components/conversation/Explicable.js +++ b/source/components/conversation/Explicable.js @@ -11,46 +11,35 @@ import ReactPiwik from '../Tracker'; @connect(state => ({explained: state.explainedVariable}), dispatch => ({ explain: variableName => dispatch({type: EXPLAIN_VARIABLE, variableName}) })) -@HoverDecorator export default class Explicable extends React.Component { render(){ let { - dottedName, hover, label, + dottedName, explain, explained, - lightBackground - } = this.props + } = this.props // Rien à expliquer ici, ce n'est pas une règle if (dottedName == null) - return {label} + return this.props.children let rule = findRuleByDottedName(rules, dottedName) - - let ruleLabel = ( - label || rule.title - ).replace(/\s\?$/g, '\u00a0?') // le possible ' ?' final est rendu insécable - - // Rien à expliquer ici, il n'y a pas de champ description dans la règle - if (!rule.description) - return {ruleLabel} + if (rule.description == null) + return this.props.children //TODO montrer les variables de type 'une possibilité' - return ( - {ruleLabel} + className={classNames('explicable', {explained: dottedName === explained})} > + {this.props.children} { - ReactPiwik.push(['trackEvent', 'help', dottedName]); - e.preventDefault(); - e.stopPropagation(); + onClick={() => { + ReactPiwik.push(['trackEvent', 'help', dottedName]) explain(dottedName) }}> - + ) diff --git a/source/components/conversation/FormDecorator.js b/source/components/conversation/FormDecorator.js index 657b287fe..147dbad9d 100644 --- a/source/components/conversation/FormDecorator.js +++ b/source/components/conversation/FormDecorator.js @@ -6,6 +6,8 @@ import { stepAction } from '../../actions' import StepAnswer from './StepAnswer' import { capitalise0 } from '../../utils' import R from 'ramda' +import Explicable from 'Components/conversation/Explicable' + /* This higher order component wraps "Form" components (e.g. Question.js), that represent user inputs, with a header, click actions and more goodies. @@ -28,7 +30,7 @@ export var FormDecorator = formType => RenderField => ) class extends Component { state = { - helpVisible: false, + helpVisible: false } render() { let { @@ -59,7 +61,7 @@ export var FormDecorator = formType => RenderField => inverted, //TODO hack, enables redux-form/CHANGE to update the form state before the traverse functions are run submit: () => setTimeout(() => stepAction('fold', fieldName), 1), - setFormValue: (value, name=fieldName) => setFormValue(name, value) + setFormValue: (value, name = fieldName) => setFormValue(name, value) } /* There won't be any answer zone here, widen the question zone */ @@ -102,18 +104,25 @@ export var FormDecorator = formType => RenderField => < Le titre de ma question > ----------- < (? bulle d'aide) OU résultat > */ renderHeader(unfolded, valueType, human, helpText, wideQuestion) { - let { subquestion } = this.props.step + let { step: { subquestion }, fieldName, inversion } = this.props return ( {unfolded - ? this.renderQuestion(unfolded, helpText, wideQuestion, subquestion) + ? this.renderQuestion( + unfolded, + helpText, + wideQuestion, + subquestion, + fieldName, + inversion + ) : this.renderTitleAndAnswer(valueType, human)} ) } - renderQuestion = (unfolded, helpText, wideQuestion, subquestion) => ( -
+ renderQuestion(unfolded, helpText, wideQuestion, subquestion, fieldName, inversion) { + let question = (

RenderField => {R.path(['props', 'step', 'inversion', 'question'])(this) || this.props.step.question}

-
-
- ) + ) + return ( +
+ {inversion ? ( + question + ) : ( + {question} + )} +
+
+ ) + } renderTitleAndAnswer(valueType, human) { - let { step, stepAction, situationGate, themeColours, step: { title }, fieldName } = this.props + let { + step, + stepAction, + situationGate, + themeColours, + step: { title }, + fieldName + } = this.props let inversionTitle = R.path(['props', 'step', 'inversion', 'title'])(this) - let answer = situationGate(fieldName) return (
- {capitalise0(inversionTitle || title)} + + {capitalise0(inversionTitle || title)} + {answer}