For tables implemented with toaster tables, make sure the table heading
shows:
* Proper borders
* Different states for sortable, not sortable and sorted column
headings
* Lighter help bubbles using the correct icon
* Correct selected / not selected states for filters
Also use the new responsive tables provided by Bootstrap 3.
Signed-off-by: Belen Barros Pena <belen.barros.p...@linux.intel.com>
---
bitbake/lib/toaster/toastergui/static/css/default.css | 15 +++++++++++++++
bitbake/lib/toaster/toastergui/static/js/table.js | 12 +++++++-----
.../lib/toaster/toastergui/templates/toastertable.html | 14 ++++++++------
3 files changed, 30 insertions(+), 11 deletions(-)
diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css
b/bitbake/lib/toaster/toastergui/static/css/default.css
index 1485337..137e6f5 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -32,6 +32,8 @@ img.logo { height: 30px; vertical-align: bottom; }
.build-result .project-name { margin-top: -10px; margin-bottom: 5px; }
/* Styles for the help information */
+.get-help { color: #CCCCCC; }
+.get-help:hover { color: #999999; cursor: pointer; }
.get-help-green { color: #468847; }
.get-help-green:hover { color: #347132; cursor: pointer; }
.get-help-blue { color: #3A87AD; }
@@ -50,3 +52,16 @@ span[class^="remove-search-btn-"]:hover { color: #333; }
/* Override the default font-weight for labels: it's a bit too much */
label { font-weight: normal; }
+
+/* Firefox workaround for awkward fieldset styling. See
http://getbootstrap.com/css/#tables-responsive */
+@-moz-document url-prefix() { fieldset { display: table-cell; } }
+
+/* Table heading sortable / not sortable states */
+thead > tr > th > a { font-weight: normal; }
+thead > tr > th > a.sorted { font-weight: bold; color: #333; }
+
+/* Give some extra space to the 'clear filter' buttons */
+.tooltip .btn { margin: 5px; }
+
+/* In table headings, separate the help bubble from the column heading */
+thead > tr > th > .glyphicon-question-sign { margin-right: 5px; }
diff --git a/bitbake/lib/toaster/toastergui/static/js/table.js
b/bitbake/lib/toaster/toastergui/static/js/table.js
index be32bb3..5e3171f 100644
--- a/bitbake/lib/toaster/toastergui/static/js/table.js
+++ b/bitbake/lib/toaster/toastergui/static/js/table.js
@@ -169,7 +169,7 @@ function tableInit(ctx){
if (tableChromeDone === true)
return;
- var tableHeadRow = table.find("thead");
+ var tableHeadRow = table.find("thead > tr");
var editColMenu = $("#table-chrome-"+ctx.tableName).find(".editcol");
tableHeadRow.html("");
@@ -190,7 +190,7 @@ function tableInit(ctx){
/* Setup the help text */
if (col.help_text.length > 0) {
- var help_text = $('<i class="icon-question-sign get-help"> </i>');
+ var help_text = $('<span class="glyphicon glyphicon-question-sign
get-help"> </span>');
help_text.tooltip({title: col.help_text});
header.append(help_text);
}
@@ -227,12 +227,12 @@ function tableInit(ctx){
} else {
/* Not orderable */
header.css("font-weight", "normal");
- header.append('<span class="muted">' + col.title + '</span> ');
+ header.append('<span class="text-muted">' + col.title + '</span> ');
}
/* Setup the filter button */
if (col.filter_name){
- var filterBtn = $('<a href="#" role="button" data-filter-on="' +
col.filter_name + '" class="pull-right btn btn-mini" data-toggle="modal"><i
class="glyphicon glyphicon-filter filtered"></i></a>');
+ var filterBtn = $('<a href="#" role="button" data-filter-on="' +
col.filter_name + '" class="pull-right btn btn-link btn-xs"
data-toggle="modal"><i class="glyphicon glyphicon-filter filtered"></i></a>');
filterBtn.data('filter-name', col.filter_name);
filterBtn.prop('id', col.filter_name);
@@ -279,11 +279,12 @@ function tableInit(ctx){
/* Toggles the active state of the filter button */
function filterBtnActive(filterBtn, active){
if (active) {
+ filterBtn.removeClass("btn-link");
filterBtn.addClass("btn-primary");
filterBtn.tooltip({
html: true,
- title: '<button class="btn btn-small btn-primary"
onClick=\'$("#clear-filter-btn-'+ ctx.tableName +'").click();\'>Clear
filter</button>',
+ title: '<button class="btn btn-sm btn-primary"
onClick=\'$("#clear-filter-btn-'+ ctx.tableName +'").click();\'>Clear
filter</button>',
placement: 'bottom',
delay: {
hide: 1500,
@@ -292,6 +293,7 @@ function tableInit(ctx){
});
} else {
filterBtn.removeClass("btn-primary");
+ filterBtn.addClass("btn-link");
filterBtn.tooltip('destroy');
}
}
diff --git a/bitbake/lib/toaster/toastergui/templates/toastertable.html
b/bitbake/lib/toaster/toastergui/templates/toastertable.html
index debf6e6..3419862 100644
--- a/bitbake/lib/toaster/toastergui/templates/toastertable.html
+++ b/bitbake/lib/toaster/toastergui/templates/toastertable.html
@@ -88,12 +88,14 @@
</div>
<!-- The actual table -->
- <table class="table table-bordered table-hover tablesorter"
id="{{table_name}}">
- <thead>
- <tr><th></th></tr>
- </thead>
- <tbody></tbody>
- </table>
+ <div class="table-responsive">
+ <table class="table table-bordered table-hover" id="{{table_name}}">
+ <thead>
+ <tr><th></th></tr>
+ </thead>
+ <tbody></tbody>
+ </table>
+ </div>
<!-- Pagination controls -->
<div id="pagination-{{table_name}}">
--
1.9.1
--
_______________________________________________
toaster mailing list
toaster@yoctoproject.org
https://lists.yoctoproject.org/listinfo/toaster
