Merge pull request #9550 from edx/asadiqbal08/SOL-1157

SOL-1157 Certs: Additional Studio UI cleanup

cms/static/js/certificates/spec/views/certificate_details_spec.js

@@ -79,7 +79,7 @@ function(_, Course, CertificatesCollection, CertificateModel, CertificateDetails
         };
 
         beforeEach(function() {
-            TemplateHelpers.installTemplates(['certificate-details', 'signatory-details', 'signatory-editor'], true);
+            TemplateHelpers.installTemplates(['certificate-details', 'signatory-details', 'signatory-editor', 'signatory-actions'], true);
 
             this.newModelOptions = {add: true};
             this.model = new CertificateModel({

cms/static/js/certificates/views/signatory_details.js

@@ -40,6 +40,7 @@ function ($, _, str, Backbone, gettext, TemplateUtils, ViewUtils, BaseView, Sign
                 eventAgg: this.eventAgg
             });
             this.template = this.loadTemplate('signatory-details');
+            this.signatory_action_template = this.loadTemplate('signatory-actions');
         },
 
         loadTemplate: function(name) {
@@ -51,6 +52,7 @@ function ($, _, str, Backbone, gettext, TemplateUtils, ViewUtils, BaseView, Sign
             // Retrieve the edit view for this model
             if (event && event.preventDefault) { event.preventDefault(); }
             this.$el.html(this.edit_view.render());
+            $(this.signatory_action_template()).appendTo(this.el);
             this.edit_view.delegateEvents();
             this.delegateEvents();
         },

cms/static/sass/views/_certificates.scss

@@ -380,6 +380,12 @@
             color: $gray-l3;
           }
         }
+        &.custom-signatory-action {
+          position: relative;
+          top: 0;
+          left: 0;
+          opacity: 1.0;
+        }
       }
 
       .copy {
@@ -522,6 +528,10 @@
 
     .signatory-panel-body {
       padding: $baseline;
+
+      .signatory-image {
+        margin-top: 20px;
+      }
     }
 
     .signatory-panel-body label {

cms/templates/certificates.html

@@ -11,7 +11,7 @@ from django.utils.translation import ugettext as _
 <%block name="bodyclass">is-signedin course view-certificates</%block>
 
 <%block name="header_extras">
-% for template_name in ["certificate-details", "certificate-editor", "signatory-editor", "signatory-details", "basic-modal", "modal-button", "list", "upload-dialog", "certificate-web-preview"]:
+% for template_name in ["certificate-details", "certificate-editor", "signatory-editor", "signatory-details", "basic-modal", "modal-button", "list", "upload-dialog", "certificate-web-preview", "signatory-actions"]:
   <script type="text/template" id="${template_name}-tpl">
     <%static:include path="js/${template_name}.underscore" />
   </script>

cms/templates/js/certificate-details.underscore

@@ -17,12 +17,12 @@
            <span class="title"><%= gettext("Certificate Details") %></span>
          </header>
         <div class="actual-course-title">
-                <span class="certificate-label"><%= gettext('Course Title') %>: </span>
+                <span class="certificate-label"><b><%= gettext('Course Title') %>: </b> </span>
                 <span class="certificate-value"><%= course.get('name') %></span>
         </div>
         <% if (course_title) { %>
             <div class="course-title-override">
-                <span class="certificate-label"><%= gettext('Course Title Override') %>: </span>
+                <span class="certificate-label"><b><%= gettext('Course Title Override') %>: </b></span>
                 <span class="certificate-value"><%= course_title %></span>
             </div>
         <% } %>

cms/templates/js/signatory-actions.underscore

+<div class="collection-edit">
+    <div class="actions custom-signatory-action">
+            <button class="signatory-panel-save action action-primary" type="submit"><%= gettext("Save") %></button>
+            <button class="signatory-panel-close action action-secondary action-cancel"><%= gettext("Cancel") %></button>
+    </div>
+</div>

cms/templates/js/signatory-details.underscore

@@ -9,16 +9,25 @@
   <div class="signatory-panel-header">Signatory <%= signatory_number %>&nbsp;</div>
   <div class="signatory-panel-body">
     <div>
-      <span class="signatory-name-label"><%= gettext("Name") %>:&nbsp;</span>
-      <span class="signatory-name-value"><%= name %></span>
+        <div>
+          <span class="signatory-name-label"><b><%= gettext("Name") %>:</b>&nbsp;</span>
+          <span class="signatory-name-value"><%= name %></span>
+        </div>
+        <div>
+          <span class="signatory-title-label"><b><%= gettext("Title") %>:</b>&nbsp;</span>
+          <span class="signatory-title-value"><%= title %></span>
+        </div>
+        <div>
+          <span class="signatory-organization-label"><b><%= gettext("Organization") %>:</b>&nbsp;</span>
+          <span class="signatory-organization-value"><%= organization %></span>
+        </div>
     </div>
-    <div>
-      <span class="signatory-title-label"><%= gettext("Title") %>:&nbsp;</span>
-      <span class="signatory-title-value"><%= title %></span>
-    </div>
-    <div>
-      <span class="signatory-organization-label"><%= gettext("Organization") %>:&nbsp;</span>
-      <span class="signatory-organization-value"><%= organization %></span>
+    <div class="signatory-image">
+      <% if (signature_image_path != "") { %>
+            <div class="wrapper-signature-image">
+                <img class="signature-image" src="<%= signature_image_path %>" alt="Signature Image">
+            </div>
+      <% } %>
     </div>
   </div>
 </div>

cms/templates/js/signatory-editor.underscore

      <div class="signatory-panel-default">
-
-       <% if (!is_editing_all_collections) { %>
-       <a class="signatory-panel-close" href="javascript:void(0);" data-tooltip="Close">
-          <i class="icon fa fa-close" aria-hidden="true"></i>
-          <span class="sr action-button-text"><%= gettext("Close") %></span>
-       </a>
-       <a class="signatory-panel-save"  href="javascript:void(0);" data-tooltip="Save">
-          <i class="icon fa fa-save" aria-hidden="true"></i>
-          <span class="sr action-button-text"><%= gettext("Save") %></span>
-       </a>
-       <% } else if (signatories_count > 1 && (total_saved_signatories > 1 || isNew) ) { %>
+       <% if (is_editing_all_collections && signatories_count > 1 && (total_saved_signatories > 1 || isNew) ) { %>
        <a class="signatory-panel-delete" href="#" data-tooltip="Delete">
           <i class="icon fa fa-trash-o" aria-hidden="true"></i>
           <span class="sr action-button-text"><%= gettext("Delete") %></span>

common/test/acceptance/pages/studio/settings_certificates.py

@@ -27,6 +27,12 @@ class CertificatesPage(CoursePage):
     # Helpers
     ################
 
+    def refresh(self):
+        """
+        Refresh the certificate page
+        """
+        self.browser.refresh()
+
     def is_browser_on_page(self):
         """
         Verify that the browser is on the page and it is not still loading.
@@ -434,11 +440,8 @@ class Signatory(object):
         """
         Save signatory.
         """
-        # Move focus from input to save button and then click it
-        self.certificate.page.browser.execute_script(
-            "$('{} .signatory-panel-save').focus()".format(self.get_selector())
-        )
-        self.find_css('.signatory-panel-save').first.click()
+        # Click on the save button.
+        self.certificate.page.q(css='button.signatory-panel-save').click()
         self.mode = 'details'
         self.certificate.page.wait_for_ajax()
         self.wait_for_signatory_detail_view()
@@ -447,7 +450,7 @@ class Signatory(object):
         """
         Cancel signatory editing.
         """
-        self.find_css('.signatory-panel-close').first.click()
+        self.certificate.page.q(css='button.signatory-panel-close').click()
         self.mode = 'details'
         self.wait_for_signatory_detail_view()
 

common/test/acceptance/tests/studio/test_studio_settings_certificates.py

@@ -170,6 +170,8 @@ class CertificatesTest(StudioCourseTest):
 
         self.assertEqual(len(self.certificates_page.certificates), 1)
 
+        #Refreshing the page, So page have the updated certificate object.
+        self.certificates_page.refresh()
         signatory = self.certificates_page.certificates[0].signatories[0]
         self.assertIn("Updated signatory name", signatory.name)
         self.assertIn("Update signatory title", signatory.title)