schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 15:41:14 +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', position: 'absolute',
bottom: 0, bottom: 0,
height: "100%", height: "100%",
top: 50, top: 40,
left: 0, left: 0,
zIndex: 100, zIndex: 100,
width: 200, width: 200,
overflow: "hidden", overflow: "hidden",
backgroundColor: colors.gray backgroundColor: colors.black
}}> }}>
{this.props.layerList} {this.props.layerList}
</div> </div>
@ -47,12 +47,12 @@ export default class Layout extends React.Component {
position: 'absolute', position: 'absolute',
bottom: 0, bottom: 0,
height: "100%", height: "100%",
top: 50, top: 40,
left: 200, left: 200,
zIndex: 100, zIndex: 100,
width: 300, width: 300,
backgroundColor: colors.gray} backgroundColor: colors.black
}> }}>
{this.props.layerEditor} {this.props.layerEditor}
</div> </div>
{this.props.map} {this.props.map}

12
src/components/Toolbar.jsx
View file

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

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

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

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

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