Merge branch 'feature/cas/speed-editor' of github.com:MITx/mitx into feature/cas/speed-editor

cms/templates/widgets/problem-edit.html

@@ -14,9 +14,13 @@
                         class="problem-editor-icon number"></span></a></li>
                 <li><a href="#" class="dropdown-button" data-tooltip="Option Response"><span
                         class="problem-editor-icon dropdown"></span></a></li>
+                <li><a href="#" class="header-button" data-tooltip="Header"><span
+                        class="problem-editor-icon dropdown"></span></a></li>
+                <li><a href="#" class="explanation-button" data-tooltip="Explanation (aka Solution)"><span
+                        class="problem-editor-icon dropdown"></span></a></li>
             </ul>
             <ul class="editor-tabs">
-                <li><a href="#" class="xml-tab tab" data-tab="xml">Use Advanced Editor</a></li>
+                <li><a href="#" class="xml-tab advanced-toggle" data-tab="xml">Advanced Editor</a></li>
                 <li><a href="#" class="cheatsheet-toggle" data-tooltip="Toggle Cheatsheet">?</a></li>
             </ul>
         </div>

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

@@ -28,20 +28,24 @@
       float: left;
     }
 
-    .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);
+    .advanced-toggle {
+      @include white-button;
+      height: auto;
+      margin-top: -1px;
+      padding: 3px 9px;
+      font-size: 12px;
 
       &.current {
-        background: #fff;
-        border-bottom-color: #fff;
+        border: 1px solid $lightGrey !important;
+        border-radius: 3px !important;
+        background: $lightGrey !important;
+        color: $darkGrey !important;
+        pointer-events: none;
+        cursor: none;
+        
+        &:hover {
+          box-shadow: 0 0 0 0 !important;
+        }
       }
     }
 
@@ -49,7 +53,7 @@
       width: 21px;
       height: 21px;
       padding: 0;
-      margin: 3px 5px 0 16px;
+      margin: 0 5px 0 15px;
       border-radius: 22px;
       border: 1px solid #a5aaaf;
       background: #e5ecf3;

common/lib/xmodule/xmodule/js/spec/problem/edit_spec.coffee

@@ -70,6 +70,22 @@ describe 'MarkdownEditingDescriptor', ->
       revisedSelection = MarkdownEditingDescriptor.insertSelect('my text')
       expect(revisedSelection).toEqual('[[my text]]')
 
+  describe 'insertHeader', ->
+    it 'inserts the template if selection is empty', ->
+      revisedSelection = MarkdownEditingDescriptor.insertHeader('')
+      expect(revisedSelection).toEqual(MarkdownEditingDescriptor.headerTemplate)
+    it 'wraps existing text', ->
+      revisedSelection = MarkdownEditingDescriptor.insertHeader('my text')
+      expect(revisedSelection).toEqual('my text\n====\n')
+
+  describe 'insertExplanation', ->
+    it 'inserts the template if selection is empty', ->
+      revisedSelection = MarkdownEditingDescriptor.insertExplanation('')
+      expect(revisedSelection).toEqual(MarkdownEditingDescriptor.explanationTemplate)
+    it 'wraps existing text', ->
+      revisedSelection = MarkdownEditingDescriptor.insertExplanation('my text')
+      expect(revisedSelection).toEqual('[explanation]\nmy text\n[explanation]')
+
   describe 'markdownToXml', ->
     it 'converts raw text to paragraph', ->
       data = MarkdownEditingDescriptor.markdownToXml('foo')

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

 class @MarkdownEditingDescriptor extends XModule.Descriptor
+  # TODO really, these templates should come from or also feed the cheatsheet
   @multipleChoiceTemplate : "( ) incorrect\n( ) incorrect\n(x) correct\n"
   @checkboxChoiceTemplate: "[x] correct\n[ ] incorrect\n[x] correct\n"
   @stringInputTemplate: "= answer\n"
   @numberInputTemplate: "= answer +- x%\n"
   @selectTemplate: "[[incorrect, (correct), incorrect]]\n"
+  @headerTemplate: "Header\n=====\n"
+  @explanationTemplate: "[explanation]\nShort explanation\n[explanation]\n"
 
   constructor: (element) ->
     @element = element
@@ -59,7 +62,7 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
   ###
   confirmConversionToXml: ->
     # TODO: use something besides a JavaScript confirm dialog?
-    return confirm("If you convert to the XML source representation, which is used by the Advanced Editor, you cannot go back to using the Simple Editor.\n\nProceed with conversion to XML?")
+    return confirm("If you use the Advanced Editor, this problem will be converted to XML and you will not be able to return to the Simple Editor Interface.\n\nProceed to the Advanced Editor and convert this problem to XML?")
 
   ###
   Event listener for toolbar buttons (only possible when markdown editor is visible).
@@ -74,6 +77,8 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
       when "number-button" then revisedSelection = MarkdownEditingDescriptor.insertNumberInput(selection)
       when "checks-button" then revisedSelection = MarkdownEditingDescriptor.insertCheckboxChoice(selection)
       when "dropdown-button" then revisedSelection = MarkdownEditingDescriptor.insertSelect(selection)
+      when "header-button" then revisedSelection = MarkdownEditingDescriptor.insertHeader(selection)
+      when "explanation-button" then revisedSelection = MarkdownEditingDescriptor.insertExplanation(selection)
       else # ignore click
 
     if revisedSelection != null
@@ -158,6 +163,12 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
   @insertSelect: (selectedText) ->
     return MarkdownEditingDescriptor.insertGenericInput(selectedText, '[[', ']]', MarkdownEditingDescriptor.selectTemplate)
 
+  @insertHeader: (selectedText) ->
+    return MarkdownEditingDescriptor.insertGenericInput(selectedText, '', '\n====\n', MarkdownEditingDescriptor.headerTemplate)
+
+  @insertExplanation: (selectedText) ->
+    return MarkdownEditingDescriptor.insertGenericInput(selectedText, '[explanation]\n', '\n[explanation]', MarkdownEditingDescriptor.explanationTemplate)
+
   @insertGenericInput: (selectedText, lineStart, lineEnd, template) ->
     if selectedText.length > 0
       # TODO: should this insert a newline afterwards?