Restyling of data explorer

2015-07-08 16:46:36 -07:00 · 2015-07-08 16:46:36 -07:00 · dad55e085b
parent 6ac463290e
commit dad55e085b
9 changed files with 176 additions and 123 deletions
--- a/assets/javascripts/discourse/components/explorer-schema-onetable.js.es6
+++ b/assets/javascripts/discourse/components/explorer-schema-onetable.js.es6
@ -1,5 +1,6 @@
 export default Ember.Component.extend({
  classNameBindings: [':schema-table', 'open'],
+  tagName: 'li',

  open: Em.computed.alias('table.open'),

--- a/assets/javascripts/discourse/components/explorer-schema.js.es6
+++ b/assets/javascripts/discourse/components/explorer-schema.js.es6
@ -47,7 +47,7 @@ export default Ember.Component.extend({
        tables.push({
          name: key,
          columns: schema[key],
-          open: haveFilter
+          open: false
        });
        continue;
      }
--- a/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6
+++ b/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6
@ -10,7 +10,7 @@ export default Ember.ArrayController.extend({
  showResults: false,
  loading: false,

-  explain: true,
+  explain: false,

  saveDisabled: Ember.computed.not('selectedItem.dirty'),
  runDisabled: Ember.computed.alias('selectedItem.dirty'),
@ -42,6 +42,21 @@ export default Ember.ArrayController.extend({
    );
  }.property(),

+  save() {
+    const self = this;
+    this.set('loading', true);
+    return this.get('selectedItem').save().then(function() {
+      const query = self.get('selectedItem');
+      query.markNotDirty();
+      self.set('editName', false);
+    }).catch(function(x) {
+      popupAjaxError(x);
+      throw x;
+    }).finally(function() {
+      self.set('loading', false);
+    });
+  },
+
  actions: {
    dummy() {},

@ -70,6 +85,14 @@ export default Ember.ArrayController.extend({
      this.get('selectedItem').saveDefaults();
    },

+    save() {
+      this.save();
+    },
+
+    saverun() {
+      this.save().then(() => this.send('run'));
+    },
+
    create() {
      const self = this;
      this.set('loading', true);
@ -82,18 +105,6 @@ export default Ember.ArrayController.extend({
      });
    },

-    save() {
-      const self = this;
-      this.set('loading', true);
-      this.get('selectedItem').save().then(function() {
-        const query = self.get('selectedItem');
-        query.markNotDirty();
-        self.set('editName', false);
-      }).catch(popupAjaxError).finally(function() {
-        self.set('loading', false);
-      });
-    },
-
    discard() {
      const self = this;
      this.set('loading', true);
--- a/assets/javascripts/discourse/templates/admin/plugins-explorer-show.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-explorer-show.hbs
@ -1,14 +1,4 @@
 {{#if selectedItem}}
-  <div class="pull-right">
-    <span class="schema-title">
-      {{i18n "explorer.schema.title"}}<br>
-      {{{i18n "explorer.schema.type_help"}}}
-    </span>
-    <div class="schema">
-      {{explorer-schema schema=schema}}
-    </div>
-  </div>
-  <div class="pull-left">
  <div class="name">
    {{#if editName}}
      {{text-field value=selectedItem.name}}
@ -24,13 +14,26 @@
      {{selectedItem.description}}
    {{/if}}
  </div>
+
+
+  <div class="query-editor">
+    <div class="editor-panel">
      <div class="sql">
-      {{textarea value=selectedItem.sql}}
+        {{textarea value=selectedItem.sql class="grippie-target"}}
      </div>
    </div>
+    <div class="right-panel">
+      <div class="schema grippie-target">
+        {{explorer-schema schema=schema}}
+      </div>
+    </div>
+    <div class="grippie"></div>
+    <div class="clear"></div>
+  </div>
+
  <div class="clear"></div>
  <div class="pull-left">
-    {{d-button action="save" label="explorer.save" disabled=saveDisabled}}
+    {{d-button action="save" label="explorer.save" disabled=saveDisabled class="btn-primary"}}
    {{d-button action="download" label="explorer.export" disabled=runDisabled icon="download"}}
  </div>
  <div class="pull-right">
--- a/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs
@ -47,7 +47,15 @@
    <div class="bool-options">
      <label>{{input type="checkbox" checked=explain name="explain"}} {{i18n "explorer.explain_label"}}</label>
    </div>
-    {{d-button action="run" label="explorer.run" disabled=runDisabled}}
+    {{#if runDisabled}}
+      {{#if saveDisabled}}
+        {{d-button label="explorer.run" disabled="true" class="btn-primary"}}
+      {{else}}
+        {{d-button action="saverun" label="explorer.saverun"}}
+      {{/if}}
+    {{else}}
+      {{d-button action="run" label="explorer.run" disabled=runDisabled class="btn-primary"}}
+    {{/if}}
  </div>

  <hr>
--- a/assets/javascripts/discourse/templates/components/explorer-schema-onetable.hbs
+++ b/assets/javascripts/discourse/templates/components/explorer-schema-onetable.hbs
@ -8,28 +8,26 @@
 </div>
 <div class="schema-table-cols">
  {{#if table.open}}
+    <dl>
    {{#each table.columns as |col|}}
-      <div class="schema-table-col">
+      <div>
+      <dt class="{{if col.sensitive "sensitive"}}" title="{{if col.sensitive (i18n "explorer.schema.sensitive")}}">
        {{#if col.sensitive}}
-          <span class="schema-colname sensitive" title="{{i18n "explorer.schema.sensitive"}}">
          <i class="fa fa-warning"></i>
-            {{col.column_name}}
-          </span>
-        {{else}}
-          <span class="schema-colname" >
-            {{col.column_name}}
-          </span>
        {{/if}}
-        <span class="schema-type">
+        {{col.column_name}}
+      </dt>
+      <dd>
        {{col.data_type}}
-
        {{#if col.notes}}
+          <br>
          <span class="schema-typenotes">
            {{col.notes}}
          </span>
        {{/if}}
-        </span>
+      </dd>
      </div>
    {{/each}}
+    </dl>
  {{/if}}
 </div>
--- a/assets/javascripts/discourse/templates/components/explorer-schema.hbs
+++ b/assets/javascripts/discourse/templates/components/explorer-schema.hbs
@ -1,7 +1,12 @@
+<span class="schema-title">
+  {{i18n "explorer.schema.title"}} - {{{i18n "explorer.schema.type_help"}}}
+</span>
 {{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>
 </div>
--- a/assets/stylesheets/explorer.scss
+++ b/assets/stylesheets/explorer.scss
@ -2,6 +2,89 @@
  color: $danger;
 }

+.query-editor {
+  border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+  margin-bottom: 15px;
+  .editor-panel {
+    float: left;
+    width: 65%;
+
+    .sql textarea {
+      padding: 4px;
+      height: calc(400px - 8px - 2px);
+      width: 100%;
+      font-family: monospace;
+      box-shadow: none;
+      border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+      margin: 0;
+      border-radius: 0;
+      transition: initial;
+    }
+  }
+  .right-panel {
+    float: right;
+    width: calc(35% - 10px);
+    .schema {
+      border-left: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+      height: 400px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      color: dark-light-diff($primary, $secondary, 20%, -20%);
+      font-size: 11px;
+
+      .schema-table-name {
+        font-weight: bold;
+        border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+        padding-left: 5px;
+        .fa {
+          width: 6px;
+        }
+      }
+      ul {
+        list-style-type: none;
+        margin: 0;
+      }
+      dl {
+        margin: 0;
+      }
+      dl > div > * {
+        padding-top: 2px;
+        padding-bottom: 2px;
+      }
+      dl > div {
+        clear:both;
+      }
+      dt {
+        display: inline-block;
+        vertical-align: text-top;
+        overflow-wrap: break-word;
+        width: 110px;
+        margin-left: 5px;
+        &.sensitive {
+          color: $danger;
+        }
+      }
+      dd {
+        display: inline-block;
+        vertical-align: text-top;
+        width: 70px;
+        color: $tertiary;
+        margin: 0;
+        padding-left: 7px;
+        border-left: 1px dotted dark-light-diff($primary, $secondary, 80%, -20%);
+
+        .schema-typenotes {
+          color: dark-light-diff($primary, $secondary, 50%, -20%);
+          font-style: italic;
+        }
+      }
+    }
+  }
+  .grippie {
+    clear: both;
+  }
+}
+
 .query-edit {
  .name h2 {
    display: inline-block;
@ -12,76 +95,19 @@
  &:not(.editing) .desc {
    margin: 10px 0;
  }
-  .sql textarea {
-    width: 500px;
-    height: 350px;
-    font-family: monospace;
-    border-color: $tertiary;
-  }
-  .clear { clear: both; }
 }

-.schema {
-  border: 1px solid black;
-  overflow-y: scroll;
-  > div {
-    width: 306px;
-  }
-  max-height: 400px;
+.clear { clear: both; }

-  margin-bottom: 10px;
-}
 .schema-title {
  display: block;
  margin: auto;
-  text-align: center;
 }
 .schema input {
  padding: 4px;
  margin: 3px;
  width: calc(100% - 7px - 7px - 1px);
 }
-.schema .schema-table:first-child {
-  border-top: 1px solid;
-}
-.schema-table-name {
-  background: dark-light-diff($primary, $secondary, 80%, -20%);
-  border-color: dark-light-diff($primary, $secondary, 60%, -20%);
-  font-weight: bold;
-  border-bottom: 1px solid;
-  padding-left: 5px;
-}
-.schema-table-cols {
-
-}
-.schema-table-col {
-  background: $secondary;
-  border-color: dark-light-diff($primary, $secondary, 60%, -20%);
-  border-bottom: 1px solid;
-  padding-left: 10px;
-}
-.schema-colname {
-  font-weight: bold;
-
-  display: inline-block;
-  width: 150px;
-  word-wrap: break-word;
-  vertical-align: text-top;
-  background: dark-light-diff($primary, $secondary, 98%, -20%);
-
-  &.sensitive {
-    color: $danger;
-  }
-}
-.schema-type {
-  display: inline-block;
-  max-width: 140px;
-  vertical-align: text-top;
-}
-.schema-typenotes {
-  color: dark-light-diff($primary, $secondary, 50%, -20%);
-  font-style: italic;
-}

 .query-params {
  border: 1px solid dark-light-diff($primary, $secondary, 60%, -20%);
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@ -32,14 +32,15 @@ en:
        title: "Database Schema"
        filter: "Search..."
        sensitive: "The contents of this column may contain particularly sensitive or private information."
-        type_help: "<a href='http://www.postgresql.org/docs/9.3/static/datatype.html' target='_blank'>Types explanation</a>"
+        type_help: "<a href='http://www.postgresql.org/docs/9.3/static/datatype.html#DATATYPE-TABLE' target='_blank'>Types</a>"
      export: "Export"
      save: "Save Changes"
+      saverun: "Save Changes and Run Query"
      run: "Run Query"
      undo: "Revert"
      delete: "Delete"
      recover: "Undelete Query"
-      download_json: "Save Query Results"
+      download_json: "Download Results"
      run_time: "Query completed in {{value}} ms."
      column: "Column {{number}}"
      explain_label: "Include query plan?"