From 14e6315159550951bbb4c472a367a47a1a91e4e7 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 3 Jan 2018 12:06:54 +0100 Subject: [PATCH] Highlight selected content only instead of whole width of editor --- src/jsoneditor/components/JSONNode.js | 23 ++++---- src/jsoneditor/components/TreeMode.js | 5 ++ src/jsoneditor/components/jsoneditor.css | 40 +++++++------- src/jsoneditor/components/jsoneditor.scss | 65 ++++++++++++++--------- 4 files changed, 77 insertions(+), 56 deletions(-) diff --git a/src/jsoneditor/components/JSONNode.js b/src/jsoneditor/components/JSONNode.js index 1bdfaad..cd2d2e5 100644 --- a/src/jsoneditor/components/JSONNode.js +++ b/src/jsoneditor/components/JSONNode.js @@ -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) } diff --git a/src/jsoneditor/components/TreeMode.js b/src/jsoneditor/components/TreeMode.js index e2dfb60..c4fdc4f 100644 --- a/src/jsoneditor/components/TreeMode.js +++ b/src/jsoneditor/components/TreeMode.js @@ -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') diff --git a/src/jsoneditor/components/jsoneditor.css b/src/jsoneditor/components/jsoneditor.css index 6d7bd89..1eda7a3 100644 --- a/src/jsoneditor/components/jsoneditor.css +++ b/src/jsoneditor/components/jsoneditor.css @@ -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 { + div.jsoneditor-node-container.jsoneditor-selected .jsoneditor-node { 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; - 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; diff --git a/src/jsoneditor/components/jsoneditor.scss b/src/jsoneditor/components/jsoneditor.scss index 9919725..5e17f6e 100644 --- a/src/jsoneditor/components/jsoneditor.scss +++ b/src/jsoneditor/components/jsoneditor.scss @@ -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-node { + background-color: $selectedColor; + } - &.jsoneditor-selected-insert-area-after { - background-color: inherit; + .jsoneditor-delimiter-end { + background-color: $selectedColor; + border-left-color: $selectedColor; + } - > div.jsoneditor-insert-area { - border-color: $selectedColor; - background-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;