mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-11-10 11:07:45 +01:00
Hack global css instead of copy chromepicker
This commit is contained in:
parent
e6ebebfacf
commit
073dcfe387
6 changed files with 23 additions and 156 deletions
|
@ -17,7 +17,7 @@ import { ApiStyleStore } from './apistore.js'
|
|||
|
||||
import theme from './theme.js'
|
||||
import { colors, fullHeight } from './theme.js'
|
||||
import './index.scss'
|
||||
import './index.css'
|
||||
|
||||
export default class App extends React.Component {
|
||||
static childContextTypes = {
|
||||
|
|
|
@ -1,144 +0,0 @@
|
|||
import React from 'react'
|
||||
import reactCSS from 'reactcss'
|
||||
|
||||
import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from 'react-color/lib/components/common'
|
||||
import ChromeFields from 'react-color/lib/components/chrome/ChromeFields'
|
||||
import ChromePointer from 'react-color/lib/components/chrome/ChromePointer'
|
||||
import ChromePointerCircle from 'react-color/lib/components/chrome/ChromePointerCircle'
|
||||
|
||||
import theme from './theme.js'
|
||||
|
||||
export const Chrome = ({ onChange, disableAlpha, rgb, hsl, hsv, hex, renderers }) => {
|
||||
const styles = reactCSS({
|
||||
'default': {
|
||||
picker: {
|
||||
background: theme.colors.secondary,
|
||||
borderRadius: '2px',
|
||||
boxShadow: '0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3)',
|
||||
boxSizing: 'initial',
|
||||
width: '225px',
|
||||
},
|
||||
saturation: {
|
||||
width: '100%',
|
||||
paddingBottom: '55%',
|
||||
position: 'relative',
|
||||
borderRadius: '2px 2px 0 0',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
Saturation: {
|
||||
radius: '2px 2px 0 0',
|
||||
},
|
||||
body: {
|
||||
padding: '16px 16px 12px',
|
||||
},
|
||||
controls: {
|
||||
display: 'flex',
|
||||
},
|
||||
color: {
|
||||
width: '32px',
|
||||
},
|
||||
swatch: {
|
||||
marginTop: '6px',
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
borderRadius: '8px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
active: {
|
||||
absolute: '0px 0px 0px 0px',
|
||||
borderRadius: '8px',
|
||||
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.1)',
|
||||
background: `rgba(${ rgb.r }, ${ rgb.g }, ${ rgb.b }, ${ rgb.a })`,
|
||||
zIndex: '2',
|
||||
},
|
||||
toggles: {
|
||||
flex: '1',
|
||||
},
|
||||
hue: {
|
||||
height: '10px',
|
||||
position: 'relative',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
Hue: {
|
||||
radius: '2px',
|
||||
},
|
||||
alpha: {
|
||||
height: '10px',
|
||||
position: 'relative',
|
||||
},
|
||||
Alpha: {
|
||||
radius: '2px',
|
||||
},
|
||||
},
|
||||
'disableAlpha': {
|
||||
color: {
|
||||
width: '22px',
|
||||
},
|
||||
alpha: {
|
||||
display: 'none',
|
||||
},
|
||||
hue: {
|
||||
marginBottom: '0px',
|
||||
},
|
||||
swatch: {
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
marginTop: '0px',
|
||||
},
|
||||
},
|
||||
}, { disableAlpha })
|
||||
|
||||
return (
|
||||
<div style={ styles.picker } className="chrome-picker">
|
||||
<div style={ styles.saturation }>
|
||||
<Saturation
|
||||
style={ styles.Saturation }
|
||||
hsl={ hsl }
|
||||
hsv={ hsv }
|
||||
pointer={ ChromePointerCircle }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</div>
|
||||
<div style={ styles.body }>
|
||||
<div style={ styles.controls } className="flexbox-fix">
|
||||
<div style={ styles.color }>
|
||||
<div style={ styles.swatch }>
|
||||
<div style={ styles.active } />
|
||||
<Checkboard renderers={ renderers } />
|
||||
</div>
|
||||
</div>
|
||||
<div style={ styles.toggles }>
|
||||
<div style={ styles.hue }>
|
||||
<Hue
|
||||
style={ styles.Hue }
|
||||
hsl={ hsl }
|
||||
pointer={ ChromePointer }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</div>
|
||||
<div style={ styles.alpha }>
|
||||
<Alpha
|
||||
style={ styles.Alpha }
|
||||
rgb={ rgb }
|
||||
hsl={ hsl }
|
||||
pointer={ ChromePointer }
|
||||
renderers={ renderers }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChromeFields
|
||||
rgb={ rgb }
|
||||
hsl={ hsl }
|
||||
hex={ hex }
|
||||
onChange={ onChange }
|
||||
disableAlpha={ disableAlpha }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ColorWrap(Chrome)
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import inputStyle from './input.js'
|
||||
import { getColor } from 'react-colorpickr/dist/colorfunc'
|
||||
import ChromePicker from '../chromepicker.jsx'
|
||||
import ChromePicker from 'react-color/lib/components/chrome/Chrome'
|
||||
|
||||
function formatColor(color) {
|
||||
const rgb = color.rgb
|
||||
|
|
20
src/index.css
Normal file
20
src/index.css
Normal file
|
@ -0,0 +1,20 @@
|
|||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('./fonts/Roboto-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.app {
|
||||
|
||||
}
|
||||
|
||||
.chrome-picker {
|
||||
background-color: #1c1f24 !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
.chrome-picker input {
|
||||
background-color: rgb(38, 40, 46) !important;
|
||||
color: rgb(142, 142, 142) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
|
@ -1,9 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('./fonts/Roboto-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.app {
|
||||
|
||||
}
|
|
@ -29,7 +29,7 @@ loaders.push({
|
|||
test: /[\/\\]src[\/\\].*\.css/,
|
||||
loaders: [
|
||||
'style?sourceMap',
|
||||
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
|
||||
'css'
|
||||
]
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue