studio - revised course overview section collapse button to toggle collapsing/expanding

cms/static/js/base.js

@@ -42,6 +42,7 @@ $(document).ready(function() {
     $('.new-unit-item').bind('click', createNewUnit);
 
     $('.collapse-all-button').bind('click', collapseAll);
+    $('.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);
@@ -130,6 +131,19 @@ function collapseAll(e) {
     $('.expand-collapse-icon').removeClass('collapse').addClass('expand');
 }
 
+function toggleSections(e) {
+  e.preventDefault();
+
+  $section = $('.courseware-section');
+  $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>');
+
+  $section.toggleClass('collapsed');
+  var buttonLabel = $section.hasClass('collapsed') ? $labelExpanded : $labelCollapsed;
+  $button.toggleClass('is-activated').html(buttonLabel);
+}
+
 function editSectionPublishDate(e) {
     e.preventDefault();
     $modal = $('.edit-subsection-publish-settings').show();

cms/static/sass/_courseware.scss

@@ -512,6 +512,29 @@ input.courseware-unit-search-input {
 	}
 }
 
+.toggle-button-sections {
+	position: relative;
+	float: right;
+	margin-top: 10px;
+
+	font-size: 13px;
+	color: $darkGrey;
+
+	.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;
+	}
+}
+
 .new-section-name,
 .new-subsection-name-input {
 	width: 515px;

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: