From f857e369c1ce99b196dfb71b206ab163e29c5142 Mon Sep 17 00:00:00 2001 From: mama Date: Mon, 15 Jan 2018 15:47:32 +0100 Subject: [PATCH] =?UTF-8?q?R=C3=A9tablissement=20de=20la=20page=20de=20s?= =?UTF-8?q?=C3=A9lection=20de=20couleur=20d'int=C3=A9gration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- couleur.html | 33 ++++++++++++++++++++++++ package.json | 1 + source/containers/App.prod.js | 1 - source/containers/Layout.js | 1 + source/entry-colour-chooser.js | 47 ++++++++++++++++++++++++++++++++++ source/webpack.config.js | 7 ++--- 6 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 couleur.html create mode 100644 source/entry-colour-chooser.js 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/'),