Allow expanding/collapsing the schema view

2015-07-14 09:44:42 -07:00
parent f67d18d503
commit c7a947542e
6 changed files with 59 additions and 17 deletions
@@ -1,5 +1,14 @@
 export default Ember.Component.extend({

+  actions: {
+    expandSchema() {
+      this.set('hideSchema', false);
+    },
+    collapseSchema() {
+      this.set('hideSchema', true);
+    }
+  },
+
  transformedSchema: function() {
    const schema = this.get('schema');

@@ -8,6 +8,7 @@ export default Ember.ArrayController.extend({
  queryParams: { selectedQueryId: "id" },
  selectedQueryId: null,
  showResults: false,
+  hideSchema: false,
  loading: false,

  explain: false,
@@ -44,10 +44,10 @@
      </div>


-      <div class="query-editor">
+      <div class="query-editor {{if hideSchema "no-schema"}}">
        <div class="right-panel">
          <div class="schema grippie-target">
-            {{explorer-schema schema=schema}}
+            {{explorer-schema schema=schema hideSchema=hideSchema}}
          </div>
        </div>
        <div class="editor-panel">
@@ -1,9 +1,15 @@
-{{text-field value=filter placeholderKey="explorer.schema.filter"}}
-{{conditional-loading-spinner condition=loading}}
-<div class="schema-container">
-  <ul>
-    {{#each tables as |table|}}
-      {{explorer-schema-onetable table=table}}
-    {{/each}}
-  </ul>
+{{#if hideSchema}}
+  {{d-button 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="collapseSchema" icon="chevron-right" class="no-text btn-small"}}
+  {{conditional-loading-spinner condition=loading}}
+  <div class="schema-container">
+    <ul>
+      {{#each tables as |table|}}
+        {{explorer-schema-onetable table=table}}
+      {{/each}}
+    </ul>
+  </div>
 </div>
@@ -1,5 +1,11 @@

 export default Ember.View.extend({
+
+  _onHideSchema: function() {
+    Em.Logger.log('resizing');
+    this.appEvents.trigger('ace:resize');
+  }.observes('controller.hideSchema'),
+
  _bindGrippie: function() {
    const $editPane = this.$().find('.query-editor');
    if (!$editPane.length) {