safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 13:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-1138: Generalize sorting logic.

Browse Source
This commit is contained in:
Michael Jumper
2015-03-26 14:28:51 -07:00
parent 5abd8326b2
commit 4f5c757b43
4 changed files with 173 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
guacamole/src/main/webapp/app/index/styles/sorted-tables.css Normal file
View File

@@ -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');
}

104
guacamole/src/main/webapp/app/list/directives/guacSortOrder.js Normal file
View File

@@ -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
};
}]);

44
guacamole/src/main/webapp/app/manage/styles/sessions.css
View File

@@ -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');
}

14
guacamole/src/main/webapp/app/manage/templates/manageSessions.html
View File

@@ -41,24 +41,20 @@ THE SOFTWARE.
placeholder="'MANAGE_SESSION.FIELD_PLACEHOLDER_FILTER' | translate"></guac-filter>
<!-- List of current user sessions -->
<table class="session-list">
<table class="sorted session-list">
<thead>
<tr>
<th class="select-session"></th>
<th ng-class="{'sort-primary': wrapperOrder.isSortedBy('activeConnection.username'), 'sort-descending': wrapperOrder.descending}"
ng-click="wrapperOrder.toggleSort('activeConnection.username')">
<th guac-sort-order="wrapperOrder" guac-sort-property="'activeConnection.username'">
{{'MANAGE_SESSION.TABLE_HEADER_SESSION_USERNAME' | translate}}
</th>
<th ng-class="{'sort-primary': wrapperOrder.isSortedBy('activeConnection.startDate'), 'sort-descending': wrapperOrder.descending}"
ng-click="wrapperOrder.toggleSort('activeConnection.startDate')">
<th guac-sort-order="wrapperOrder" guac-sort-property="'activeConnection.startDate'">
{{'MANAGE_SESSION.TABLE_HEADER_SESSION_STARTDATE' | translate}}
</th>
<th ng-class="{'sort-primary': wrapperOrder.isSortedBy('activeConnection.remoteHost'), 'sort-descending': wrapperOrder.descending}"
ng-click="wrapperOrder.toggleSort('activeConnection.remoteHost')">
<th guac-sort-order="wrapperOrder" guac-sort-property="'activeConnection.remoteHost'">
{{'MANAGE_SESSION.TABLE_HEADER_SESSION_REMOTEHOST' | translate}}
</th>
<th ng-class="{'sort-primary': wrapperOrder.isSortedBy('name'), 'sort-descending': wrapperOrder.descending}"
ng-click="wrapperOrder.toggleSort('name')">
<th guac-sort-order="wrapperOrder" guac-sort-property="'name'">
{{'MANAGE_SESSION.TABLE_HEADER_SESSION_CONNECTION_NAME' | translate}}
</th>
</tr>