Fixed insert menu missing before arrays and objects

This commit is contained in:
jos 2017-11-22 11:36:47 +01:00
parent e69868da85
commit 157f63d11a
2 changed files with 11 additions and 7 deletions

View File

@ -104,12 +104,14 @@ export default class JSONNode extends PureComponent {
]) ])
: null : null
const insertArea = this.renderInsertBeforeArea()
return h('div', { return h('div', {
'data-path': compileJSONPointer(this.props.path), 'data-path': compileJSONPointer(this.props.path),
className: this.getContainerClassName(data.selected, this.state.hover), className: this.getContainerClassName(data.selected, this.state.hover),
onMouseOver: this.handleMouseOver, onMouseOver: this.handleMouseOver,
onMouseLeave: this.handleMouseLeave onMouseLeave: this.handleMouseLeave
}, [node, floatingMenu, childs]) }, [node, floatingMenu, insertArea, childs])
} }
// TODO: extract a function renderChilds shared by both renderJSONObject and renderJSONArray (rename .props and .items to .childs?) // TODO: extract a function renderChilds shared by both renderJSONObject and renderJSONArray (rename .props and .items to .childs?)
@ -161,12 +163,14 @@ export default class JSONNode extends PureComponent {
]) ])
: null : null
const insertArea = this.renderInsertBeforeArea()
return h('div', { return h('div', {
'data-path': compileJSONPointer(this.props.path), 'data-path': compileJSONPointer(this.props.path),
className: this.getContainerClassName(data.selected, this.state.hover), className: this.getContainerClassName(data.selected, this.state.hover),
onMouseOver: this.handleMouseOver, onMouseOver: this.handleMouseOver,
onMouseLeave: this.handleMouseLeave onMouseLeave: this.handleMouseLeave
}, [node, floatingMenu, childs]) }, [node, floatingMenu, insertArea, childs])
} }
renderJSONValue ({prop, index, data, options}) { renderJSONValue ({prop, index, data, options}) {

View File

@ -576,13 +576,13 @@ div.jsoneditor-node-container {
&.jsoneditor-hover-insert-area { &.jsoneditor-hover-insert-area {
background-color: @selectedColor; background-color: @selectedColor;
div.jsoneditor-insert-area { > div.jsoneditor-insert-area {
border: 1px dashed gray; border: 1px dashed gray;
background-color: @hoverColor; background-color: @hoverColor;
} }
&.jsoneditor-selected-insert-area { &.jsoneditor-selected-insert-area {
div.jsoneditor-insert-area { > div.jsoneditor-insert-area {
border: 1px dashed #f4af41; border: 1px dashed #f4af41;
background-color: @hoverAndSelectedColor; background-color: @hoverAndSelectedColor;
} }
@ -601,7 +601,7 @@ div.jsoneditor-node-container {
} }
} }
div.jsoneditor-insert-area { > div.jsoneditor-insert-area {
border: 1px dashed #f4af41; border: 1px dashed #f4af41;
background: @selectedColor; background: @selectedColor;
} }
@ -614,7 +614,7 @@ div.jsoneditor-node-container {
&.jsoneditor-hover-insert-area { &.jsoneditor-hover-insert-area {
background-color: inherit; background-color: inherit;
div.jsoneditor-insert-area { > div.jsoneditor-insert-area {
border: 1px dashed #f4af41; border: 1px dashed #f4af41;
background: @hoverAndSelectedColor; background: @hoverAndSelectedColor;
} }
@ -628,7 +628,7 @@ div.jsoneditor-node-container {
&.jsoneditor-hover-insert-area { &.jsoneditor-hover-insert-area {
background-color: inherit; background-color: inherit;
div.jsoneditor-insert-area { > div.jsoneditor-insert-area {
border: 1px dashed gray; border: 1px dashed gray;
background-color: @hoverColor; background-color: @hoverColor;
} }