Add show references to context menu

Also bump select2 version

bin/libs/jquery.contextMenu.js

@@ -124,6 +124,9 @@
             // This overrides the reposition option.
             hideOnSecondTrigger: false,
 
+            // use a modal layer for closing the menu rather than a captured event on document
+            useModal: true,
+
             //ability to select submenu
             selectableSubMenu: false,
 
@@ -1515,9 +1518,7 @@
                 return hasVisibleItems;
             },
             layer: function (opt, zIndex) {
-                // TODO: add this to the contextmenu options
-                var useLayer = false;
-                if (!useLayer) {
+                if (!opt.useModal) {
                     var listener = function (ev) {
                         handle.layerClick(ev, opt, () => {
                             document.removeEventListener('mousedown', listener, true);

bin/libs/select2.css

@@ -18,6 +18,8 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap; }
+    .select2-container .select2-selection--single .select2-selection__clear {
+      position: relative; }
   .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
     padding-right: 8px;
     padding-left: 20px; }
@@ -40,7 +42,8 @@
       box-sizing: border-box;
       border: none;
       font-size: 100%;
-      margin-top: 5px; }
+      margin-top: 5px;
+      padding: 0; }
       .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
         -webkit-appearance: none; }
 
@@ -113,14 +116,16 @@
   filter: alpha(opacity=0); }
 
 .select2-hidden-accessible {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
+  border: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; }
 
 .select2-container--default .select2-selection--single {
   background-color: #fff;
@@ -152,19 +157,24 @@
       position: absolute;
       top: 50%;
       width: 0; }
+
 .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
   float: left; }
+
 .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
   left: 1px;
   right: auto; }
+
 .select2-container--default.select2-container--disabled .select2-selection--single {
   background-color: #eee;
   cursor: default; }
   .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
     display: none; }
+
 .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
   border-color: transparent transparent #888 transparent;
   border-width: 0 4px 5px 4px; }
+
 .select2-container--default .select2-selection--multiple {
   background-color: white;
   border: 1px solid #aaa;
@@ -176,6 +186,8 @@
     margin: 0;
     padding: 0 5px;
     width: 100%; }
+    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
+      list-style: none; }
   .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
     color: #999;
     margin-top: 5px;
@@ -203,43 +215,60 @@
     margin-right: 2px; }
     .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
       color: #333; }
-.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder {
+
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
   float: right; }
+
 .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
   margin-left: 5px;
   margin-right: auto; }
+
 .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
   margin-left: 2px;
   margin-right: auto; }
+
 .select2-container--default.select2-container--focus .select2-selection--multiple {
   border: solid black 1px;
   outline: 0; }
+
 .select2-container--default.select2-container--disabled .select2-selection--multiple {
   background-color: #eee;
   cursor: default; }
+
 .select2-container--default.select2-container--disabled .select2-selection__choice__remove {
   display: none; }
+
 .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
   border-top-left-radius: 0;
   border-top-right-radius: 0; }
+
 .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0; }
+
 .select2-container--default .select2-search--dropdown .select2-search__field {
   border: 1px solid #aaa; }
+
 .select2-container--default .select2-search--inline .select2-search__field {
   background: transparent;
   border: none;
-  outline: 0; }
+  outline: 0;
+  box-shadow: none;
+  -webkit-appearance: textfield; }
+
 .select2-container--default .select2-results > .select2-results__options {
   max-height: 200px;
   overflow-y: auto; }
+
 .select2-container--default .select2-results__option[role=group] {
   padding: 0; }
+
 .select2-container--default .select2-results__option[aria-disabled=true] {
   color: #999; }
+
 .select2-container--default .select2-results__option[aria-selected=true] {
   background-color: #ddd; }
+
 .select2-container--default .select2-results__option .select2-results__option {
   padding-left: 1em; }
   .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
@@ -259,24 +288,26 @@
           .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
             margin-left: -5em;
             padding-left: 6em; }
+
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: #5897fb;
   color: white; }
+
 .select2-container--default .select2-results__group {
   cursor: default;
   display: block;
   padding: 6px; }
 
 .select2-container--classic .select2-selection--single {
-  background-color: #f6f6f6;
+  background-color: #f7f7f7;
   border: 1px solid #aaa;
   border-radius: 4px;
   outline: 0;
-  background-image: -webkit-linear-gradient(top, #ffffff 50%, #eeeeee 100%);
-  background-image: -o-linear-gradient(top, #ffffff 50%, #eeeeee 100%);
-  background-image: linear-gradient(to bottom, #ffffff 50%, #eeeeee 100%);
+  background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
+  background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
+  background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); }
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
   .select2-container--classic .select2-selection--single:focus {
     border: 1px solid #5897fb; }
   .select2-container--classic .select2-selection--single .select2-selection__rendered {
@@ -304,7 +335,7 @@
     background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
     background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
     background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0); }
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
     .select2-container--classic .select2-selection--single .select2-selection__arrow b {
       border-color: #888 transparent transparent transparent;
       border-style: solid;
@@ -316,8 +347,10 @@
       position: absolute;
       top: 50%;
       width: 0; }
+
 .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
   float: left; }
+
 .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
   border: none;
   border-right: 1px solid #aaa;
@@ -326,6 +359,7 @@
   border-bottom-left-radius: 4px;
   left: 1px;
   right: auto; }
