Browse Source

HUE-177. Implement support for HtmlTable tree view

Aaron Newton 15 years ago
parent
commit
3ffdf2654a

+ 256 - 0
apps/jframegallery/src/jframegallery/templates/html-table.treeview.html

@@ -0,0 +1,256 @@
+{% comment %}
+Licensed to Cloudera, Inc. under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  Cloudera, Inc. licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+{% endcomment %}
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+	<head>
+		<title>HtmlTable Tree View</title>
+	</head>
+	<body>
+	<h1 class="ccs-hidden">HtmlTable Tree View</h1>
+	<div class="jframe_padded">
+		
+		<p>The table below will appear to be a tree view table immediately, even before scripts are loaded. It will become interactive once the scripts have loaded. You should be able to click a section's expand arrow to expand it. Keys should work - up and down to navigate, shift + up and down to multiselect, left and right to collapse and expand sections.</p>
+		<table id="tree2" data-filters="HtmlTable" class="selectable treeView multiselect ccs-bordered-table">
+			<thead>
+				<th>Name</th>
+				<th>Date Modified</th>
+				<th>Size</th>
+			</thead>
+				<tbody>
+					<tr class="table-folder table-depth-0">
+						<td>
+							<a class="expand"></a>
+							Documents
+						</td>
+						<td>Jul 10, 2010 1:39pm</td>
+						<td>--</td>
+					</tr>
+						<tr class="ccs-hidden table-depth-1">
+							<td>Resume.pdf</td>
+							<td>Jul 10, 2010 1:39pm</td>
+							<td>--</td>
+						</tr>
+						<tr class="ccs-hidden table-depth-1">
+							<td>notes.txt</td>
+							<td>Jul 10, 2010 1:39pm</td>
+							<td>--</td>
+						</tr>
+						<tr class="ccs-hidden table-folder table-depth-1">
+							<td>
+								<a class="expand"></a>
+								Receipts
+							</td>
+							<td>Jul 10, 2010 1:39pm</td>
+							<td>--</td>
+						</tr>
+								<tr class="ccs-hidden table-depth-2">
+									<td>starbucks.txt</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="ccs-hidden table-depth-2">
+									<td>safeway.txt</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="ccs-hidden table-depth-2">
+									<td>movies.txt</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="ccs-hidden table-folder table-depth-2">
+									<td>
+										<a class="expand"></a>
+										Taxes
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="ccs-hidden table-depth-3">
+									<td>
+										2008 Taxes.pdf
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="ccs-hidden table-depth-3">
+									<td>
+										2009 Taxes.pdf
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="ccs-hidden table-depth-3">
+									<td>
+										2010 Taxes.pdf
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="ccs-hidden table-folder table-depth-2">
+									<td>
+										<a class="expand"></a>
+										Pictures</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="ccs-hidden table-depth-3">
+									<td>
+										Baby.jpg
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="ccs-hidden table-depth-2">
+									<td>
+										Bar.txt
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+						<tr class="table-depth-0">
+							<td>
+								Foo.txt
+							</td>
+							<td>Jul 10, 2010 1:39pm</td>
+							<td>--</td>
+						</tr>
+					</tbody>
+		</table>
+
+		<p>The table below will turn into a treeview on startup. Unlike the table above, none of its rows are hidden on load but only after the HtmlTable filter is applied. Both will appear the same to you, though this one will take longer to build.</p>
+		<table id="tree" data-filters="HtmlTable" class="selectable treeView buildTree ccs-bordered-table buildTree">
+			<thead>
+				<th>Name</th>
+				<th>Date Modified</th>
+				<th>Size</th>
+			</thead>
+				<tbody>
+					<tr class="table-depth-0">
+						<td>
+							Documents
+						</td>
+						<td>Jul 10, 2010 1:39pm</td>
+						<td>--</td>
+					</tr>
+						<tr class="table-depth-1">
+							<td>Resume.pdf</td>
+							<td>Jul 10, 2010 1:39pm</td>
+							<td>--</td>
+						</tr>
+						<tr class="table-depth-1">
+							<td>notes.txt</td>
+							<td>Jul 10, 2010 1:39pm</td>
+							<td>--</td>
+						</tr>
+						<tr class="table-depth-1">
+							<td>
+								Receipts
+							</td>
+							<td>Jul 10, 2010 1:39pm</td>
+							<td>--</td>
+						</tr>
+								<tr class="table-depth-2">
+									<td>starbucks.txt</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="table-depth-2">
+									<td>safeway.txt</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="table-depth-2">
+									<td>movies.txt</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="table-depth-2">
+									<td>
+										Taxes
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="table-depth-3">
+									<td>
+										2008 Taxes.pdf
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="table-depth-3">
+									<td>
+										2009 Taxes.pdf
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="table-depth-3">
+									<td>
+										2010 Taxes.pdf
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="table-depth-2">
+									<td>Pictures</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="table-depth-3">
+									<td>
+										Baby.jpg
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+								<tr class="table-depth-2">
+									<td>
+										Bar.txt
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+							<tr class="table-depth-1">
+								<td>
+									Candy
+								</td>
+								<td>Jul 10, 2010 1:39pm</td>
+								<td>--</td>
+							</tr>
+								<tr class="table-depth-2">
+									<td>
+										Snickers.txt
+									</td>
+									<td>Jul 10, 2010 1:39pm</td>
+									<td>--</td>
+								</tr>
+						<tr class="table-depth-0">
+							<td>
+								Foo.txt
+							</td>
+							<td>Jul 10, 2010 1:39pm</td>
+							<td>--</td>
+						</tr>
+					</tbody>
+		</table>
+	
+	</div>
+	</body>
+</html>

