From 2976d0fafed496ba7e6ac735bda99217299338fd Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Mon, 23 Jul 2018 16:26:11 +0200 Subject: [PATCH] =?UTF-8?q?Fait=20en=20sorte=20que=20les=20liens=20rapides?= =?UTF-8?q?=20au=20dessus=20de=20la=20simulation=20am=C3=A8nent=20directem?= =?UTF-8?q?ent=20=C3=A0=20la=20question=20concern=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/actions/actions.js | 10 +++- source/components/QuickLink.js | 40 ++++++++++++++++ source/components/Simu.js | 44 ++++------------- source/components/rule/Algorithm.css | 19 +++----- source/components/rule/Rule.css | 1 - source/components/ui/Typography.css | 8 +--- source/components/ui/index.css | 11 +++-- source/engine/mecanismViews/Somme.css | 48 ------------------- source/reducers/rootReducer.js | 32 +++++++++---- source/selectors/analyseSelectors.js | 4 +- source/sites/mycompanyinfrance.fr/App.js | 4 +- source/sites/mycompanyinfrance.fr/entry.js | 42 ---------------- .../pages/Header/StepsHeader.css | 2 +- source/types/ActionsTypes.js | 12 ++++- 14 files changed, 113 insertions(+), 164 deletions(-) create mode 100644 source/components/QuickLink.js diff --git a/source/actions/actions.js b/source/actions/actions.js index f2f28a058..5bf3178f3 100644 --- a/source/actions/actions.js +++ b/source/actions/actions.js @@ -2,7 +2,8 @@ import type { ResetSimulationAction, LoadPreviousSimulationAction, - DeletePreviousSimulationAction + DeletePreviousSimulationAction, + StartConversationAction } from 'Types/ActionsTypes' export function resetSimulation(): ResetSimulationAction { @@ -17,6 +18,13 @@ export function deletePreviousSimulation(): DeletePreviousSimulationAction { } } +export function startConversation(question: ?string): StartConversationAction { + return { + type: 'START_CONVERSATION', + ...(question ? { question } : {}) + } +} + // $FlowFixMe export function setExample(name, situation, dottedName) { return { type: 'SET_EXAMPLE', name, situation, dottedName } diff --git a/source/components/QuickLink.js b/source/components/QuickLink.js new file mode 100644 index 000000000..2240ffc64 --- /dev/null +++ b/source/components/QuickLink.js @@ -0,0 +1,40 @@ +/* @flow */ +import { startConversation } from 'Actions/actions' +import React from 'react' +import { connect } from 'react-redux' +type Props = { + startConversation: (?string) => void +} +const QuickLink = ({ startConversation }: Props) => ( + <> + + + + + + +) +export default connect( + null, + { + startConversation + } +)(QuickLink) diff --git a/source/components/Simu.js b/source/components/Simu.js index 6afb9116a..f97cfbdbc 100644 --- a/source/components/Simu.js +++ b/source/components/Simu.js @@ -13,6 +13,7 @@ import * as Animate from 'Ui/animate' import Conversation from './conversation/Conversation' import Distribution from './Distribution' import PaySlip from './PaySlip' +import QuickLink from './QuickLink' import './Simu.css' import TargetSelection from './TargetSelection' @@ -25,7 +26,7 @@ import TargetSelection from './TargetSelection' nextSteps: state.conversationStarted && nextStepsSelector(state) }), { - onSimulationContinued: () => ({ type: 'START_CONVERSATION' }) + startConversation: () => ({ type: 'START_CONVERSATION' }) } ) export default class Simu extends Component { @@ -35,7 +36,7 @@ export default class Simu extends Component { conversationStarted, noUserInput, nextSteps, - onSimulationContinued, + startConversation, blockingInputControls } = this.props const firstValidInputEntered = @@ -64,50 +65,23 @@ export default class Simu extends Component { fontSize: '110%', justifyContent: 'space-evenly' }}> - - - - - + )} {conversationStarted && !nextSteps.length && ( <> -

- Plus de questions restantes! -

+

No more questions left!

