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

Merge pull request #544 from betagouv/ios-hover-click 

Ios hover click
pull/545/head
Mael 2019-05-20 15:52:33 +02:00 committed by GitHub
parent bbe65ae55e 6b27ace58e
commit efb1e64a0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 1228 additions and 836 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc
View File

@ -13,6 +13,7 @@
{
"useES": true
}
]
],
"babel-plugin-styled-components"
]
}

104
index.html
View File

@ -47,23 +47,29 @@
<%= htmlWebpackPlugin.options.title %>
</title>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet" />
<% } %>
<style>
html[data-useragent*='MSIE'] #outdated-browser,
html[data-useragent*='Safari'][data-useragent*='Version/8']
#outdated-browser,
html[data-useragent*='Safari'][data-useragent*='Version/7']
#outdated-browser,
html[data-useragent*='Trident'] #outdated-browser {
display: block !important;
}
html[data-useragent*='MSIE'] #lds-ellipsis,
html[data-useragent*='Safari'][data-useragent*='Version/8'] #lds-ellipsis,
html[data-useragent*='Safari'][data-useragent*='Version/7'] #lds-ellipsis,
html[data-useragent*='Trident'] #lds-ellipsis {
display: none !important;
}
html[data-useragent*='MSIE'] #js,
html[data-useragent*='Safari'][data-useragent*='Version/8'] #js,
html[data-useragent*='Safari'][data-useragent*='Version/7'] #js,
html[data-useragent*='Trident'] #js {
display: none !important;
}
@ -160,7 +166,6 @@
</head>
<body>
<div id="lds-ellipsis">
<div></div>
<div></div>
@ -170,8 +175,8 @@
<!-- USER AGENT DATA ATTRIBUTE -->
<script>
var b = document.documentElement;
b.setAttribute("data-useragent", navigator.userAgent);
var b = document.documentElement
b.setAttribute('data-useragent', navigator.userAgent)
</script>
<!-- APP -->
@ -182,54 +187,66 @@
id="outdated-browser"
style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; display: none; background-color: white"
>
<div style="margin: 100px auto; max-width: 800px; text-align: center; font-family: 'IBM Plex Sans', sans-serif; font-weight: 300;">
<img
src="images/marianne.svg"
alt="Un service de l'État français"
style="width: 200px; margin-bottom: 2rem;"
/>
<h1>
Votre navigateur n'est plus supporté
<div
style="margin: 100px auto; max-width: 800px; text-align: center; font-family: 'IBM Plex Sans', sans-serif; font-weight: 300;"
>
<img
src="images/marianne.svg"
alt="Un service de l'État français"
style="width: 200px; margin-bottom: 2rem;"
/>
<h1>
Votre navigateur n'est plus supporté.
</h1>
<h2> Nous vous invitons à réessayer avec un autre, ou depuis votre mobile</h2>
<br/>
<br/>
<h3>Si besoin, vous pouvez en installer un nouveau depuis
<a style="color: #2975d1" href="http://outdatedbrowser.com/fr"
>cette page</a
></h3>
<h2>
Nous vous invitons à réessayer avec un autre, ou depuis un mobile récent.
</h2>
<br />
<br />
<h3>
<a href="javascript:void(0);" onclick="
Si besoin, vous pouvez en installer un nouveau depuis
<a style="color: #2975d1" href="http://outdatedbrowser.com/fr"
>cette page</a
>
</h3>
<h3>
<a
href="javascript:void(0);"
onclick="
var b = document.documentElement;
b.setAttribute('data-useragent', 'force-navigation-anyway');
">Continuer quand même vers le site</a>
"
>Continuer quand même vers le site</a
>
</h3>
</div>
</div>
</div>
<script>
// Add support for nomodule attribute to SAFARI 10.1
(function() {
var d = document;
var c = d.createElement('script');
;(function() {
var d = document
var c = d.createElement('script')
if (!('noModule' in c) && 'onbeforeload' in c) {
var s = false;
d.addEventListener('beforeload', function(e) {
if (e.target === c) {
s = true;
} else if (!e.target.hasAttribute('nomodule') || !s) {
return;
}
e.preventDefault();
}, true);
c.type = 'module';
c.src = '.';
d.head.appendChild(c);
c.remove();
var s = false
d.addEventListener(
'beforeload',
function(e) {
if (e.target === c) {
s = true
} else if (!e.target.hasAttribute('nomodule') || !s) {
return
}
e.preventDefault()
},
true
)
c.type = 'module'
c.src = '.'
d.head.appendChild(c)
c.remove()
}
}());
})()
</script>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
@ -246,8 +263,7 @@
-->
<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en%2CIntl.~locale.fr%2CIntersectionObserver"></script>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script nomodule src="<%= chunk %>.legacy.bundle.js"></script>
<script nomodule src="<%= chunk %>.legacy.bundle.js"></script>
<% } %>
</body>
</html>