+ 23 - 3
desktop/core/static/css/shared.css

@@ -238,12 +238,18 @@ table[data-filters*=HtmlTable] td {
 	background: #fff;
 	border: none;
 }
+table[data-filters*=HtmlTable]:not(.treeView) tr:nth-child(odd) td {
+	background-color: #f3f3f3;
+}
 table[data-filters*=HtmlTable] tr.table-tr-odd td {
-	background: #f3f3f3;
+	background-color: #f3f3f3;
 }
-table[data-filters*=HtmlTable] tr:nth-child(odd) td {
-	background: #f3f3f3;
+table.ccs-bordered-table {
+	width: 98%;
+	margin: 4px 1%;
+	border: 1px solid #888;
 }
+
 table[data-filters*=HtmlTable] tr.selected td, table[data-filters*=HtmlTable] tr.table-tr-selected td, table[data-filters*=HtmlTable] tr.selected td a, table[data-filters*=HtmlTable] tr.table-tr-selected td a {
 	background-color: #3875d7;
 	color: #fff;
@@ -278,6 +284,20 @@ span.table-th-sort-span {
 .table-th-sort-rev span.table-th-sort-span {
 	background: url(/static/art/icons/bullet_arrow_up.png) -4px top no-repeat;
 }
+table[data-filters*=HtmlTable].treeView tr a.expand {
+	display: block;
+	float: left;
+	width: 10px;
+	height: 10px;
+	background: url(/static/art/divots.png);
+	position: relative;
+	top: 4px;
+	left: -4px;
+}
+table[data-filters*=HtmlTable].treeView tr.table-expanded a.expand {
+	background: url(/static/art/divots.png) 0px -14px;
+}
+
 
 /* stickywin solid; this is the login window styles */
 div.solid-win div.body-left { 

+ 2 - 0
desktop/core/static/js/Source/BehaviorFilters/Behavior.HtmlTableKeyboard.js

@@ -26,7 +26,9 @@ Behavior.addGlobalPlugin('HtmlTable', 'HtmlTableJFrame', function(element, metho
 
 	var table = element.retrieve('HtmlTable');
 	if (table.keyboard) {
+		table.keyboard.relinquish();
 		methods.registerKeyboard(table.keyboard);
+		table.keyboard.activate();
 		this.markForCleanup(element, function(){
 			methods.unregisterKeyboard(table.keyboard);
 		});

+ 1 - 1
ext/thirdparty/js/mootools-more.hash

@@ -1 +1 @@
-9db03e0d94a62eb59a60fb801f57ceb873604b55
+a56861433b196c03c5b916b10541a33105ac03e6