- Vous avez atteint l'estimation la plus précise. Vous - pouvez maintenant concrétiser votre projet, et apprendre les - démarches à suivre pour + You have reached the most accurate estimate. You can now + turn your hiring project into reality.

- Connaître les démarches + See the procedures
@@ -148,7 +122,7 @@ export default class Simu extends Component { hiring costs.

-

diff --git a/source/components/rule/Algorithm.css b/source/components/rule/Algorithm.css index 6ffed0288..c11fb40e9 100644 --- a/source/components/rule/Algorithm.css +++ b/source/components/rule/Algorithm.css @@ -4,6 +4,7 @@ .situationValue { display: none; + font-size: 110%; border-bottom-left-radius: 3px; font-weight: 400; color: black; @@ -31,7 +32,6 @@ #rule-rules .inlineExpression:not(.comparison):not(.negation) > .situationValue { - font-size: 90%; margin-left: 0.3em; margin-bottom: 0.6em; margin-top: 0.3em; @@ -44,9 +44,6 @@ margin: 1em 0; } -#rule-content { - font-size: 90%; -} #rule-rules #ruleValue { font-weight: 400; @@ -76,7 +73,7 @@ display: block; background: #34495e; color: white !important; - font-weight: 600; + font-weight: 500; border-bottom-right-radius: 3px; } .mecanism > .nodeHead .name::first-letter { @@ -86,7 +83,7 @@ bottom: 0; right: 0; position: absolute; - padding: 0.2em 1em; + padding: 0.2rem 1rem; border: 1px solid; border-color: inherit; font-weight: 600; @@ -109,7 +106,6 @@ } .mecanism .properties .key { - font-weight: 600; display: inline-block; margin-bottom: 0.6em; margin-right: 0.8em; @@ -131,7 +127,7 @@ .maximum .description, .composanteName { - font-weight: 600; + font-weight: 500; margin-bottom: 0.4em; margin-left: 1em; } @@ -165,8 +161,7 @@ .percentage .name { - font-size: 110%; - font-weight: 600; + font-weight: 500; } .inlineExpression .operator { @@ -199,7 +194,7 @@ padding: 0.1em 0.4em; } .barème table tr:first-child { - font-weight: 600; + font-weight: 500; } .barème table tr:nth-child(2n) { background: #f1f1f1; @@ -301,7 +296,6 @@ .inlineExpression.comparison > .situationValue, .inlineExpression.negation > .situationValue { order: -1; - font-size: 110% !important; } .mecanism.cond *:not(.nodeContent) > .variable .name > .situationValue, @@ -314,6 +308,5 @@ > .situationValue { margin-bottom: -5px; background-color: white; - font-size: 130% !important; margin-left: 0 !important; } diff --git a/source/components/rule/Rule.css b/source/components/rule/Rule.css index ff9155977..9bb683bd8 100644 --- a/source/components/rule/Rule.css +++ b/source/components/rule/Rule.css @@ -1,5 +1,4 @@ #rule { - font-size: 110%; height: 100%; padding-bottom: 10%; max-width: 45em; diff --git a/source/components/ui/Typography.css b/source/components/ui/Typography.css index c9779b409..041f2c412 100644 --- a/source/components/ui/Typography.css +++ b/source/components/ui/Typography.css @@ -42,6 +42,7 @@ h5, h6 { font-family: 'IBM Plex Sans', sans-serif; font-weight: normal; + line-height: initial; } h1, @@ -54,15 +55,10 @@ button { font-weight: normal; } -p, -ul { +body { line-height: 1.7rem; } -li { - margin-bottom: 1rem; -} - a { border: none; display: inline-block; diff --git a/source/components/ui/index.css b/source/components/ui/index.css index 3e8342785..8cda9b4d1 100644 --- a/source/components/ui/index.css +++ b/source/components/ui/index.css @@ -5,10 +5,10 @@ body { overflow-x: hidden; } -.ui__.container { - max-width: 800px; - margin: 0 auto; - padding: 1rem; + +button { + border: none; + border-radius: 0; } .ui__.answer-group { @@ -27,7 +27,8 @@ body { .ui__.container { max-width: 45em; - margin: 0 auto; + margin-right: auto; + margin-left: auto; padding: 0 0.6em; } diff --git a/source/engine/mecanismViews/Somme.css b/source/engine/mecanismViews/Somme.css index e17aee1f2..b2f56f841 100644 --- a/source/engine/mecanismViews/Somme.css +++ b/source/engine/mecanismViews/Somme.css @@ -31,7 +31,6 @@ padding: 0 0.4em; font-weight: 600; border: none !important; - font-size: 120%; color: black; } .somme .operator + .element { @@ -59,56 +58,10 @@ border-bottom: 1px solid rgba(51, 51, 80, 0.15); } -/* Specific to ResultsGrid.css. Somme.js and ResultsGrid.js should be merged */ -.resultsGrid table { - font-size: 90%; -} -.resultsGrid table a { - color: inherit; -} -.resultsGrid td { - line-height: 1.6em; - border: 1px solid #e3e3ee; -} -.resultsGrid .operator { - border-right-color: transparent; - margin-right: 0.4em; -} -.resultsGrid .element.category { - font-weight: 600; - font-size: 100%; -} -.resultsGrid .detailsRow .name { - padding-left: 1.2em; -} -.resultsGrid .detailsRow .name:hover { - color: #111; - text-decoration: underline; -} - -.resultsGrid .name { - font-size: 90%; -} -.resultsGrid .value { - font-weight: 700; - color: #031bd6; -} #sommeBase { text-align: center; } -.resultsGrid .annotation { - color: #333350; - border: 1px solid #333350; - background: #031bd61a; - font-weight: 600; - font-size: 95%; - padding: 0 0.6em; - margin-left: 0.3em; - border-radius: 0.2em; - white-space: nowrap; -} - .detailsRow { background: rgba(51, 51, 80, 0.02); } @@ -179,5 +132,4 @@ .nested .mecanism-somme__row { padding-left: 2em; border-top: 1px dashed rgba(51, 51, 80, 0.15); - font-size: 90%; } diff --git a/source/reducers/rootReducer.js b/source/reducers/rootReducer.js index 147c7e9d3..c3ca06601 100644 --- a/source/reducers/rootReducer.js +++ b/source/reducers/rootReducer.js @@ -1,12 +1,17 @@ +/* @flow */ + import { popularTargetNames } from 'Components/TargetSelection' import { defaultTo, without } from 'ramda' +// $FlowFixMe import reduceReducers from 'reduce-reducers' import { combineReducers } from 'redux' +// $FlowFixMe import { reducer as formReducer } from 'redux-form' import computeThemeColours from 'Ui/themeColours' import defaultLang from '../i18n' import inFranceAppReducer from './inFranceAppReducer' import storageReducer from './storageReducer' +import type { Action } from 'Types/ActionsTypes' // TODO : use context API instead function themeColours(state = computeThemeColours(), { type, colour }) { @@ -32,8 +37,8 @@ function currentExample(state = null, { type, situation, name, dottedName }) { } } -function conversationStarted(state = false, { type }) { - switch (type) { +function conversationStarted(state = false, action: Action) { + switch (action.type) { case 'START_CONVERSATION': return true case 'RESET_SIMULATION': @@ -62,13 +67,22 @@ function lang(state = defaultLang, { type, lang }) { } } -function conversationSteps( - state = { foldedSteps: [], currentQuestion: null }, - { type, name, step } -) { - if (type === 'RESET_SIMULATION') return { foldedSteps: [], unfolded: null } - if (type !== 'STEP_ACTION') return state +type ConversationSteps = {| + +foldedSteps: Array, + +unfoldedStep: ?string +|} +function conversationSteps( + state: ConversationSteps = { foldedSteps: [], unfoldedStep: null }, + action: Action +): ConversationSteps { + if (action.type === 'RESET_SIMULATION') + return { foldedSteps: [], unfoldedStep: null } + if (action.type === 'START_CONVERSATION' && action.question) + return { foldedSteps: state.foldedSteps, unfoldedStep: action.question } + + if (action.type !== 'STEP_ACTION') return state + const { name, step } = action if (name === 'fold') return { foldedSteps: [...state.foldedSteps, step], unfoldedStep: null } if (name === 'unfold') { @@ -78,9 +92,11 @@ function conversationSteps( ...without([step], state.foldedSteps), ...(state.unfoldedStep ? [state.unfoldedStep] : []) ], + unfoldedStep: step } } + return state } export default reduceReducers( diff --git a/source/selectors/analyseSelectors.js b/source/selectors/analyseSelectors.js index 2dc6f9534..245dc0c85 100644 --- a/source/selectors/analyseSelectors.js +++ b/source/selectors/analyseSelectors.js @@ -159,6 +159,6 @@ export let nextStepsSelector = createSelector( getNextSteps ) export let currentQuestionSelector = createSelector( - [nextStepsSelector], - nextSteps => head(nextSteps) + [nextStepsSelector, state => state.conversationSteps.unfoldedStep], + (nextSteps, unfoldedStep) => unfoldedStep || head(nextSteps) ) diff --git a/source/sites/mycompanyinfrance.fr/App.js b/source/sites/mycompanyinfrance.fr/App.js index af2b6d1a1..fd2062153 100644 --- a/source/sites/mycompanyinfrance.fr/App.js +++ b/source/sites/mycompanyinfrance.fr/App.js @@ -1,3 +1,4 @@ +import RulePage from 'Components/RulePage' import withTracker from 'Components/utils/withTracker' import React, { Component } from 'react' import { Redirect, Route, Switch } from 'react-router-dom' @@ -26,8 +27,9 @@ class InFranceRoute extends Component { {/* Passing location down to prevent update blocking */}
- {/* */} + +
diff --git a/source/sites/mycompanyinfrance.fr/entry.js b/source/sites/mycompanyinfrance.fr/entry.js index f1203aecf..2933ac662 100644 --- a/source/sites/mycompanyinfrance.fr/entry.js +++ b/source/sites/mycompanyinfrance.fr/entry.js @@ -1,47 +1,5 @@ import React from 'react' import { render } from 'react-dom' import App from './App' - -// Avoid `console` errors in browsers that lack a console. -;(function() { - var method - var noop = function() {} - var methods = [ - 'assert', - 'clear', - 'count', - 'debug', - 'dir', - 'dirxml', - 'error', - 'exception', - 'group', - 'groupCollapsed', - 'groupEnd', - 'info', - 'log', - 'markTimeline', - 'profile', - 'profileEnd', - 'table', - 'time', - 'timeEnd', - 'timeStamp', - 'trace', - 'warn' - ] - var length = methods.length - var console = (window.console = window.console || {}) - - while (length--) { - method = methods[length] - - // Only stub undefined methods. - if (!console[method]) { - console[method] = noop - } - } -})() - let anchor = document.querySelector('#js') render(, anchor) diff --git a/source/sites/mycompanyinfrance.fr/pages/Header/StepsHeader.css b/source/sites/mycompanyinfrance.fr/pages/Header/StepsHeader.css index 28f036268..e1bf64a6b 100644 --- a/source/sites/mycompanyinfrance.fr/pages/Header/StepsHeader.css +++ b/source/sites/mycompanyinfrance.fr/pages/Header/StepsHeader.css @@ -43,7 +43,7 @@ } .steps-header a.active { opacity: 1; - flex: 1; + flex-grow: 1; } /* IE */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { diff --git a/source/types/ActionsTypes.js b/source/types/ActionsTypes.js index f5c9afe97..4c10b92b8 100644 --- a/source/types/ActionsTypes.js +++ b/source/types/ActionsTypes.js @@ -7,12 +7,22 @@ export type LoadPreviousSimulationAction = { export type ResetSimulationAction = { type: 'RESET_SIMULATION' } - +export type StartConversationAction = { + type: 'START_CONVERSATION', + question?: string +} export type DeletePreviousSimulationAction = { type: 'DELETE_PREVIOUS_SIMULATION' } +export type StepAction = { + type: 'STEP_ACTION', + name: 'fold' | 'unfold', + step: string +} export type Action = + | StartConversationAction | LoadPreviousSimulationAction | ResetSimulationAction | DeletePreviousSimulationAction + | StepAction