Bladeren bron

HUE-899 [beeswax] Query results page should have horizontal scroll bar

Added collapsable panel on the left
Added jump to column feature
Enrico Berti 13 jaren geleden
bovenliggende
commit
08eb2672b8
1 gewijzigde bestanden met toevoegingen van 217 en 59 verwijderingen
  1. 217 59
      apps/beeswax/src/beeswax/templates/watch_results.mako

+ 217 - 59
apps/beeswax/src/beeswax/templates/watch_results.mako

@@ -23,11 +23,88 @@ from django.utils.translation import ugettext as _
 ${commonheader(_('Query Results'), "beeswax", user, "100px")}
 ${layout.menubar(section='query')}
 
+<style>
+  #collapse {
+    float: right;
+    cursor: pointer;
+  }
+
+  #expand {
+    display: none;
+    cursor: pointer;
+    position: absolute;
+    background-color: #01639C;
+    padding: 3px;
+    -webkit-border-top-right-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    -moz-border-radius-topright: 5px;
+    -moz-border-radius-bottomright: 5px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    opacity: 0.5;
+    left: -4px;
+  }
+
+  #expand:hover {
+    opacity: 1;
+    left: 0;
+  }
+
+  .noLeftMargin {
+    margin-left: 0 !important;
+  }
+
+  .rowSelected {
+    background-color: #EEEEEE !important;
+  }
+
+  .columnSelected {
+    background-color: #EEEEEE !important;
+  }
+
+  .cellSelected {
+    background-color: #DDDDDD !important;
+  }
+
+  #suggestColumns {
+    position: absolute;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    min-width: 160px;
+    padding: 10px 20px 2px 10px;
+    margin: 2px 0 0;
+    background-color: #ffffff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+    white-space: nowrap;
+  }
+
+  #suggestColumns a {
+    margin-left: 10px;
+    margin-right: -14px;
+    margin-top: -12px;
+  }
+</style>
+
 <div class="container-fluid">
 	<h1>${_('Query Results:')} ${util.render_query_context(query_context)}</h1>
+  <div id="expand"><i class="icon-chevron-right icon-white"></i></div>
 	<div class="row-fluid">
 		<div class="span3">
 			<div class="well sidebar-nav">
+        <a id="collapse" class="btn btn-small"><i class="icon-chevron-left" rel="tooltip" title="${_('Collapse this panel')}"></i></a>
 				<ul class="nav nav-list">
 					% if download_urls:
 					<li class="nav-header">${_('Downloads')}</li>
@@ -55,68 +132,72 @@ ${layout.menubar(section='query')}
 			</div>
 		</div>
 		<div class="span9">
-				<ul class="nav nav-tabs">
-					<li class="active"><a href="#results" data-toggle="tab">
-		  			%if error:
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#results" data-toggle="tab">
+            %if error:
 			            ${_('Error')}
-					%else:
+            %else:
 						${_('Results')}
-					%endif
-					</a></li>
-					<li><a href="#query" data-toggle="tab">${_('Query')}</a></li>
-					<li><a href="#log" data-toggle="tab">${_('Log')}</a></li>
-				</ul>
+            %endif
+        </a></li>
+        <li><a href="#query" data-toggle="tab">${_('Query')}</a></li>
+        <li><a href="#log" data-toggle="tab">${_('Log')}</a></li>
+      </ul>
 
-				<div class="tab-content">
-					<div class="active tab-pane" id="results">
-					% if error:
-		            <div class="alert alert-error">
-		              <h3>${_('Error!')}</h3>
-		              <pre>${error_message | h}</pre>
-		            </div>
-          			% else:
-		            % if expected_first_row != start_row:
-		              <div class="alert"><strong>${_('Warning:')}</strong> ${_('Page offset may have incremented since last view.')}</div>
-		            % endif
-            		<table class="table table-striped table-condensed resultTable" cellpadding="0" cellspacing="0">
-		              <thead>
-		                <tr>
-		                  <th>&nbsp;</th>
-		                  % for col in columns:
-		                    <th>${col}</th>
-		                  % endfor
-		                </tr>
-		              </thead>
-		              <tbody>
-		                % for i, row in enumerate(results):
-		                <tr>
-		                  <td style="white-space: nowrap">${start_row + i}</td>
-		                  % for item in row:
-		                    <td style="white-space: nowrap">${ item }</td>
-		                  % endfor
-		                </tr>
-		                % endfor
-		              </tbody>
-		            </table>
-					<div class="pagination pull-right">
-				    	<ul>
-							% if start_row != 0:
-                                <li class="prev"><a title="${_('Beginning of List')}" href="${ url('beeswax.views.view_results', query.id, 0) }${'?context=' + context_param or '' | n}">&larr; ${_('Beginning of List')}</a></li>
-				            % endif
-                            % if has_more and len(results) == 100:
-                                <li><a title="${_('Next page')}" href="${ url('beeswax.views.view_results', query.id, next_row) }${'?context=' + context_param or '' | n}">${_('Next Page')} &rarr;</a></li>
-                            % endif
-				    	</ul>
-				    </div>
-		          % endif
-				</div>
-				<div class="tab-pane" id="query">
-						<pre>${query.query | h}</pre>
-				</div>
-				<div class="tab-pane" id="log">
-					<pre>${log | h}</pre>
-				</div>
-			</div>
+      <div class="tab-content">
+        <div class="active tab-pane" id="results">
+            % if error:
+              <div class="alert alert-error">
+                <h3>${_('Error!')}</h3>
+                <pre>${error_message | h}</pre>
+              </div>
+            % else:
+            % if expected_first_row != start_row:
+                <div class="alert"><strong>${_('Warning:')}</strong> ${_('Page offset may have incremented since last view.')}</div>
+            % endif
+            <table class="table table-striped table-condensed resultTable" cellpadding="0" cellspacing="0">
+            <thead>
+            <tr>
+              <th>&nbsp;</th>
+            % for col in columns:
+                <th>${col}</th>
+            % endfor
+            </tr>
+            </thead>
+            <tbody>
+              % for i, row in enumerate(results):
+              <tr>
+                <td style="white-space: nowrap">${start_row + i}</td>
+              % for item in row:
+                  <td style="white-space: nowrap">${ item }</td>
+              % endfor
+              </tr>
+              % endfor
+            </tbody>
+            </table>
+            <div class="pagination pull-right">
+              <ul>
+              % if start_row != 0:
+                  <li class="prev"><a title="${_('Beginning of List')}" href="${ url('beeswax.views.view_results', query.id, 0) }${'?context=' + context_param or '' | n}">&larr; ${_('Beginning of List')}</a></li>
+              % endif
+              % if has_more and len(results) == 100:
+                  <li><a title="${_('Next page')}" href="${ url('beeswax.views.view_results', query.id, next_row) }${'?context=' + context_param or '' | n}">${_('Next Page')} &rarr;</a></li>
+              % endif
+              </ul>
+            </div>
+            <div id="jumpToColumnAlert" class="alert hide" style="float:left;margin: 20px 0;">
+              <button type="button" class="close" data-dismiss="alert">×</button>
+              <strong>${_('Did you know?')}</strong> ${_('You can click on a row to select a column you want to jump to.')}
+            </div>
+            % endif
+        </div>
+        <div class="tab-pane" id="query">
+          <pre>${query.query | h}</pre>
+        </div>
+        <div class="tab-pane" id="log">
+          <pre>${log | h}</pre>
+        </div>
+      </div>
 
 		</div>
 	</div>
