Merge b202a3c747 into 7fe302ed7c

static/css/app.css

@@ -311,6 +311,15 @@
   padding: 10px;
   height: 50px;
   bottom: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#input .actions .pull-left {
+  display: flex;
+  align-items: center;
+  gap: 2px;
 }
 
 #input .actions #result-rows-count {
@@ -914,3 +923,9 @@
 .ace_autocomplete .ace_active-line {
   background: #eee !important;
 }
+
+.editor-modes {
+  position: absolute;
+  top:5px;
+  right:0px;
+}

static/index.html

@@ -77,24 +77,38 @@
           <div id="custom_query"></div>
         </div>
         <div class="actions">
-          <input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
-          <div id="explain-dropdown" class="btn-group left">
-            <button id="explain-dropdown-toggle" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-              Explain Query <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu" role="menu">
-              <li><a href="#" id="explain">Explain Query</a></li>
-              <li><a href="#" id="analyze">Analyze Query</a></li>
-            </ul>
+          <div class="pull-left">
+            <input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
+            <div id="explain-dropdown" class="btn-group left">
+              <button id="explain-dropdown-toggle" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                Explain Query <span class="caret"></span>
+              </button>
+              <ul class="dropdown-menu" role="menu">
+                <li><a href="#" id="explain">Explain Query</a></li>
+                <li><a href="#" id="analyze">Analyze Query</a></li>
+              </ul>
+            </div>
+            <div class="editor-modes">
+              <div id="editor-dropdown" class="btn-group left">
+                <button id="editor-dropdown-toggle" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                 <i class="fa fa-cog"></i>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                  <li class="active" id="norm-mode"><a href="#" >Normal</a></li>
+                  <li  id="vim-mode"><a href="#" >Vim</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="load-query-dropdown" class="btn-group left" style="display: none">
+              <button id="load-local-query" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
+                Template <span class="caret"></span>
+              </button>
+              <ul class="dropdown-menu" role="menu">
+              </ul>
+            </div>
+            <div id="query_progress">Please wait, query is executing...</div>
           </div>
-          <div id="load-query-dropdown" class="btn-group left" style="display: none">
-            <button id="load-local-query" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
-              Template <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu" role="menu">
-            </ul>
-          </div>
-          <div id="query_progress">Please wait, query is executing...</div>
+
           <div class="pull-right">
             <span id="result-rows-count"></span>
             <input type="button" id="json" value="JSON" class="btn btn-sm btn-default" />

static/js/app.js

@@ -1019,6 +1019,7 @@ var objectAutocompleter = {
 
 function initEditor() {
   var writeQueryTimeout = null;
+  var lastSelectedMode = localStorage.getItem("editorMode") || null;
 
   editor = ace.edit("custom_query");
   editor.setOptions({
@@ -1033,6 +1034,7 @@ function initEditor() {
   editor.getSession().setMode("ace/mode/pgsql");
   editor.getSession().setTabSize(2);
   editor.getSession().setUseSoftTabs(true);
+  editor.setKeyboardHandler(lastSelectedMode);
 
   editor.commands.addCommands([{
     name: "run_query",
@@ -1069,6 +1071,25 @@ function initEditor() {
     editor.setValue(query);
     editor.clearSelection();
   }
+
+  if(lastSelectedMode == "ace/keyboard/vim") {
+    $("#vim-mode").addClass("active");
+    $("#norm-mode").removeClass("active");
+  }
+
+  $("#vim-mode").click(function () {
+    editor.setKeyboardHandler("ace/keyboard/vim");
+    $("#vim-mode").addClass("active");
+    $("#norm-mode").removeClass("active");
+    localStorage.setItem("editorMode", "ace/keyboard/vim");
+  })
+
+  $("#norm-mode").click(function () {
+    editor.setKeyboardHandler(null);
+    $("#norm-mode").addClass("active");
+    $("#vim-mode").removeClass("active");
+    localStorage.setItem("editorMode", null);
+  })
 }
 
 function addShortcutTooltips() {