cheatsheet and advanced settings added

cms/static/coffee/src/views/unit.coffee

@@ -84,8 +84,6 @@ class CMS.Views.UnitEdit extends Backbone.View
     event.preventDefault()
 
     @$componentItem = $('<li>').addClass('editing')
-    $modalCover.show()
-    $modalCover.bind('click', @closeEditor)
     type = $(event.currentTarget).data('type')
 
     switch type
@@ -97,23 +95,27 @@ class CMS.Views.UnitEdit extends Backbone.View
         $preview = $($('#problem-preview').html())
         initProblemEditors(@$editor, $preview)
 
-    @$editor.find('.save-button').bind('click', =>
+    @$editor.find('.save-button, .cancel-button').bind('click', =>
       @$componentItem.removeClass('editing')
       @closeEditor()
     )
 
-    $componentActions = $($('#component-actions').html());
+    $componentActions = $($('#component-actions').html())
 
     @$componentItem.append(@$editor)
     @$componentItem.append($preview)
-    @$componentItem.append($componentActions);
+    @$componentItem.append($componentActions)
+    @$componentItem.hide()
     @$newComponentItem.before(@$componentItem)
+    @$componentItem.slideDown(200)
+    $modalCover.fadeIn(200)
+    $modalCover.bind('click', @closeEditor)
 
   closeEditor: (event) =>
-    console.log('close')
-    $modalCover.hide()
+    @$editor.slideUp(150)
+    $modalCover.fadeOut(150)
     $modalCover.unbind('click', @closeEditor)
-    @$editor.remove()
+    @$editor.slideUp(150)
     @$componentItem.removeClass('editing')
 
   saveNewComponent: (event) =>

cms/static/js/speed-editor.js

@@ -1,6 +1,8 @@
 var $body;
 var $preview;
 var $tooltip;
+var $cheatsheet;
+var $currentEditor;
 var simpleEditor;
 var xmlEditor;
 var currentEditor;
@@ -8,7 +10,18 @@ var controlDown;
 var commandDown;
 
 
+(function() {
+  $body = $('body');
+  $body.on('click', '.editor-bar a', onEditorButton);
+  $body.on('click', '.editor-tabs .tab', setEditorTab);
+  $body.on('click', '.cheatsheet-toggle', toggleCheatsheet);
+  $body.on('click', '.problem-settings-button', toggleProblemSettings);
+  $(document).bind('keyup', onKeyboard);
+})();
+
+
 function initProblemEditors($editor, $prev) {
+  $currentEditor = $editor;
   simpleEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
     lineWrapping: true,
     extraKeys: {
@@ -40,10 +53,35 @@ function initProblemEditors($editor, $prev) {
 
   $(simpleEditor.getWrapperElement()).bind('click', setFocus);
   $preview = $prev.find('.problem');
+}
 
-  $body.on('click', '.editor-bar a', onEditorButton);
-  $body.on('click', '.editor-tabs a', setEditorTab);
-  $(document).bind('keyup', onKeyboard);
+function toggleProblemSettings(e) {
+  e.preventDefault();
+
+  $(this).toggleClass('is-open');
+
+  if($(this).hasClass('is-open')) {
+    $(this).find('.button-label').html('Hide Advanced Settings');
+    $('.problem-settings').slideDown(150);
+  } else {
+    $(this).find('.button-label').html('Show Advanced Settings');
+    $('.problem-settings').slideUp(150);
+  }
+}
+
+function toggleCheatsheet(e) {
+  e.preventDefault();
+
+  console.log('bam');
+
+  if(!$currentEditor.find('.simple-editor-cheatsheet')[0]) {
+    $cheatsheet = $($('#simple-editor-cheatsheet').html());
+    $currentEditor.append($cheatsheet);  
+  }
+
+  setTimeout(function() {
+    $cheatsheet.toggleClass('shown');
+  }, 10);
 }
 
 function setEditorTab(e) {

cms/static/sass/_graphics.scss

@@ -309,6 +309,14 @@
 	background-position: -220px 0;
 }
 
+.settings-icon {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	vertical-align: middle;
+	background: url(../img/problem-settings-icon.png) no-repeat;
+}
+
 
 
 

cms/static/sass/_unit.scss

@@ -228,7 +228,12 @@
   .editor {
     background: $blue;
     padding: 20px;
-    border-radius: 3px 3px 0 0;
+
+    h5 {
+      color: #fff;
+      margin-bottom: 20px;
+      font-weight: 700;
+    }
 
     label {
       display: inline-block;
@@ -272,6 +277,22 @@
       border-color: #3c3c3c;
     }
 
+    .problem-settings-button {
+      @include blue-button;
+      @include box-sizing(border-box);
+      width: 100%;
+      padding: 12px 0 14px;
+      text-align: center;
+
+      &.is-open {
+        border-radius: 0 0 3px 3px;
+      }
+
+      .settings-icon {
+        margin-right: 10px;
+      }
+    }
+
     .editor-bar {
       position: relative;
       @include linear-gradient(top, #d4dee8, #c9d5e2);
@@ -302,7 +323,7 @@
           float: left;
         }
 
-        a {
+        .tab {
           height: 24px;
           padding: 7px 20px 3px;
           border: 1px solid #a5aaaf;          
@@ -318,9 +339,32 @@
             border-bottom-color: #fff;
           }
         }
+
+        .cheatsheet-toggle {
+          width: 21px;
+          height: 21px;
+          padding: 0;
+          margin: 3px 5px 0 16px;
+          border-radius: 22px;
+          border: 1px solid #a5aaaf;
+          background: #e5ecf3;
+          font-size: 13px;
+          font-weight: 700;
+          color: #565d64;
+          text-align: center;
+        }
       }
     }
 
+    .problem-settings {
+      display: none;
+      padding: 20px 30px;
+      background: rgba(0, 0, 0, .1);
+      border: 1px solid #437fbf;
+      border-bottom: none;
+      border-radius: 3px 3px 0 0;
+    }
+
     .CodeMirror {
       font-size: 13px;
       border: 1px solid #3c3c3c;
@@ -576,3 +620,61 @@
     display: none;
   }
 }
+
+.simple-editor-cheatsheet {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 0;
+  border-radius: 0 3px 3px 0;
+  @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 15px);
+  background-color: #fff;
+  overflow: hidden;
+  @include transition(width .3s);
+
+  &.shown {
+    width: 300px;
+  }
+
+  .cheatsheet-wrapper {
+    width: 240px;
+    padding: 20px 30px;
+  }
+
+  h6 {
+    margin-bottom: 7px;
+    font-size: 15px;
+    font-weight: 700;
+  }
+
+  .row {
+    @include clearfix;
+    padding-bottom: 5px !important;
+    margin-bottom: 10px !important;
+    border-bottom: 1px solid #ddd !important;
+
+    &:last-child {
+      border-bottom: none !important;
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .col {
+    float: left;
+
+    &.sample {
+      width: 60px;
+      margin-right: 30px;
+    }
+  }
+
+  pre {
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  code {
+    padding: 0;
+    background: none;
+  }
+}

cms/templates/unit.html

@@ -16,6 +16,62 @@
 
   <script src="/static/js/speed-editor.js"></script>
 
+  <script type="text/template" id="simple-editor-cheatsheet">
+    <article class="simple-editor-cheatsheet">
+      <div class="cheatsheet-wrapper">
+        <div class="row">
+          <h6>Multiple Choice</h6>
+          <div class="col sample">
+            <img src="/static/img/choice-example.png" />
+          </div>
+          <div class="col">
+            <pre><code>( ) red
+( ) green
+(x) blue</code></pre>
+          </div>
+        </div>
+        <div class="row">
+          <h6>Multiple Check</h6>
+          <div class="col sample">
+            <img src="/static/img/multi-example.png" />
+          </div>
+          <div class="col">
+            <pre><code>[ ] earth
+[ ] wind
+[x] water</code></pre>
+          </div>
+        </div>
+        <div class="row">
+          <h6>String Response</h6>
+          <div class="col sample">
+            <img src="/static/img/string-example.png" />
+          </div>
+          <div class="col">
+            <pre><code>___[dog]</code></pre>
+          </div>
+        </div>
+        <div class="row">
+          <h6>Numerical Response</h6>
+          <div class="col sample">
+            <img src="/static/img/number-example.png" />
+          </div>
+          <div class="col">
+            <pre><code>###[3.14]</code></pre>
+          </div>
+        </div>
+        <div class="row">
+          <h6>Option Response</h6>
+          <div class="col sample">
+            <img src="/static/img/select-example.png" />
+          </div>
+          <div class="col">
+            <pre><code>[[wrong, (right)]]</code></pre>
+          </div>
+        </div>
+      </div>
+    </article>
+  </script>
+
   <script type="text/template" id="component-actions">
     <div class="component-actions">
       <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
@@ -36,13 +92,36 @@
             <li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span class="problem-editor-icon dropdown"></span></a></li>
           </ul>
           <ul class="editor-tabs">
-            <li><a href="#" class="simple-tab current">Simple</a></li>
-            <li><a href="#" class="xml-tab">XML</a></li>
+            <li><a href="#" class="simple-tab tab current">Simple</a></li>
+            <li><a href="#" class="xml-tab tab">XML</a></li>
+            <li><a href="#" class="cheatsheet-toggle" data-tooltip="Toggle Cheatsheet">?</a></li>
           </ul>
         </div>
         <textarea class="edit-box"></textarea>
         <textarea class="xml-box"></textarea>
       </div>
+      <div class="row">
+        <div class="problem-settings">
+          <div class="row">
+            <label>Show Answer:</label>
+            <select>
+              <option>attempted</option>
+              <option>always</option>
+              <option>never</option>
+              <option>closed</option>
+            </select>
+          </div>
+          <div class="row">
+            <label>Rerandomize:</label>
+            <select>
+              <option>always</option>
+              <option>never</option>
+              <option>per_student</option>
+            </select>
+          </div>
+        </div>
+        <a href="#" class="problem-settings-button"><span class="settings-icon"></span><span class="button-label">Show Advanced Settings</span></a>
+      </div>
       <div class="row">
         <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
       </div>