grading - added in gradable by type menu to sub section editing

cms/static/sass/_subsection.scss

@@ -180,3 +180,110 @@
 		}
 	}
 }
+
+.gradable {
+
+	label {
+		display: inline-block;
+		vertical-align: top;
+	}
+
+	.gradable-status {
+		position: relative;
+		top: -4px;
+		display: inline-block;
+		margin-left: 10px;
+		width: 65%;
+
+		.status-label {
+			margin: 0;
+			padding: 0;
+			background: transparent;
+			color: $darkGrey;
+			border: none;
+			font-size: 12px;
+			font-weight: bold;
+			line-height: 16px;
+		}
+
+		.menu-toggle {
+			z-index: 100;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 20px;
+			background: transparent;
+
+			&:hover, &.is-active {
+				color: $blue;
+			}
+		}
+
+		.menu {
+			z-index: 10;
+			position: absolute;
+			top: -12px;
+			left: -7px;
+			width: 100%;
+			margin: 0;
+			padding: 8px 12px;
+			opacity: 0.0;
+			background: $white;
+			border: 1px solid $mediumGrey;
+			font-size: 12px;
+			@include border-radius(4px);
+			@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+			@include transition(opacity .15s);
+
+
+			li {
+				margin-bottom: 3px;
+				padding-bottom: 3px;
+				border-bottom: 1px solid $lightGrey;
+
+				&:last-child {
+					margin-bottom: 0;
+					padding-bottom: 0;
+					border: none;
+
+					a {
+						color: $darkGrey;
+					}
+				}
+			}
+
+			a {
+
+				&.is-selected {
+					font-weight: bold;
+				}
+			}
+		}
+
+		// dropdown state
+		&.is-active {
+
+			.menu {
+				opacity: 1.0;
+			}
+
+			.menu-toggle {
+				z-index: 10000;
+			}
+		}
+
+		// set state
+		&.is-set {
+
+			.menu-toggle {
+				color: $blue;
+			}
+
+			.status-label {
+				display: block;
+				color: $blue;
+			}
+		}
+	}
+	}

cms/templates/edit_subsection.html

@@ -84,6 +84,28 @@
             <a href="#" class="sync-date no-spinner">Sync to ${parent_item.display_name}.</a></p>
         % endif
       </div>
+    
+    <div class="row gradable">
+      <label>Graded? :</label>
+      
+      <div class="gradable-status">
+        <h4 class="status-label">Not Graded</h4>
+        
+        <a class="menu-toggle" href="#">
+          
+        </a>
+                        
+        <ul class="menu">
+          <li><a class="is-selected" href="#">Homework</a></li>
+          <li><a href="#">Finger Exercises</a></li>
+          <li><a href="#">Lab</a></li>
+          <li><a href="#">Midterm Exam</a></li>
+          <li><a href="#">Final Exam</a></li>
+          <li><a class="gradable-status-notgraded" href="#">Not Graded</a></li>
+        </ul>        
+      </div>
+    </div>
+    
     <div class="due-date-input row">
       <label>Due date:</label>
       <a href="#" class="set-date">Set a due date</a>
@@ -117,6 +139,12 @@
 <script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
 <script src="${static.url('js/vendor/date.js')}"></script>
 <script type="text/javascript">
+    (function() {
+      $body = $('body');  
+      $('.gradable-status .menu-toggle').bind('click', showGradeMenu);
+      $('.gradable-status .menu').bind('click', selectGradeType);
+    })();
+
     $(document).ready(function() {
         // expand the due-date area if the values are set
         if ($('#due_date').val() != '') {
@@ -125,5 +153,35 @@
             $block.find('.date-setter').show();
         }
     })
+
+    // grading status
+    function showGradeMenu(e) {
+
+      $section = $(this).closest('.gradable-status');
+
+      e.preventDefault();
+      $section.toggleClass('is-active');
+    }
+
+    function selectGradeType(e) {
+      e.preventDefault();
+
+      var $section = $(this).closest('.gradable-status');
+      $section.find('.menu li a').removeClass('is-selected');
+
+
+      var $target = $(e.target).addClass('is-selected');
+      var $label = $section.find('.status-label');
+
+      $section.removeClass('is-active');      
+      $label.html($target.html());
+
+      if ($target.hasClass('gradable-status-notgraded')) {
+        $section.removeClass('is-set');
+      }
+      else {
+        $section.addClass('is-set');
+      }
+    }
 </script>
 </%block>