Prechádzať zdrojové kódy

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 12 rokov pred
rodič
commit
ff44e5f
1 zmenil súbory, kde vykonal 28 pridanie a 11 odobranie
  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>
           <pre data-bind="text: $root.design.watch.logs().join('\n')"></pre>
         </div>
         </div>
         <div class="tab-pane" id="columns">
         <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">
           <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">
             <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>
               </tr>
             </tbody>
             </tbody>
           </table>
           </table>
@@ -747,6 +748,11 @@ ${layout.menubar(section='query')}
     min-height: 100px;
     min-height: 100px;
   }
   }
 
 
+  .columnType {
+    text-align: right!important;
+    color: #999;
+  }
+
 </style>
 </style>
 
 
 <link href="/static/ext/css/leaflet.css" rel="stylesheet">
 <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 () {
   resetNavigator = function () {
     var _db = viewModel.database();
     var _db = viewModel.database();
     if (_db != null) {
     if (_db != null) {
@@ -908,7 +923,7 @@ $(document).ready(function () {
 
 
   $(document).on("click", ".column-selector", function () {
   $(document).on("click", ".column-selector", function () {
     var _t = $(".resultTable");
     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(".columnSelected").removeClass("columnSelected");
     _t.find("tr td:nth-child(" + (_col.index() + 1) + ")").addClass("columnSelected");
     _t.find("tr td:nth-child(" + (_col.index() + 1) + ")").addClass("columnSelected");
     $("a[href='#results']").click();
     $("a[href='#results']").click();
@@ -951,11 +966,6 @@ function reinitializeTable(max) {
         minHeight: $(window).height() - 190,
         minHeight: $(window).height() - 190,
         heightAfterCorrection: 0
         heightAfterCorrection: 0
       });
       });
-      $(".resultTable").jHueTableExtender({
-        hintElement: "#jumpToColumnAlert",
-        fixedHeader: true,
-        firstColumnTooltip: true
-      });
       container.height($(".dataTables_wrapper").height());
       container.height($(".dataTables_wrapper").height());
       $(".dataTables_wrapper").jHueScrollUp();
       $(".dataTables_wrapper").jHueScrollUp();
     } else if ($('#resultEmpty').height() > 0) {
     } else if ($('#resultEmpty').height() > 0) {
@@ -1401,6 +1411,13 @@ $(document).ready(function () {
       _logsEl.scrollTop(_logsEl[0].scrollHeight - _logsEl.height());
       _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() {
 function resizeLogs() {