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

Rétablissement de la page de sélection de couleur d'intégration

pull/132/head
mama 2018-01-15 15:47:32 +01:00
parent deb54c86c1
commit f857e369c1
6 changed files with 84 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
couleur.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1">
<title>Embauche.beta - Choix de la couleur</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,600,700' rel='stylesheet' type='text/css'>
</head>
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.slider-picker {
margin: 3em auto 4em;
}
.indication {
font-size: 80%;
font-style: italic;
text-align: center;
}
</style>
<body>
<div id="coulorChooser"></div>
<script src="dist/colour-chooser.js"></script>
<!-- #1F4382 - #3570B8 - #4A89DC - #4A9DED-->
<script src="https://use.fontawesome.com/1da10bbdec.js"></script>
</body>
</html>

1
package.json
View File

@ -25,6 +25,7 @@
"ramda": "^0.25.0",
"react": "^16.2.0",
"react-addons-css-transition-group": "^15.6.2",
"react-color": "^2.13.8",
"react-dom": "^16.2.0",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.6",

1
source/containers/App.prod.js
View File

@ -2,7 +2,6 @@
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import DevTools from '../DevTools'
import Layout from './Layout'
export default class App extends Component {

1
source/containers/Layout.js
View File

@ -49,6 +49,7 @@ export default class Layout extends Component {
<Redirect from="/simu/" to="/" />
<Redirect from="/simulateur" to="/" />
<Redirect from="/iframe.html" to="/" />
<Redirect from="/couleur.html" to="/" />
<Route component={Route404} />
</Switch>
</>

47
source/entry-colour-chooser.js Normal file
View File

@ -0,0 +1,47 @@
import 'core-js/fn/promise'
import React from 'react'
import { render } from 'react-dom'
import { connect, Provider } from 'react-redux'
import { createStore } from 'redux'
import reducers from './reducers'
import { changeThemeColour } from './actions'
import Layout from './containers/Layout'
import { SliderPicker } from 'react-color'
let store = createStore(reducers)
@connect(
state => ({ couleur: state.themeColours.colour }),
dispatch => ({
changeColour: colour => dispatch(changeThemeColour(colour))
})
)
class MyComponent extends React.Component {
changeColour = ({ hex }) => this.props.changeColour(hex)
render() {
return (
<div>
<p className="indication">
Visualisez sur cette page l'apparence du module pour différentes
couleurs principales.
</p>
<SliderPicker
color={this.props.couleur}
onChangeComplete={this.changeColour}
/>
<p className="indication">
La couleur sélectionnée, à déclarer comme attribut "data-couleur" du
script sur votre page est : <b>{this.props.couleur}</b>
</p>
<Layout />
</div>
)
}
}
render(
<Provider store={store}>
<MyComponent />
</Provider>,
document.querySelector('#coulorChooser')
)

7
source/webpack.config.js
View File

@ -14,11 +14,8 @@ module.exports = {
'react-hot-loader/patch',
'./source/entry.js'
],
simulateur: './source/entry-iframe.js'
// 'colour-chooser': [
// 'babel-polyfill',
// './source/entry-colour-chooser.js'
// ]
simulateur: './source/entry-iframe.js',
'colour-chooser': ['@babel/polyfill', './source/entry-colour-chooser.js']
},
output: {
path: path.resolve('./dist/'),