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

🎨 design final des retours utilsiateur

pull/523/head
Mael 2019-04-19 19:04:56 +02:00
parent 837d595458
commit 7b87b8009b
2 changed files with 64 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
source/components/Feedback/Feedback.css
View File

@ -1,14 +1,11 @@
.feedback-page {
align-items: flex-start;
display: flex;
justify-content: center;
justify-content: flex-end;
padding-top: 0.6rem;
padding-bottom: 0.6rem;
background: var(--lighterColour);
border-radius: 0.9rem;
max-width: 36em;
padding: 0.6em;
margin: 1em 0 1em auto;
padding: 0.6em 1em;
}
.feedback-page.stickToFooter {
margin-bottom: 0;
@ -18,3 +15,9 @@
.feedback-page button.link-button {
margin: 0 0.6em;
}
@media (min-width: 1200px) {
.feedback-page .feedbackButtons {
display: inline;
}
}

109
source/components/Feedback/PageFeedback.js
View File

@ -16,7 +16,8 @@ import classNames from 'classnames'
type OwnProps = {
blacklist: Array<string>,
customMessage?: Node,
customEventName?: string
customEventName?: string,
stickToFooter: boolean
}
type Props = OwnProps & {
location: Location,
@ -98,61 +99,63 @@ class PageFeedback extends Component<Props, State> {
this.props.location.pathname === '/' ? '' : this.props.location.pathname
return (
!this.props.blacklist.includes(pathname) && (
<div
className={classNames('feedback-page', 'ui__', 'notice', {
stickToFooter
})}>
{!this.state.showForm && !this.state.showThanks && (
<>
<div>
{this.props.customMessage || (
<Trans i18nKey="feedback.question">
Cette page vous est utile ?
</Trans>
)}{' '}
<div style={{ display: 'inline-block' }}>
<button
className="ui__ link-button"
onClick={() => this.handleFeedback({ useful: true })}>
<Trans>Oui</Trans>
</button>{' '}
<button
className="ui__ link-button"
onClick={() => this.handleFeedback({ useful: false })}>
<Trans>Non</Trans>
</button>
<button
className="ui__ link-button"
onClick={this.handleErrorReporting}>
<Trans i18nKey="feedback.reportError">
Faire une suggestion
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div
className={classNames('feedback-page', 'ui__', 'notice', {
stickToFooter
})}>
{!this.state.showForm && !this.state.showThanks && (
<>
<div>
{this.props.customMessage || (
<Trans i18nKey="feedback.question">
Cette page vous est utile ?
</Trans>
</button>
)}{' '}
<div className="feedbackButtons">
<button
className="ui__ link-button"
onClick={() => this.handleFeedback({ useful: true })}>
<Trans>Oui</Trans>
</button>{' '}
<button
className="ui__ link-button"
onClick={() => this.handleFeedback({ useful: false })}>
<Trans>Non</Trans>
</button>
<button
className="ui__ link-button"
onClick={this.handleErrorReporting}>
<Trans i18nKey="feedback.reportError">
Faire une suggestion
</Trans>
</button>
</div>
</div>
</>
)}
{this.state.showThanks && (
<div>
<Trans i18nKey="feedback.thanks">
Merci pour votre retour ! Vous pouvez nous contacter
directement à{' '}
<a href="mailto:contact@embauche.beta.gouv.fr">
contact@embauche.beta.gouv.fr
</a>
</Trans>
</div>
</>
)}
{this.state.showThanks && (
<div>
<Trans i18nKey="feedback.thanks">
Merci pour votre retour ! Vous pouvez nous contacter directement
à{' '}
<a href="mailto:contact@embauche.beta.gouv.fr">
contact@embauche.beta.gouv.fr
</a>
</Trans>
</div>
)}
{this.state.showForm && (
<Form
onEnd={() =>
this.setState({ showThanks: false, showForm: false })
}
onCancel={() =>
this.setState({ showThanks: false, showForm: false })
}
/>
)}
)}
{this.state.showForm && (
<Form
onEnd={() =>
this.setState({ showThanks: false, showForm: false })
}
onCancel={() =>
this.setState({ showThanks: false, showForm: false })
}
/>
)}
</div>
</div>
)
)