@@ -160,6 +241,11 @@ ${layout.menubar(section='query')}
   </div>
 %endif
 
+<div id="suggestColumns">
+  <a href="#" class="pull-right">&times;</a>
+  <label>${_('Go to column:')} <input type="text" placeholder="${_('column name...')}" /></label>
+</div>
+
 
 <script type="text/javascript" charset="utf-8">
     $(document).ready(function () {
@@ -226,6 +312,78 @@ ${layout.menubar(section='query')}
           $("#fileChooserModal").slideDown();
         });
       }
+
+      $("#collapse").click(function () {
+        $(".sidebar-nav").parent().css("margin-left", "-31%");
+        $("#expand").show().css("top", $(".sidebar-nav i").position().top + "px");
+        $(".sidebar-nav").parent().next().removeClass("span9").addClass("span12").addClass("noLeftMargin");
+      });
+      $("#expand").click(function () {
+        $(this).hide();
+        $(".sidebar-nav").parent().next().removeClass("span12").addClass("span9").removeClass("noLeftMargin");
+        $(".sidebar-nav").parent().css("margin-left", "0");
+      });
+
+      $("[rel='tooltip']").tooltip();
+
+      $(".resultTable tbody").click(function (event) {
+        $(".rowSelected").removeClass("rowSelected");
+        $(".columnSelected").removeClass("columnSelected");
+        $(".cellSelected").removeClass("cellSelected");
+        $(event.target.parentNode).addClass("rowSelected");
+        $(event.target.parentNode).find("td").each(function () {
+          $(this).addClass("rowSelected");
+          $(this).attr("rel", "tooltip").attr("title", $(this).parents("table").find("th").eq($(this).prevAll().length).text()).tooltip();
+        });
+        $("#suggestColumns")
+                .css("left", (event.clientX + $("#suggestColumns").width() > $(window).width() - 10 ? event.clientX - $("#suggestColumns").width() - 10 : event.clientX))
+                .css("top", event.clientY + 10).show();
+        $("#suggestColumns input").focus();
+      });
+
+      $.expr[":"].econtains = function (obj, index, meta, stack) {
+        return (obj.textContent || obj.innerText || $(obj).text() || "").toLowerCase() == meta[3].toLowerCase();
+      }
+
+      var source = [];
+      $(".resultTable th").each(function () {
+        source.push($(this).text());
+      });
+
+      $("#suggestColumns input").typeahead({
+        source:source,
+        updater:function (item) {
+          $("#suggestColumns").hide();
+          $(".resultTable tr td:nth-child(" + ($(".resultTable th:econtains(" + item + ")").index() + 1) + ")").addClass("columnSelected");
+          $(".dataTables_wrapper").animate({
+            scrollLeft:$(".resultTable th:econtains(" + item + ")").position().left + $(".dataTables_wrapper").scrollLeft() - $(".dataTables_wrapper").offset().left - 30
+          }, 300);
+          $(".resultTable tr.rowSelected td:nth-child(" + ($(".resultTable th:econtains(" + item + ")").index() + 1) + ")").addClass("cellSelected");
+        }
+      });
+
+      $("#suggestColumns a").click(function (e) {
+        e.preventDefault();
+        $("#suggestColumns").hide();
+      });
+
+      $(window).resize(function () {
+        $("#suggestColumns").hide();
+      });
+
+      var showAlertTimeout = -1;
+      $(".resultTable tbody").mousemove(function () {
+        window.clearTimeout(showAlertTimeout);
+        if ($("#jumpToColumnAlert").data("show") == null || $("#jumpToColumnAlert").data("show")) {
+          showAlertTimeout = window.setTimeout(function () {
+            $("#jumpToColumnAlert").fadeIn();
+          }, 1300);
+        }
+      });
+
+      $("#jumpToColumnAlert .close").click(function () {
+        $("#jumpToColumnAlert").data("show", false);
+      });
     });
 </script>