Преглед на файлове

HUE-1906 [beeswax] Better UX for the goto columns on the result page

Made column tab prettier
Removed jHueTableExtender from the result table
Added column filter when more than 10 columns
Enrico Berti преди 11 години
родител
ревизия
ff44e5f
променени са 1 файла, в които са добавени 28 реда и са изтрити 11 реда
  1. 28 11
      apps/beeswax/src/beeswax/templates/execute.mako

+ 28 - 11
apps/beeswax/src/beeswax/templates/execute.mako

@@ -305,13 +305,14 @@ ${layout.menubar(section='query')}
           <pre data-bind="text: $root.design.watch.logs().join('\n')"></pre>
         </div>
         <div class="tab-pane" id="columns">
+          <div data-bind="visible: $root.design.results.columns().length > 10">
+            <input id="columnFilter" class="input-xlarge" type="text" placeholder="${_('Filter for column name or type...')}" />
+          </div>
           <table class="table table-striped table-condensed" cellpadding="0" cellspacing="0">
-            <thead>
-              <tr><th>${_('Name')}</th></tr>
-            </thead>
             <tbody data-bind="foreach: $root.design.results.columns">
-              <tr>
-                <td><a href="javascript:void(0)" class="column-selector" data-bind="text: $data.name + ($.trim($data.type) != '' ? ' (' + $.trim($data.type) + ')' : '')"></a></td>
+              <tr class="columnRow">
+                <td rel="columntooltip" data-placement="left" data-bind="attr: {title: 'Scroll the column \'' + $data.name + '\''}"><a href="javascript:void(0)" data-row-selector="true" class="column-selector" data-bind="text: $data.name"></a></td>
+                <td class="columnType" data-bind="text: $.trim($data.type)"></td>
               </tr>
             </tbody>
           </table>
@@ -747,6 +748,11 @@ ${layout.menubar(section='query')}
     min-height: 100px;
   }
 
+  .columnType {
+    text-align: right!important;
+    color: #999;
+  }
+
 </style>
 
 <link href="/static/ext/css/leaflet.css" rel="stylesheet">
@@ -786,6 +792,15 @@ $(document).ready(function () {
     });
   });
 
+  $("#columnFilter").jHueDelayedInput(function(){
+    $(".columnRow").removeClass("hide");
+    $(".columnRow").each(function () {
+      if ($(this).text().toLowerCase().indexOf($("#columnFilter").val().toLowerCase()) == -1) {
+        $(this).addClass("hide");
+      }
+    });
+  });
+
   resetNavigator = function () {
     var _db = viewModel.database();
     if (_db != null) {
@@ -908,7 +923,7 @@ $(document).ready(function () {
 
   $(document).on("click", ".column-selector", function () {
     var _t = $(".resultTable");
-    var _col = _t.find("th:econtains(" + $(this).text() + ")");
+    var _col = _t.find("th:contains(" + $.trim($(this).text().split("(")[0]) + ")");
     _t.find(".columnSelected").removeClass("columnSelected");
     _t.find("tr td:nth-child(" + (_col.index() + 1) + ")").addClass("columnSelected");
     $("a[href='#results']").click();
@@ -951,11 +966,6 @@ function reinitializeTable(max) {
         minHeight: $(window).height() - 190,
         heightAfterCorrection: 0
       });
-      $(".resultTable").jHueTableExtender({
-        hintElement: "#jumpToColumnAlert",
-        fixedHeader: true,
-        firstColumnTooltip: true
-      });
       container.height($(".dataTables_wrapper").height());
       $(".dataTables_wrapper").jHueScrollUp();
     } else if ($('#resultEmpty').height() > 0) {
@@ -1401,6 +1411,13 @@ $(document).ready(function () {
       _logsEl.scrollTop(_logsEl[0].scrollHeight - _logsEl.height());
     }
   });
+
+  viewModel.design.results.columns.subscribe(function(val){
+    $("*[rel=columntooltip]").tooltip({
+      delay: {show: 500}
+    });
+    $("a[data-row-selector='true']").jHueRowSelector();
+  });
 });
 
 function resizeLogs() {