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

Make editor darker

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-20 20:36:02 +01:00
parent dc097e9f9a
commit 4981747d8b
4 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/Layout.jsx
View file

@ -34,12 +34,12 @@ export default class Layout extends React.Component {
position: 'absolute',
bottom: 0,
height: "100%",
top: 50,
top: 40,
left: 0,
zIndex: 100,
width: 200,
overflow: "hidden",
backgroundColor: colors.gray
backgroundColor: colors.black
}}>
{this.props.layerList}
</div>
@ -47,12 +47,12 @@ export default class Layout extends React.Component {
position: 'absolute',
bottom: 0,
height: "100%",
top: 50,
top: 40,
left: 200,
zIndex: 100,
width: 300,
backgroundColor: colors.gray}
}>
backgroundColor: colors.black
}}>
{this.props.layerEditor}
</div>
{this.props.map}

12
src/components/Toolbar.jsx
View file

@ -101,7 +101,7 @@ export default class Toolbar extends React.Component {
render() {
return <div style={{
position: "fixed",
height: 50,
height: 40,
width: '100%',
zIndex: 100,
left: 0,
@ -121,9 +121,13 @@ export default class Toolbar extends React.Component {
toggle={() => this.toggleSettings.bind(this)}
/>
<InlineBlock>
<Button style={{width: 180, textAlign: 'left'}}>
<img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 40, height: 40, paddingRight: 5, verticalAlign: 'middle'}}/>
<span style={{fontSize: 20 }}>Maputnik</span>
<Button style={{
width: 180,
textAlign: 'left',
backgroundColor: colors.black
}}>
<img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/>
<span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
</Button>
</InlineBlock>
<InlineBlock>

2
src/components/layers/LayerList.jsx
View file

@ -82,7 +82,7 @@ class LayerListContainer extends React.Component {
/>
})
return <ScrollContainer>
<ul style={{ padding: margins[1], margin: 0 }}>
<ul style={{ padding: margins[1], paddingRight: 0, margin: 0 }}>
{layerPanels}
</ul>
</ScrollContainer>

10
src/components/layers/LayerListItem.jsx
View file

@ -45,7 +45,7 @@ class IconAction extends React.Component {
renderIcon() {
const iconStyle = {
fill: colors.gray
fill: colors.black
}
if(this.props.active) {
@ -135,17 +135,17 @@ class LayerListItem extends React.Component {
cursor: 'pointer',
position: 'relative',
padding: margins[1],
borderColor: Color(colors.gray).lighten(0.1).string(),
backgroundColor: colors.gray,
borderColor: Color(colors.black).lighten(0.10).string(),
backgroundColor: colors.black,
}
if(this.state.hover) {
console.log('hooover')
itemStyle.backgroundColor = Color(colors.gray).lighten(0.10)
itemStyle.backgroundColor = Color(colors.black).lighten(0.10).string()
}
if(this.props.isSelected) {
itemStyle.backgroundColor = Color(colors.gray).lighten(0.15)
itemStyle.backgroundColor = Color(colors.black).lighten(0.15).string()
}
const iconProps = {