From 56fc3164ecc95b7c61a61912aaa69f53fb198dc7 Mon Sep 17 00:00:00 2001 From: jos Date: Sun, 21 Aug 2016 13:43:28 +0200 Subject: [PATCH] Implemented menu with expand all / collapse all buttons --- src/TreeMode.js | 51 ++++++++++++++++++++++++++++++------- src/develop.html | 5 ++++ src/jsoneditor.less | 62 ++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 105 insertions(+), 13 deletions(-) diff --git a/src/TreeMode.js b/src/TreeMode.js index 70b0ea4..cc4abc8 100644 --- a/src/TreeMode.js +++ b/src/TreeMode.js @@ -45,15 +45,30 @@ export default class TreeMode extends Component { } render (props, state) { - return h('div', {class: 'jsoneditor', contentEditable: 'false', onClick: JSONNode.hideContextMenu}, [ - h('ul', {class: 'jsoneditor-list', contentEditable: 'false'}, [ - h(JSONNode, { - data: state.data, - events: state.events, - options: state.options, - parent: null, - prop: null - }) + return h('div', {class: 'jsoneditor'}, [ + h('div', {class: 'jsoneditor-menu'}, [ + h('button', { + class: 'jsoneditor-expand-all', + title: 'Expand all objects and arrays', + onClick: this.handleExpandAll + }), + h('button', { + class: 'jsoneditor-collapse-all', + title: 'Collapse all objects and arrays', + onClick: this.handleCollapseAll + }) + ]), + + h('div', {class: 'jsoneditor-treemode', contentEditable: 'false', onClick: JSONNode.hideContextMenu}, [ + h('ul', {class: 'jsoneditor-list', contentEditable: 'false'}, [ + h(JSONNode, { + data: state.data, + events: state.events, + options: state.options, + parent: null, + prop: null + }) + ]) ]) ]) } @@ -123,6 +138,24 @@ export default class TreeMode extends Component { } } + handleExpandAll = () => { + const all = (path) => true + const expanded = true + + this.setState({ + data: expand(this.state.data, all, expanded) + }) + } + + handleCollapseAll = () => { + const all = (path) => true + const expanded = false + + this.setState({ + data: expand(this.state.data, all, expanded) + }) + } + /** * Set JSON object in editor * @param {Object | Array | string | number | boolean | null} json JSON data diff --git a/src/develop.html b/src/develop.html index f730186..58a9a14 100644 --- a/src/develop.html +++ b/src/develop.html @@ -4,6 +4,11 @@ Develop JSONEditor Next +

diff --git a/src/jsoneditor.less b/src/jsoneditor.less index 7acdcb6..059f087 100644 --- a/src/jsoneditor.less +++ b/src/jsoneditor.less @@ -1,9 +1,64 @@ .jsoneditor { border: 1px solid #3883fa; - overflow: auto; + width: 100%; height: 100%; min-height: 150px; + + display: inline-flex; + flex-direction: column; +} + +.jsoneditor-menu { + width: 100%; + box-sizing: border-box; + + color: white; + background-color: #3883fa; + border-bottom: 1px solid #3883fa; + flex: 0 0 auto; + + button { + width: 26px; + height: 26px; + margin: 2px; + padding: 0; + border-radius: 2px; + border: 1px solid transparent; + background: transparent url('img/jsoneditor-icons.svg'); + color: white; + opacity: 0.8; + + font-family: arial, sans-serif; + font-size: 10pt; + } + + button:hover { + background-color: rgba(255,255,255,0.2); + border: 1px solid rgba(255,255,255,0.4); + } + button:focus, + button:active { + background-color: rgba(255,255,255,0.3); + } + button:disabled { + opacity: 0.5; + } + + button.jsoneditor-expand-all { + background-position: 0 -120px; + } + + button.jsoneditor-collapse-all { + background-position: 0 -96px; + } +} + +.jsoneditor-treemode { + width: 100%; + height: 100%; + overflow: auto; padding: 2px 0; + flex: 1 1 auto; } .jsoneditor-node { @@ -11,13 +66,12 @@ font: 14px Arial; - /* flexbox setup */ display: inline-flex; flex-direction: row; } .jsoneditor-node > div { - flex: 1 1 auto; + flex: 0 0 auto; } ul.jsoneditor-list { @@ -36,7 +90,6 @@ ul.jsoneditor-list { .jsoneditor-value, .jsoneditor-readonly, .jsoneditor-separator { - flex: 1 1 auto; line-height: 20px; font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif; @@ -62,6 +115,7 @@ ul.jsoneditor-list { .jsoneditor-property, .jsoneditor-value { border-radius: 1px; + flex: 1 1 auto !important; } .jsoneditor-property:focus,