Matt - javascript and test changes, Marco - styling feedback from initial reviews

common/djangoapps/student/tests/test_bulk_email_settings.py

@@ -40,9 +40,9 @@ class TestStudentDashboardEmailView(ModuleStoreTestCase):
         self.url = reverse('dashboard')
         # URL for email settings modal
         self.email_modal_link = (
-            '<a href="#email-settings-modal" class="email-settings" rel="leanModal" '
+            '<a href="#email-settings-modal" class="action action-email-settings" rel="leanModal" '
             'data-course-id="{org}/{num}/{name}" data-course-number="{num}" '
-            'data-optout="False">Email Settings</a>'
+            'data-dashboard-index="0" data-optout="False">Email Settings</a>'
         ).format(
             org=self.course.org,
             num=self.course.number,
@@ -86,7 +86,6 @@ class TestStudentDashboardEmailView(ModuleStoreTestCase):
         # Assert that the URL for the email view is not in the response
         # if this course isn't authorized
         response = self.client.get(self.url)
-        print response.content
         self.assertTrue(self.email_modal_link in response.content)
 
 
@@ -112,9 +111,9 @@ class TestStudentDashboardEmailViewXMLBacked(ModuleStoreTestCase):
 
         # URL for email settings modal
         self.email_modal_link = (
-            '<a href="#email-settings-modal" class="email-settings" rel="leanModal" '
+            '<a href="#email-settings-modal" class="action action-email-settings" rel="leanModal" '
             'data-course-id="{org}/{num}/{name}" data-course-number="{num}" '
-            'data-optout="False">Email Settings</a>'
+            'data-dashboard-index="0" data-optout="False">Email Settings</a>'
         ).format(
             org='edX',
             num='toy',

common/test/acceptance/pages/lms/dashboard.py

@@ -45,9 +45,7 @@ class DashboardPage(PageObject):
         Return list of the names of available courses (e.g. "999 edX Demonstration Course")
         """
         def _get_course_name(el):
-            # The first component in the link text is the course number
-            course_name = el.text
-            return course_name
+            return el.text
 
         return self.q(css='h3.course-title > a').map(_get_course_name).results
 
@@ -64,7 +62,7 @@ class DashboardPage(PageObject):
     @property
     def username(self):
         """Return the displayed value for the user's username"""
-        return self.q(css='.user-name').text[0]
+        return self.q(css='.username-label').text[0]
 
     def get_enrollment_mode(self, course_name):
         """Get the enrollment mode for a given course on the dashboard.
@@ -113,7 +111,7 @@ class DashboardPage(PageObject):
             el = course_listing[0]
 
             # Expand the upsell copy and click the upgrade button
-            el.find_element_by_css_selector('.message-upsell').click()
+            el.find_element_by_css_selector('.message-upsell .ui-toggle-expansion').click()
             el.find_element_by_css_selector('#upgrade-to-verified').click()
 
             upgrade_page.wait_for_page()
@@ -176,4 +174,4 @@ class DashboardPage(PageObject):
         """
         Verify if pre-requisite course messages are being displayed.
         """
-        return self.q(css='section.prerequisites > .tip').visible
+        return self.q(css='li.prerequisites > .tip').visible

lms/djangoapps/courseware/features/registration.py

@@ -47,7 +47,14 @@ def i_should_see_that_course_in_my_dashboard(_step, doesnt_appear, course):
 
 @step(u'I unenroll from the course numbered "([^"]*)"')
 def i_unenroll_from_that_course(_step, course):
-    unregister_css = 'section.info a[href*="#unenroll-modal"][data-course-number*="%s"]' % course
+    more_actions_dropdown_link_selector = '[id*=actions-dropdown-link-0]'
+    assert world.is_css_present(more_actions_dropdown_link_selector)
+    world.css_click(more_actions_dropdown_link_selector)
+
+    unregister_css = 'li.actions-item a.action-unenroll[data-course-number*="{course_number}"][href*=unenroll-modal]'.format(course_number=course)
+    assert world.is_css_present(unregister_css)
     world.css_click(unregister_css)
+
     button_css = 'section#unenroll-modal input[value="Unenroll"]'
+    assert world.is_css_present(button_css)
     world.css_click(button_css)

lms/static/js/dashboard/legacy.js

@@ -97,14 +97,26 @@
         }
 
         function toggleCourseActionsDropdown(event) {
-            var dropdown = $(event.target).closest('.action-more').find('.actions-dropdown-list')
-
-            event.preventDefault();
-
-            $(this).toggleClass('is-visible');
+            var dashboard_index = $(this).data('dashboard-index');
+
+            // Toggle the visibility control for the selected element and set the focus
+            var dropdown_selector = 'div#actions-dropdown-' + dashboard_index;
+            var dropdown = $(dropdown_selector);
+            dropdown.toggleClass('is-visible');
+            if (dropdown.hasClass('is-visible')) {
+                dropdown.attr('tabindex', -1);
+            } else {
+                dropdown.removeAttr('tabindex');
+            }
 
-            // add BI event here
+            // Inform the ARIA framework that the dropdown has been expanded
+            var anchor_selector = 'a#actions-dropdown-link-' + dashboard_index;
+            var anchor = $(anchor_selector);
+            var aria_expanded_state = (anchor.attr('aria-expanded') === 'true');
+            anchor.attr('aria-expanded', !aria_expanded_state);
 
+            // Suppress the actual click event from the browser
+            event.preventDefault();
         }
 
         $("#failed-verification-button-dismiss").click(function() {
@@ -122,7 +134,7 @@
             Logger.log('edx.course.enrollment.upgrade.clicked', [user, course], null);
         });
 
-        $(".email-settings").click(function(event) {
+        $(".action-email-settings").click(function(event) {
             $("#email_settings_course_id").val( $(event.target).data("course-id") );
             $("#email_settings_course_number").text( $(event.target).data("course-number") );
             if($(event.target).data("optout") === "False") {
@@ -130,7 +142,7 @@
             }
         });
 
-        $(".unenroll").click(function(event) {
+        $(".action-unenroll").click(function(event) {
             $("#unenroll_course_id").val( $(event.target).data("course-id") );
             $("#unenroll_course_number").text( $(event.target).data("course-number") );
         });
@@ -247,8 +259,8 @@
             "#dashboard-main"
         );
 
-        $(".email-settings").each(function(index){
-            $(this).attr("id", "unenroll-" + index);
+        $(".action-email-settings").each(function(index){
+            $(this).attr("id", "email-settings-" + index);
             // a bit of a hack, but gets the unique selector for the modal trigger
             var trigger = "#" + $(this).attr("id");
             accessibleModal(
@@ -259,8 +271,8 @@
             );
         });
 
-        $(".unenroll").each(function(index){
-            $(this).attr("id", "email-settings-" + index);
+        $(".action-unenroll").each(function(index){
+            $(this).attr("id", "unenroll-" + index);
             // a bit of a hack, but gets the unique selector for the modal trigger
             var trigger = "#" + $(this).attr("id");
             accessibleModal(

lms/static/sass/base/_variables.scss

@@ -133,6 +133,11 @@ $green-u1: desaturate($green,15%);
 $green-u2: desaturate($green,30%);
 $green-u3: desaturate($green,45%);
 
+// COLORS: social platforms
+$twitter-blue: #55ACEE;
+$facebook-blue: #3B5998;
+$linkedin-blue: #0077B5;
+
 // TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching.
 $blue: rgb(29,157,217);
 $yellow: rgb(255, 252, 221);

lms/static/sass/shared/_header.scss

@@ -117,7 +117,7 @@ header.global {
 
   .user {
     @include float(right);
-    margin-top: 4px;
+    margin-top: ($baseline/4);
 
     > .primary {
       display: block;
@@ -135,7 +135,7 @@ header.global {
         > a {
           @include border-radius(0, 4px, 4px, 0);
           @include border-left(none);
-          padding: 3px 8px 9px 8px;
+          padding: ($baseline/4) 8px 11px ($baseline/2);
 
           &.shopping-cart {
             border-radius: 4px;
@@ -148,7 +148,7 @@ header.global {
     }
 
     a.user-link {
-      @include padding(3px, 12px, 8px, 8px);
+      @include padding(5px, 12px, 10px, 10px);
       position: relative;
       text-transform: none;
       font-size: 14px;
@@ -196,17 +196,17 @@ header.global {
     }
 
     .dropdown-menu {
-      background: $border-color-4;
+      background: $white;
       border-radius: 4px;
-      box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
-      border: 1px solid $border-color-3;
+      box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.3);
+      border: 1px solid $gray-l3;
       display: none;
       margin-top: 0;
       padding: 5px 10px;
       position: absolute;
       @include right(0px);
-      top: 34px;
-      width: 170px;
+      top: 37px;
+      min-width: 120px;
       z-index: 3;
 
       &.expanded {
@@ -221,14 +221,14 @@ header.global {
           bottom: 6px solid transparent;
           left: 6px solid transparent;
         }
-        box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3;
+        box-shadow: 1px 0 0 0 $gray-l3, 0 -1px 0 0 $gray-l3;
         content: "";
         display: block;
         height: 0px;
         position: absolute;
         @include transform(rotate(-45deg));
         @include right(7px);
-        top: -6px;
+        top: -5px;
         width: 0px;
       }
 
@@ -579,7 +579,7 @@ header.global-new {
 
       li {
         display: block;
-        border-top: 1px dotted $border-color-2;
+        border-top: 1px solid $gray-l3;
         box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05);
 
         &:first-child {

lms/templates/dashboard.html

@@ -74,26 +74,25 @@
 </div>
 
 <section class="container dashboard" id="dashboard-main">
-  <section class="my-courses" id="my-courses">
+  <section class="my-courses" id="my-courses" role="main" aria-label="Content">
     <header class="wrapper-header-courses">
       <h2 class="header-courses">${_("Current Courses")}</h2>
     </header>
 
     % if len(course_enrollment_pairs) > 0:
       <ul class="listing-courses">
-        % for course, enrollment in course_enrollment_pairs:
-            <% show_courseware_link = (course.id in show_courseware_links_for) %>
-            <% cert_status = cert_statuses.get(course.id) %>
-            <% show_email_settings = (course.id in show_email_settings_for) %>
-            <% course_mode_info = all_course_modes.get(course.id) %>
-            <% show_refund_option = (course.id in show_refund_option_for) %>
-            <% is_paid_course = (course.id in enrolled_courses_either_paid) %>
-            <% is_course_blocked = (course.id in block_courses) %>
-            <% course_verification_status = verification_status_by_course.get(course.id, {}) %>
-            <% course_requirements = courses_requirements_not_met.get(course.id) %>
-            <%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, show_refund_option = show_refund_option, is_paid_course = is_paid_course, is_course_blocked = is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements" />
+      % for dashboard_index, (course, enrollment) in enumerate(course_enrollment_pairs):
+        <% show_courseware_link = (course.id in show_courseware_links_for) %>
+        <% cert_status = cert_statuses.get(course.id) %>
+        <% show_email_settings = (course.id in show_email_settings_for) %>
+        <% course_mode_info = all_course_modes.get(course.id) %>
+        <% show_refund_option = (course.id in show_refund_option_for) %>
+        <% is_paid_course = (course.id in enrolled_courses_either_paid) %>
+        <% is_course_blocked = (course.id in block_courses) %>
+        <% course_verification_status = verification_status_by_course.get(course.id, {}) %>
+        <% course_requirements = courses_requirements_not_met.get(course.id) %>
+        <%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, show_refund_option = show_refund_option, is_paid_course = is_paid_course, is_course_blocked = is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements, dashboard_index=dashboard_index" />
       % endfor
-
       </ul>
     % else:
       <section class="empty-dashboard-message">
@@ -122,11 +121,12 @@
            % endfor
              </ul>
       % endfor
+      </div>
     % endif
   </section>
-  <section class="profile-sidebar">
+  <section class="profile-sidebar" role="region" aria-label="User info">
     <header class="profile">
-      <h2><span class="sr">${_("Username")}: </span><span class="user-name">${ user.username }</span></h2>
+      <h2 class="username-header"><span class="sr">${_("Username")}: </span><span class="username-label">${ user.username }</span></h2>
     </header>
     <section class="user-info">
       <ul>
@@ -220,61 +220,6 @@
 
       </ul>
     </section>
-<<<<<<< HEAD
-
-  </section>
-
-  <section id="my-courses" class="my-courses" role="main" aria-label="Content">
-    <header>
-      <h2>${_("Current Courses")}</h2>
-    </header>
-
-    % if len(course_enrollment_pairs) > 0:
-      <ul class="listing-courses">
-        % for course, enrollment in course_enrollment_pairs:
-            <% show_courseware_link = (course.id in show_courseware_links_for) %>
-            <% cert_status = cert_statuses.get(course.id) %>
-            <% show_email_settings = (course.id in show_email_settings_for) %>
-            <% course_mode_info = all_course_modes.get(course.id) %>
-            <% show_refund_option = (course.id in show_refund_option_for) %>
-            <% is_paid_course = (course.id in enrolled_courses_either_paid) %>
-            <% is_course_blocked = (course.id in block_courses) %>
-            <% course_verification_status = verification_status_by_course.get(course.id, {}) %>
-            <% course_requirements = courses_requirements_not_met.get(course.id) %>
-            <%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, show_refund_option = show_refund_option, is_paid_course = is_paid_course, is_course_blocked = is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements" />
-      % endfor
-
-      </ul>
-    % else:
-      <section class="empty-dashboard-message">
-        % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
-          <p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
-          <a href="${marketing_link('COURSES')}">
-            ${_("Find courses now!")}
-          </a>
-        % else:
-          <p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
-        %endif
-      </section>
-    % endif
-
-    % if staff_access and len(errored_courses) > 0:
-      <div id="course-errors">
-        <h2>${_("Course-loading errors")}</h2>
-
-      % for course_dir, errors in errored_courses.items():
-         <h3>${course_dir | h}</h3>
-             <ul>
-           % for (msg, err) in errors:
-               <li>${msg}
-                 <ul><li><pre>${err}</pre></li></ul>
-               </li>
-           % endfor
-             </ul>
-      % endfor
-    % endif
-=======
->>>>>>> dashboard styling cleanup changes, including reversing the positions of the sidebar and course listing, html for new social icons (not currently wired up), new actions dropdown for unenrollment and email settings, partial reorganization of dashboard.scss styles as well
   </section>
 </section>
 
@@ -309,8 +254,6 @@
   </div>
 </section>
 
-
-
 <section id="password_reset_complete" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="password-reset-email">
     <button class="close-modal">