Add support for beta languages.

Whenever user selects a beta language on account settings page, show a page level warning message that this language is not fully translated along with action to revert. LEARNER-5654
2018-04-25 13:36:34 +05:00
parent 945debb00f
commit d76a2463fa
16 changed files with 330 additions and 91 deletions
--- a/lms/static/js/spec/student_account/helpers.js
+++ b/lms/static/js/spec/student_account/helpers.js
@@ -39,6 +39,8 @@ define(['underscore'], function(_) {
            options: FIELD_OPTIONS
        }, language: {
            options: FIELD_OPTIONS
+        }, beta_language: {
+            options: []
        }, level_of_education: {
            options: FIELD_OPTIONS
        }, password: {
--- a/lms/static/js/student_account/views/account_settings_factory.js
+++ b/lms/static/js/student_account/views/account_settings_factory.js
@@ -28,7 +28,8 @@
            edxSupportUrl,
            extendedProfileFields,
            displayAccountDeletion,
-            isSecondaryEmailFeatureEnabled
+            isSecondaryEmailFeatureEnabled,
+            betaLanguage
        ) {
            var $accountSettingsElement, userAccountModel, userPreferencesModel, aboutSectionsData,
                accountsSectionData, ordersSectionData, accountSettingsView, showAccountSettingsPage,
@@ -36,7 +37,8 @@
                emailFieldView, secondaryEmailFieldView, socialFields, accountDeletionFields, platformData,
                aboutSectionMessageType, aboutSectionMessage, fullnameFieldView, countryFieldView,
                fullNameFieldData, emailFieldData, secondaryEmailFieldData, countryFieldData, additionalFields,
-                fieldItem, emailFieldViewIndex;
+                fieldItem, emailFieldViewIndex, focusId,
+                tabIndex = 0;

            $accountSettingsElement = $('.wrapper-account-settings');

@@ -418,15 +420,24 @@
                    accountsTabSections: accountsSectionData,
                    ordersTabSections: ordersSectionData
                },
-                userPreferencesModel: userPreferencesModel
+                userPreferencesModel: userPreferencesModel,
+                betaLanguage: betaLanguage
            });

            accountSettingsView.render();
