Fix the scrolling CSS disaster

This commit is contained in:
Lukas Martinelli 2016-12-21 12:06:33 +01:00
parent c776d19aed
commit 8fc8dfd4f6
5 changed files with 46 additions and 20 deletions

View file

@ -1,4 +1,5 @@
import React from 'react'
import ScrollContainer from './ScrollContainer'
import theme from '../config/rebass'
import colors from '../config/colors'
@ -31,29 +32,33 @@ export default class Layout extends React.Component {
}}>
{this.props.toolbar}
<div style={{
position: 'absolute',
position: 'fixed',
bottom: 0,
height: "100%",
top: 40,
left: 0,
zIndex: 100,
zIndex: 1,
width: 200,
overflow: "hidden",
backgroundColor: colors.black
}}>
{this.props.layerList}
<ScrollContainer>
{this.props.layerList}
</ScrollContainer>
</div>
<div style={{
position: 'absolute',
position: 'fixed',
bottom: 0,
height: "100%",
top: 40,
left: 200,
zIndex: 100,
zIndex: 1,
width: 300,
backgroundColor: colors.black
}}>
{this.props.layerEditor}
<ScrollContainer>
{this.props.layerEditor}
</ScrollContainer>
</div>
{this.props.map}
</div>

View file

@ -3,6 +3,7 @@ import scrollbars from './scrollbars.scss'
const ScrollContainer = (props) => {
return <div className={scrollbars.darkScrollbar} style={{
overflowX: "visible",
overflowY: "scroll",
bottom:0,
left:0,

View file

@ -22,7 +22,27 @@ class ColorField extends React.Component {
constructor(props) {
super(props)
this.state = {
pickerOpened: false
pickerOpened: false,
}
}
//TODO: I much rather would do this with absolute positioning
//but I am too stupid to get it to work together with fixed position
//and scrollbars so I have to fallback to JavaScript
calcPickerOffset() {
const elem = this.refs.colorInput
if(elem) {
const pos = elem.getBoundingClientRect()
return {
top: pos.top,
left: pos.left + 165,
}
} else {
console.log('No elem!!')
return {
top: 160,
left: 500,
}
}
}
@ -35,10 +55,13 @@ class ColorField extends React.Component {
}
render() {
const picker = <div style={{
position: 'absolute',
left: 163,
top: 0,
const offset = this.calcPickerOffset()
const picker = <div
style={{
position: 'fixed',
zIndex: 1,
left: offset.left,
top: offset.top,
}}>
<ChromePicker
color={this.color.object()}
@ -53,7 +76,8 @@ class ColorField extends React.Component {
right: '0px',
bottom: '0px',
left: '0px',
}} />
}}
/>
</div>
return <div style={{
@ -63,6 +87,7 @@ class ColorField extends React.Component {
}}>
{this.state.pickerOpened && picker}
<input
ref="colorInput"
onClick={this.togglePicker.bind(this)}
style={{
...input.select,

View file

@ -5,8 +5,6 @@ import FilterEditor from '../filter/FilterEditor'
import PropertyGroup from '../fields/PropertyGroup'
import LayerEditorGroup from './LayerEditorGroup'
import ScrollContainer from '../ScrollContainer'
import layout from '../../config/layout.json'
import theme from '../../config/rebass.js'

View file

@ -3,7 +3,6 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
import cloneDeep from 'lodash.clonedeep'
import LayerListItem from './LayerListItem'
import ScrollContainer from '../ScrollContainer'
import style from '../../libs/style.js'
import { margins } from '../../config/scales.js'
@ -76,11 +75,9 @@ class LayerListContainer extends React.Component {
onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
/>
})
return <ScrollContainer>
<ul style={{ padding: margins[1], paddingRight: 0, margin: 0 }}>
{layerPanels}
</ul>
</ScrollContainer>
return <ul style={{ padding: margins[1], paddingRight: 0, margin: 0 }}>
{layerPanels}
</ul>
}
}