StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Highlight selected content only instead of whole width of editor

This commit is contained in:
jos 2018-01-03 12:06:54 +01:00
parent 2466b6d4da
commit 14e6315159
4 changed files with 77 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/jsoneditor/components/JSONNode.js
View File

@ -106,7 +106,8 @@ export default class JSONNode extends PureComponent {
this.renderDelimiter('{', 'jsoneditor-delimiter-start'),
!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'),
]
: null,
@ -143,8 +144,8 @@ export default class JSONNode extends PureComponent {
return h('div', {
'data-path': compileJSONPointer(meta.path),
className: this.getContainerClassName(meta.selected, this.state.hover),
onMouseOver: this.handleMouseOver,
onMouseLeave: this.handleMouseLeave
// onMouseOver: this.handleMouseOver,
// onMouseLeave: this.handleMouseLeave
}, [nodeStart, floatingMenu, insertArea, childs, nodeEnd])
}
@ -163,7 +164,8 @@ export default class JSONNode extends PureComponent {
this.renderDelimiter('[', 'jsoneditor-delimiter-start'),
!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'),
]
: null,
@ -199,8 +201,8 @@ export default class JSONNode extends PureComponent {
return h('div', {
'data-path': compileJSONPointer(meta.path),
className: this.getContainerClassName(meta.selected, this.state.hover),
onMouseOver: this.handleMouseOver,
onMouseLeave: this.handleMouseLeave
// onMouseOver: this.handleMouseOver,
// onMouseLeave: this.handleMouseLeave
}, [nodeStart, floatingMenu, insertArea, childs, nodeEnd])
}
@ -228,8 +230,8 @@ export default class JSONNode extends PureComponent {
return h('div', {
'data-path': compileJSONPointer(meta.path),
className: this.getContainerClassName(meta.selected, this.state.hover),
onMouseOver: this.handleMouseOver,
onMouseLeave: this.handleMouseLeave
// onMouseOver: this.handleMouseOver,
// onMouseLeave: this.handleMouseLeave
}, [node, floatingMenu, insertArea])
}
@ -330,11 +332,6 @@ export default class JSONNode extends PureComponent {
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 = '') {
return h('div', {key: text, className: 'jsoneditor-delimiter ' + className}, text)
}

5
src/jsoneditor/components/TreeMode.js
View File

@ -686,6 +686,11 @@ export default class TreeMode extends PureComponent {
}
handleTouchStart = (event) => {
if (event.button !== 0) {
// cancel when left mouse button is not down
return
}
const pointer = this.findESONPointerFromElement(event.target)
const clickedOnEmptySpace = (event.target.nodeName === 'DIV') &&
(event.target.contentEditable !== 'true')

40
src/jsoneditor/components/jsoneditor.css
View File

@ -173,13 +173,13 @@
div.jsoneditor-list {
list-style-type: none;
padding-left: 20px;
border-left: 20px solid transparent;
margin: 0;
font-size: 0; }
/* no left padding for the root div element */
.jsoneditor-contents > div.jsoneditor-list {
padding-left: 2px; }
border-left-width: 2px; }
.jsoneditor-property,
.jsoneditor-value,
@ -231,13 +231,15 @@ div.jsoneditor-list {
.jsoneditor-delimiter,
.jsoneditor-readonly {
color: #9d9d9d; }
color: #9d9d9d;
display: inline-block; }
.jsoneditor-delimiter-start {
margin-left: 5px; }
padding-left: 5px; }
.jsoneditor-delimiter-end {
margin-left: 27px; }
padding-left: 5px;
border-left: 20px solid transparent; }
.jsoneditor-readonly:focus,
.jsoneditor-readonly:hover {
@ -559,24 +561,24 @@ div.jsoneditor-node-container {
width: 60px;
height: 20px;
background: inherit; }
div.jsoneditor-node-container.jsoneditor-hover {
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; }
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-after {
background-color: inherit; }
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-after > div.jsoneditor-insert-area {
border-color: #ffed99;
div.jsoneditor-node-container.jsoneditor-selected .jsoneditor-node {
background-color: #ffed99; }
div.jsoneditor-node-container.jsoneditor-selected .jsoneditor-delimiter-end {
background-color: #ffed99;
border-left-color: #ffed99; }
div.jsoneditor-node-container.jsoneditor-selected .jsoneditor-list {
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 {
position: absolute;
bottom: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 10px;
white-space: nowrap;

65
src/jsoneditor/components/jsoneditor.scss
View File

@ -129,14 +129,14 @@ $insert-area-height: 6px;
div.jsoneditor-list {
list-style-type: none;
padding-left: 20px;
border-left: 20px solid transparent;
margin: 0;
font-size: 0;
}
/* no left padding for the root div element */
.jsoneditor-contents > div.jsoneditor-list {
padding-left: 2px;
border-left-width: 2px;
}
.jsoneditor-property,
@ -208,14 +208,16 @@ div.jsoneditor-list {
.jsoneditor-delimiter,
.jsoneditor-readonly {
color: $gray;
display: inline-block;
}
.jsoneditor-delimiter-start {
margin-left: $input-padding;
padding-left: $input-padding;
}
.jsoneditor-delimiter-end {
margin-left: $line-height + $input-padding + 2px;
padding-left: $input-padding;
border-left: $line-height solid transparent;
}
.jsoneditor-readonly:focus,
@ -631,36 +633,51 @@ div.jsoneditor-node-container {
}
}
&.jsoneditor-hover {
background-color: $hoverColor;
&.jsoneditor-hover-insert-area-after {
background-color: inherit;
> div.jsoneditor-insert-area {
border-color: $hoverColor;
background-color: $hoverColor;
}
}
}
//&.jsoneditor-hover {
// > .jsoneditor-node > .jsoneditor-delimiter-start,
// > .jsoneditor-delimiter-end {
// color: $theme-color;
// font-weight: bold;
// }
//}
&.jsoneditor-selected {
background-color: $selectedColor;
&.jsoneditor-selected-insert-area-after {
background-color: inherit;
> div.jsoneditor-insert-area {
border-color: $selectedColor;
.jsoneditor-node {
background-color: $selectedColor;
}
.jsoneditor-delimiter-end {
background-color: $selectedColor;
border-left-color: $selectedColor;
}
.jsoneditor-list {
border-left-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 {
position: absolute;
bottom: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 10px;