diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/css/style.css b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/css/style.css index 3e5e0ec4cc0572291ac8a7f3e886e8580aa2a123..ce30319e8a8d4640816b8db38391bf697cda9225 100644 --- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/css/style.css +++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/css/style.css @@ -230,6 +230,34 @@ h1, h2, legend { margin: 10px; } +/* Sorting */ + +.interactive th:hover { + cursor: pointer; + background-color: #F5F5F5; +} + +.current-sort { + margin-right: 20px; + background-color: lightblue; + background-size:14px 14px; + background-repeat:no-repeat; + background-position: right center; + border-right: 5px solid lightblue; +} + +.interactive th.current-sort:hover { + background-color: lightblue; +} + +.current-sort[sort-order = DS] { + background-image: url("../img/chevron-down-icon.png"); +} + +.current-sort[sort-order = AS] { + background-image: url("../img/chevron-up-icon.png"); +} + /* * Sample Table - Inspector Previews */ diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleTable.js b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleTable.js index c405a1b448b250ac2c0a03134336aaacc8a0dfc5..5682a91794230c89763cb76c5b8fa4d728f86f24 100644 --- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleTable.js +++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleTable.js @@ -205,7 +205,7 @@ function SampleTable(serverFacade, sampleTableId, profile, sampleTypeCode, inspe $("#tableContainer").append("<div class='wrapper' style='clear: both; padding-top: 10px;'>"); var tableTemplate = "<table style='width:100%;' class='table table-hover' id=\"sample-table\"><thead>"; - tableTemplate += "<tr class=\"sample-table-header\"><th sort-attribute='code'>Code</th>"; + tableTemplate += "<tr class=\"sample-table-header interactive\"><th sort-attribute='code'>Code</th>"; for (var i = 0; i < sampleTypePropertiesDisplayNames.length; i++) { tableTemplate += "<th sort-property='" + sampleTypeProperties[i] + "'>" + sampleTypePropertiesDisplayNames[i]+ "</th>"; } @@ -253,6 +253,8 @@ function SampleTable(serverFacade, sampleTableId, profile, sampleTypeCode, inspe } var sortingFunction = function(event) { + $(".sample-table-header th").removeClass("current-sort") + var $th = $(this); var sortProperty = $th.attr("sort-property"); var sortAttribute = $th.attr("sort-attribute"); @@ -272,6 +274,8 @@ function SampleTable(serverFacade, sampleTableId, profile, sampleTypeCode, inspe if(sortAttribute) { sortByAttribute(sortAttribute,sortOrder === "AS"); } + + $th.addClass("current-sort"); } var $headers = $(".sample-table-header th").click(sortingFunction);