UX: make SQL editor resizable (#33)

.gitignore

@@ -5,5 +5,6 @@ auto_generated
 Gemfile.lock
 .DS_Store
 *.swp
+*.swo
 
 .rubocop-https---raw-githubusercontent-com-discourse-discourse-master--rubocop-yml

assets/javascripts/discourse/components/explorer-container.js.es6

@@ -15,45 +15,64 @@ export default Ember.Component.extend({
     if (this._state !== "inDOM") {
       return;
     }
-    const $editPane = this.$().find(".query-editor");
+    const $editPane = this.$(".query-editor");
     if (!$editPane.length) {
       return;
     }
+
     const oldGrippie = this.get("grippie");
     if (oldGrippie) {
       oldGrippie.off("mousedown mousemove mouseup");
-      $editPane.off("mousemove mouseup");
     }
 
     const $grippie = $editPane.find(".grippie");
-    const $targets = $editPane.find(".ace-wrapper,.grippie-target");
-    const $body = $("body");
-    const self = this;
+    const $target = $editPane.find(".panels-flex");
+    const $document = Ember.$(document);
+
+    const minWidth = $target.width();
+    const minHeight = $target.height();
 
     this.set("grippie", $grippie);
 
-    const mousemove = function(e) {
-      const diff = self.get("startY") - e.screenY;
-      const newHeight = self.get("startSize") - diff;
-      $targets.height(newHeight);
-      self.appEvents.trigger("ace:resize");
+    const mousemove = e => {
+      const diffY = this.get("startY") - e.screenY;
+      const diffX = this.get("startX") - e.screenX;
+
+      const newHeight = Math.max(minHeight, this.get("startHeight") - diffY);
+      const newWidth = Math.max(minWidth, this.get("startWidth") - diffX);
+
+      $target.height(newHeight);
+      $target.width(newWidth);
+      $grippie.width(newWidth);
+      this.appEvents.trigger("ace:resize");
     };
 
-    let mouseup;
-    mouseup = function(e) {
-      mousemove(e);
-      $body.off("mousemove", mousemove);
-      $body.off("mouseup", mouseup);
-      self.set("startY", null);
-      self.set("startSize", null);
-    };
+    const throttledMousemove = (event => {
+      event.preventDefault();
+      Ember.run.throttle(this, mousemove, event, 20);
+    }).bind(this);
 
-    $grippie.on("mousedown", function(e) {
-      self.set("startY", e.screenY);
-      self.set("startSize", $targets.height());
+    const mouseup = (e => {
+      $document.off("mousemove", throttledMousemove);
+      $document.off("mouseup", mouseup);
+      this.setProperties({
+        startY: null,
+        startX: null,
+        startHeight: null,
+        startWidth: null
+      });
+    }).bind(this);
 
-      $body.on("mousemove", mousemove);
-      $body.on("mouseup", mouseup);
+    $grippie.on("mousedown", e => {
+      this.setProperties({
+        startY: e.screenY,
+        startX: e.screenX,
+        startHeight: $target.height(),
+        startWidth: $target.width()
+      });
+
+      $document.on("mousemove", throttledMousemove);
+      $document.on("mouseup", mouseup);
       e.preventDefault();
     });
   },

assets/javascripts/discourse/components/explorer-schema.js.es6

@@ -2,9 +2,6 @@ import debounce from "discourse/lib/debounce";
 
 export default Ember.Component.extend({
   actions: {
-    expandSchema() {
-      this.set("hideSchema", false);
-    },
     collapseSchema() {
       this.set("hideSchema", true);
     }

assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6

@@ -96,6 +96,10 @@ export default Ember.Controller.extend({
   actions: {
     dummy() {},
 
+    expandSchema() {
+      this.set("hideSchema", false);
+    },
+
     importQuery() {
       showModal("import-query");
       this.set("showCreate", false);

assets/javascripts/discourse/templates/admin/plugins-explorer.hbs

@@ -55,15 +55,22 @@
             {{! the SQL editor will show the first time you }}
             {{#if everEditing}}
               <div class="query-editor {{if hideSchema "no-schema"}}">
-                <div class="right-panel">
-                  <div class="schema grippie-target">
-                    {{explorer-schema schema=schema hideSchema=hideSchema}}
+                <div class="panels-flex">
+                  <div class="editor-panel">
+                    {{ace-editor content=selectedItem.sql mode="sql"}}
+                  </div>
+                  <div class="right-panel">
+                    {{#if hideSchema}}
+                      {{d-button action=(action "expandSchema") icon="chevron-left" class="no-text unhide"}}
+                    {{/if}}
+                    <div class="schema">
+                      {{explorer-schema schema=schema hideSchema=hideSchema}}
+                    </div>
                   </div>
                 </div>
-                <div class="editor-panel">
-                  {{ace-editor content=selectedItem.sql mode="sql"}}
+                <div class="grippie">
+                  {{d-icon "discourse-expand"}}
                 </div>
-                <div class="grippie"></div>
                 <div class="clear"></div>
               </div>
             {{else}}

assets/javascripts/discourse/templates/components/explorer-schema.hbs

@@ -1,6 +1,3 @@
-{{#if hideSchema}}
-  {{d-button action=(action "expandSchema") icon="chevron-left" class="no-text unhide"}}
-{{/if}}
 <div class="{{if hideSchema "hidden"}}">
   {{text-field value=filter placeholderKey="explorer.schema.filter"}}
   {{d-button action=(action "collapseSchema") icon="chevron-right" class="no-text"}}

assets/stylesheets/explorer.scss

@@ -3,13 +3,12 @@
 }
 
 .query-editor {
-  border: 1px solid $primary-very-low;
   margin-bottom: 15px;
-  .editor-panel {
-    width: 65%;
-  }
-  .right-panel {
-    width: 35%;
+
+  .panels-flex {
+    display: flex;
+    height: 400px;
+    border: 1px solid $primary-very-low;
   }
   &.no-schema {
     .editor-panel {
@@ -19,17 +18,20 @@
       width: 0;
       button.unhide {
         position: absolute;
-        margin-left: -31px;
+        margin-left: -53px;
         z-index: 1;
       }
+      .schema {
+        display: none;
+      }
     }
   }
 
   .editor-panel {
-    float: left;
+    flex-grow: 1;
     .ace-wrapper {
       position: relative;
-      height: 400px;
+      height: 100%;
       width: 100%;
     }
     .ace_editor {
@@ -41,10 +43,12 @@
     }
   }
   .right-panel {
-    float: right;
+    flex-shrink: 0;
+    flex-grow: 0;
+    width: 300px;
     .schema {
       border-left: 1px solid $primary-low;
-      height: 400px;
+      height: 100%;
       overflow-y: scroll;
       overflow-x: hidden;
       color: $primary-high;
@@ -135,8 +139,17 @@
     }
   }
   .grippie {
+    cursor: nwse-resize;
     clear: both;
+    font-size: $font-down-2;
     -webkit-user-select: none;
+    color: $primary;
+    text-align: right;
+    background: $primary-very-low;
+    border: 1px solid $primary-very-low;
+    .d-icon {
+      transform: rotate(90deg);
+    }
   }
 }