diff --git a/HISTORY.md b/HISTORY.md index 6b32f69..4ec0d1e 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -5,9 +5,10 @@ https://github.com/josdejong/jsoneditor ## not yet published, version 7.2.1 -- Fixed #828: do not expand/collapse when clicking the text of a node in modes - `view` or `form`. - Fixed #826: editor not allowing indentation `0`. +- Fixed #828: do not expand/collapse when clicking the text of a node + in modes `view` or `form`. +- Fixed #829: z-index issue of context-menu button and conflicting css names. ## 2019-10-23, version 7.2.0 diff --git a/src/js/Node.js b/src/js/Node.js index c183f3d..03b7f22 100644 --- a/src/js/Node.js +++ b/src/js/Node.js @@ -1986,7 +1986,7 @@ export class Node { const menu = document.createElement('button') menu.type = 'button' dom.menu = menu - menu.className = 'jsoneditor-button jsoneditor-contextmenu' + menu.className = 'jsoneditor-button jsoneditor-contextmenu-button' menu.title = translate('actionsMenu') tdMenu.appendChild(dom.menu) dom.tr.appendChild(tdMenu) diff --git a/src/js/appendNodeFactory.js b/src/js/appendNodeFactory.js index 74c51d1..07cf7f4 100644 --- a/src/js/appendNodeFactory.js +++ b/src/js/appendNodeFactory.js @@ -55,7 +55,7 @@ export function appendNodeFactory (Node) { dom.tdMenu = tdMenu const menu = document.createElement('button') menu.type = 'button' - menu.className = 'jsoneditor-button jsoneditor-contextmenu' + menu.className = 'jsoneditor-button jsoneditor-contextmenu-button' menu.title = 'Click to open the actions menu (Ctrl+M)' dom.menu = menu tdMenu.appendChild(dom.menu) diff --git a/src/scss/autocomplete.scss b/src/scss/autocomplete.scss index 870d721..d98aeb8 100644 --- a/src/scss/autocomplete.scss +++ b/src/scss/autocomplete.scss @@ -7,7 +7,6 @@ background: $jse-white; box-shadow: $jse-box-shadow; border: 1px solid $jse-bar-border; - z-index: 100; overflow-x: hidden; overflow-y: auto; cursor: default; diff --git a/src/scss/contextmenu.scss b/src/scss/contextmenu.scss index 9ec946d..15b1c4a 100644 --- a/src/scss/contextmenu.scss +++ b/src/scss/contextmenu.scss @@ -8,7 +8,7 @@ .jsoneditor-contextmenu { position: absolute; box-sizing: content-box; - z-index: 99; + z-index: 1; .jsoneditor-menu { position: relative; left: 0; diff --git a/src/scss/jsoneditor.scss b/src/scss/jsoneditor.scss index db83e47..8f6d67b 100644 --- a/src/scss/jsoneditor.scss +++ b/src/scss/jsoneditor.scss @@ -156,7 +156,7 @@ div { &.jsoneditor-expanded { background-position: 0 -72px; } - &.jsoneditor-contextmenu { + &.jsoneditor-contextmenu-button { background-position: -48px -72px; } &.jsoneditor-invisible { @@ -312,10 +312,10 @@ div.jsoneditor-value.jsoneditor-object, div.jsoneditor-value.jsoneditor-array { min-width: 16px; } -div.jsoneditor-tree button.jsoneditor-contextmenu:hover, -div.jsoneditor-tree button.jsoneditor-contextmenu:focus, -div.jsoneditor-tree button.jsoneditor-contextmenu.jsoneditor-selected, -tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu { +div.jsoneditor-tree button.jsoneditor-contextmenu-button:hover, +div.jsoneditor-tree button.jsoneditor-contextmenu-button:focus, +div.jsoneditor-tree button.jsoneditor-contextmenu-button.jsoneditor-selected, +tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu-button { background-position: -48px -48px; } div.jsoneditor-tree div.jsoneditor-show-more a:hover, @@ -345,11 +345,11 @@ tr.jsoneditor-selected { background-color: $jse-empty; } tr.jsoneditor-selected button.jsoneditor-dragarea, -tr.jsoneditor-selected button.jsoneditor-contextmenu { +tr.jsoneditor-selected button.jsoneditor-contextmenu-button { visibility: hidden; } tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea, -tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu { +tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu-button { visibility: visible; } div.jsoneditor-tree button.jsoneditor-dragarea:hover, @@ -395,7 +395,6 @@ pre.jsoneditor-preview, position: absolute; cursor: auto; width: 200px; - z-index: 999; &.jsoneditor-above { bottom: 32px; left: -98px; diff --git a/src/scss/treepath.scss b/src/scss/treepath.scss index df246cd..a612919 100644 --- a/src/scss/treepath.scss +++ b/src/scss/treepath.scss @@ -10,7 +10,7 @@ white-space: normal; position: absolute; background-color: $jse-light-bg; - z-index: 999; + z-index: 1; box-shadow: $jse-box-shadow; span { &.jsoneditor-treepath-show-all-btn {