2
package.json
View File

@ -103,6 +103,7 @@
"babel-eslint": "^11.0.0-beta.0",
"babel-loader": "^8.0.2",
"babel-plugin-ramda": "^1.6.3",
"babel-plugin-styled-components": "^1.10.0",
"babel-plugin-webpack-alias": "^2.1.2",
"chai": "^4.1.2",
"co-request": "^1.0.0",
@ -148,6 +149,7 @@
"sinon-chai": "^3.0.0",
"source-map-support": "^0.5.4",
"style-loader": "^0.23.1",
"styled-components": "^4.2.0",
"url-loader": "^1.0.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",

4
source/components/conversation/IgnoreStepButton.css
View File

@ -1,4 +0,0 @@
#ignore {
position: relative;
text-align: right;
}

28
source/components/conversation/IgnoreStepButton.js
View File

@ -1,12 +1,9 @@
import HoverDecorator from 'Components/utils/HoverDecorator';
import withColours from 'Components/utils/withColours';
import { compose } from 'ramda';
import React, { Component } from 'react';
import { Trans, withTranslation } from 'react-i18next';
import './IgnoreStepButton.css';
import withColours from 'Components/utils/withColours'
import { compose } from 'ramda'
import React, { Component } from 'react'
import { Trans, withTranslation } from 'react-i18next'
export default compose(
HoverDecorator,
withTranslation(),
withColours
)(
@ -27,15 +24,24 @@ export default compose(
}
render() {
return (
<div id="ignore">
<div
css={`
position: relative;
text-align: right;
.keyIcon {
opacity: 0;
}
:hover .keyIcon {
opacity: 1;
}
`}>
<button
className="ui__ small simple skip button"
onClick={this.props.action}>
<Trans>passer</Trans> →
</button>
<span
className="keyIcon"
style={{ opacity: this.props.hover ? 1 : 0 }}>
<span className="keyIcon">
<Trans>Échap</Trans>
</span>
</div>

1
source/components/conversation/Question.css
View File

@ -3,3 +3,4 @@
align-items: center;
justify-content: flex-end;
}

16
source/components/conversation/Question.js
View File

@ -1,4 +1,3 @@
import HoverDecorator from 'Components/utils/HoverDecorator'
import withColours from 'Components/utils/withColours'
import { compose, is } from 'ramda'
import React, { Component } from 'react'
@ -7,7 +6,7 @@ import Explicable from './Explicable'
import { FormDecorator } from './FormDecorator'
import './Question.css'
import SendButton from './SendButton'
import { answer, answered } from './userAnswerButtonStyle'
import classnames from 'classnames'
/* Ceci est une saisie de type "radio" : l'utilisateur choisit une réponse dans une liste, ou une liste de listes.
Les données @choices sont un arbre de type:
@ -144,7 +143,6 @@ let RadioLabel = props => (
)
const RadioLabelContent = compose(
HoverDecorator,
withTranslation(),
withColours
)(
@ -154,14 +152,14 @@ const RadioLabelContent = compose(
}
render() {
let { value, label, input, hover, colours } = this.props,
// value = when(is(Object), prop('value'))(choice),
labelStyle = Object.assign(
value === input.value || hover ? answered(colours) : answer(colours),
value === '_' ? { fontWeight: 'bold' } : null
)
labelStyle = value === '_' ? { fontWeight: 'bold' } : null,
selected = value === input.value
return (
<label key={value} style={labelStyle} className="radio">
<label
key={value}
style={labelStyle}
className={classnames('radio', 'userAnswerButton', { selected })}>
<Trans i18nKey={`radio_${label}`}>{label}</Trans>
<input
type="radio"

3
source/components/conversation/RhetoricalQuestion.js
View File

@ -1,6 +1,5 @@
import FormDecorator from 'Components/conversation/FormDecorator'
import React, { Component } from 'react'
import { answer } from './userAnswerButtonStyle'
export default FormDecorator('rhetorical-question')(
class RhetoricalQuestion extends Component {
@ -13,7 +12,7 @@ export default FormDecorator('rhetorical-question')(
return (
<span className="answer">
<label key={value} className="radio" style={answer(themeColours)}>
<label key={value} className="radio userAnswerButton">
<input type="radio" {...input} onClick={submit} value={value} />
{text}
</label>

30
source/components/conversation/SendButton.js
View File

@ -1,12 +1,8 @@
import HoverDecorator from 'Components/utils/HoverDecorator'
import { compose } from 'ramda'
import React, { Component } from 'react'
import { Trans, withTranslation } from 'react-i18next'
export default compose(
HoverDecorator,
withTranslation()
)(
export default compose(withTranslation())(
class SendButton extends Component {
getAction() {
let { disabled, submit } = this.props
@ -26,9 +22,25 @@ export default compose(
this.getAction()('enter')
}
render() {
let { disabled, hover } = this.props
let { disabled } = this.props
return (
<span className="sendWrapper">
<span
css={`
.keyIcon {
opacity: 0;
}
${!disabled &&
`
@media (hover) {
:hover .keyIcon {
opacity: 1
}
}`}
`}
className="sendWrapper">
<button
className="ui__ button plain"
disabled={disabled}
@ -37,9 +49,7 @@ export default compose(
<Trans>valider</Trans> ✓
</span>
</button>
<span
className="keyIcon"
style={{ opacity: hover && !disabled ? 1 : 0 }}>
<span className="keyIcon">
<Trans>Entrée</Trans>↵
</span>
</span>

16
source/components/conversation/StepAnswer.js
View File

@ -1,16 +0,0 @@
import React, { Component } from 'react'
import { answered } from './userAnswerButtonStyle'
export default class StepAnswer extends Component {
render() {
let { value, human, valueType, ignored, themeColours } = this.props,
// Show a beautiful answer to the user, rather than the technical form value
humanFunc = human || (valueType && valueType.human) || (v => v)
return (
<span key="1" className="resume" style={answered(themeColours)}>
{humanFunc(value)}
{ignored && <span className="answer-ignored">(défaut)</span>}
</span>
)
}
}

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

@ -151,7 +151,7 @@
.step.question .variant .variantLeaf {
display: inline-flex;
align-items: center;
align-items: center;
}
.step.question .variantLeaf.aucun label {
font-weight: 800;
@ -161,26 +161,15 @@
.step.question .sendWrapper {
float: right;
}
.step label.radio,
/* A resume of what's been answered */ .resume {
text-align: center;
margin-left: 1em;
margin-top: 2em;
cursor: pointer;
background: none;
padding: 0 0.8em;
line-height: 1.8em;
border-radius: 1em;
}
.step label.radio {
text-align: center;
margin-left: 1em;
margin-top: 1em;
cursor: pointer;
padding: 0.25em 0.85em;
line-height: 1.8em;
background: none;
border-radius: 1em;
padding: 0.25em 0.85em;
line-height: 1.3em;
font-size: 120%;
}
@ -427,3 +416,20 @@ for the appearing element to appear without stacking up below the first one */
flex: 1;
margin-bottom: 2em;
}
.step label.userAnswerButton {
border: 1px solid var(--colour);
color: var(--textColourOnWhite);
}
.step label.userAnswerButton.selected {
background: var(--colour);
border: 1px solid var(--colour);
color: var(--textColour);
}
@media (hover) {
.step label.userAnswerButton:hover {
background: var(--colour);
border: 1px solid var(--colour);
color: var(--textColour);
}
}

10
source/components/conversation/userAnswerButtonStyle.js
View File

@ -1,10 +0,0 @@
export let answered = ({ colour, textColour }) => ({
background: colour,
border: '1px solid ' + colour,
color: textColour
})
export let answer = ({ colour, textColourOnWhite }) => ({
border: '1px solid ' + colour,
color: textColourOnWhite
})

19
source/components/utils/HoverDecorator.js
View File

@ -1,19 +0,0 @@
import React, { Component } from 'react'
export default DecoratedComponent =>
class withHover extends Component {
state = {
hover: false
}
setHover = state => () => this.setState({ hover: state })
render() {
return (
<span
onMouseEnter={this.setHover(true)}
onMouseLeave={this.setHover(false)}
>
<DecoratedComponent {...this.props} hover={this.state.hover} />
</span>
)
}
}

1792
yarn.lock
View File

File diff suppressed because it is too large Load Diff