started new gradebook functionality

lms/static/js/jquery.gradebook.js

@@ -4,13 +4,16 @@
 var Gradebook = function($element) {
 	var _this = this;
 	var $element = $element;
+	var $body = $('body');
 	var $grades = $element.find('.grades');
+	var $studentTable = $element.find('.student-table');
 	var $gradeTable = $element.find('.grade-table');
+	var $search = $element.find('.student-search-field');
 	var $leftShadow = $('<div class="left-shadow"></div>');
 	var $rightShadow = $('<div class="right-shadow"></div>');
 	var tableHeight = $gradeTable.height();
 	var maxScroll = $gradeTable.width() - $grades.width();
-	var $body = $('body');
+	
 	var mouseOrigin;
 	var tableOrigin;
 
@@ -58,12 +61,30 @@ var Gradebook = function($element) {
 		var targetLeft = clamp($gradeTable.position().left, -maxScroll, 0);
 		updateHorizontalPosition(targetLeft);
 		setShadows(targetLeft);
-	}
+	};
 
 	var updateHorizontalPosition = function(left) {
 		$gradeTable.css({
 			'left': left + 'px'
 		});
+	};
+
+	var highlightRow = function(e) {
+		$element.find('.highlight').removeClass('highlight');
+
+		var index = $(this).index();
+		$studentTable.find('tr').eq(index + 1).addClass('highlight');
+		$gradeTable.find('tr').eq(index + 1).addClass('highlight');
+	};
+
+	var filter = function(e) {
+		var term = $(this).val();
+		if(term.length > 0) {
+			$studentTable.find('tr').hide();
+			$studentTable.find('tbody tr').not(':contains(' + term + '), :nth-child(1)').hide();	
+		} else {
+			$studentTable.find('tbody tr').show();
+		}		
 	}
 
 	$leftShadow.css('height', tableHeight + 'px');
@@ -72,5 +93,11 @@ var Gradebook = function($element) {
 	setShadows(0);
 	$grades.css('height', tableHeight);
 	$gradeTable.bind('mousedown', startDrag);
+	$element.find('tr').bind('mouseover', highlightRow);
+	$search.bind('keyup', filter);
 	$(window).bind('resize', updateWidths);
-}
\ No newline at end of file
+}
+
+
+
+

lms/static/sass/course/_gradebook.scss

@@ -133,18 +133,6 @@ div.gradebook-wrapper {
 			box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset;
 			border-left: 1px solid #ccc;
 
-			// &:before {
-			// 	content: '';
-			// 	display: block;
-			// 	position: absolute;
-			// 	left: 0;
-			// 	top: 0;
-			// 	z-index: 9999;
-			// 	width: 1px;
-			// 	height: 50px;
-			// 	@include linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15));
-			// }
-
 			&:first-child {
 				border-radius: 5px 0 0 0;
 				box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;
@@ -205,6 +193,19 @@ div.gradebook-wrapper {
       @extend .top-header;
     }
   }
+
+	.student-table tr:hover td,
+	.grade-table tr:hover td,
+	.student-table tr.highlight td,
+	.grade-table tr.highlight td {
+		border-color: #74b7d6;
+		@include linear-gradient(#8ed6f7, #76cbf4);
+		color: #333;
+
+		a {
+			color: #333;
+		}
+	}
 }