소스 검색

HUE-2298 [dbquery] Move navigation bar to the left and rename it to Assist

Changed top bar to left side bar
Changed dropdowns to chosen select
Enrico Berti 11 년 전
부모
커밋
743dcdfa10
2개의 변경된 파일183개의 추가작업 그리고 129개의 파일을 삭제
  1. 161 121
      apps/rdbms/src/rdbms/templates/execute.mako
  2. 22 8
      apps/rdbms/static/js/rdbms.vm.js

+ 161 - 121
apps/rdbms/src/rdbms/templates/execute.mako

@@ -26,145 +26,140 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
 
 <div class="container-fluid">
   <div class="row-fluid">
-    <div class="card card-small">
-      <ul class="nav nav-pills hueBreadcrumbBar" id="breadcrumbs">
-        <li>
-          <div style="display: inline" class="dropdown">
-            ${_('Server')}&nbsp;
-            <a data-bind="if: $root.server" data-toggle="dropdown" href="javascript:void(0);">
-              <strong data-bind="text: $root.server().nice_name"></strong>
-              <i class="fa fa-caret-down"></i>
-            </a>
-            <ul data-bind="foreach: $root.servers" class="dropdown-menu">
-              <li data-bind="click: $root.chooseServer, text: nice_name" class="selectable"></li>
-            </ul>
-          </div>
-        </li>
-        <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
-        <li>
-          <div style="display: inline" class="dropdown">
-            ${_('Database')}&nbsp;<a data-toggle="dropdown" href="#"><strong data-bind="text: $root.database"></strong> <i class="fa fa-caret-down"></i></a>
-            <ul data-bind="foreach: $root.databases" class="dropdown-menu">
-              <li data-bind="click: $root.chooseDatabase, text: $data" class="selectable"></li>
-            </ul>
-          </div>
-        </li>
+    <div class="span2" id="navigator">
+      <ul class="nav nav-tabs" style="margin-bottom: 0">
+        <li class="active"><a href="#navigatorTab" data-toggle="tab" class="sidetab">${ _('Assist') }</a></li>
       </ul>
+
+      <div class="tab-content">
+    <div class="tab-pane active" id="navigatorTab">
+      <div class="card card-small card-tab" style="min-height: 470px;">
+        <div class="card-body" style="margin-top: 0">
+          <a href="#" title="${_('Double click on a table name or field to insert it in the editor')}" rel="tooltip" data-placement="left" class="pull-right" style="margin:10px;margin-left: 0"><i class="fa fa-question-circle"></i></a>
+          <a id="refreshNavigator" href="#" title="${_('Manually refresh the table list')}" rel="tooltip" data-placement="left" class="pull-right" style="margin:10px"><i class="fa fa-refresh"></i></a>
+
+          <ul class="nav nav-list" style="border: none; padding: 0; background-color: #FFF">
+            <li class="nav-header">${_('server')}</li>
+          </ul>
+
+          <select data-bind="options: $root.servers, value: $root.chosenServer, optionsText: 'nice_name'" class="input-medium chosen-select chosen-server" data-placeholder="${_('Choose a database...')}"></select>
+
+          <ul class="nav nav-list" style="border: none; padding: 0; background-color: #FFF">
+            <li class="nav-header">${_('database')}</li>
+          </ul>
+
+          <select data-bind="options: $root.databases, value: $root.chosenDatabase" class="input-medium chosen-select chosen-db" data-placeholder="${_('Choose a database...')}"></select>
+
+          <input id="navigatorSearch" type="text" placeholder="${ _('Table name...') }" style="width:90%; margin-top: 20px"/>
+          <div id="navigatorNoTables" style="margin-top: 20px">${_('The selected database has no tables.')}</div>
+          <ul id="navigatorTables" class="unstyled"></ul>
+          <div id="navigatorLoader">
+            <!--[if !IE]><!--><i class="fa fa-spinner fa-spin" style="font-size: 20px; color: #DDD"></i><!--<![endif]-->
+            <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
+          </div>
+        </div>
+      </div>
     </div>
+
   </div>
-  <div class="row-fluid">
+
+
+    </div>
+
     <div class="span10">
