11 changed files with 339 additions and 171 deletions
Split View
Diff Options
-
+39 -101package-lock.json
-
+1 -0package.json
-
+108 -0src/components/ManualView/CustomPicker.js
-
+122 -50src/components/ManualView/lampList.js
-
+25 -14src/components/ManualView/rgbLamp.js
-
+0 -0src/components/Manual_Backup.js
-
+0 -0src/components/Presets_Backup.js
-
+0 -0src/components/Unit_Backup.js
-
+33 -2src/containers/ManualTab.js
-
+1 -1src/redux/actions.js
-
+10 -3src/static.js
+ 39
- 101
package-lock.json
View File
+ 1
- 0
package.json
View File
+ 108
- 0
src/components/ManualView/CustomPicker.js
View File
| @ -0,0 +1,108 @@ | |||
| import React from 'react'; | |||
| import { CustomPicker } from 'react-color'; | |||
| const { Hue, Alpha } = require('react-color/lib/components/common'); | |||
| const colors= ['#ffffff', '#ff0000','#ff8000','#ffff00','#80ff00','#00ff00','#00ff80','#00ffff', | |||
| '#0080ff','#0000ff','#8000ff','#ff00ff','#ff0080'] | |||
| const inlineStyles = { | |||
| container: { | |||
| boxShadow: 'rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px', | |||
| display: 'flex', | |||
| flexDirection: 'column', | |||
| height: 282, | |||
| width: 200, | |||
| }, | |||
| pointer: { | |||
| width: '18px', | |||
| height: '18px', | |||
| borderRadius: '50%', | |||
| transform: 'translate(-9px, -1px)', | |||
| backgroundColor: 'rgb(248, 248, 248)', | |||
| boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)', | |||
| }, | |||
| slider: { | |||
| marginTop: '1px', | |||
| width: '4px', | |||
| borderRadius: '1px', | |||
| height: '20px', | |||
| boxShadow: '0 0 2px rgba(0, 0, 0, .6)', | |||
| background: '#fff', | |||
| transform: 'translateX(-2px)' | |||
| }, | |||
| saturation: { | |||
| width: '100%', | |||
| paddingBottom: '75%', | |||
| position: 'relative', | |||
| overflow: 'hidden', | |||
| }, | |||
| swatchSquare: { | |||
| minWidth: 20, | |||
| minHeight: 20, | |||
| margin: '1px 2px', | |||
| cursor: 'pointer', | |||
| boxShadow: '0 0 2px rgba(0, 0, 0, .6)', | |||
| }, | |||
| preview: { | |||
| minHeight: 50, | |||
| minWidth: 100 | |||
| } | |||
| } | |||
| const CustomSlider = () => { | |||
| return ( | |||
| <div style={ inlineStyles.slider } /> | |||
| ) | |||
| } | |||
| class CustomColorPicker extends React.Component { | |||
| displayColorSwatches = colors => { | |||
| return colors.map(color => { | |||
| return ( | |||
| <div | |||
| onClick={() => this.props.onChange(color)} | |||
| key={color} | |||
| style={{ ...inlineStyles.swatchSquare, backgroundColor: color, }} | |||
| /> | |||
| ); | |||
| }) | |||
| } | |||
| render() { | |||
| return ( | |||
| <div style={inlineStyles.container}> | |||
| <div style={{ backgroundColor: this.props.colorHex, minHeight: 50 }}></div> | |||
| <div style={{ minHeight: 20, position: 'relative', margin: 2 }}> | |||
| <Hue | |||
| hsl={this.props.colorHsl} | |||
| pointer={CustomSlider} | |||
| onChange={(color) => this.props.onChange(color)} | |||
| direction={'horizontal'} | |||
| /> | |||
| </div> | |||
| <div style={{ position: 'relative', minHeight:20}}> | |||
| <Alpha | |||
| hsl={this.props.colorHsl} | |||
| rgb={this.props.colorRgb} | |||
| pointer={CustomSlider} | |||
| onChange={(color) => this.props.onChange(color)} | |||
| /> | |||
| </div> | |||
| <div style={{ display: 'flex', width: '100%', flexWrap: 'wrap', padding: 3 }}> | |||
| {this.displayColorSwatches(colors) | |||
| } | |||
| </div> | |||
| </div> | |||
| ); | |||
| } | |||
| } | |||
| export default CustomPicker(CustomColorPicker); | |||