diff --git a/lms/static/js/spec/student_account/helpers.js b/lms/static/js/spec/student_account/helpers.js index 699629bae5..0663097b6d 100644 --- 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: { diff --git a/lms/static/js/student_account/views/account_settings_factory.js b/lms/static/js/student_account/views/account_settings_factory.js index 402874358b..0c5f278238 100644 --- 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. diff --git a/lms/static/js/student_account/views/account_settings_fields.js b/lms/static/js/student_account/views/account_settings_fields.js index c1a5ec4660..8cf2353adb 100644 --- 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(), diff --git a/lms/static/js/student_account/views/account_settings_view.js b/lms/static/js/student_account/views/account_settings_view.js index f176047589..d3dcba2724 100644 --- 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); } }); diff --git a/lms/static/js/views/fields.js b/lms/static/js/views/fields.js index ae31840716..b36d49b06b 100644 --- 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); }, diff --git a/lms/static/sass/views/_account-settings.scss b/lms/static/sass/views/_account-settings.scss index 03b863cac1..4ccdf7609f 100644 --- 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; + } + } + } +} diff --git a/lms/templates/student_account/account_settings.html b/lms/templates/student_account/account_settings.html index 507f9f8da1..39e1e4db27 100644 --- 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 }, ); diff --git a/lms/templates/student_account/account_settings.underscore b/lms/templates/student_account/account_settings.underscore index 87e8d8ec00..2e27bcddf2 100644 --- a/lms/templates/student_account/account_settings.underscore +++ b/lms/templates/student_account/account_settings.underscore @@ -1,5 +1,16 @@
+ <% if (message) { %> + + <% } %>

<%- gettext("Account Settings") %>