Make edit and delete buttons show up on cms unit editing page

cms/djangoapps/contentstore/views.py

@@ -131,7 +131,6 @@ def edit_item(request, location):
         raise Http404  # TODO (vshnayder): better error
 
     item = modulestore().get_item(location)
-    item.get_html = wrap_xmodule(item.get_html, item, "xmodule_edit.html")
 
     if settings.LMS_BASE is not None:
         lms_link = "{lms_base}/courses/{course_id}/jump_to/{location}".format(
@@ -322,8 +321,18 @@ def load_preview_module(request, preview_id, descriptor, instance_state, shared_
             error_msg=exc_info_to_str(sys.exc_info())
         ).xmodule_constructor(system)(None, None)
 
-    module.get_html = wrap_xmodule(module.get_html, module, "xmodule_display.html")
-    module.get_html = wrap_xmodule(module.get_html, module, "editable_preview.html")
+
+    module.get_html = wrap_xmodule(
+        module.get_html,
+        module,
+        "xmodule_edit.html",
+        {
+            'editor_content': descriptor.get_html(),
+            # TODO (cpennington): Make descriptors know if they have data that can be editng
+            'editable_data': descriptor.definition.get('data'),
+            'editable_class': 'editable' if descriptor.definition.get('data') else '',
+        }
+    )
     module.get_html = replace_static_urls(
         module.get_html,
         module.metadata.get('data_dir', module.location.course)

cms/static/js/base.js

@@ -17,7 +17,7 @@ $(document).ready(function() {
   $('.expand-collapse-icon').bind('click', toggleSubmodules);
   $('.visibility-options').bind('change', setVisibility);
 
-  $body.delegate('.components .edit-button', 'click', editComponent);
+  $body.delegate('.xmodule_edit .edit-button', 'click', editComponent);
   $body.delegate('.component-editor .save-button, .component-editor .cancel-button', 'click', closeComponentEditor);
 
   $newComponentButton.bind('click', showNewComponentForm);
@@ -45,12 +45,12 @@ function setVisibility(e) {
 
 function editComponent(e) {
   e.preventDefault();
-  $(this).closest('li').addClass('editing').find('.component-editor').slideDown(150);
+  $(this).closest('.xmodule_edit').addClass('editing').find('.component-editor').slideDown(150);
 }
 
 function closeComponentEditor(e) {
   e.preventDefault();
-  $(this).closest('li').removeClass('editing').find('.component-editor').slideUp(150);
+  $(this).closest('.xmodule_edit').removeClass('editing').find('.component-editor').slideUp(150);
 }
 
 function showNewComponentForm(e) {

cms/static/sass/_base.scss

@@ -499,21 +499,19 @@ input.courseware-unit-search-input {
         text-transform: uppercase;
     }
 
-	.components {
-		> li {
+    .edit-pane {
+        .xmodule_edit.editable {
             position: relative;
+            border: 1px solid transparent;
             z-index: 10;
-			margin: 20px 40px;
-			border: 1px solid #d1ddec;
-			border-radius: 3px;
-			background: #fff;
-			-webkit-transition: border-color .15s;
 
             &:hover {
                 border-color: #6696d7;
+                border: 1px solid #d1ddec;
+                border-radius: 3px;
+                -webkit-transition: border-color .15s;
 
-				.drag-handle,
-				.component-actions {
+                > .component-actions {
                     opacity: 1;
                 }
             }

common/djangoapps/xmodule_modifiers.py

@@ -12,7 +12,7 @@ from xmodule.vertical_module import VerticalModule
 
 log = logging.getLogger("mitx.xmodule_modifiers")
 
-def wrap_xmodule(get_html, module, template):
+def wrap_xmodule(get_html, module, template, context=None):
     """
     Wraps the results of get_html in a standard <section> with identifying
     data so that the appropriate javascript module can be loaded onto it.
@@ -24,14 +24,18 @@ def wrap_xmodule(get_html, module, template):
         class_: the module class name
         module_name: the js_module_name of the module
     """
+    if context is None:
+        context = {}
 
     @wraps(get_html)
     def _get_html():
-        return render_to_string(template, {
+        context.update({
             'content': get_html(),
             'class_': module.__class__.__name__,
             'module_name': module.js_module_name
         })
+
+        return render_to_string(template, context)
     return _get_html
 
 

common/lib/xmodule/xmodule/static_content.py

@@ -12,7 +12,7 @@ from .x_module import XModuleDescriptor
 
 
 def write_module_styles(output_root, extra_descriptors):
-    return _write_styles(output_root, _list_modules(extra_descriptors))
+    return _write_styles('.xmodule_display', output_root, _list_modules(extra_descriptors))
 
 
 def write_module_js(output_root, extra_descriptors):
@@ -20,7 +20,7 @@ def write_module_js(output_root, extra_descriptors):
 
 
 def write_descriptor_styles(output_root, extra_descriptors):
-    return _write_styles(output_root, _list_descriptors(extra_descriptors))
+    return _write_styles('.xmodule_edit', output_root, _list_descriptors(extra_descriptors))
 
 
 def write_descriptor_js(output_root, extra_descriptors):
@@ -53,7 +53,7 @@ def _ensure_dir(dir_):
             raise
 
 
-def _write_styles(output_root, classes):
+def _write_styles(selector, output_root, classes):
     _ensure_dir(output_root)
 
     css_fragments = defaultdict(set)
@@ -78,8 +78,8 @@ def _write_styles(output_root, classes):
     with open(output_root / '_module-styles.scss', 'w') as module_styles:
         for class_, fragment_names in css_imports.items():
             imports = "\n".join('@import "{0}";'.format(name) for name in fragment_names)
-            module_styles.write(""".xmodule_{class_} {{ {imports} }}""".format(
-                class_=class_, imports=imports
+            module_styles.write("""{selector}.xmodule_{class_} {{ {imports} }}""".format(
+                class_=class_, imports=imports, selector=selector
             ))
 
 

common/templates/xmodule_edit.html

-<section class="xmodule_edit xmodule_${class_}" data-type="${module_name}">
-    ${content}
-</section>
+<div class="xmodule_edit xmodule_${class_} ${editable_class}" data-type="${module_name}">
+  <%include file="xmodule_display.html"/>
+  % if editable_data:
+  <div class="component-actions">
+    <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
+    <a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>	
+  </div>
+  <div class="component-editor">
+    ${editor_content}
+    <a href="#" class="save-button">Save</a>
+    <a href="#" class="cancel-button">Cancel</a>
+  </div>
+  % endif
+</div>