Courses UI - Consolidate class settings into single modal

app/styles/courses/mock1/course-details.sass

@@ -12,18 +12,15 @@
     .concept-completed-foreground
       font-size: 12pt
 
-  #editDescriptionModal .modal-dialog
+  #editSettingsModal .modal-dialog
     background-color: white
-
+    font-size: 14pt
-  #editNameModal .modal-dialog
-    background-color: white
-    max-width: 400px
 
   .edit-description-input
     width: 100%
 
   .edit-name-input
-    width: 100%
+    width: 50%
 
   .member-header
     cursor: pointer

app/templates/courses/mock1/course-details.jade

@@ -14,56 +14,44 @@ block content
     span.spl Student view
   div(style='border-bottom: 1px solid black;')
 
-  .modal#editNameModal
+  .modal#editSettingsModal
     .modal-dialog
       .modal-header
         button.close(data-dismiss='modal')
           span ×
-        h3.modal-title Edit Class Name
+        h3.modal-title Edit Class Settings
       .modal-body
-        p This title will be displayed to everyone enrolled in this class.
+        p This title will be displayed to everyone in the class.
-        input.edit-name-input(type='text', value="#{instance.name}")
+        p 
+          input.edit-name-input(type='text', value="#{instance.name}")
+        p This description will be displayed to everyone in the class.
+        p 
+          textarea.edit-description-input(rows=2)= instance.description
+        p Select programming languages available to the class:
+        p 
+          select.form-control.select-language
+            option(value="Python") Python
+            option(value="JavaScript") JavaScript
+            option(value="All Languages") All Languages
+        p
+          input(type='checkbox', checked)
+          span.spl Show student progress to everyone in the class
       .modal-footer
-        button.btn.edit-name-save-btn(data-i18n="common.save_changes")
+        button.btn.btn-save-settings(data-i18n="common.save_changes")
-
-  .modal#editDescriptionModal
-    .modal-dialog
-      .modal-header
-        button.close(data-dismiss='modal')
-          span ×
-        h3.modal-title Edit Class Description
-      .modal-body
-        p This description will be displayed to everyone enrolled in this class.
-        textarea.edit-description-input(rows=2)= instance.description
-      .modal-footer
-        button.btn.edit-description-save-btn(data-i18n="common.save_changes")
 
   h1= course.title
   p= course.description
 
   h3= instance.name
-    if !studentMode
-      span.spl
-        button.btn.btn-xs.edit-class-name-btn(data-toggle='modal', data-target='#editNameModal') edit class name
 
   p
     if instance.description
       each line in instance.description.split('\n')
         div= line
-    if !studentMode
-      span.spl
-        button.btn.btn-xs.edit-description-btn(data-toggle='modal', data-target='#editDescriptionModal') edit class description
-    else if !studentMode
-      div
-        button.btn.btn-xs.edit-description-btn add class description
 
   if !studentMode
-    .form-group
+    p
-      span.spr Select language
+      button.btn.btn-xs.btn-edit-settings(data-toggle='modal', data-target='#editSettingsModal') edit class settings
-      select.form-control.select-language
-        option(value="Python") Python
-        option(value="JavaScript") JavaScript
-        option(value="All Languages") All Languages
 
   div(role='tabpanel')
     ul.nav.nav-tabs(role='tablist')

app/views/courses/mock1/CourseDetailsView.coffee

@@ -10,11 +10,9 @@ module.exports = class CourseDetailsView extends RootView
 
   events:
     'change .expand-progress-checkbox': 'onExpandedProgressCheckbox'
-    'change .select-session': 'onChangeSession'
     'change .student-mode-checkbox': 'onChangeStudent'
     'click .btn-play-level': 'onClickPlayLevel'
-    'click .edit-description-save-btn': 'onEditDescriptionSave'
+    'click .btn-save-settings': 'onClickSaveSettings'
-    'click .edit-name-save-btn': 'onEditNameSave'
     'click .member-header': 'onClickMemberHeader'
     'click .progress-header': 'onClickProgressHeader'
     'mouseenter .progress-level-cell': 'onMouseEnterPoint'
@@ -144,26 +142,12 @@ module.exports = class CourseDetailsView extends RootView
     @render?()
     $('.student-mode-checkbox').attr('checked', @options.studentMode)
 
-  onChangeSession: (e) ->
-    @showExpandedProgress = false
-    newSessionValue = $(e.target).val()
-    for val, index in @instances when val.name is newSessionValue
-      @currentInstanceIndex = index
-    @updateLevelMaps()
-    @onCampaignSync()
-
   onExpandedProgressCheckbox: (e) ->
     @showExpandedProgress = $('.expand-progress-checkbox').prop('checked')
     # TODO: why does render reset the checkbox to be unchecked?
     @render?()
     $('.expand-progress-checkbox').attr('checked', @showExpandedProgress)
 
-  onClickEditClassName: (e) ->
-    alert 'TODO: Popup for editing name for this course session'
-
-  onClickEditClassDescription: (e) ->
-    alert 'TODO: Popup for editing description for this course session'
-
   onClickMemberHeader: (e) ->
     @memberSort = if @memberSort is 'nameAsc' then 'nameDesc' else 'nameAsc'
     @sortMembers()
@@ -183,16 +167,12 @@ module.exports = class CourseDetailsView extends RootView
       viewArgs: [{}, levelSlug]
     }
 
-  onEditDescriptionSave: (e) ->
+  onClickSaveSettings:  (e) ->
-    description = $('.edit-description-input').val()
-    @instances[@currentInstanceIndex].description = description
-    $('#editDescriptionModal').modal('hide')
-    @render?()
-
-  onEditNameSave: (e) ->
     if name = $('.edit-name-input').val()
       @instances[@currentInstanceIndex].name = name
-    $('#editNameModal').modal('hide')
+    description = $('.edit-description-input').val()
+    @instances[@currentInstanceIndex].description = description
+    $('#editSettingsModal').modal('hide')
     @render?()
 
   onMouseEnterPoint: (e) ->