Merge pull request #599 from sosedoff/resizable-query-height

Make query input box resizable

static/css/app.css

@@ -283,18 +283,34 @@
 }
 
 #input {
-  height: 255px;
+  width: 100%;
+  height: 300px;
+  position: relative;
 }
 
-#input .wrapper {
+#input .input-wrapper {
-  position: relative;
+  height: 250px;
+  padding-top: 12px;
+}
+
+#input_resize_handler {
+  width: 100%;
+  height: 1px;
+  background: #ddd;
+  cursor: row-resize;
+  position: absolute;
+  bottom: 0px;
+}
+
+#input_resize_handler:hover, #input_resize_handler.dragging {
+  height: 3px;
 }
 
 #input .actions {
   background: #fff;
   padding: 10px;
   height: 50px;
-  border-bottom: solid 1px #ddd;
+  bottom: 0px;
 }
 
 #input .actions #result-rows-count {
@@ -363,13 +379,10 @@
   margin-right: 0px;
 }
 
-#objects {
-}
-
 #output {
   position: absolute;
   left: 0px;
-  top: 256px;
+  top: 300px;
   bottom: 0px;
   right: 0px;
   margin: 0px;
@@ -591,8 +604,7 @@
 /* -------------------------------------------------------------------------- */
 
 #custom_query {
-  height: 193px;
+  height: 238px;
-  margin-top: 12px;
 }
 
 #connection_window {

static/index.html

@@ -73,28 +73,29 @@
     </div>
     <div id="body">
       <div id="input">
-        <div class="wrapper">
+        <div class="input-wrapper">
           <div id="custom_query"></div>
-          <div class="actions">
+        </div>
-            <input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
+        <div class="actions">
-            <div id="explain-dropdown" class="btn-group left">
+          <input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
-              <button id="explain-dropdown-toggle" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+          <div id="explain-dropdown" class="btn-group left">
-                Explain Query <span class="caret"></span>
+            <button id="explain-dropdown-toggle" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-              </button>
+              Explain Query <span class="caret"></span>
-              <ul class="dropdown-menu" role="menu">
+            </button>
-                <li><a href="#" id="explain">Explain Query</a></li>
+            <ul class="dropdown-menu" role="menu">
-                <li><a href="#" id="analyze">Analyze Query</a></li>
+              <li><a href="#" id="explain">Explain Query</a></li>
-              </ul>
+              <li><a href="#" id="analyze">Analyze Query</a></li>
-            </div>
+            </ul>
-            <div id="query_progress">Please wait, query is executing...</div>
+          </div>
-            <div class="pull-right">
+          <div id="query_progress">Please wait, query is executing...</div>
-              <span id="result-rows-count"></span>
+          <div class="pull-right">
-              <input type="button" id="json" value="JSON" class="btn btn-sm btn-default" />
+            <span id="result-rows-count"></span>
-              <input type="button" id="csv" value="CSV" class="btn btn-sm btn-default" />
+            <input type="button" id="json" value="JSON" class="btn btn-sm btn-default" />
-              <input type="button" id="xml" value="XML" class="btn btn-sm btn-default" />
+            <input type="button" id="csv" value="CSV" class="btn btn-sm btn-default" />
-            </div>
+            <input type="button" id="xml" value="XML" class="btn btn-sm btn-default" />
           </div>
         </div>
+        <div id="input_resize_handler"></div>
       </div>
       <div id="output">
         <div class="wrapper">

static/js/app.js

@@ -4,6 +4,8 @@ var bookmarks           = {};
 var default_rows_limit  = 100;
 var currentObject       = null;
 var autocompleteObjects = [];
+var inputResizing       = false;
+var inputResizeOffset   = null;
 
 var filterOptions = {
   "equal":      "= 'DATA'",
@@ -1247,7 +1249,78 @@ function enableDatabaseSearch(data) {
   });
 }
 
+function bindInputResizeEvents() {
+  var height = sessionStorage.getItem("input_height");
+  if (height) {
+    resizeInput(height);
+    checkInputSize();
+  }
+
+  $("body").on("mousemove", onInputResize);
+  $("body").on("mouseup", endInputResize);
+  $("#input_resize_handler").on("mousedown", beginInputResize);
+  $(window).on("resize", checkInputSize);
+}
+
+function checkInputSize() {
+  var inputHeight = $("#input").height();
+  var bodyHeight = $("#body").height();
+
+  if (bodyHeight == 0 || inputHeight == 0) return;
+
+  if (inputHeight > bodyHeight || bodyHeight - inputHeight < 200) {
+    resizeInput(bodyHeight - 200);
+  }
+}
+
+function resizeInput(height) {
+  if (height < 100) height = 100;
+
+  var diff = 50 + 12; // actions box + padding
+
+  $("#input").height(height);
+  $("#input .input-wrapper").height(height - diff);
+  $("#custom_query").height(height - diff);
+  $("#output").css("top", height + "px");
+
+  if (editor) {
+    editor.resize();
+  }
+}
+
+function beginInputResize() {
+  inputResizing = true;
+  inputResizeOffset = $("#input").offset().top;
+
+  $("html").css("cursor", "row-resize");
+  $("#input_resize_handler").addClass("dragging");
+}
+
+function endInputResize() {
+  if (!inputResizing) return;
+
+  inputResizing = false;
+  inputResizeOffset = null;
+
+  $("html").css("cursor", "auto");
+  $("#input_resize_handler").removeClass("dragging");
+
+  // Save current settings for page reloads
+  sessionStorage.setItem("input_height", $("#input").height());
+}
+
+function onInputResize(event) {
+  if (!inputResizing) return;
+
+  var computedHeight = event.clientY - inputResizeOffset;
+  if (computedHeight < 150) computedHeight = 150;
+
+  resizeInput(computedHeight);
+}
+
 $(document).ready(function() {
+  bindInputResizeEvents();
+
   $("#table_content").on("click",     function() { showTableContent();     });
   $("#table_structure").on("click",   function() { showTableStructure();   });
   $("#table_indexes").on("click",     function() { showTableIndexes();     });
@@ -1627,3 +1700,4 @@ $(document).ready(function() {
 
   bindDatabaseObjectsFilter();
 });
+