Merge pull request #1247 from MITx/feature/btalbot/cms-sectiontoggling

Course Overview Section Collapse/Expand Toggling

cms/static/js/base.js

@@ -39,7 +39,13 @@ $(document).ready(function() {
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
 
-    $('.collapse-all-button').bind('click', collapseAll);
+    // toggling overview section details
+    $(function(){
+      if($('.courseware-section').length > 0) {
+        $('.toggle-button-sections').addClass('is-shown');
+      }
+    });
+    $('.toggle-button-sections').bind('click', toggleSections);
 
     // autosave when a field is updated on the subsection page
     $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
@@ -123,9 +129,30 @@ $(document).ready(function() {
     });
 });
 
-function collapseAll(e) {
-    $('.branch').addClass('collapsed');
-    $('.expand-collapse-icon').removeClass('collapse').addClass('expand');
+// function collapseAll(e) {
+//     $('.branch').addClass('collapsed');
+//     $('.expand-collapse-icon').removeClass('collapse').addClass('expand');
+// }
+
+function toggleSections(e) {
+  e.preventDefault();
+
+  $section = $('.courseware-section');
+  sectionCount = $section.length;
+  $button = $(this);
+  $labelCollapsed = $('<i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span>');
+  $labelExpanded = $('<i class="ss-icon ss-symbolicons-block">down</i> <span class="label">Expand All Sections</span>');
+
+  var buttonLabel = $button.hasClass('is-activated') ? $labelCollapsed : $labelExpanded;
+  $button.toggleClass('is-activated').html(buttonLabel);
+
+  if($button.hasClass('is-activated')) {
+      $section.addClass('collapsed');
+      $section.find('.expand-collapse-icon').removeClass('collapsed').addClass('expand');
+  } else {
+      $section.removeClass('collapsed');
+      $section.find('.expand-collapse-icon').removeClass('expand').addClass('collapse');
+  }
 }
 
 function editSectionPublishDate(e) {

cms/static/sass/_courseware.scss

@@ -422,6 +422,14 @@ input.courseware-unit-search-input {
 			float: left;
 			margin: 29px 6px 16px 16px;
 			@include transition(none);
+
+			&.expand {
+				background-position: 0 0;
+			}
+
+			&.collapsed {
+				
+			}
 		}
 
 		.drag-handle {
@@ -501,14 +509,31 @@ input.courseware-unit-search-input {
 	}
 }
 
-.collapse-all-button {
+.toggle-button-sections {
+	display: none;
+	position: relative;
 	float: right;
 	margin-top: 10px;
+
 	font-size: 13px;
 	color: $darkGrey;
 
-	.collapse-all-icon {
-		margin-right: 6px;
+	&.is-shown {
+		display: block;
+	}
+
+	.ss-icon {
+		@include border-radius(20px);
+		position: relative;
+		top: -1px;
+		display: inline-block;
+		margin-right: 2px;
+		line-height: 5px;
+		font-size: 11px;
+	}
+
+	.label {
+		display: inline-block;
 	}
 }
 

cms/templates/overview.html

@@ -122,7 +122,7 @@
     <div class="inner-wrapper">
       <div class="page-actions">
         <a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
-        <a href="#" class="collapse-all-button"><span class="collapse-all-icon"></span>Collapse All</a>
+        <a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span></a>
       </div>
       <article class="courseware-overview" data-course-id="${context_course.location.url()}">        
         % for section in sections: