mirror of
https://github.com/discourse/discourse-data-explorer.git
synced 2025-07-04 13:32:11 +00:00
Allow expanding/collapsing the schema view
This commit is contained in:
parent
f67d18d503
commit
c7a947542e
@ -1,5 +1,14 @@
|
|||||||
export default Ember.Component.extend({
|
export default Ember.Component.extend({
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
expandSchema() {
|
||||||
|
this.set('hideSchema', false);
|
||||||
|
},
|
||||||
|
collapseSchema() {
|
||||||
|
this.set('hideSchema', true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
transformedSchema: function() {
|
transformedSchema: function() {
|
||||||
const schema = this.get('schema');
|
const schema = this.get('schema');
|
||||||
|
|
||||||
|
@ -8,6 +8,7 @@ export default Ember.ArrayController.extend({
|
|||||||
queryParams: { selectedQueryId: "id" },
|
queryParams: { selectedQueryId: "id" },
|
||||||
selectedQueryId: null,
|
selectedQueryId: null,
|
||||||
showResults: false,
|
showResults: false,
|
||||||
|
hideSchema: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
|
|
||||||
explain: false,
|
explain: false,
|
||||||
|
@ -44,10 +44,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="query-editor">
|
<div class="query-editor {{if hideSchema "no-schema"}}">
|
||||||
<div class="right-panel">
|
<div class="right-panel">
|
||||||
<div class="schema grippie-target">
|
<div class="schema grippie-target">
|
||||||
{{explorer-schema schema=schema}}
|
{{explorer-schema schema=schema hideSchema=hideSchema}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="editor-panel">
|
<div class="editor-panel">
|
||||||
|
@ -1,4 +1,9 @@
|
|||||||
|
{{#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"}}
|
{{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}}
|
{{conditional-loading-spinner condition=loading}}
|
||||||
<div class="schema-container">
|
<div class="schema-container">
|
||||||
<ul>
|
<ul>
|
||||||
@ -7,3 +12,4 @@
|
|||||||
{{/each}}
|
{{/each}}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
@ -1,5 +1,11 @@
|
|||||||
|
|
||||||
export default Ember.View.extend({
|
export default Ember.View.extend({
|
||||||
|
|
||||||
|
_onHideSchema: function() {
|
||||||
|
Em.Logger.log('resizing');
|
||||||
|
this.appEvents.trigger('ace:resize');
|
||||||
|
}.observes('controller.hideSchema'),
|
||||||
|
|
||||||
_bindGrippie: function() {
|
_bindGrippie: function() {
|
||||||
const $editPane = this.$().find('.query-editor');
|
const $editPane = this.$().find('.query-editor');
|
||||||
if (!$editPane.length) {
|
if (!$editPane.length) {
|
||||||
|
@ -6,8 +6,28 @@
|
|||||||
border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
|
border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
.editor-panel {
|
.editor-panel {
|
||||||
float: left;
|
|
||||||
width: 65%;
|
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 {
|
.ace-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
@ -23,7 +43,6 @@
|
|||||||
}
|
}
|
||||||
.right-panel {
|
.right-panel {
|
||||||
float: right;
|
float: right;
|
||||||
width: calc(35% - 0px);
|
|
||||||
.schema {
|
.schema {
|
||||||
border-left: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
|
border-left: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
|
||||||
height: 400px;
|
height: 400px;
|
||||||
@ -32,6 +51,12 @@
|
|||||||
color: dark-light-diff($primary, $secondary, 20%, -20%);
|
color: dark-light-diff($primary, $secondary, 20%, -20%);
|
||||||
font-size: 11px;
|
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 {
|
.schema-table-name {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
|
border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
|
||||||
@ -127,11 +152,6 @@
|
|||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
.schema input {
|
|
||||||
padding: 4px;
|
|
||||||
margin: 3px;
|
|
||||||
width: calc(100% - 7px - 7px - 1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.query-params {
|
.query-params {
|
||||||
border: 1px solid dark-light-diff($primary, $secondary, 60%, -20%);
|
border: 1px solid dark-light-diff($primary, $secondary, 60%, -20%);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user