Просмотр исходного кода

added little icons to the table for when you want to sort

Henry Oswald 12 лет назад
Родитель
Сommit
57b461e0ff

+ 9 - 6
services/web/app/views/project/list/project-list.jade

@@ -117,16 +117,19 @@
 			)
 				li.container-fluid
 					.row
-						.col-md-6
+						.col-md-6(ng-click="changePredicate('name')")
 							input.select-all(
 								select-all,
 								type="checkbox"
 							)
-							span.header(ng-click="changePredicate('name')") Title
-						.col-md-2
-							span.header(ng-click="changePredicate('accessLevel')") Owner
-						.col-md-4
-							span.header(ng-click="changePredicate('lastUpdated')") Last Modified
+							span.header Title
+							i.tablesort.fa(ng-class="getSortIconClass('name')")
+						.col-md-2(ng-click="changePredicate('accessLevel')")
+							span.header Owner
+							i.tablesort.fa(ng-class="getSortIconClass('accessLevel')")
+						.col-md-4(ng-click="changePredicate('lastUpdated')")
+							span.header Last Modified
+							i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')")
 				li.project_entry.container-fluid(
 					ng-repeat="project in visibleProjects | orderBy:predicate:reverse",
 					ng-controller="ProjectListItemController"

+ 8 - 0
services/web/public/coffee/main/project-list.coffee

@@ -82,6 +82,14 @@ define [
 				$scope.reverse = !$scope.reverse
 			$scope.predicate = newPredicate
 
+		$scope.getSortIconClass = (column)->
+			if column == $scope.predicate and $scope.reverse
+				return "fa-sort-down"
+			else if column == $scope.predicate and !$scope.reverse
+				return "fa-sort-up"
+			else
+				return "fa-sort"
+
 		$scope.clearSearchText = () ->
 			$scope.searchText = ""
 			$scope.$emit "search:clear"

+ 3 - 0
services/web/public/stylesheets/app/project-list.less

@@ -148,6 +148,9 @@ ul.project-list {
 			color: white;
 		}
 	}
+	i.tablesort {
+		padding-left: 8px;
+	}
 }
 
 #institution_auto_complete {