studio html editor - sync'ed up previous style and behavior work to refactored xmodule sass/js

common/lib/xmodule/xmodule/css/editor/display.scss

 .editor {
   position: relative;
-  
+
   .row {
     position: relative;
   }
@@ -27,32 +27,37 @@
         background: rgba(255, 255, 255, .5);
       }
     }
+  }
 
-    .editor-tabs {
-      position: absolute;
-      top: 10px;
-      right: 10px;
+  .editor-tabs {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    li {
+      float: left;
+      margin-right: 5px;
 
-      li {
-        float: left;
+      &:last-child {
+        margin-right: 0;
       }
+    }
+
+    .tab {
+      display: block;
+      height: 24px;
+      padding: 7px 20px 3px;
+      border: 1px solid #a5aaaf;
+      border-radius: 3px 3px 0 0;
+      @include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
+      background-color: #e5ecf3;
+      font-size: 13px;
+      color: #3c3c3c;
+      box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
 
-      .tab {
-        display: block;
-        height: 24px;
-        padding: 7px 20px 3px;
-        border: 1px solid #a5aaaf;
-        border-radius: 3px 3px 0 0;
-        @include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
-        background-color: #e5ecf3;
-        font-size: 13px;
-        color: #3c3c3c;
-        box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
-
-        &.current {
-          background: #fff;
-          border-bottom-color: #fff;
-        }
+      &.current {
+        background: #fff;
+        border-bottom-color: #fff;
       }
     }
   }

common/lib/xmodule/xmodule/css/html/edit.scss

@@ -2,19 +2,28 @@
   @include clearfix();
 
   .CodeMirror {
-    display: none;
+    @include box-sizing(border-box);
     position: absolute;
     top: 46px;
     width: 100%;
-    height: 378px;
+    height: 379px;
+    border: 1px solid #3c3c3c;
+    border-top: 1px solid #8891a1;
     background: #fff;
     color: #3c3c3c;
-    @include box-sizing(border-box);
+  }
+
+  .CodeMirror-scroll {
+    height: 100%;
   }
 
   .editor-tabs {
-    top: 11px;
-    right: 30px;
+    top: 11px !important;
+    right: 10px;
     z-index: 99;
   }
+
+  .is-inactive {
+    display: none;
+  }
 }
\ No newline at end of file

common/lib/xmodule/xmodule/editing_module.py

@@ -30,7 +30,7 @@ class XMLEditingDescriptor(EditingDescriptor):
     any validation of its definition
     """
 
-    css = {'scss': [resource_string(__name__, 'css/editor/display.scss'), resource_string(__name__, 'css/codemirror/codemirror.scss')]}
+    css = {'scss': [resource_string(__name__, 'css/codemirror/codemirror.scss')]}
 
     js = {'coffee': [resource_string(__name__, 'js/src/raw/edit/xml.coffee')]}
     js_module_name = "XMLEditingDescriptor"
@@ -42,7 +42,7 @@ class JSONEditingDescriptor(EditingDescriptor):
     any validation of its definition
     """
 
-    css = {'scss': [resource_string(__name__, 'css/editor/display.scss'), resource_string(__name__, 'css/codemirror/codemirror.scss')]}
+    css = {'scss': [resource_string(__name__, 'css/codemirror/codemirror.scss')]}
 
     js = {'coffee': [resource_string(__name__, 'js/src/raw/edit/json.coffee')]}
     js_module_name = "JSONEditingDescriptor"

common/lib/xmodule/xmodule/js/src/html/edit.coffee

@@ -9,6 +9,8 @@ class @HTMLEditingDescriptor
       lineNumbers: true
       lineWrapping: true})
 
+    $(@advanced_editor.getWrapperElement()).addClass('is-inactive')
+
     @tiny_mce_textarea = $(".tiny-mce", @element).tinymce({
       script_url : '/static/js/vendor/tiny_mce/tiny_mce.js',
       theme : "advanced",
@@ -41,18 +43,20 @@ class @HTMLEditingDescriptor
       $(e.currentTarget).addClass('current')
       visualEditor = @getVisualEditor()
 
-      $('table.mceToolbar').toggleClass('is-inactive')
-      $(@advanced_editor.getWrapperElement()).toggleClass('is-inactive')
-
       if $(e.currentTarget).attr('data-tab') is 'visual'
         @showVisualEditor(visualEditor)
+        $('table.mceToolbar').removeClass('is-inactive')
+        $(@advanced_editor.getWrapperElement()).addClass('is-inactive')
+
       else
         # @tiny_mce_textarea.hide()
         @showAdvancedEditor(visualEditor)
+        $('table.mceToolbar').addClass('is-inactive')
+        $(@advanced_editor.getWrapperElement()).removeClass('is-inactive')
+
 
   # Show the Advanced (codemirror) Editor. Pulled out as a helper method for unit testing.
   showAdvancedEditor: (visualEditor) ->
-    # $(@advanced_editor.getWrapperElement()).show()
     if visualEditor.isDirty()
       @advanced_editor.setValue(visualEditor.getContent({no_events: 1}))
       @advanced_editor.setCursor(0)