Merge pull request #3368 from edx/waheed/stud1514-toggle-cheatsheet-not-working

Fixed toggle cheatsheet not working on component editors.

cms/djangoapps/contentstore/features/problem-editor.feature

@@ -113,6 +113,11 @@ Feature: CMS.Problem Editor
     And I unpublish the unit
     Then I can edit the problem
 
+  Scenario: Cheat sheet visible on toggle
+    Given I have created a Blank Common Problem
+    And I can edit the problem
+    Then I can see cheatsheet
+
   # Disabled 11/13/2013 after failing in master
   # The screenshot showed that the LaTeX editor had the text "hi",
   # but Selenium timed out waiting for the text to appear.

cms/djangoapps/contentstore/features/problem-editor.py

@@ -250,6 +250,13 @@ def i_can_edit_problem(_step):
     world.edit_component()
 
 
+@step(u'I can see cheatsheet$')
+def verify_cheat_sheet_displaying(_step):
+    world.css_click("a.cheatsheet-toggle")
+    css_selector = 'article.simple-editor-cheatsheet'
+    world.wait_for_visible(css_selector)
+
+
 def verify_high_level_source_links(step, visible):
     if visible:
         assert_true(world.is_css_present('.launch-latex-compiler'),

cms/static/sass/elements/_modal-window.scss

@@ -107,7 +107,7 @@
 
   // large modals - component editors and interactives
   .modal-lg {
-    width: 75%;
+    width: 70%;
     min-width: ($baseline*27.5);
     height: auto;
 

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

@@ -51,14 +51,13 @@
   @include transition(width .3s linear 0s);
 
   &.shown {
-    width: 300px;
+    width: 20%;
     height: 100%;
     overflow-y: scroll;
   }
 
   .cheatsheet-wrapper {
-    width: 240px;
-    padding: 20px 30px;
+    padding: 10%;
   }
 
   h6 {

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

@@ -51,14 +51,13 @@
   @include transition(width .3s linear 0s);
 
   &.shown {
-    width: 300px;
+    width: 20%;
     height: 100%;
     overflow-y: scroll;
   }
 
   .cheatsheet-wrapper {
-    width: 240px;
-    padding: 20px 30px;
+    padding: 10%;
   }
 
   h6 {

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

@@ -94,6 +94,9 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
       @cheatsheet = $($('#simple-editor-cheatsheet').html())
       $(@markdown_editor.getWrapperElement()).append(@cheatsheet)
 
+    $(".CodeMirror").css({"overflow": "visible"})
+    $(".modal-content").css({"overflow-y": "visible", "overflow-x": "visible"})
+
     setTimeout (=> @cheatsheet.toggleClass('shown')), 10
 
   ###