schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-14 17:23:26 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use the color lib for all color things

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-19 11:46:48 +01:00
parent 190750cc99
commit 2082de5fca
3 changed files with 5 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -32,7 +32,6 @@
"react-addons-pure-render-mixin": "^15.4.0", "react-addons-pure-render-mixin": "^15.4.0",
"react-collapse": "^2.3.3", "react-collapse": "^2.3.3",
"react-color": "^2.10.0", "react-color": "^2.10.0",
"react-colorpickr": "^4.3.0",
"react-dom": "^15.4.0", "react-dom": "^15.4.0",
"react-file-reader-input": "^1.1.0", "react-file-reader-input": "^1.1.0",
"react-height": "^2.1.1", "react-height": "^2.1.1",

4
src/fields/color.jsx
View file

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import Color from 'color'
import inputStyle from './input.js' import inputStyle from './input.js'
import { getColor } from 'react-colorpickr/dist/colorfunc'
import ChromePicker from 'react-color/lib/components/chrome/Chrome' import ChromePicker from 'react-color/lib/components/chrome/Chrome'
function formatColor(color) { function formatColor(color) {
@ -35,7 +35,7 @@ class ColorField extends React.Component {
left: 287 left: 287
}}> }}>
<ChromePicker <ChromePicker
color={this.props.value ? getColor(this.props.value) : null} color={this.props.value ? Color(this.props.value).object() : null}
onChange={c => this.props.onChange(formatColor(c))} onChange={c => this.props.onChange(formatColor(c))}
/> />
<div <div

6
src/layers/listitem.jsx
View file

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import Radium from 'radium' import Radium from 'radium'
import Immutable from 'immutable' import Immutable from 'immutable'
import color from 'color' import Color from 'color'
import Heading from 'rebass/dist/Heading' import Heading from 'rebass/dist/Heading'
import Toolbar from 'rebass/dist/Toolbar' import Toolbar from 'rebass/dist/Toolbar'
@ -60,10 +60,10 @@ class LayerListItem extends React.Component {
cursor: 'pointer', cursor: 'pointer',
position: 'relative', position: 'relative',
padding: theme.scale[1], padding: theme.scale[1],
borderColor: color(theme.colors.gray).lighten(0.1).hexString(), borderColor: Color(theme.colors.gray).lighten(0.1).string(),
backgroundColor: theme.colors.gray, backgroundColor: theme.colors.gray,
":hover": { ":hover": {
backgroundColor: color(theme.colors.gray).lighten(0.15).hexString(), backgroundColor: Color(theme.colors.gray).lighten(0.15).string(),
} }
}}> }}>
<LayerTypeDragHandle type={this.props.layerType} /> <LayerTypeDragHandle type={this.props.layerType} />