From 859021bb3c943c4fbe033eec83071e23fbd7f48d Mon Sep 17 00:00:00 2001 From: Osama Sayegh Date: Sun, 7 Apr 2019 09:05:43 +0300 Subject: [PATCH] UX: make SQL editor resizable (#33) --- .gitignore | 1 + .../components/explorer-container.js.es6 | 65 ++++++++++++------- .../components/explorer-schema.js.es6 | 3 - .../controllers/admin-plugins-explorer.js.es6 | 4 ++ .../templates/admin/plugins-explorer.hbs | 19 ++++-- .../templates/components/explorer-schema.hbs | 3 - assets/stylesheets/explorer.scss | 35 ++++++---- 7 files changed, 84 insertions(+), 46 deletions(-) diff --git a/.gitignore b/.gitignore index ca06557..1266b58 100644 --- a/.gitignore +++ b/.gitignore @@ -5,5 +5,6 @@ auto_generated Gemfile.lock .DS_Store *.swp +*.swo .rubocop-https---raw-githubusercontent-com-discourse-discourse-master--rubocop-yml diff --git a/assets/javascripts/discourse/components/explorer-container.js.es6 b/assets/javascripts/discourse/components/explorer-container.js.es6 index 232643f..987fde2 100644 --- a/assets/javascripts/discourse/components/explorer-container.js.es6 +++ b/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(); }); }, diff --git a/assets/javascripts/discourse/components/explorer-schema.js.es6 b/assets/javascripts/discourse/components/explorer-schema.js.es6 index 7e6518d..8e1f3f7 100644 --- a/assets/javascripts/discourse/components/explorer-schema.js.es6 +++ b/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); } diff --git a/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6 b/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6 index f7ff5d1..77782d3 100644 --- a/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6 +++ b/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); diff --git a/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs b/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs index 5c55a91..185e54b 100644 --- a/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs +++ b/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs @@ -55,15 +55,22 @@ {{! the SQL editor will show the first time you }} {{#if everEditing}}
-
-
- {{explorer-schema schema=schema hideSchema=hideSchema}} +
+
+ {{ace-editor content=selectedItem.sql mode="sql"}} +
+
+ {{#if hideSchema}} + {{d-button action=(action "expandSchema") icon="chevron-left" class="no-text unhide"}} + {{/if}} +
+ {{explorer-schema schema=schema hideSchema=hideSchema}} +
-
- {{ace-editor content=selectedItem.sql mode="sql"}} +
+ {{d-icon "discourse-expand"}}
-
{{else}} diff --git a/assets/javascripts/discourse/templates/components/explorer-schema.hbs b/assets/javascripts/discourse/templates/components/explorer-schema.hbs index 30d5ee2..5c8c457 100644 --- a/assets/javascripts/discourse/templates/components/explorer-schema.hbs +++ b/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}}
{{text-field value=filter placeholderKey="explorer.schema.filter"}} {{d-button action=(action "collapseSchema") icon="chevron-right" class="no-text"}} diff --git a/assets/stylesheets/explorer.scss b/assets/stylesheets/explorer.scss index 9e49804..fee53db 100644 --- a/assets/stylesheets/explorer.scss +++ b/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); + } } }