+
 .select2-container--classic.select2-container--open .select2-selection--single {
   border: 1px solid #5897fb; }
   .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
@@ -334,24 +368,27 @@
     .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
       border-color: transparent transparent #888 transparent;
       border-width: 0 4px 5px 4px; }
+
 .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  background-image: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
-  background-image: -o-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
-  background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 50%);
+  background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
+  background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
+  background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); }
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
+
 .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  background-image: -webkit-linear-gradient(top, #eeeeee 50%, #ffffff 100%);
-  background-image: -o-linear-gradient(top, #eeeeee 50%, #ffffff 100%);
-  background-image: linear-gradient(to bottom, #eeeeee 50%, #ffffff 100%);
+  background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
+  background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
+  background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); }
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }
+
 .select2-container--classic .select2-selection--multiple {
   background-color: white;
   border: 1px solid #aaa;
@@ -383,49 +420,65 @@
     margin-right: 2px; }
     .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
       color: #555; }
+
 .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
-  float: right; }
-.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+  float: right;
   margin-left: 5px;
   margin-right: auto; }
+
 .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
   margin-left: 2px;
   margin-right: auto; }
+
 .select2-container--classic.select2-container--open .select2-selection--multiple {
   border: 1px solid #5897fb; }
+
 .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0; }
+
 .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0; }
+
 .select2-container--classic .select2-search--dropdown .select2-search__field {
   border: 1px solid #aaa;
   outline: 0; }
+
 .select2-container--classic .select2-search--inline .select2-search__field {
-  outline: 0; }
+  outline: 0;
+  box-shadow: none; }
+
 .select2-container--classic .select2-dropdown {
   background-color: white;
   border: 1px solid transparent; }
+
 .select2-container--classic .select2-dropdown--above {
   border-bottom: none; }
+
 .select2-container--classic .select2-dropdown--below {
   border-top: none; }
+
 .select2-container--classic .select2-results > .select2-results__options {
   max-height: 200px;
   overflow-y: auto; }
+
 .select2-container--classic .select2-results__option[role=group] {
   padding: 0; }
+
 .select2-container--classic .select2-results__option[aria-disabled=true] {
   color: grey; }
+
 .select2-container--classic .select2-results__option--highlighted[aria-selected] {
   background-color: #3875d7;
   color: white; }
+
 .select2-container--classic .select2-results__group {
   cursor: default;
   display: block;
   padding: 6px; }
+
 .select2-container--classic.select2-container--open .select2-dropdown {
   border-color: #5897fb; }

hide/comp/ContextMenu.hx

@@ -30,6 +30,7 @@ class ContextMenu {
 				opt.$menu.css({ left: ide.mouseX, top: ide.mouseY });
 			},
 			zIndex: CONTEXTMENU_LAYER + 2,
+			useModal: false,
 		}
 		// wait until mousedown to get correct mouse pos
 		haxe.Timer.delay(function() {

hide/comp/cdb/Cell.hx

@@ -96,6 +96,15 @@ class Cell extends Component {
 	function showMenu() {
 		var menu : Array<hide.comp.ContextMenu.ContextMenuItem> = null;
 		switch( column.type ) {
+		case TId:
+			if( value != null && value != "" )
+				menu = [
+					{
+						label : "Show references",
+						click : () -> editor.showReferences(this.value),
+						keys : this.editor.config.get("key.cdb.showReferences"),
+					},
+				];
 		case TRef(_):
 			if( value != null && value != "" )
 				menu = [

hide/comp/cdb/Editor.hx

@@ -113,7 +113,7 @@ class Editor extends Component {
 		keys.register("copy", onCopy);
 		keys.register("paste", onPaste);
 		keys.register("delete", onDelete);
-		keys.register("cdb.showReferences", showReferences);
+		keys.register("cdb.showReferences", () -> showReferences());
 		keys.register("undo", function() undo.undo());
 		keys.register("redo", function() undo.redo());
 		keys.register("cdb.moveBack", () -> cursorJump(true));
@@ -748,17 +748,18 @@ class Editor extends Component {
 		inRefreshAll = false;
 	}
 
-	function showReferences() {
+	public function showReferences(?id: String) {
 		if( cursor.table == null ) return;
 
-		var id = null;
 		var sheet = cursor.table.sheet;
-		for( c in sheet.columns ) {
-			switch( c.type ) {
-			case TId:
-				id = Reflect.field(sheet.lines[cursor.y], c.name);
-				break;
-			default:
+		if( id == null) {
+			for( c in sheet.columns ) {
+				switch( c.type ) {
+				case TId:
+					id = Reflect.field(sheet.lines[cursor.y], c.name);
+					break;
+				default:
+				}
 			}
 		}
 		if( id == null ) return;