diff --git a/guacamole/src/main/webapp/app/index/styles/sorted-tables.css b/guacamole/src/main/webapp/app/index/styles/sorted-tables.css new file mode 100644 index 000000000..2c84bcae4 --- /dev/null +++ b/guacamole/src/main/webapp/app/index/styles/sorted-tables.css @@ -0,0 +1,64 @@ +/* + * Copyright (C) 2015 Glyptodon LLC + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +table.sorted { + border-collapse: collapse; +} + +table.sorted th { + background: rgba(0, 0, 0, 0.125); + font-weight: normal; +} + +table.sorted th, +table.sorted td { + border: 1px solid #AAA; + padding: 0.5em 1em; +} + +table.sorted th.sortable { + cursor: pointer; +} + +table.sorted th.sort-primary { + font-weight: bold; + padding-right: 0; +} + +table.sorted th.sort-primary:after { + + display: inline-block; + width: 1em; + height: 1em; + vertical-align: middle; + content: ' '; + + background-size: 1em 1em; + background-position: right center; + background-repeat: no-repeat; + background-image: url('images/arrows/down.png'); + +} + +table.sorted th.sort-primary.sort-descending:after { + background-image: url('images/arrows/up.png'); +} diff --git a/guacamole/src/main/webapp/app/list/directives/guacSortOrder.js b/guacamole/src/main/webapp/app/list/directives/guacSortOrder.js new file mode 100644 index 000000000..5bc131e2f --- /dev/null +++ b/guacamole/src/main/webapp/app/list/directives/guacSortOrder.js @@ -0,0 +1,104 @@ +/* + * Copyright (C) 2015 Glyptodon LLC + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +/** + * Updates the priority of the sorting property given by "guac-sort-property" + * within the StableSort object given by "guac-sort-order". The CSS classes + * "sort-primary" and "sort-descending" will be applied to the associated + * element depending on the priority and sort direction of the given property. + * + * The associated element will automatically be assigned the "sortable" CSS + * class. + */ +angular.module('list').directive('guacSortOrder', [function guacFocus() { + + return { + restrict: 'A', + + link: function linkGuacSortOrder($scope, $element, $attrs) { + + /** + * The object defining the sorting order. + * + * @type StableSort + */ + var sortOrder = $scope.$eval($attrs.guacSortOrder); + + /** + * The name of the property whose priority within the sort order + * is controlled by this directive. + * + * @type String + */ + var sortProperty = $scope.$eval($attrs.guacSortProperty); + + /** + * Returns whether the sort property defined via the + * "guac-sort-property" attribute is the primary sort property of + * the associated sort order. + * + * @returns {Boolean} + * true if the sort property defined via the + * "guac-sort-property" attribute is the primary sort property, + * false otherwise. + */ + var isPrimary = function isPrimary() { + return sortOrder.primary === sortProperty; + }; + + /** + * Returns whether the primary property of the sort order is + * sorted in descending order. + * + * @returns {Boolean} + * true if the primary property of the sort order is sorted in + * descending order, false otherwise. + */ + var isDescending = function isDescending() { + return sortOrder.descending; + }; + + // Assign "sortable" class to associated element + $element.addClass('sortable'); + + // Add/remove "sort-primary" class depending on sort order + $scope.$watch(isPrimary, function primaryChanged(primary) { + $element.toggleClass('sort-primary', primary); + }); + + // Add/remove "sort-descending" class depending on sort order + $scope.$watch(isDescending, function descendingChanged(descending) { + $element.toggleClass('sort-descending', descending); + }); + + // Update sort order when clicked + $element[0].addEventListener('click', function clicked() { + $scope.$evalAsync(function updateSortOrder() { + sortOrder.togglePrimary(sortProperty); + }); + }); + + } // end guacSortOrder link function + + }; + +}]); diff --git a/guacamole/src/main/webapp/app/manage/styles/sessions.css b/guacamole/src/main/webapp/app/manage/styles/sessions.css index 30b486828..ad8a7307e 100644 --- a/guacamole/src/main/webapp/app/manage/styles/sessions.css +++ b/guacamole/src/main/webapp/app/manage/styles/sessions.css @@ -22,57 +22,13 @@ .manage table.session-list { width: 100%; - border-collapse: collapse; } .manage table.session-list tr.session:hover { background: #CDA; } -.manage table.session-list th { - background: rgba(0, 0, 0, 0.125); - font-weight: normal; -} - -.manage table.session-list th, -.manage table.session-list td { - border: 1px solid #AAA; - padding: 0.5em 1em; -} - .manage table.session-list .select-session { min-width: 2em; text-align: center; } - -.manage table.session-list th { - cursor: pointer; -} - -.manage table.session-list th.select-session { - cursor: auto; -} - -.manage table.session-list th.sort-primary { - font-weight: bold; - padding-right: 0; -} - -.manage table.session-list th.sort-primary:after { - - display: inline-block; - width: 1em; - height: 1em; - vertical-align: middle; - content: ' '; - - background-size: 1em 1em; - background-position: right center; - background-repeat: no-repeat; - background-image: url('images/arrows/down.png'); - -} - -.manage table.session-list th.sort-primary.sort-descending:after { - background-image: url('images/arrows/up.png'); -} diff --git a/guacamole/src/main/webapp/app/manage/templates/manageSessions.html b/guacamole/src/main/webapp/app/manage/templates/manageSessions.html index b20d3e1e5..84d9fe6d2 100644 --- a/guacamole/src/main/webapp/app/manage/templates/manageSessions.html +++ b/guacamole/src/main/webapp/app/manage/templates/manageSessions.html @@ -41,24 +41,20 @@ THE SOFTWARE. placeholder="'MANAGE_SESSION.FIELD_PLACEHOLDER_FILTER' | translate"> - +
- - - -
+ {{'MANAGE_SESSION.TABLE_HEADER_SESSION_USERNAME' | translate}} + {{'MANAGE_SESSION.TABLE_HEADER_SESSION_STARTDATE' | translate}} + {{'MANAGE_SESSION.TABLE_HEADER_SESSION_REMOTEHOST' | translate}} + {{'MANAGE_SESSION.TABLE_HEADER_SESSION_CONNECTION_NAME' | translate}}