UX: make SQL editor resizable (#33)

2019-04-07 09:05:43 +03:00
parent 83a2c96fe4
commit 859021bb3c
7 changed files with 84 additions and 46 deletions
@@ -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();
    });
  },
@@ -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);
    }
@@ -96,6 +96,10 @@ export default Ember.Controller.extend({
  actions: {
    dummy() {},

+    expandSchema() {
+      this.set("hideSchema", false);
+    },
+
    importQuery() {
      showModal("import-query");
      this.set("showCreate", false);
@@ -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}}
@@ -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"}}