Fix #829: z-index issue of context-menu button and conflicting css names

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

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)

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)

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;

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;

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;

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 {