-    <div id="query">
-      <div class="card card-small">
-        <div style="margin-bottom: 10px">
-          <h1 class="card-heading simple">
-            <a id="collapse-editor" href="javascript:void(0)" class="pull-right"><i class="fa fa-caret-up"></i></a>
-            ${ _('Query Editor') }
+      <div id="query">
+        <div class="card card-small">
+          <div style="margin-bottom: 10px">
+            <h1 class="card-heading simple">
+              <a id="collapse-editor" href="javascript:void(0)" class="pull-right"><i class="fa fa-caret-up"></i></a>
+              ${ _('Query Editor') }
+              % if can_edit_name:
+                :
+                <a href="javascript:void(0);"
+                   id="query-name"
+                   data-type="text"
+                   data-name="name"
+                   data-value="${design.name}"
+                   data-original-title="${ _('Query name') }"
+                   data-placement="right">
+                </a>
+              %endif
+            </h1>
             % if can_edit_name:
-              :
-              <a href="javascript:void(0);"
-                 id="query-name"
-                 data-type="text"
-                 data-name="name"
-                 data-value="${design.name}"
-                 data-original-title="${ _('Query name') }"
-                 data-placement="right">
-              </a>
-            %endif
-          </h1>
-          % if can_edit_name:
-            <p style="margin-left: 20px">
-              <a href="javascript:void(0);"
-                 id="query-description"
-                 data-type="textarea"
-                 data-name="description"
-                 data-value="${design.desc}"
-                 data-original-title="${ _('Query description') }"
-                 data-placement="right">
-              </a>
-            </p>
-          % endif
-        </div>
-        <div class="card-body">
-          <div class="tab-content">
-            <div id="queryPane">
-
-              <div data-bind="css: {'hide': query.errors().length == 0}" class="hide alert alert-error">
-                <p><strong>${_('Your query has the following error(s):')}</strong></p>
-                <div data-bind="foreach: { 'data': query.errors, 'afterRender': resizeTable }">
-                  <p data-bind="text: $data" class="queryErrorMessage"></p>
+              <p style="margin-left: 20px">
+                <a href="javascript:void(0);"
+                   id="query-description"
+                   data-type="textarea"
+                   data-name="description"
+                   data-value="${design.desc}"
+                   data-original-title="${ _('Query description') }"
+                   data-placement="right">
+                </a>
+              </p>
+            % endif
+          </div>
+          <div class="card-body">
+            <div class="tab-content">
+              <div id="queryPane">
+
+                <div data-bind="css: {'hide': query.errors().length == 0}" class="hide alert alert-error">
+                  <p><strong>${_('Your query has the following error(s):')}</strong></p>
+                  <div data-bind="foreach: { 'data': query.errors, 'afterRender': resizeTable }">
+                    <p data-bind="text: $data" class="queryErrorMessage"></p>
+                  </div>
                 </div>
-              </div>
 
-              <textarea class="hide" tabindex="1" name="query" id="queryField"></textarea>
+                <textarea class="hide" tabindex="1" name="query" id="queryField"></textarea>
 
-              <div class="actions">
-                <button data-bind="click: tryExecuteQuery" type="button" id="executeQuery" class="btn btn-primary disable-feedback" tabindex="2">${_('Execute')}</button>
-                <button data-bind="click: trySaveQuery, css: {'hide': !$root.query.id() || $root.query.id() == -1}" type="button" class="btn hide">${_('Save')}</button>
-                <button data-bind="click: trySaveAsQuery" type="button" class="btn">${_('Save as...')}</button>
-                <button data-bind="click: tryExplainQuery" type="button" id="explainQuery" class="btn">${_('Explain')}</button>
-                &nbsp; ${_('or create a')} &nbsp;<a type="button" class="btn" href="${ url('rdbms:execute_query') }">${_('New query')}</a>
-                <br /><br />
-            </div>
+                <div class="actions">
+                  <button data-bind="click: tryExecuteQuery" type="button" id="executeQuery" class="btn btn-primary disable-feedback" tabindex="2">${_('Execute')}</button>
+                  <button data-bind="click: trySaveQuery, css: {'hide': !$root.query.id() || $root.query.id() == -1}" type="button" class="btn hide">${_('Save')}</button>
+                  <button data-bind="click: trySaveAsQuery" type="button" class="btn">${_('Save as...')}</button>
+                  <button data-bind="click: tryExplainQuery" type="button" id="explainQuery" class="btn">${_('Explain')}</button>
+                  &nbsp; ${_('or create a')} &nbsp;<a type="button" class="btn" href="${ url('rdbms:execute_query') }">${_('New query')}</a>
+                  <br /><br />
+              </div>
 
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div data-bind="css: {'hide': rows().length == 0}" class="hide">
-      <div class="card card-small scrollable">
-        <table id="resultTable" class="table table-striped table-condensed resultTable" cellpadding="0" cellspacing="0" data-tablescroller-min-height-disable="true" data-tablescroller-enforce-height="true">
-          <thead>
-            <tr data-bind="foreach: columns">
-              <th data-bind="text: $data"></th>
-            </tr>
-          </thead>
-        </table>
-      </div>
-    </div>
-
-    <div data-bind="css: {'hide': !resultsEmpty()}" class="hide">
-      <div class="card card-small scrollable">
-        <div class="row-fluid">
-          <div class="span10 offset1 center empty-wrapper">
-            <i class="fa fa-frown-o"></i>
-            <h1>${_('The server returned no results.')}</h1>
-            <br />
-          </div>
+      <div data-bind="css: {'hide': rows().length == 0}" class="hide">
+        <div class="card card-small scrollable">
+          <table id="resultTable" class="table table-striped table-condensed resultTable" cellpadding="0" cellspacing="0" data-tablescroller-min-height-disable="true" data-tablescroller-enforce-height="true">
+            <thead>
+              <tr data-bind="foreach: columns">
+                <th data-bind="text: $data"></th>
+              </tr>
+            </thead>
+          </table>
         </div>
       </div>
