schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 02:15:26 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Hack global css instead of copy chromepicker

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-17 22:19:03 +01:00
parent e6ebebfacf
commit 073dcfe387
6 changed files with 23 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.jsx
View file

@ -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 = {

144
src/chromepicker.jsx
View file

@ -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)

2
src/fields/color.jsx
View file

@ -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
View 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;
}

9
src/index.scss
View file

@ -1,9 +0,0 @@
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.app {
}

2
webpack.config.js
View file

@ -29,7 +29,7 @@ loaders.push({
test: /[\/\\]src[\/\\].*\.css/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
'css'
]
});