Update context menu.

src/_h5ai/client/css/inc/contextmenu.less

@@ -14,6 +14,8 @@
 
 
 .cm-panel {
+    .popup();
+    .rounded();
     display: block;
     position: absolute;
     left: 100px;
@@ -21,7 +23,6 @@
     background: #fff;
     color: @col;
     z-index: 10;
-    box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
     overflow: auto;
     min-width: 200px;
 
@@ -44,7 +45,7 @@
 
             &:hover {
                 color: @col-hover;
-                background: rgba(0,0,0,0.05);
+                background: @col-darkgray;
             }
 
             .cm-icon {

src/_h5ai/client/css/inc/general.less

@@ -94,6 +94,10 @@
     box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
 }
 
+.popup() {
+    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.5);
+}
+
 .rounded() {
     // overflow: hidden;
     border-radius: 2px;

src/_h5ai/client/js/inc/ext/contextmenu.js

@@ -1,6 +1,8 @@
-modulejs.define('ext/contextmenu', ['$', '_', 'core/resource'], function ($, _, resource) {
-
+modulejs.define('ext/contextmenu', ['_', '$', 'core/settings', 'core/resource'], function (_, $, allsettings, resource) {
 
+    var settings = _.extend({
+            enabled: false
+        }, allsettings.contextmenu);
     var templateOverlay = '<div class="cm-overlay"/>';
     var templatePanel = '<div class="cm-panel"><ul/></div>';
     var templateSep = '<li class="cm-sep"/>';
@@ -135,6 +137,10 @@ modulejs.define('ext/contextmenu', ['$', '_', 'core/resource'], function ($, _,
 
     function init() {
 
+        if (!settings.enabled) {
+            return;
+        }
+
         $(document).on('contextmenu', function (ev) {
 
             ev.stopPropagation();

src/_h5ai/conf/options.json

@@ -59,6 +59,13 @@ Options
         "interval": 5000
     },
 
+    /*
+    Use a context menu (right-click) on selected elements.
+    */
+    "contextmenu": {
+        "enabled": true
+    },
+
     /*
     Show a clickable breadcrumb.
     */