-            if( $.cookie('focus_id')) {
-                $($.cookie('focus_id')).attr({"tabindex": 0});
-                $($.cookie('focus_id')).focus();
+            focusId = $.cookie('focus_id');
+            if (focusId) {
+                if (~focusId.indexOf('beta-language')) {
+                    tabIndex = -1;
+
+                    // Scroll to top of selected element
+                    $('html, body').animate({
+                        scrollTop: $(focusId).offset().top
+                    }, 'slow');
+                }
+                $(focusId).attr({tabindex: tabIndex}).focus();
                // Deleting the cookie
-                document.cookie = "focus_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/account;";
+                document.cookie = 'focus_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/account;';
            }
            showAccountSettingsPage = function() {
                // Record that the account settings page was viewed.
--- a/lms/static/js/student_account/views/account_settings_fields.js
+++ b/lms/static/js/student_account/views/account_settings_fields.js
@@ -50,6 +50,22 @@
            }),
            LanguagePreferenceFieldView: FieldViews.DropdownFieldView.extend({
                fieldTemplate: field_dropdown_account_template,
+
+                initialize: function(options) {
+                    this._super(options);   // eslint-disable-line no-underscore-dangle
+                    this.listenTo(this.model, 'revertValue', this.revertValue);
+                },
+
+                revertValue: function(event) {
+                    var attributes = {},
+                        oldPrefLang = $(event.target).data('old-lang-code');
+
+                    if (oldPrefLang) {
+                        attributes['pref-lang'] = oldPrefLang;
+                        this.saveAttributes(attributes);
+                    }
+                },
+
                saveSucceeded: function() {
                    var data = {
                        language: this.modelValue(),
--- a/lms/static/js/student_account/views/account_settings_view.js
+++ b/lms/static/js/student_account/views/account_settings_view.js
@@ -42,7 +42,8 @@
            ],
            events: {
                'click .account-nav-link': 'switchTab',
-                'keydown .account-nav-link': 'keydownHandler'
+                'keydown .account-nav-link': 'keydownHandler',
+                'click .btn-alert-primary': 'revertValue'
            },

            initialize: function(options) {
@@ -51,10 +52,37 @@
            },

            render: function() {
-                var tabName,
+                var tabName, betaLangMessage, helpTranslateText, helpTranslateLink, betaLangCode, oldLangCode,
                    view = this;
+                if (!_.isEmpty(view.options.betaLanguage) && $.cookie('old-pref-lang')) {
+                    betaLangMessage = HtmlUtils.interpolateHtml(
+                        gettext('You have set your language to {beta_language}, which is currently not fully translated. You can help us translate this language fully by joining the Transifex community and adding translations from English for learners that speak {beta_language}.'),  // eslint-disable-line max-len
+                        {
+                            beta_language: view.options.betaLanguage.name
+                        }
+                    );
+                    helpTranslateText = HtmlUtils.interpolateHtml(
+                        gettext('Help Translate into {beta_language}'),
+                        {
+                            beta_language: view.options.betaLanguage.name
+                        }
+                    );
+                    betaLangCode = this.options.betaLanguage.code.split('-');
+                    betaLangCode = betaLangCode[0] + '_' + betaLangCode[1].toUpperCase();
+                    helpTranslateLink = 'https://www.transifex.com/open-edx/edx-platform/translate/#' + betaLangCode;
+                    oldLangCode = $.cookie('old-pref-lang');
+                    // Deleting the cookie
+                    document.cookie = 'old-pref-lang=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/account;';
+
+                    $.cookie('focus_id', '#beta-language-message');
+                }
                HtmlUtils.setHtml(this.$el, HtmlUtils.template(accountSettingsTemplate)({
-                    accountSettingsTabs: this.accountSettingsTabs
+                    accountSettingsTabs: this.accountSettingsTabs,
+                    HtmlUtils: HtmlUtils,
+                    message: betaLangMessage,
+                    helpTranslateText: helpTranslateText,
+                    helpTranslateLink: helpTranslateLink,
+                    oldLangCode: oldLangCode
                }));
                _.each(view.accountSettingsTabs, function(tab) {
                    tabName = tab.name;
@@ -108,6 +136,10 @@

            showLoadingError: function() {
                this.$('.ui-loading-error').removeClass('is-hidden');
+            },
+
+            revertValue: function(event) {
+                this.options.userPreferencesModel.trigger('revertValue', event);
            }
        });

--- a/lms/static/js/views/fields.js
+++ b/lms/static/js/views/fields.js
@@ -495,6 +495,7 @@
            saveValue: function() {
                var attributes = {};
                attributes[this.options.valueAttribute] = this.fieldValue();
+                $.cookie('old-pref-lang', this.modelValue());
                this.saveAttributes(attributes);
            },

--- a/lms/static/sass/views/_account-settings.scss
+++ b/lms/static/sass/views/_account-settings.scss
@@ -5,6 +5,7 @@
 // * +Container - Account Settings
 // * +Main - Header
 // * +Settings Section
+// * +Alert Messages


 // +Container - Account Settings
@@ -135,59 +136,6 @@
      color: $alert-color;
    }

-    .account-settings-section-message {
-      font-size: 16px;
-      line-height: 22px;
-      margin-top: 15px;
-      margin-bottom: 30px;
-
-      .alert-message {
-        color: #292b2c;
-        font-family: $font-family-sans-serif;
-        position: relative;
-        padding: 10px 10px 10px 35px;
-        border: 1px solid transparent;
-        border-radius: 0;
-        box-shadow: none;
-        margin-bottom: 8px;
-
-        & > .fa {
-          position: absolute;
-          left: 11px;
-          top: 13px;
-          font-size: 16px;
-        }
-
-        span {
-          display: block;
-
-          a {
-            text-decoration: underline;
-          }
-        }
-      }
-
-      .success {
-        background-color: #ecfaec;
-        border-color: #b9edb9;
-      }
-
-      .info {
-        background-color: #d8edf8;
-        border-color: #bbdff2;
-      }
-
-      .warning {
-        background-color: #fcf8e3;
-        border-color: #faebcc;
-      }
-
-      .error {
-        background-color: #f2dede;
-        border-color: #ebccd1;
-      }
-    }
-
    .account-settings-section-body {
      .u-field {
        border-bottom: 2px solid $m-gray-l4;
@@ -637,3 +585,97 @@
    }
  }
 }
+
+// * +Alert Messages
+.account-settings-message,
+.account-settings-section-message {
+  font-size: 16px;
+  line-height: 22px;
+  margin-top: 15px;
+  margin-bottom: 30px;
+
+  .alert-message {
+    color: #292b2c;
+    font-family: $font-family-sans-serif;
+    position: relative;
+    padding: 10px 10px 10px 35px;
+    border: 1px solid transparent;
+    border-radius: 0;
+    box-shadow: none;
+    margin-bottom: 8px;
+
+    & > .fa {
+      position: absolute;
+      left: 11px;
+      top: 13px;
+      font-size: 16px;
+    }
+
+    span {
+      display: block;
+
+      a {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .success {
+    background-color: #ecfaec;
+    border-color: #b9edb9;
+  }
+
+  .info {
+    background-color: #d8edf8;
+    border-color: #bbdff2;
+  }
+
+  .warning {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+  }
+
+  .error {
+    background-color: #f2dede;
+    border-color: #ebccd1;
+  }
+}
+
+.account-settings-message {
+  margin-bottom: 0px;
+
+  .alert-message {
+    padding: 10px;
+
+    .alert-actions {
+      margin-top: 10px;
+
+      .btn-alert-primary {
+        @extend %btn-primary-blue;
+
+        @include font-size(18);
+
+        border: 1px solid $m-blue-d3;
+        border-radius: 3px;
+        box-shadow: none;
+        padding: 11px 14px;
+        line-height: normal;
+      }
+
+      .btn-alert-secondary {
+        @extend %ui-clear-button;
+
+        // set styles
+        @extend %btn-pl-default-base;
+
+        @include font-size(18);
+
+        background-color: white;
+        border: 1px solid $blue;
+        color: $blue;
+        padding: 11px 14px;
+        line-height: normal;
+      }
+    }
+  }
+}
--- a/lms/templates/student_account/account_settings.html
+++ b/lms/templates/student_account/account_settings.html
@@ -68,7 +68,8 @@ from openedx.core.djangoapps.user_api.accounts.utils import is_secondary_email_f
        edxSupportUrl,
        extendedProfileFields,
        displayAccountDeletion,
-        isSecondaryEmailFeatureEnabled
+        isSecondaryEmailFeatureEnabled,
+        ${ beta_language | n, dump_js_escaped_json },
    );
 </%static:require_module>

--- a/lms/templates/student_account/account_settings.underscore
+++ b/lms/templates/student_account/account_settings.underscore
@@ -1,5 +1,16 @@
 <main id="main" aria-label="Content" tabindex="-1">
 <div class="account-settings-container">
+    <% if (message) { %>
+        <div class="account-settings-message">
+            <div id="beta-language-message" class="alert-message warning" aria-live="assertive" role="alert">
+                <span><%= HtmlUtils.ensureHtml(message) %></span>
+                <div class="alert-actions">
+                    <button class="btn-alert-primary" data-old-lang-code="<%- oldLangCode %>"><%- gettext('Switch Language Back') %></button>
+                    <a href="<%- helpTranslateLink %>" target="_blank" class="btn-alert-secondary"><%= HtmlUtils.ensureHtml(helpTranslateText) %></a>
+                </div>
+            </div>
+        </div>
+    <% } %>
    <div class="wrapper-header">
        <h2 class="header-title"><%- gettext("Account Settings") %></h2>
        <div class="left list-inline account-nav" role="tablist">