Merge pull request #799 from MITx/feature/cale/cms-codemirror-background

Feature/cale/cms codemirror background

cms/static/coffee/src/views/module_edit.coffee

@@ -14,10 +14,13 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
   $component_editor: => @$el.find('.component-editor')
 
-  loadModules: ->
-      @module = XModule.loadModule(@$el.find('.xmodule_edit'))
+  loadDisplay: ->
       XModule.loadModule(@$el.find('.xmodule_display'))
 
+  loadEdit: ->
+    if !@module
+      @module = XModule.loadModule(@$el.find('.xmodule_edit'))
+
   metadata: ->
     # cdodge: package up metadata which is separated into a number of input fields
     # there's probably a better way to do this, but at least this lets me continue to move onwards
@@ -44,7 +47,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
   render: ->
     if @model.id
       @$el.load("/preview_component/#{@model.id}", =>
-        @loadModules()
+        @loadDisplay()
         @delegateEvents()
       )
 
@@ -70,3 +73,4 @@ class CMS.Views.ModuleEdit extends Backbone.View
     event.preventDefault()
     @$el.addClass('editing')
     @$component_editor().slideDown(150)
+    @loadEdit()

cms/static/sass/_unit.scss

@@ -228,6 +228,10 @@
         border-radius: 0 0 3px 3px;
         background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue;
 
+        .module-editor {
+            background: white;
+        }
+
         h5 {
             margin-bottom: 8px;
             color: #fff;

cms/templates/component.html

 ${preview}
 <div class="component-actions">
   <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
-  <a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>  
+  <a href="#" class="delete-button wip"><span class="delete-icon white"></span>Delete</a>  
 </div>
-<a href="#" class="drag-handle"></a>
+<a href="#" class="drag-handle wip"></a>
 <div class="component-editor">
-  ${editor}
+  <div class="module-editor">
+    ${editor}
+  </div>
   <a href="#" class="save-button">Save</a>
   <a href="#" class="cancel-button">Cancel</a>
 </div>