betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

🎨 zone les résultats sous forme de tab

pull/256/head
Johan Girod 2018-06-18 14:53:07 +02:00
parent f97379b26b
commit da702ea75c
16 changed files with 94 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
source/components/GoToExplanations.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react'
import { Trans, translate } from 'react-i18next'
import { Element, scroller } from 'react-scroll'
import './conversation/conversation.css'
import { SimpleButton } from './ui/Button'
import withColours from './withColours'

6
source/components/Overlay.js
View File

@ -1,6 +1,7 @@
import FocusTrap from 'focus-trap-react'
import React, { Component } from 'react'
import './Overlay.css'
import { SimpleButton } from './ui/Button'
export default class Overlay extends Component {
render() {
@ -20,13 +21,12 @@ export default class Overlay extends Component {
e.stopPropagation()
}}>
{children}
<button
<SimpleButton
aria-label="close"
onClick={onClose}
className="unstyledButton"
id="overlayCloseButton">
x
</button>
</SimpleButton>
</div>
</FocusTrap>
</div>

16
source/components/ProgressTip.js
View File

@ -1,29 +1,21 @@
import React, { Component } from 'react'
import { Trans, translate } from 'react-i18next'
import { Trans } from 'react-i18next'
import { connect } from 'react-redux'
import { withRouter } from 'react-router'
import './ProgressTip.css'
import { nextStepsSelector } from 'Selectors/analyseSelectors'
import withColours from './withColours'
import './ProgressTip.css'
@withRouter
@translate()
@withColours
@connect(state => ({
nextSteps: nextStepsSelector(state)
}))
export default class ProgressTip extends Component {
render() {
let {
nextSteps,
colours: { textColourOnWhite }
} = this.props,
let { nextSteps } = this.props,
nbQuestions = nextSteps.length
if (nbQuestions === 0) return null
return (
<div className="progressTip">
<p style={{ color: textColourOnWhite }}>
<p>
{nbQuestions === 1 ? (
<Trans i18nKey="lastQ">dernière question !</Trans>
) : (

2
source/components/ResultView/Distribution.js
View File

@ -39,7 +39,7 @@ type State = {
branchesInViewport: Array<Branche>
}
const ANIMATION_SPRING = config.stiff
const ANIMATION_SPRING = config.gentle
class Distribution extends Component<Props, State> {
elementRef = null
state = {

4
source/components/ResultView/PaySlip.css
View File

@ -6,7 +6,6 @@
.payslip__salaryTitle {
grid-column-end: span 2;
}
.payslip__cotisationsSection {
display: grid;
grid-template-columns: auto 8.2em 8.2em;
@ -49,7 +48,8 @@
font-weight: normal;
}
.montant {
.payslip__salarySection .montant,
.payslip__cotisationsSection .montant {
display: flex;
align-items: flex-end;
justify-content: flex-end;

22
source/components/ResultView/PaySlip.js
View File

@ -1,7 +1,7 @@
/* @flow */
import type { FicheDePaie } from './types'
import { compose } from 'ramda'
import React, {Fragment} from 'react'
import React, { Fragment } from 'react'
import { Trans } from 'react-i18next'
import { connect } from 'react-redux'
import withColours from '../withColours'
@ -10,7 +10,6 @@ import './PaySlip.css'
import RuleLink from './RuleLink'
import { ficheDePaieSelector } from './selectors'
type ConnectedPropTypes = FicheDePaie & {
colours: { lightestColour: string }
}
@ -34,7 +33,7 @@ const PaySlip = ({
<Trans i18nKey="payslip.heures">
Nombre d&apos;heures travaillées :{' '}
</Trans>
{nombreHeuresTravaillées}
<span className="montant"> {nombreHeuresTravaillées}</span>
</div>
{/* Section salaire brut */}
<div className="payslip__salarySection">
@ -135,22 +134,21 @@ const PaySlip = ({
<br />
<p className="payslip__notice">
<Trans i18nKey="payslip.notice">
Pour plus d&apos;informations concernant votre bulletin de paie,
rendez vous sur&nbsp;
Pour plus d&apos;informations concernant votre bulletin de paie, rendez
vous sur&nbsp;
<a
alt="service-public.fr"
href="https://www.service-public.fr/particuliers/vosdroits/F559">
service-public.fr
</a>
</Trans>
</Trans>
</p>
<p className="payslip__notice">
<Trans i18nKey="payslip.warning-beta">
Le simulateur vous aide à comprendre votre bulletin de paie,
sans lui être opposable. Il ne prend pour l&apos;instant pas en
compte les conventions et accords collectifs, ni la myriade
d&apos;aides à explorer sur <a href="https://www.aides-entreprises.fr">
aides-entreprises.fr</a>.
<Trans i18nKey="payslip.disclaimer">
Le simulateur vous aide à comprendre votre bulletin de paie, sans lui
être opposable. Il ne prend pour l&apos;instant pas en compte les
conventions et accords collectifs, ni la myriade d&apos;aides à explorer
sur <a href="https://www.aides-entreprises.fr">aides-entreprises.fr</a>.
</Trans>
</p>
</div>

30
source/components/ResultView/ResultView.css
View File

@ -1,11 +1,25 @@
.result-view-header {
display: flex;
align-items: center;
flex-wrap: wrap;
.result-view__tabs {
display: inline-block;
box-shadow: 0 -1px 0 0 #d4d4d5, 1px 0 0 0 #d4d4d5, -1px 0 0 0 #d4d4d5;
border-top-right-radius: 0.6em;
border: none;
border-top-left-radius: 0.6em;
margin-top: 2em;
margin-bottom: -1px;
border-bottom: 1px solid transparent;
}
.result-view__tabs button {
padding: 1em;
border-right: 1px solid #d4d4d5;
}
.result-view__tabs button.selected {
border-bottom: 1px solid white;
}
.result-view__tabs button:last-of-type {
border-right: none;
}
.result-view-header h2 {
flex: 1;
flex-shrink: 0;
white-space: nowrap;
.result-view__body {
border-top-left-radius: 0;
margin-bottom: 2em;
}

34
source/components/ResultView/ResultView.js
View File

@ -3,7 +3,7 @@
import React, { PureComponent } from 'react'
import { Trans } from 'react-i18next'
import { connect } from 'react-redux'
import Button from '../ui/Button'
import { SimpleButton } from '../ui/Button'
import Card from '../ui/Card'
import Distribution from './Distribution'
import PaySlip from './PaySlip'
@ -27,24 +27,22 @@ class ResultView extends PureComponent<Props, State> {
}
render() {
return (
<Card>
<div className="result-view-header">
<h2>
<Trans>{resultViewTitle[this.state.resultView]}</Trans>
</h2>
{this.state.resultView === 'distribution' ? (
<Button onClick={() => this.setState({ resultView: 'payslip' })}>
<Trans>Voir ma fiche de paie</Trans>
</Button>
) : (
<Button
onClick={() => this.setState({ resultView: 'distribution' })}>
<Trans>Voir la répartition des cotisations</Trans>
</Button>
)}
<>
<div className="result-view__tabs">
{['distribution', 'payslip'].map(resultView => (
<SimpleButton
key={resultView}
className={this.state.resultView === resultView ? 'selected' : ''}
onClick={() => this.setState({ resultView })}>
<Trans>{resultViewTitle[resultView]}</Trans>
</SimpleButton>
))}
<div className="white-space" />
</div>
{this.state.resultView === 'payslip' ? <PaySlip /> : <Distribution />}
</Card>
<Card className="result-view__body">
{this.state.resultView === 'payslip' ? <PaySlip /> : <Distribution />}
</Card>
</>
)
}
}

17
source/components/TargetSelection.js
View File

@ -7,6 +7,11 @@ import { Trans, translate } from 'react-i18next'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { change, Field, formValueSelector, reduxForm } from 'redux-form'
import {
analysisWithDefaultsSelector,
flatRulesSelector,
noUserInputSelector
} from 'Selectors/analyseSelectors'
import BlueButton from './BlueButton'
import CurrencyInput from './CurrencyInput/CurrencyInput'
import ProgressCircle from './ProgressCircle/ProgressCircle'
@ -26,12 +31,6 @@ export let popularTargetNames = [
'contrat salarié . salaire . net imposable'
]
import {
flatRulesSelector,
noUserInputSelector,
analysisWithDefaultsSelector
} from 'Selectors/analyseSelectors'
@translate()
@reduxForm({
form: 'conversation',
@ -80,13 +79,9 @@ export default class TargetSelection extends Component {
<b>
<Trans>Estimation approximative</Trans>
</b>
<br />
<Trans i18nKey="defaults">
pour une situation par défaut (CDI non cadre).
</Trans>
</p>
<BlueButton onClick={this.props.startConversation}>
<Trans>Commencer la simulation</Trans>
<Trans>Continuer</Trans>
</BlueButton>
</div>
)}

25
source/components/conversation/FoldedSteps.js
View File

@ -1,4 +1,3 @@
// css in conversation.Css
import { isEmpty } from 'ramda'
import React, { Component } from 'react'
import { Trans, translate } from 'react-i18next'
@ -8,7 +7,7 @@ import { reset } from 'redux-form'
import { flatRulesSelector } from 'Selectors/analyseSelectors'
import { resetSimulation } from '../../actions'
import { LinkButton, SimpleButton } from '../ui/Button'
import Card from '../ui/Card'
import './conversation.css'
import FoldedStep from './FoldedStep'
@connect(
@ -33,19 +32,17 @@ export default class FoldedSteps extends Component {
if (isEmpty(foldedSteps || [])) return null
return (
<Card>
<div id="foldedSteps">
<div className="header">
<LinkButton onClick={this.handleSimulationReset}>
<i className="fa fa-trash" aria-hidden="true" />
<Trans i18nKey="resetAll">Tout effacer</Trans>
</LinkButton>
</div>
{foldedSteps.map(dottedName => (
<FoldedStep key={dottedName} dottedName={dottedName} />
))}
<div id="foldedSteps">
<div className="header">
<LinkButton onClick={this.handleSimulationReset}>
<i className="fa fa-trash" aria-hidden="true" />
<Trans i18nKey="resetAll">Tout effacer</Trans>
</LinkButton>
</div>
</Card>
{foldedSteps.map(dottedName => (
<FoldedStep key={dottedName} dottedName={dottedName} />
))}
</div>
)
}
}

8
source/components/conversation/conversation.css
View File

@ -8,8 +8,10 @@
margin-bottom: 1em;
}
#resultsScrollElement, #myScrollToElement {
#resultsScrollElement,
#myScrollToElement {
text-align: center;
font-weight: bold;
}
#foldedSteps {
@ -415,6 +417,10 @@ for the appearing element to appear without stacking up below the first one */
border-bottom: 1px solid #eee;
}
.foldedQuestion:last-of-type .borderWrapper {
border-bottom: none;
}
.keyIcon {
position: absolute;
font-size: 80%;

2
source/components/rule/Algorithm.css
View File

@ -75,7 +75,7 @@
padding: 0.2em 1em;
display: block;
background: #34495e;
color: white;
color: white !important;
font-weight: 600;
border-bottom-right-radius: 3px;
}

6
source/components/ui/Card.css
View File

@ -1,7 +1,5 @@
.card {
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -2px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(0, 0, 0, 0.3);
padding: 0 1em;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
padding: 1em;
border-radius: 0.6em;
}

4
source/components/ui/Card.js
View File

@ -1,4 +1,6 @@
import React from 'react'
import './Card.css'
const Card = ({ children }) => <div className="card"> {children}</div>
const Card = ({ children, className = '' }) => (
<div className={'card ' + className}> {children}</div>
)
export default Card

9
source/engine/mecanismViews/common.js
View File

@ -4,10 +4,11 @@ import React, { Component } from 'react'
import { Trans } from 'react-i18next'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { flatRulesSelector } from 'Selectors/analyseSelectors'
import { SimpleButton } from '../../components/ui/Button'
import withLanguage from '../../components/withLanguage'
import { capitalise0 } from '../../utils'
import { encodeRuleName, findRuleByDottedName } from '../rules'
import { flatRulesSelector } from 'Selectors/analyseSelectors'
let treatValue = (data, language) =>
data == null
@ -39,11 +40,11 @@ export class Node extends Component {
<div className={classNames(classes, 'node')}>
{name && (
<span className="nodeHead">
<button
className="name unstyledButton"
<SimpleButton
className="name"
data-term-definition={termDefinition}>
<Trans>{name}</Trans>
</button>
</SimpleButton>
<NodeValuePointer data={value} />
</span>
)}

1
source/locales/en.yaml
View File

@ -3,7 +3,6 @@ previousSimulationBanner:
info: Your previous simulation data have been saved.
retrieveButton: Retrieve my last simulation
Estimation approximative: This is an estimate
defaults: for a permanent (CDI) full-time contract
Commencer la simulation: Start simulation
selectMany: You may pick more than one
Valider: Accept