-    </div>
 
-    <div data-bind="css: {'hide': !isExecuting()}" class="hide">
-      <div class="card card-small scrollable">
-        <div class="row-fluid">
-          <div class="span10 offset1 center" style="padding: 30px">
-            <!--[if !IE]><!--><i class="fa fa-spinner fa-spin" style="font-size: 60px; color: #DDD"></i><!--<![endif]-->
-            <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
+      <div data-bind="css: {'hide': !resultsEmpty()}" class="hide">
+        <div class="card card-small scrollable">
+          <div class="row-fluid">
+            <div class="span10 offset1 center empty-wrapper">
+              <i class="fa fa-frown-o"></i>
+              <h1>${_('The server returned no results.')}</h1>
+              <br />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </div>
-  <div class="span2" id="navigator">
-      <div class="card card-small">
-        <a href="#" title="${_('Double click on a table name or field to insert it in the editor')}" rel="tooltip" data-placement="left" class="pull-right" style="margin:10px;margin-left: 0"><i class="fa fa-question-circle"></i></a>
-        <a id="refreshNavigator" href="#" title="${_('Manually refresh the table list')}" rel="tooltip" data-placement="left" class="pull-right" style="margin:10px"><i class="fa fa-refresh"></i></a>
-        <h1 class="card-heading simple"><i class="fa fa-compass"></i> ${_('Navigator')}</h1>
-        <div class="card-body">
-          <p>
-            <input id="navigatorSearch" type="text" placeholder="${ _('Table name...') }" style="width:90%"/>
-            <span id="navigatorNoTables">${_('The selected database has no tables.')}</span>
-            <ul id="navigatorTables" class="unstyled"></ul>
-            <div id="navigatorLoader">
-              <!--[if !IE]><!--><i class="fa fa-spinner fa-spin" style="font-size: 20px; color: #DDD"></i><!--<![endif]-->
+
+      <div data-bind="css: {'hide': !isExecuting()}" class="hide">
+        <div class="card card-small scrollable">
+          <div class="row-fluid">
+            <div class="span10 offset1 center" style="padding: 30px">
+              <!--[if !IE]><!--><i class="fa fa-spinner fa-spin" style="font-size: 60px; color: #DDD"></i><!--<![endif]-->
               <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
             </div>
-          </p>
+          </div>
         </div>
       </div>
-  </div>
+    </div>
 
   </div>
 </div>
@@ -288,8 +283,11 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
     white-space: nowrap;
   }
 
-  #navigatorTables li {
-    width: 95%;
+  #navigatorTables {
+    margin: 4px;
+  }
+
+  #navigatorTables li div {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -299,8 +297,25 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
     display: none;
   }
 
-  #navigator .card {
-    padding-bottom: 30px;
+  #navigatorNoTables {
+    padding: 6px;
+  }
+
+  #navigator .card-body {
+    margin-top: 1px !important;
+    padding: 6px !important;
+  }
+
+  #navigator .nav-header {
+    padding-left: 0;
+  }
+
+  #navigator .control-group {
+    padding-left: 0;
+  }
+
+  #navigator .nav-list > li.white, #navigator .nav-list .nav-header {
+    margin: 0;
   }
 
 </style>
