Add HTML editor for authoring bulk email message (adopted from CMS)

lms/djangoapps/instructor/views/legacy.py

@@ -23,9 +23,11 @@ from django.core.urlresolvers import reverse
 from django.core.mail import send_mail
 from django.utils import timezone
 
+from xmodule_modifiers import wrap_xmodule
 import xmodule.graders as xmgraders
 from xmodule.modulestore.django import modulestore
 from xmodule.modulestore.exceptions import ItemNotFoundError
+from xmodule.html_module import HtmlDescriptor
 
 from courseware import grades
 from courseware.access import (has_access, get_access_group_name,
@@ -83,7 +85,7 @@ def instructor_dashboard(request, course_id):
     msg = ''
     to = None
     subject = None
-    html_message = None
+    html_message = ''
     problems = []
     plots = []
     datatable = {}
@@ -785,6 +787,13 @@ s (~10k), it may take 1-2 hours to send all emails.</font>"
     else:
         instructor_tasks = None
 
+    # HTML editor for email
+    if idash_mode == 'Email':
+        html_module = HtmlDescriptor(course.system, {'data': html_message})
+        editor = wrap_xmodule(html_module.get_html, html_module, 'xmodule_edit.html')()
+    else:
+        editor = None
+
     # display course stats only if there is no other table to display:
     course_stats = None
     if not datatable:
@@ -801,9 +810,9 @@ s (~10k), it may take 1-2 hours to send all emails.</font>"
                'course_stats': course_stats,
                'msg': msg,
                'modeflag': {idash_mode: 'selectedmode'},
-               'to': to,                 # email
-               'subject': subject,       # email
-               'message': html_message,  # email
+               'to': to,            # email
+               'subject': subject,  # email
+               'editor': editor,    # email
                'problems': problems,		# psychometrics
                'plots': plots,			# psychometrics
                'course_errors': modulestore().get_item_errors(course.location),

lms/envs/common.py

@@ -616,6 +616,11 @@ PIPELINE_JS = {
         'output_filename': 'js/lms-main_vendor.js',
         'test_order': 0,
     },
+    'module-descriptor-js': {
+        'source_filenames': rooted_glob(COMMON_ROOT / 'static/', 'xmodule/descriptors/js/*.js'),
+        'output_filename': 'js/lms-module-descriptors.js',
+        'test_order': 8,
+    },
     'module-js': {
         'source_filenames': rooted_glob(COMMON_ROOT / 'static', 'xmodule/modules/js/*.js'),
         'output_filename': 'js/lms-modules.js',

lms/static/sass/base/_variables.scss

@@ -41,6 +41,10 @@ $green: rgb(37, 184, 90);
 $light-gray: #ddd;
 $dark-gray: #333;
 
+// used by descriptor css
+$lightGrey: #edf1f5;
+$darkGrey: #8891a1;
+
 // edx.org marketing site variables
 $m-gray: #8A8C8F;
 $m-gray-l1: #97999B;
@@ -197,4 +201,4 @@ $homepage-bg-image: '../images/homepage-bg.jpg';
 $login-banner-image: url(../images/bg-banner-login.png);
 $register-banner-image: url(../images/bg-banner-register.png);
 
-$video-thumb-url: '../images/courses/video-thumb.jpg';
\ No newline at end of file
+$video-thumb-url: '../images/courses/video-thumb.jpg';

lms/static/sass/course.scss.mako

@@ -66,6 +66,7 @@
 @import "course/instructor/instructor";
 @import "course/instructor/instructor_2";
 @import "course/instructor/email";
+@import "xmodule/descriptors/css/module-styles.scss";
 
 // discussion
 @import "course/discussion/form-wmd-toolbar";

lms/static/sass/course/instructor/_email.scss

+.email-editor {
+  border: 1px solid #c8c8c8;
+}
+
+.xmodule_edit {
+  ul {
+    margin: 0;
+    padding: 0;
+    margin-bottom: 10px;
+    list-style: none;
+  }
+
+  a {
+    line-height: (16*1.48) + px;
+    line-height: 1.48rem;
+  }
+}
+
 .submit-email-action {
   margin-top: 10px;
   line-height: 1.3;

lms/templates/courseware/instructor_dashboard.html

@@ -10,6 +10,12 @@
   <script type="text/javascript" src="${static.url('js/vendor/jquery-jvectormap-1.1.1/jquery-jvectormap-1.1.1.min.js')}"></script>
   <script type="text/javascript" src="${static.url('js/vendor/jquery-jvectormap-1.1.1/jquery-jvectormap-world-mill-en.js')}"></script>
   <script type="text/javascript" src="${static.url('js/course_groups/cohorts.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/vendor/codemirror-compressed.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/vendor/tiny_mce/tiny_mce.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/vendor/tiny_mce/jquery.tinymce.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
+  <%static:js group='module-descriptor-js'/>
 %if instructor_tasks is not None:
   <script type="text/javascript" src="${static.url('js/pending_tasks.js')}"></script>
 %endif
@@ -458,12 +464,11 @@ function goto( mode)
     %else:
       <input type="text" id="id_subject" name="subject" maxlength="100" size="75">
     %endif
-    <label for="id_message">Message:</label>
-    %if message:
-      <textarea cols="100" id="id_message" name="message">${message}</textarea>
-    %else:
-      <textarea cols="100" id="id_message" name="message"></textarea>
-    %endif
+    <label>Message:</label>
+    <div class="email-editor">
+      ${editor}
+    </div>
+    <input type="hidden" name="message" value="">
     </p>
     <div class="submit-email-action">
       Please try not to email students more than once a day. Important things to consider before sending:
@@ -473,6 +478,13 @@ function goto( mode)
       </ul>
       <input type="submit" name="action" value="Send email">
     </div>
+    <script type="text/javascript">
+      var emailEditor = XModule.loadModule($('.xmodule_edit'));
+      document.idashform.onsubmit = function() {
+        this.message.value = emailEditor.save()['data'];
+        return true;
+      }
+    </script>
 %endif
 
     </form>

lms/templates/widgets/html-edit.html

+<%! from django.utils.translation import ugettext as _ %>
+
+<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 | h}</textarea>
+    <textarea name="" class="edit-box">${data | h}</textarea>
+  </div>
+</section>