Highlight selected content only instead of whole width of editor
This commit is contained in:
parent
2466b6d4da
commit
14e6315159
|
@ -106,7 +106,8 @@ export default class JSONNode extends PureComponent {
|
||||||
this.renderDelimiter('{', 'jsoneditor-delimiter-start'),
|
this.renderDelimiter('{', 'jsoneditor-delimiter-start'),
|
||||||
!meta.expanded
|
!meta.expanded
|
||||||
? [
|
? [
|
||||||
this.renderTag(`${props.length} props`, `Object containing ${props.length} properties`),
|
this.renderTag(`${props.length} ${props.length === 1 ? 'prop' : 'props'}`,
|
||||||
|
`Object containing ${props.length} ${props.length === 1 ? 'property' : 'properties'}`),
|
||||||
this.renderDelimiter('}', 'jsoneditor-delimiter-start'),
|
this.renderDelimiter('}', 'jsoneditor-delimiter-start'),
|
||||||
]
|
]
|
||||||
: null,
|
: null,
|
||||||
|
@ -143,8 +144,8 @@ export default class JSONNode extends PureComponent {
|
||||||
return h('div', {
|
return h('div', {
|
||||||
'data-path': compileJSONPointer(meta.path),
|
'data-path': compileJSONPointer(meta.path),
|
||||||
className: this.getContainerClassName(meta.selected, this.state.hover),
|
className: this.getContainerClassName(meta.selected, this.state.hover),
|
||||||
onMouseOver: this.handleMouseOver,
|
// onMouseOver: this.handleMouseOver,
|
||||||
onMouseLeave: this.handleMouseLeave
|
// onMouseLeave: this.handleMouseLeave
|
||||||
}, [nodeStart, floatingMenu, insertArea, childs, nodeEnd])
|
}, [nodeStart, floatingMenu, insertArea, childs, nodeEnd])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -163,7 +164,8 @@ export default class JSONNode extends PureComponent {
|
||||||
this.renderDelimiter('[', 'jsoneditor-delimiter-start'),
|
this.renderDelimiter('[', 'jsoneditor-delimiter-start'),
|
||||||
!meta.expanded
|
!meta.expanded
|
||||||
? [
|
? [
|
||||||
this.renderTag(`${count} items`, `Array containing ${count} items`),
|
this.renderTag(`${count} ${count === 1 ? 'item' : 'items'}`,
|
||||||
|
`Array containing ${count} item${count === 1 ? 'item' : 'items'}`),
|
||||||
this.renderDelimiter(']', 'jsoneditor-delimiter-start'),
|
this.renderDelimiter(']', 'jsoneditor-delimiter-start'),
|
||||||
]
|
]
|
||||||
: null,
|
: null,
|
||||||
|
@ -199,8 +201,8 @@ export default class JSONNode extends PureComponent {
|
||||||
return h('div', {
|
return h('div', {
|
||||||
'data-path': compileJSONPointer(meta.path),
|
'data-path': compileJSONPointer(meta.path),
|
||||||
className: this.getContainerClassName(meta.selected, this.state.hover),
|
className: this.getContainerClassName(meta.selected, this.state.hover),
|
||||||
onMouseOver: this.handleMouseOver,
|
// onMouseOver: this.handleMouseOver,
|
||||||
onMouseLeave: this.handleMouseLeave
|
// onMouseLeave: this.handleMouseLeave
|
||||||
}, [nodeStart, floatingMenu, insertArea, childs, nodeEnd])
|
}, [nodeStart, floatingMenu, insertArea, childs, nodeEnd])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -228,8 +230,8 @@ export default class JSONNode extends PureComponent {
|
||||||
return h('div', {
|
return h('div', {
|
||||||
'data-path': compileJSONPointer(meta.path),
|
'data-path': compileJSONPointer(meta.path),
|
||||||
className: this.getContainerClassName(meta.selected, this.state.hover),
|
className: this.getContainerClassName(meta.selected, this.state.hover),
|
||||||
onMouseOver: this.handleMouseOver,
|
// onMouseOver: this.handleMouseOver,
|
||||||
onMouseLeave: this.handleMouseLeave
|
// onMouseLeave: this.handleMouseLeave
|
||||||
}, [node, floatingMenu, insertArea])
|
}, [node, floatingMenu, insertArea])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -330,11 +332,6 @@ export default class JSONNode extends PureComponent {
|
||||||
return h('div', {key: 'separator', className: 'jsoneditor-delimiter'}, ':')
|
return h('div', {key: 'separator', className: 'jsoneditor-delimiter'}, ':')
|
||||||
}
|
}
|
||||||
|
|
||||||
renderComma() {
|
|
||||||
// TODO: don't render when it's the last item/prop
|
|
||||||
return h('div', {key: 'comma', className: 'jsoneditor-delimiter'}, ',')
|
|
||||||
}
|
|
||||||
|
|
||||||
renderDelimiter (text, className = '') {
|
renderDelimiter (text, className = '') {
|
||||||
return h('div', {key: text, className: 'jsoneditor-delimiter ' + className}, text)
|
return h('div', {key: text, className: 'jsoneditor-delimiter ' + className}, text)
|
||||||
}
|
}
|
||||||
|
|
|
@ -686,6 +686,11 @@ export default class TreeMode extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleTouchStart = (event) => {
|
handleTouchStart = (event) => {
|
||||||
|
if (event.button !== 0) {
|
||||||
|
// cancel when left mouse button is not down
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const pointer = this.findESONPointerFromElement(event.target)
|
const pointer = this.findESONPointerFromElement(event.target)
|
||||||
const clickedOnEmptySpace = (event.target.nodeName === 'DIV') &&
|
const clickedOnEmptySpace = (event.target.nodeName === 'DIV') &&
|
||||||
(event.target.contentEditable !== 'true')
|
(event.target.contentEditable !== 'true')
|
||||||
|
|
|
@ -173,13 +173,13 @@
|
||||||
|
|
||||||
div.jsoneditor-list {
|
div.jsoneditor-list {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding-left: 20px;
|
border-left: 20px solid transparent;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0; }
|
font-size: 0; }
|
||||||
|
|
||||||
/* no left padding for the root div element */
|
/* no left padding for the root div element */
|
||||||
.jsoneditor-contents > div.jsoneditor-list {
|
.jsoneditor-contents > div.jsoneditor-list {
|
||||||
padding-left: 2px; }
|
border-left-width: 2px; }
|
||||||
|
|
||||||
.jsoneditor-property,
|
.jsoneditor-property,
|
||||||
.jsoneditor-value,
|
.jsoneditor-value,
|
||||||
|
@ -231,13 +231,15 @@ div.jsoneditor-list {
|
||||||
|
|
||||||
.jsoneditor-delimiter,
|
.jsoneditor-delimiter,
|
||||||
.jsoneditor-readonly {
|
.jsoneditor-readonly {
|
||||||
color: #9d9d9d; }
|
color: #9d9d9d;
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
.jsoneditor-delimiter-start {
|
.jsoneditor-delimiter-start {
|
||||||
margin-left: 5px; }
|
padding-left: 5px; }
|
||||||
|
|
||||||
.jsoneditor-delimiter-end {
|
.jsoneditor-delimiter-end {
|
||||||
margin-left: 27px; }
|
padding-left: 5px;
|
||||||
|
border-left: 20px solid transparent; }
|
||||||
|
|
||||||
.jsoneditor-readonly:focus,
|
.jsoneditor-readonly:focus,
|
||||||
.jsoneditor-readonly:hover {
|
.jsoneditor-readonly:hover {
|
||||||
|
@ -559,24 +561,24 @@ div.jsoneditor-node-container {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background: inherit; }
|
background: inherit; }
|
||||||
div.jsoneditor-node-container.jsoneditor-hover {
|
div.jsoneditor-node-container.jsoneditor-selected .jsoneditor-node {
|
||||||
background-color: #d3d3d3; }
|
|
||||||
div.jsoneditor-node-container.jsoneditor-hover.jsoneditor-hover-insert-area-after {
|
|
||||||
background-color: inherit; }
|
|
||||||
div.jsoneditor-node-container.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area {
|
|
||||||
border-color: #d3d3d3;
|
|
||||||
background-color: #d3d3d3; }
|
|
||||||
div.jsoneditor-node-container.jsoneditor-selected {
|
|
||||||
background-color: #ffed99; }
|
background-color: #ffed99; }
|
||||||
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-after {
|
div.jsoneditor-node-container.jsoneditor-selected .jsoneditor-delimiter-end {
|
||||||
background-color: inherit; }
|
background-color: #ffed99;
|
||||||
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-after > div.jsoneditor-insert-area {
|
border-left-color: #ffed99; }
|
||||||
border-color: #ffed99;
|
div.jsoneditor-node-container.jsoneditor-selected .jsoneditor-list {
|
||||||
background-color: #ffed99; }
|
border-left-color: #ffed99; }
|
||||||
|
div.jsoneditor-node-container.jsoneditor-hover > .jsoneditor-node > .jsoneditor-button-container,
|
||||||
|
div.jsoneditor-node-container.jsoneditor-hover > .jsoneditor-node > .jsoneditor-button-placeholder {
|
||||||
|
background-color: #d3d3d3; }
|
||||||
|
div.jsoneditor-node-container.jsoneditor-hover > .jsoneditor-list {
|
||||||
|
border-left-color: #d3d3d3; }
|
||||||
|
div.jsoneditor-node-container.jsoneditor-hover > .jsoneditor-delimiter-end {
|
||||||
|
border-left-color: #d3d3d3; }
|
||||||
div.jsoneditor-node-container div.jsoneditor-floating-menu {
|
div.jsoneditor-node-container div.jsoneditor-floating-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
right: 0;
|
left: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
|
@ -129,14 +129,14 @@ $insert-area-height: 6px;
|
||||||
|
|
||||||
div.jsoneditor-list {
|
div.jsoneditor-list {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding-left: 20px;
|
border-left: 20px solid transparent;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* no left padding for the root div element */
|
/* no left padding for the root div element */
|
||||||
.jsoneditor-contents > div.jsoneditor-list {
|
.jsoneditor-contents > div.jsoneditor-list {
|
||||||
padding-left: 2px;
|
border-left-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jsoneditor-property,
|
.jsoneditor-property,
|
||||||
|
@ -208,14 +208,16 @@ div.jsoneditor-list {
|
||||||
.jsoneditor-delimiter,
|
.jsoneditor-delimiter,
|
||||||
.jsoneditor-readonly {
|
.jsoneditor-readonly {
|
||||||
color: $gray;
|
color: $gray;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jsoneditor-delimiter-start {
|
.jsoneditor-delimiter-start {
|
||||||
margin-left: $input-padding;
|
padding-left: $input-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jsoneditor-delimiter-end {
|
.jsoneditor-delimiter-end {
|
||||||
margin-left: $line-height + $input-padding + 2px;
|
padding-left: $input-padding;
|
||||||
|
border-left: $line-height solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jsoneditor-readonly:focus,
|
.jsoneditor-readonly:focus,
|
||||||
|
@ -631,36 +633,51 @@ div.jsoneditor-node-container {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.jsoneditor-hover {
|
//&.jsoneditor-hover {
|
||||||
background-color: $hoverColor;
|
// > .jsoneditor-node > .jsoneditor-delimiter-start,
|
||||||
|
// > .jsoneditor-delimiter-end {
|
||||||
&.jsoneditor-hover-insert-area-after {
|
// color: $theme-color;
|
||||||
background-color: inherit;
|
// font-weight: bold;
|
||||||
|
// }
|
||||||
> div.jsoneditor-insert-area {
|
//}
|
||||||
border-color: $hoverColor;
|
|
||||||
background-color: $hoverColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.jsoneditor-selected {
|
&.jsoneditor-selected {
|
||||||
background-color: $selectedColor;
|
.jsoneditor-node {
|
||||||
|
background-color: $selectedColor;
|
||||||
|
}
|
||||||
|
|
||||||
&.jsoneditor-selected-insert-area-after {
|
.jsoneditor-delimiter-end {
|
||||||
background-color: inherit;
|
background-color: $selectedColor;
|
||||||
|
border-left-color: $selectedColor;
|
||||||
|
}
|
||||||
|
|
||||||
> div.jsoneditor-insert-area {
|
.jsoneditor-list {
|
||||||
border-color: $selectedColor;
|
border-left-color: $selectedColor;
|
||||||
background-color: $selectedColor;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.jsoneditor-hover {
|
||||||
|
> .jsoneditor-node > .jsoneditor-button-container,
|
||||||
|
> .jsoneditor-node > .jsoneditor-button-placeholder {
|
||||||
|
background-color: $hoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .jsoneditor-list {
|
||||||
|
border-left-color: $hoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .jsoneditor-delimiter-end {
|
||||||
|
//padding-left: $line-height + $input-padding + 2px;
|
||||||
|
border-left-color: $hoverColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
div.jsoneditor-floating-menu {
|
div.jsoneditor-floating-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
right: 0;
|
left: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
|
Loading…
Reference in New Issue