Display cell content via context menu (#634)

static/css/app.css

@@ -625,6 +625,59 @@
   float: left;
 }
 
+#content_modal {
+  display: none;
+  width: 60%;
+  height: 400px;
+  position: fixed;
+  top: 20%;
+  left: 20%;
+  background: #fff;
+  border: 1px solid #ccc;
+  box-shadow: #ddd 0 0 20px;
+}
+
+#content_modal .content {
+  border: 0px none;
+  position: relative;
+  padding: 8px;
+  white-space: break-spaces;
+  background: #fff;
+  overflow-y: scroll;
+  height: 366px;
+  box-sizing: border-box;
+}
+
+#content_modal .title {
+  font-weight: bold;
+  line-height: 24px;
+  background: #f5f5f5;
+  padding: 4px 4px 4px 8px;
+}
+
+#content_modal .actions {
+  float: right;
+}
+
+#content_modal .actions .fa {
+  float: right;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 13px;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-left: 4px;
+}
+
+#content_modal .actions .fa:hover {
+  border-color: #999;
+  box-shadow: #eee 0 0 5px;
+}
+
 /* -------------------------------------------------------------------------- */
 
 #custom_query {

static/index.html

@@ -139,6 +139,17 @@
     </div>
   </div>
 
+  <div id="content_modal">
+    <div class="title">
+      Cell Content
+      <div class="actions">
+        <i class="fa fa-times content-modal-action" data-action="close"></i>
+        <i class="fa fa-copy content-modal-action" data-action="copy"></i>
+      </div>
+    </div>
+    <pre class="content"></pre>
+  </div>
+
   <div id="connection_window">
     <div class="connection-settings">
       <div class="header">
@@ -312,6 +323,7 @@
   </div>
   <div id="results_row_menu">
     <ul class="dropdown-menu" role="menu">
+      <li><a href="#" data-action="display_value">Display Value</a></li>
       <li><a href="#" data-action="copy_value">Copy Value</a></li>
       <li><a href="#" data-action="filter_by_value">Filter Rows By Value</a></li>
     </ul>

static/js/app.js

@@ -1146,6 +1146,11 @@ function bindTableHeaderMenu() {
       var menuItem = $(e.target);
 
       switch(menuItem.data("action")) {
+        case "display_value":
+          var value = $(context).text();
+          $("#content_modal .content").text(value);
+          $("#content_modal").show();
+          break;
         case "copy_value":
           copyToClipboard($(context).text());
           break;
@@ -1375,8 +1380,39 @@ function onInputResize(event) {
   resizeInput(computedHeight);
 }
 
+function bindContentModalEvents() {
+  var contentModal = document.getElementById("content_modal");
+
+  $(window).on("click", function(e) {
+    // Automatically hide the modal on any click outside of the modal window
+    if (e.target && !contentModal.contains(e.target)) {
+      $("#content_modal").hide();
+    }
+  });
+
+  $("#content_modal .content-modal-action").on("click", function() {
+    switch ($(this).data("action")) {
+      case "copy":
+        copyToClipboard($("#content_modal pre").text());
+        break;
+      case "close":
+        $("#content_modal").hide();
+        break;
+    }
+  });
+
+  $("#results").on("dblclick", "td > div", function() {
+    var value = unescapeHtml($(this).html());
+    if (!value) return;
+
+    $("#content_modal pre").html(value);
+    $("#content_modal").show();
+  })
+}
+
 $(document).ready(function() {
   bindInputResizeEvents();
+  bindContentModalEvents();
 
   $("#table_content").on("click",     function() { showTableContent();     });
   $("#table_structure").on("click",   function() { showTableStructure();   });