Merge pull request #16017 from edx/diana/profile-messaging

LEARNER-2530: Messaging changes on Learner Profile

lms/static/sass/bootstrap/_components.scss

@@ -13,7 +13,13 @@
 
 // Alerts
 .alert {
+  display: flex;
+
   .icon-alert {
-    margin-right: $baseline / 4;
+    margin-right: $baseline;
+  }
+
+  .message-actions {
+    margin-left: $baseline;
   }
 }

lms/static/sass/elements/_banners.scss

@@ -12,7 +12,7 @@ $full-width-banner-margin: 20px;
     position: relative;
     background: $black;
 
-        &:before {
+    &::before {
       content: '';
       position: absolute;
       top: 0;
@@ -22,7 +22,7 @@ $full-width-banner-margin: 20px;
       background: $black;
       opacity: 0.65;
 
-            @media(min-width: $bp-screen-md) {
+      @media (min-width: $bp-screen-md) {
         opacity: 0.4;
       }
     }
@@ -31,7 +31,7 @@ $full-width-banner-margin: 20px;
   .banner-background-image {
     height: $full-width-banner-img-height;
 
-        @media(min-width: $full-width-banner-img-width) {
+    @media (min-width: $full-width-banner-img-width) {
       height: auto;
       width: 100%;
     }
@@ -61,12 +61,20 @@ $full-width-banner-margin: 20px;
   }
 
   .alert {
-        margin-bottom: $baseline !important;
+    display: flex;
     padding: $baseline;
     border: 1px solid;
 
+    &:not(:last-child) {
+      margin-bottom: $baseline / 2;
+    }
+
     .icon-alert {
-            margin-right: $baseline / 4;
+      @include margin-right($baseline);
+    }
+
+    .message-actions {
+      @include margin-left($baseline);
     }
 
     &.alert-info {
@@ -74,6 +82,14 @@ $full-width-banner-margin: 20px;
       background-color: $state-info-bg;
       border-color: $state-info-border;
       box-shadow: none;
+      line-height: initial;
+
+      a,
+      a:visited,
+      .btn-link {
+        color: $state-info-text-link;
+        font-weight: bold;
+      }
     }
 
     &.alert-success {

lms/static/sass/features/_learner-profile.scss

@@ -112,6 +112,16 @@
     background-color: $white;
   }
 
+  .page-banner {
+    background-color: $gray-l4;
+    max-width: none;
+
+    .user-messages {
+      max-width: $lms-max-width;
+      margin: auto;
+    }
+  }
+
   .ui-loading-indicator {
     @extend .ui-loading-base;
 
@@ -253,7 +263,7 @@
 
       width: 100%;
       margin: 0 auto;
-      border: 1px solid $gray-l3;
+      border-bottom: 1px solid $gray-l3;
       background-color: $gray-l4;
       padding: ($baseline*0.75) 0;
 
@@ -262,7 +272,7 @@
 
         border: none;
         box-shadow: none;
-        padding: 0 ($baseline*3);
+        padding: 0;
       }
 
       .u-field-title {
@@ -297,18 +307,21 @@
   .wrapper-profile-sections {
     @extend .container;
 
-    @include padding($baseline*1.5, $baseline*1.5, $baseline*1.5, 0);
+    @include padding($baseline*1.5, 0, $baseline*1.5, 0);
 
+    display: flex;
+    flex-wrap: wrap;
     min-width: 0;
 
     @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
       @include margin-left(0);
-      @include padding($baseline*1.5, 0, $baseline*1.5, 0);
     }
   }
 
   .profile-header {
-    @include padding(0, $baseline*2, $baseline, $baseline*3);
+    max-width: $lms-max-width;
+    margin: auto;
+    padding: $baseline 0 0;
 
     @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
       @include padding(0, $baseline*2, $baseline, $baseline*0.75);
@@ -333,9 +346,6 @@
     }
 
     .wrapper-profile-section-one {
-      @include float(left);
-      @include margin-left($baseline*3);
-
       width: 300px;
       background-color: $white;
       border-top: 5px solid $blue;
@@ -459,9 +469,8 @@
     @include float(left);
     @include padding-left($baseline);
 
-    width: calc(100% - 380px);
-    max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap
     font-family: $sans-serif;
+    flex-grow: 1;
 
     @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
       width: 90%;

lms/static/sass/partials/base/_variables.scss

@@ -227,7 +227,8 @@ $state-success-text: $black !default;
 $state-success-bg: #dff0d8 !default;
 $state-success-border: darken($state-success-bg, 5%) !default;
 
-$state-info-text: $black !default;
+$state-info-text: #31708f !default;
+$state-info-text-link: #245269 !default;
 $state-info-bg: #d9edf7 !default;
 $state-info-border: darken($state-info-bg, 7%) !default;
 

lms/static/sass/shared-v2/_components.scss

 // TODO: tabs should be added to the Pattern Library
 .tabs {
   @include clearfix();
+
   @extend %reset-lists;
+
   @include border-top-radius(4px);
+
   padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
 
   .tab {
     @include float(left);
+
     list-style: none;
     margin-bottom: 0;
 
     &.prominent {
       @include margin-right(16px);
+
       background: rgba(255, 255, 255, 0.5);
       border-radius: 3px;
     }
@@ -24,11 +29,12 @@
     a,
     a:visited {
       @include padding($baseline/2, $baseline*0.75, 13px, $baseline*0.75);
+
       display: block;
       text-align: center;
       text-decoration: none;
       border-style: solid;
-            border-width: 0 0 4px 0;
+      border-width: 0 0 4px;
       border-bottom-color: transparent;
       color: $lms-inactive-color;
       font-size: 14px;
@@ -75,6 +81,7 @@
   .action-clear {
     @include right(0);
     @include margin(0, ($baseline/4), 0, 0);
+
     position: absolute;
     top: 0;
     color: $lms-gray;
@@ -94,11 +101,16 @@
   margin: 0 auto;
 
   .alert {
+    display: flex;
     margin-top: $baseline;
     border: 1px solid;
 
     .icon-alert {
-      margin-right: $baseline / 4;
+      @include margin-right($baseline);
+    }
+
+    .message-actions {
+      @include margin-left($baseline);
     }
 
     &.alert-info {
@@ -134,7 +146,8 @@
 .wrapper-preview-menu {
   @include clearfix();
   @include box-sizing(border-box);
-  margin: 0 auto 0;
+
+  margin: 0 auto;
   padding: ($baseline*0.75);
   background-color: $lms-preview-menu-color;
 
@@ -150,6 +163,7 @@
 
   .preview-actions {
     @include margin-left(0);
+
     display: inline-block;
     margin-bottom: 0;
 
@@ -158,6 +172,7 @@
 
       .action-preview-label {
         @include margin-right($baseline/2);
+
         display: inline-block;
         margin-bottom: 0;
         vertical-align: middle;

openedx/core/djangoapps/util/tests/test_user_messages.py

@@ -30,9 +30,9 @@ class UserMessagesTestCase(TestCase):
         MessageMiddleware().process_request(self.request)
 
     @ddt.data(
-        ('Rock & Roll', 'Rock & Roll'),
-        (Text('Rock & Roll'), 'Rock & Roll'),
-        (HTML('<p>Hello, world!</p>'), '<p>Hello, world!</p>')
+        ('Rock & Roll', '<div class="message-content">Rock &amp; Roll</div>'),
+        (Text('Rock & Roll'), '<div class="message-content">Rock &amp; Roll</div>'),
+        (HTML('<p>Hello, world!</p>'), '<div class="message-content"><p>Hello, world!</p></div>')
     )
     @ddt.unpack
     def test_message_escaping(self, message, expected_message_html):

openedx/core/djangoapps/util/user_messages.py

@@ -87,7 +87,7 @@ class UserMessageCollection():
         raise NotImplementedError('Subclasses must define a namespace for messages.')
 
     @classmethod
-    def get_message_html(self, body_html, title=None):
+    def get_message_html(self, body_html, title=None, dismissable=False):
         """
         Returns the entire HTML snippet for the message.
 
@@ -96,16 +96,35 @@ class UserMessageCollection():
         not use a title can just pass the body_html.
         """
         if title:
-            return Text(_('{header_open}{title}{header_close}{body}')).format(
+            title_area = Text(_('{header_open}{title}{header_close}')).format(
                 header_open=HTML('<div class="message-header">'),
                 title=title,
-                body=body_html,
                 header_close=HTML('</div>')
             )
-        return body_html
+        else:
+            title_area = ''
+        if dismissable:
+            dismiss_button = HTML(
+                '<div class="message-actions">'
+                '<button class="btn-link action-dismiss">'
+                '<span class="sr">{dismiss_text}</span>'
+                '<span class="icon fa fa-times" aria-hidden="true"></span></button>'
+                '</div>'
+            ).format(
+                dismiss_text=Text(_("Dismiss"))
+            )
+        else:
+            dismiss_button = ''
+        return Text('{title_area}{body_area}{dismiss_button}').format(
+            title_area=title_area,
+            body_area=HTML('<div class="message-content">{body_html}</div>').format(
+                body_html=body_html,
+            ),
+            dismiss_button=dismiss_button,
+        )
 
     @classmethod
-    def register_user_message(self, request, message_type, body_html, title=None):
+    def register_user_message(self, request, message_type, body_html, **kwargs):
         """
         Register a message to be shown to the user in the next page.
 
@@ -113,9 +132,10 @@ class UserMessageCollection():
             message_type (UserMessageType): the user message type
             body_html (str): body of the message in html format
             title (str): optional title for the message as plain text
+            dismissable (bool): shows a dismiss button (defaults to no button)
         """
         assert isinstance(message_type, UserMessageType)
-        message = Text(self.get_message_html(body_html, title))
+        message = Text(self.get_message_html(body_html, **kwargs))
         messages.add_message(request, message_type.value, Text(message), extra_tags=self.get_namespace())
 
     @classmethod

openedx/features/learner_profile/__init__.py

@@ -11,3 +11,7 @@ WAFFLE_FLAG_NAMESPACE = WaffleFlagNamespace(name='learner_profile')
 # Waffle flag to show achievements on the learner profile.
 # TODO: LEARNER-2443: 08/2017: Remove flag after rollout.
 SHOW_ACHIEVEMENTS_FLAG = WaffleFlag(WAFFLE_FLAG_NAMESPACE, 'show_achievements')
+
+# Waffle flag for showing a message about the new profile features.
+# TODO: LEARNER-2554: 09/2017: Remove flag once message is no longer needed.
+SHOW_PROFILE_MESSAGE = WaffleFlag(WAFFLE_FLAG_NAMESPACE, 'show_message')

openedx/features/learner_profile/static/learner_profile/js/learner_profile_factory.js

@@ -25,6 +25,11 @@
         return function(options) {
             var $learnerProfileElement = $('.wrapper-profile');
 
+            // TODO: LEARNER-2554: 09/2017: Remove this hiding logic when the message is removed.
+            $('.action-dismiss').click(function() {
+                $('.user-messages').hide();
+            });
+
             var accountSettingsModel = new AccountSettingsModel(
                 _.extend(
                     options.account_settings_data,

openedx/features/learner_profile/static/learner_profile/js/views/learner_profile_view.js

@@ -57,6 +57,13 @@
                     $('.wrapper-profile-section-container-one').removeClass('is-hidden');
                     $('.wrapper-profile-section-container-two').removeClass('is-hidden');
 
+                    // Only show accomplishments if this is a full profile
+                    if (this.showFullProfile()) {
+                        $('.learner-achievements').removeClass('is-hidden');
+                    } else {
+                        $('.learner-achievements').addClass('is-hidden');
+                    }
+
                     if (this.showFullProfile() && (this.options.accountSettingsModel.get('accomplishments_shared'))) {
                         tabs = [
                             {view: this.sectionTwoView, title: gettext('About Me'), url: 'about_me'},

openedx/features/learner_profile/templates/learner_profile/learner_profile.html

@@ -26,7 +26,6 @@ from openedx.core.djangolib.markup import HTML
     <div class="wrapper-profile">
         <div class="profile ${'profile-self' if own_profile else 'profile-other'}">
             <div class="wrapper-profile-field-account-privacy"></div>
-            <div class="wrapper-profile-sections account-settings-container">
             % if own_profile:
                 <div class="profile-header">
                     <div class="header">${_("My Profile")}</div>
@@ -37,6 +36,7 @@ from openedx.core.djangolib.markup import HTML
                     </div>
                 </div>
             % endif
+            <div class="wrapper-profile-sections account-settings-container">
                 <div class="ui-loading-indicator">
                     <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
                 </div>

openedx/features/learner_profile/views/learner_profile.py

@@ -8,6 +8,7 @@ from django.core.exceptions import ObjectDoesNotExist
 from django.core.urlresolvers import reverse
 from django.http import Http404
 from django.shortcuts import render_to_response
+from django.utils.translation import ugettext as _
 from django.views.decorators.http import require_http_methods
 from django_countries import countries
 from edxmako.shortcuts import marketing_link
@@ -15,9 +16,11 @@ from openedx.core.djangoapps.site_configuration import helpers as configuration_
 from openedx.core.djangoapps.user_api.accounts.api import get_account_settings
 from openedx.core.djangoapps.user_api.errors import UserNotAuthorized, UserNotFound
 from openedx.core.djangoapps.user_api.preferences.api import get_user_preferences
+from openedx.core.djangoapps.util.user_messages import PageLevelMessages
+from openedx.core.djangolib.markup import HTML, Text
 from student.models import User
 
-from .. import SHOW_ACHIEVEMENTS_FLAG
+from .. import SHOW_ACHIEVEMENTS_FLAG, SHOW_PROFILE_MESSAGE
 
 from learner_achievements import LearnerAchievementsFragmentView
 
@@ -42,10 +45,33 @@ def learner_profile(request, username):
         GET /account/profile
     """
     try:
-        return render_to_response(
+        context = learner_profile_context(request, username, request.user.is_staff)
+        # TODO: LEARNER-2554: 09/2017: Remove message and cookie logic when we no longer want this message
+        message_viewed = False
+        if (context['own_profile'] and
+                SHOW_PROFILE_MESSAGE.is_enabled() and
+                request.COOKIES.get('profile-message-viewed', '') != 'True'):
+            message_text = Text(_(
+                'Welcome to the new learner profile page. Your full profile now displays more '
+                'information to other learners. You can instead choose to display a limited '
+                'profile. {learn_more_link_start}Learn more{learn_more_link_end}'
+            )).format(
+                learn_more_link_start=HTML(
+                    '<a href="http://edx.readthedocs.io/projects/open-edx-learner-guide/en/'
+                    'latest/SFD_dashboard_profile_SectionHead.html#adding-profile-information">'
+                ),
+                learn_more_link_end=HTML('</a>')
+            )
+            PageLevelMessages.register_info_message(request, message_text, dismissable=True)
+            message_viewed = True
+        response = render_to_response(
             'learner_profile/learner_profile.html',
-            learner_profile_context(request, username, request.user.is_staff)
+            context
         )
+
+        if message_viewed:
+            response.set_cookie('profile-message-viewed', 'True')
+        return response
     except (UserNotAuthorized, UserNotFound, ObjectDoesNotExist):
         raise Http404
 

scripts/all-tests.sh

@@ -13,7 +13,7 @@ set -e
 # Violations thresholds for failing the build
 export PYLINT_THRESHOLD=3600
 export ESLINT_THRESHOLD=9134
-export STYLELINT_THRESHOLD=15579
+export STYLELINT_THRESHOLD=15852
 
 XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
 export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}