studio HTML editor - codemirror/tinymce toggle work - wip

cms/templates/component.html

@@ -3,8 +3,10 @@
 	  <div class="module-editor">
 	    ${editor}
 	  </div>
-	  <a href="#" class="save-button">Save</a>
-	  <a href="#" class="cancel-button">Cancel</a>
+	  <div class="row module-actions">
+			<a href="#" class="save-button">Save</a>
+			<a href="#" class="cancel-button">Cancel</a>	  	
+	  </div>
 	</div>
 </div>
 

cms/templates/widgets/html-edit.html

 <%include file="metadata-edit.html" />
-<section class="html-edit">
-    <div class="row">
-        <div class="editor-bar">
-            <ul class="editor-tabs">
-                <li><a href="#" class="visual-tab tab current" data-tab="visual">Visual</a></li>
-                <li><a href="#" class="html-tab tab" data-tab="advanced">Advanced</a></li>
-            </ul>
-        </div>
-        <textarea class="tiny-mce">${data}</textarea>
-        <div name="" class="edit-box">${data}</div>
-    </div>
+<section class="html-editor editor">
+  <ul class="editor-tabs">
+    <li><a href="#" class="visual-tab tab current" data-tab="visual">Visual</a></li>
+    <li><a href="#" class="html-tab tab" data-tab="advanced">HTML</a></li>
+  </ul>
+  
+  <div class="row">
+    <textarea class="tiny-mce">${data}</textarea>
+    <div name="" class="edit-box">${data}</div>
+  </div>
 </section>

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

-.editor-bar {
+.editor {
   position: relative;
-  @include linear-gradient(top, #d4dee8, #c9d5e2);
-  padding: 5px;
-  border: 1px solid #3c3c3c;
-  border-radius: 3px 3px 0 0;
-  border-bottom-color: #a5aaaf;
-  @include clearfix;
-  // TODO: I added this -- Brian to fix roperly
-  height: 34px;
-
-  a {
-    display: block;
-    float: left;
-    padding: 3px 10px 7px;
-    margin-left: 7px;
-    border-radius: 2px;
-
-    &:hover {
-      background: rgba(255, 255, 255, .5);
-    }
+  
+  .row {
+    position: relative;
   }
 
-  .editor-tabs {
-    position: absolute;
-    top: 10px;
-    right: 10px;
+  .editor-bar {
+    position: relative;
+    @include linear-gradient(top, #d4dee8, #c9d5e2);
+    padding: 5px;
+    border: 1px solid #3c3c3c;
+    border-radius: 3px 3px 0 0;
+    border-bottom-color: #a5aaaf;
+    @include clearfix;
+    // TODO: I added this -- Brian to fix roperly
+    height: 34px;
 
-    li {
+    a {
+      display: block;
       float: left;
+      padding: 3px 10px 7px;
+      margin-left: 7px;
+      border-radius: 2px;
+
+      &:hover {
+        background: rgba(255, 255, 255, .5);
+      }
     }
 
-    .tab {
-      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);
+    .editor-tabs {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+
+      li {
+        float: left;
+      }
+
+      .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

+.html-editor {
+  @include clearfix();
+
+  .CodeMirror {
+    display: none;
+    position: absolute;
+    top: 46px;
+    width: 100%;
+    height: 378px;
+    background: #fff;
+    color: #3c3c3c;
+    @include box-sizing(border-box);
+  }
+
+  .editor-tabs {
+    top: 11px;
+    right: 30px;
+    z-index: 99;
+  }
+}
\ No newline at end of file

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

@@ -8,11 +8,11 @@ class @HTMLEditingDescriptor
       mode: "text/html"
       lineNumbers: true
       lineWrapping: true})
-    $(@advanced_editor.getWrapperElement()).hide()
 
     @tiny_mce_textarea = $(".tiny-mce", @element).tinymce({
       script_url : '/static/js/vendor/tiny_mce/tiny_mce.js',
       theme : "advanced",
+      skin: 'studio',
       schema: "html5",
       # TODO: we should share this CSS with studio (and LMS)
       content_css : "/static/css/tiny-mce.css",
@@ -27,7 +27,7 @@ class @HTMLEditingDescriptor
       height: '400px',
       # Cannot get access to tinyMCE Editor instance (for focusing) until after it is rendered.
       # The tinyMCE callback passes in the editor as a paramter.
-      init_instance_callback: @focusVisualEditor
+      init_instance_callback: @initializeVisualEditor
     })
 
     @showingVisualEditor = true
@@ -41,17 +41,18 @@ 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'
-        $(@advanced_editor.getWrapperElement()).hide()
         @showVisualEditor(visualEditor)
       else
-        visualEditor.hide()
-        @tiny_mce_textarea.hide()
+        # @tiny_mce_textarea.hide()
         @showAdvancedEditor(visualEditor)
 
   # Show the Advanced (codemirror) Editor. Pulled out as a helper method for unit testing.
   showAdvancedEditor: (visualEditor) ->
-    $(@advanced_editor.getWrapperElement()).show()
+    # $(@advanced_editor.getWrapperElement()).show()
     if visualEditor.isDirty()
       @advanced_editor.setValue(visualEditor.getContent({no_events: 1}))
       @advanced_editor.setCursor(0)
@@ -61,16 +62,16 @@ class @HTMLEditingDescriptor
 
   # Show the Visual (tinyMCE) Editor. Pulled out as a helper method for unit testing.
   showVisualEditor: (visualEditor) ->
-    visualEditor.show()
+    # visualEditor.show()
     visualEditor.setContent(@advanced_editor.getValue())
     # In order for isDirty() to return true ONLY if edits have been made after setting the text,
     # both the startContent must be sync'ed up and the dirty flag set to false.
     visualEditor.startContent = visualEditor.getContent({format: "raw", no_events: 1});
     visualEditor.isNotDirty = true
-    @focusVisualEditor(visualEditor)
+    visualEditor.focus()
     @showingVisualEditor = true
 
-  focusVisualEditor: (visualEditor) ->
+  initializeVisualEditor: (visualEditor) ->
     visualEditor.focus()
 
   getVisualEditor: ->

common/lib/xmodule/xmodule/self_assessment_module.py

@@ -524,6 +524,7 @@ class SelfAssessmentDescriptor(XmlDescriptor, EditingDescriptor):
 
     js = {'coffee': [resource_string(__name__, 'js/src/html/edit.coffee')]}
     js_module_name = "HTMLEditingDescriptor"
+    css = {'scss': [resource_string(__name__, 'css/html/edit.scss')]}
 
     @classmethod
     def definition_from_xml(cls, xml_object, system):