فهرست منبع

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 سال پیش
والد
کامیت
08eb2672b8
1فایلهای تغییر یافته به همراه217 افزوده شده و 59 حذف شده
  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>