diff --git a/assets/javascripts/discourse/components/explorer-schema.js.es6 b/assets/javascripts/discourse/components/explorer-schema.js.es6 index 677cc4c..3ac383f 100644 --- a/assets/javascripts/discourse/components/explorer-schema.js.es6 +++ b/assets/javascripts/discourse/components/explorer-schema.js.es6 @@ -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'); diff --git a/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6 b/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6 index aa6762a..e900457 100644 --- a/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6 +++ b/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6 @@ -8,6 +8,7 @@ export default Ember.ArrayController.extend({ queryParams: { selectedQueryId: "id" }, selectedQueryId: null, showResults: false, + hideSchema: false, loading: false, explain: false, diff --git a/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs b/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs index 111c4e7..b8a9f07 100644 --- a/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs +++ b/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs @@ -44,10 +44,10 @@ -
+
- {{explorer-schema schema=schema}} + {{explorer-schema schema=schema hideSchema=hideSchema}}
diff --git a/assets/javascripts/discourse/templates/components/explorer-schema.hbs b/assets/javascripts/discourse/templates/components/explorer-schema.hbs index a74ad71..82104f4 100644 --- a/assets/javascripts/discourse/templates/components/explorer-schema.hbs +++ b/assets/javascripts/discourse/templates/components/explorer-schema.hbs @@ -1,9 +1,15 @@ -{{text-field value=filter placeholderKey="explorer.schema.filter"}} -{{conditional-loading-spinner condition=loading}} -
-
    - {{#each tables as |table|}} - {{explorer-schema-onetable table=table}} - {{/each}} -
+{{#if hideSchema}} + {{d-button action="expandSchema" icon="chevron-left" class="no-text unhide"}} +{{/if}} +
+ {{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}} +
+
    + {{#each tables as |table|}} + {{explorer-schema-onetable table=table}} + {{/each}} +
+
diff --git a/assets/javascripts/discourse/views/admin-plugins-explorer.js.es6 b/assets/javascripts/discourse/views/admin-plugins-explorer.js.es6 index f009a7a..aaf83cb 100644 --- a/assets/javascripts/discourse/views/admin-plugins-explorer.js.es6 +++ b/assets/javascripts/discourse/views/admin-plugins-explorer.js.es6 @@ -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) { diff --git a/assets/stylesheets/explorer.scss b/assets/stylesheets/explorer.scss index 748d1e9..f681248 100644 --- a/assets/stylesheets/explorer.scss +++ b/assets/stylesheets/explorer.scss @@ -6,8 +6,28 @@ border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%); margin-bottom: 15px; .editor-panel { - float: left; width: 65%; + } + .right-panel { + width: 35%; + } + &.no-schema { + .editor-panel { + width: 100%; + } + .right-panel { + width: 0; + button.unhide { + position: absolute; + margin-left: -31px; + z-index: 1; + } + } + } + + + .editor-panel { + float: left; .ace-wrapper { position: relative; height: 400px; @@ -23,7 +43,6 @@ } .right-panel { float: right; - width: calc(35% - 0px); .schema { border-left: 1px solid dark-light-diff($primary, $secondary, 80%, -20%); height: 400px; @@ -32,6 +51,12 @@ color: dark-light-diff($primary, $secondary, 20%, -20%); font-size: 11px; + input { + padding: 4px; + margin: 3px; + // 100% - padding + margin * 2 - border - button - buttonborder + width: calc(100% - 14px - 1px - 22px - 2px); + } .schema-table-name { font-weight: bold; border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -20%); @@ -127,11 +152,6 @@ display: block; margin: auto; } -.schema input { - padding: 4px; - margin: 3px; - width: calc(100% - 7px - 7px - 1px); -} .query-params { border: 1px solid dark-light-diff($primary, $secondary, 60%, -20%);