diff --git a/couleur.html b/couleur.html new file mode 100644 index 000000000..90cccd402 --- /dev/null +++ b/couleur.html @@ -0,0 +1,33 @@ + + + + + + + Embauche.beta - Choix de la couleur + + + + + + +
+ + + + + + diff --git a/package.json b/package.json index e73dd3859..7559a961b 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/source/containers/App.prod.js b/source/containers/App.prod.js index 6d35c4152..39706a209 100644 --- a/source/containers/App.prod.js +++ b/source/containers/App.prod.js @@ -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 { diff --git a/source/containers/Layout.js b/source/containers/Layout.js index 7fddaf67b..359d7cefa 100644 --- a/source/containers/Layout.js +++ b/source/containers/Layout.js @@ -49,6 +49,7 @@ export default class Layout extends Component { + diff --git a/source/entry-colour-chooser.js b/source/entry-colour-chooser.js new file mode 100644 index 000000000..6419019bb --- /dev/null +++ b/source/entry-colour-chooser.js @@ -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 ( +
+

+ Visualisez sur cette page l'apparence du module pour différentes + couleurs principales. +

+ +

+ La couleur sélectionnée, à déclarer comme attribut "data-couleur" du + script sur votre page est : {this.props.couleur} +

+ +
+ ) + } +} +render( + + + , + document.querySelector('#coulorChooser') +) diff --git a/source/webpack.config.js b/source/webpack.config.js index 2a855af50..c07471906 100644 --- a/source/webpack.config.js +++ b/source/webpack.config.js @@ -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/'),