@@ -314,6 +329,9 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
 <script src="/static/js/codemirror-sql-hint.js"></script>
 <script src="/static/js/codemirror-show-hint.js"></script>
 
+<link rel="stylesheet" href="/static/ext/chosen/chosen.min.css">
+<script src="/static/ext/chosen/chosen.jquery.min.js" type="text/javascript" charset="utf-8"></script>
+
 <link href="/static/ext/css/bootstrap-editable.css" rel="stylesheet">
 <script src="/static/ext/js/bootstrap-editable.min.js"></script>
 <script src="/static/ext/js/bootstrap-editable.min.js"></script>
@@ -554,6 +572,11 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
       }
     });
 
+
+    $(document).on("update.chosen", function(){
+      $(".chosen-select").trigger("chosen:updated");
+    });
+
   });
 
   function modal(el) {
@@ -623,6 +646,23 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
     return $.totalStorage(key);
   }
 
+  $(".chosen-server").chosen({
+      disable_search_threshold: 5,
+      width: "100%",
+      no_results_text: "${_('Oops, no server found!')}"
+  });
+
+  $(".chosen-db").chosen({
+      disable_search_threshold: 5,
+      width: "100%",
+      no_results_text: "${_('Oops, no database found!')}"
+    }).change(function (e, value) {
+    if (value != null){
+      var key = 'hueRdbmsLastDatabase-' + viewModel.server().name();
+      viewModel.selectedDatabase(viewModel.databases.indexOf(value.selected));
+      $.totalStorage(key, value.selected);
+    }
+  });
 
   // Knockout
   viewModel = new RdbmsViewModel();
@@ -670,7 +710,7 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
       $(data.split(" ")).each(function (cnt, table) {
         if ($.trim(table) != "") {
           var _table = $("<li>");
-          _table.html("<a href='#' title='" + table + "'><i class='fa fa-table'></i> " + table + "</a><ul class='unstyled'></ul>");
+          _table.html("<a href='#' title='" + table + "' class='nowrap'><i class='fa fa-table'></i> " + table + "</a><ul class='unstyled'></ul>");
           _table.data("table", table).attr("id", "navigatorTables_" + table);
           _table.find("a").on("dblclick", function () {
             codeMirror.replaceSelection($.trim($(this).text()) + ' ');

+ 22 - 8
apps/rdbms/static/js/rdbms.vm.js

@@ -97,7 +97,14 @@ function RdbmsViewModel() {
     var last = $.totalStorage('hueRdbmsLastServer') || ((newServers[0].length > 0) ? newServers[0].name() : null);
     if (last) {
       self.server(last);
+      $.each(self.servers(), function(index, server) {
+        if (server.name() == last) {
+          self.chosenServer(server);
+        }
+      });
     }
+
+    $(document).trigger("update.chosen");
   };
 
   self.updateDatabases = function(databases) {
@@ -107,7 +114,10 @@ function RdbmsViewModel() {
     var last = $.totalStorage(key) || ((databases.length > 0) ? databases[0] : null);
     if (last) {
       self.database(last);
+      self.chosenDatabase(last);
     }
+
+    $(document).trigger("update.chosen");
   };
 
   self.updateQuery = function(design) {
@@ -119,21 +129,25 @@ function RdbmsViewModel() {
     self.server(design.server);
   };
 
-  self.chooseServer = function(value, e) {
+  self.chosenServer = ko.observable();
+
+  self.initialChoose = true;
+  self.chosenServer.subscribe(function(value){
     $.each(self.servers(), function(index, server) {
       if (server.name() == value.name()) {
         self.selectedServer(index);
       }
     });
-    $.totalStorage('hueRdbmsLastServer', self.server().name());
+    if (self.initialChoose){
+      self.initialChoose = false;
+    }
+    else {
+      $.totalStorage('hueRdbmsLastServer', self.server().name());
+    }
     self.fetchDatabases();
-  };
+  });
 
-  self.chooseDatabase = function(value, e) {
-    var key = 'hueRdbmsLastDatabase-' + self.server().name();
-    self.selectedDatabase(self.databases.indexOf(value));
-    $.totalStorage(key, value);
-  };
+  self.chosenDatabase = ko.observable();
 
   var error_fn = function(jqXHR, status, errorThrown) {
     self.isExecuting(false);