Skip to content

E
edx-platform
Commit e8bae62f by Harry Rein
Options

UX improvements on learner profile. 

LEARNER-1857

This story constitutes a large change to the UX of the learner profile.

Some specific changes include adding a flexible learner profile card, limiting the bio entry to only 300 characters and assuring that the page is responsive.
parent ed4a831f
Showing with 290 additions and 139 deletions
common/test/acceptance/pages/lms/learner_profile.py
......@@ -13,10 +13,6 @@ from common.test.acceptance.tests.helpers import select_option_by_value
PROFILE_VISIBILITY_SELECTOR = '#u-field-select-account_privacy option[value="{}"]'
PROFILE_VISIBILITY_INPUT = '#u-field-select-account_privacy'
FIELD_ICONS = {
'country': 'fa-map-marker',
'language_proficiencies': 'fa-comment',
}
class Badge(PageObject):
......@@ -214,18 +210,6 @@ class LearnerProfilePage(FieldsMixin, PageObject):
self.wait_for_ajax()
return self.q(css='#u-field-select-account_privacy').visible
def field_icon_present(self, field_id):
"""
Check if an icon is present for a field. Only dropdown fields have icons.
Arguments:
field_id (str): field id
Returns:
True/False
"""
return self.icon_for_field(field_id, FIELD_ICONS[field_id])
def wait_for_public_fields(self):
"""
Wait for `country`, `language` and `bio` fields to be visible.
......
common/test/acceptance/tests/lms/test_learner_profile.py
......@@ -367,8 +367,6 @@ class OwnLearnerProfilePageTest(LearnerProfileTestMixin, AcceptanceTest):
profile_page.make_field_editable('country')
self.assertEqual(profile_page.mode_for_field('country'), 'edit')
self.assertTrue(profile_page.field_icon_present('country'))
def test_language_field(self):
"""
Test behaviour of `Language` field.
......@@ -396,8 +394,6 @@ class OwnLearnerProfilePageTest(LearnerProfileTestMixin, AcceptanceTest):
profile_page.make_field_editable('language_proficiencies')
self.assertTrue(profile_page.mode_for_field('language_proficiencies'), 'edit')
self.assertTrue(profile_page.field_icon_present('language_proficiencies'))
def test_about_me_field(self):
"""
Test behaviour of `About Me` field.
......
lms/static/js/views/fields.js
......@@ -515,15 +515,16 @@
'click .wrapper-u-field': 'startEditing',
'click .u-field-placeholder': 'startEditing',
'focusout textarea': 'finishEditing',
'change textarea': 'adjustTextareaHeight',
'keyup textarea': 'adjustTextareaHeight',
'change textarea': 'manageTextareaContentChange',
'keyup textarea': 'manageTextareaContentChange',
'keydown textarea': 'onKeyDown',
'paste textarea': 'adjustTextareaHeight',
'cut textarea': 'adjustTextareaHeight'
'paste textarea': 'manageTextareaContentChange',
'cut textarea': 'manageTextareaContentChange'
},
initialize: function(options) {
_.bindAll(this, 'render', 'onKeyDown', 'adjustTextareaHeight', 'fieldValue', 'saveValue', 'updateView');
_.bindAll(this, 'render', 'onKeyDown', 'adjustTextareaHeight', 'manageTextareaContentChange',
'fieldValue', 'saveValue', 'updateView');
this._super(options);
this.listenTo(this.model, 'change:' + this.options.valueAttribute, this.updateView);
},
......@@ -541,7 +542,8 @@
value: value,
message: this.helpMessage,
messagePosition: this.options.messagePosition || 'footer',
placeholderValue: this.options.placeholderValue
placeholderValue: this.options.placeholderValue,
maxCharacters: this.options.maxCharacters || ''
}));
this.delegateEvents();
this.title((this.modelValue() || this.mode === 'edit') ?
......@@ -562,12 +564,26 @@
}
},
updateCharCount: function() {
var curCharCount;
// Update character count for textarea
if (this.options.maxCharacters) {
curCharCount = $('#u-field-textarea-' + this.options.valueAttribute).val().length;
$('.u-field-footer .current-char-count').text(curCharCount);
}
},
adjustTextareaHeight: function() {
if (this.persistChanges === false) { return; }
var textarea = this.$('textarea');
textarea.css('height', 'auto').css('height', textarea.prop('scrollHeight') + 10);
},
manageTextareaContentChange: function() {
this.updateCharCount();
this.adjustTextareaHeight();
},
modelValue: function() {
var value = this._super();
return value ? $.trim(value) : '';
......
lms/static/sass/_build-lms-v1.scss
......@@ -55,7 +55,6 @@
// base - specific views
@import "views/account-settings";
@import "views/learner-profile";
@import 'views/login-register';
@import 'views/verification';
@import 'views/decoupled-verification';
......@@ -69,6 +68,7 @@
// features
@import 'features/bookmarks-v1';
@import 'features/learner-profile';
// search
@import 'search/search';
......
lms/static/sass/elements/_pagination.scss
......@@ -74,7 +74,7 @@
margin: 0 ($baseline*0.75);
padding: ($baseline/4);
text-align: center;
color: $gray;
color: $gray-d1;
}
.current-page {
......
lms/static/sass/views/_learner-profile.scss → lms/static/sass/features/_learner-profile.scss
......@@ -25,8 +25,6 @@
}
.profile-image-field {
@include float(left);
button {
background: transparent !important;
border: none !important;
......@@ -41,13 +39,18 @@
.image-wrapper {
width: $profile-image-dimension;
position: relative;
margin: auto;
.image-frame {
display: block;
position: relative;
width: $profile-image-dimension;
height: $profile-image-dimension;
border-radius: ($baseline/4);
border-radius: ($profile-image-dimension/2);
overflow: hidden;
border: 3px solid $gray-lightest;
margin-top: $baseline*-0.75;
background: $white;
}
.u-field-upload-button {
......@@ -55,13 +58,12 @@
top: 0;
width: $profile-image-dimension;
height: $profile-image-dimension;
border-radius: ($baseline/4);
border-radius: ($profile-image-dimension/2);
border: 2px dashed transparent;
background: rgba(229,241,247, .8);
color: $link-color;
text-shadow: none;
@include transition(all $tmg-f1 ease-in-out 0s);
opacity: 0;
z-index: 6;
i {
......@@ -87,17 +89,20 @@
line-height: 1.3em;
text-align: center;
z-index: 7;
color: $base-font-color;
}
.upload-button-input {
position: absolute;
top: -($profile-image-dimension * 2);
top: 0;
@include left(0);
width: $profile-image-dimension;
border-radius: ($profile-image-dimension/2);
height: 100%;
cursor: pointer;
z-index: 5;
outline: 0;
opacity: 0;
}
.u-field-remove-button {
......@@ -113,6 +118,7 @@
.wrapper-profile {
min-height: 200px;
background-color: $gray-lightest;
.ui-loading-indicator {
margin-top: 100px;
......@@ -133,7 +139,7 @@
@extend .container;
border: none;
box-shadow: none;
padding: 0 ($baseline*1.5);
padding: 0 ($baseline*3);
}
.u-field-title {
......@@ -164,53 +170,93 @@
.wrapper-profile-sections {
@extend .container;
padding: 0 ($baseline*1.5);
@include padding($baseline*1.5, $baseline*1.5, $baseline*1.5, 0);
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);
.header {
@extend %t-title4;
@extend %t-ultrastrong;
display: inline-block;
}
.subheader {
@extend %t-title6;
}
}
.wrapper-profile-section-one {
width: 100%;
display: inline-block;
margin-top: ($baseline*1.5);
@include margin-left($baseline/2);
@include float(left);
@include margin-left($baseline*3);
width: 300px;
background-color: $white;
border-top: 5px solid $blue;
padding-bottom: $baseline;
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
@include margin-left(0);
width: 100%;
}
}
.profile-section-one-fields {
@include float(left);
width: flex-grid(4, 12);
@include margin-left($baseline);
margin: 0 $baseline/2;
.u-field {
margin-bottom: ($baseline/4);
padding-top: 3px;
padding-bottom: 3px;
@include padding-left(3px);
}
@extend %t-weight4;
@include padding(0, 0, 0, 3px);
color: $base-font-color;
.u-field-username {
.u-field-value {
@extend %t-weight4;
width: calc(100% - 40px);
input[type="text"] {
font-weight: 600;
.u-field-value-readonly {
@extend %t-weight3;
}
}
.u-field-value {
width: 350px;
@extend %t-title4;
.u-field-title {
color: $base-font-color;
font-size: $body-font-size;
display: block;
}
}
.u-field-icon {
display: inline-block;
vertical-align: baseline;
}
&.u-field-dropdown {
margin-top: $baseline/5;
.u-field-title {
width: 0;
&:not(.editable-never) {
cursor: pointer;
}
&:not(:last-child) {
padding-bottom: $baseline/4;
border-bottom: 1px solid $gray-lighter;
}
}
}
.u-field-value {
width: 200px;
display: inline-block;
vertical-align: baseline;
&>.u-field {
&:not(:first-child) {
font-size: $body-font-size;
color: $base-font-color;
font-weight: $font-light;
margin-bottom: 0;
}
&:first-child {
@extend %t-title4;
@extend %t-weight4;
font-size: em(24);
}
}
select {
......@@ -230,16 +276,29 @@
}
}
.wrapper-profile-section-two {
padding-top: 1em;
width: flex-grid(8, 12);
}
.wrapper-profile-section-container-two {
@include float(left);
width: calc(100% - 380px);
max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap
.profile-section-two-fields {
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
width: 100%;
margin-top: $baseline;
}
.u-field-textarea {
margin-bottom: ($baseline/2);
padding: ($baseline/2) ($baseline*.75) ($baseline*.75) ($baseline*.75);
padding: 0 ($baseline*.75) ($baseline*.75) ($baseline*.75);
.u-field-header {
position: relative;
.u-field-message {
@include right(0);
top: $baseline/4;
position: absolute;
}
}
&.editable-toggle {
cursor: pointer;
......@@ -247,22 +306,30 @@
}
.u-field-title {
@extend %t-title5;
@extend %t-weight4;
@extend %t-title6;
@extend %t-weight5;
display: inline-block;
margin-top: 0;
margin-bottom: ($baseline/4);
color: inherit;
color: $gray-dark;
width: 100%;
}
.u-field-value {
@extend %t-copy-base;
width: 100%;
overflow: scroll;
textarea {
width: 100%;
background-color: transparent;
border-radius: 5px;
border-color: $gray-d1;
resize: none;
white-space: pre-line;
outline: 0;
box-shadow: none;
-webkit-appearance: none;
}
a {
......@@ -273,16 +340,22 @@
.u-field-message {
@include float(right);
width: auto;
.message-can-edit {
position: absolute;
}
}
.u-field.mode-placeholder {
padding: $baseline;
margin: $baseline * 0.75;
border: 2px dashed $gray-l3;
i {
font-size: 12px;
@include padding-right(5px);
vertical-align: middle;
color: $gray;
color: $base-font-color;
}
.u-field-title {
width: 100%;
......@@ -293,7 +366,7 @@
text-align: center;
line-height: 1.5em;
@extend %t-copy-sub1;
color: $gray;
color: $base-font-color;
}
}
......@@ -304,6 +377,28 @@
color: $link-color;
}
}
.wrapper-u-field {
font-size: $body-font-size;
color: $base-font-color;
.u-field-header .u-field-title{
color: $base-font-color;
}
.u-field-footer {
.field-textarea-character-count {
@extend %t-weight1;
@include float(right);
margin-top: $baseline/4;
}
}
}
.profile-private-message {
@include padding-left($baseline*0.75);
line-height: 3.0em;
}
}
.badge-paging-header {
......
lms/static/sass/partials/base/_variables.scss
......@@ -223,6 +223,9 @@ $success-color-hover: rgb(0, 129, 0) !default;
// ----------------------------
// #COLORS- Bootstrap-style
// ----------------------------
$gray-dark: #4e5455 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
$state-success-text: $black !default;
$state-success-bg: #dff0d8 !default;
......@@ -545,6 +548,9 @@ $palette-success-border: #b9edb9;
$palette-success-back: #ecfaec;
$palette-success-text: #008100;
// learner profile elements
$learner-profile-container-flex: 768px;
// course elements
$content-wrapper-bg: $white !default;
$course-bg-color: $uxpl-grayscale-x-back !default;
......
lms/static/sass/shared/_fields.scss
......@@ -12,7 +12,7 @@
border-radius: 3px;
span {
color: $gray;
color: $gray-d1;
}
&:hover {
......@@ -84,7 +84,7 @@
.u-field-title {
width: flex-grid(3, 12);
display: inline-block;
color: $gray;
color: $gray-d1;
vertical-align: top;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
......
lms/static/sass/shared/_header.scss
......@@ -3,7 +3,7 @@
.header-global {
@extend %ui-depth1;
border-bottom: 2px solid $header-border-color;
border-bottom: 1px solid $header-border-color;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
position: relative;
......
lms/templates/fields/field_dropdown.underscore
<% if (editable !== 'never') { %>
<% if (title && titleVisible) { %>
<label class="u-field-title" for="u-field-select-<%- id %>">
<%- title %>
</label>
<% } else { %>
<label class="sr" for="u-field-select-<%- id %>">
<%- screenReaderTitle %>
</label>
<% } %>
<% if (title && titleVisible) { %>
<label class="u-field-title" for="u-field-select-<%- id %>">
<%- title %>
</label>
<% } else { %>
<label class="sr" for="u-field-select-<%- id %>">
<%- screenReaderTitle %>
</label>
<% } %>
<% if (iconName) { %>
<span class="u-field-icon icon fa <%- iconName %> fa-fw" aria-hidden="true"></span>
<% if (editable !== 'never') { %>
<% if (iconName) { %>
<span class="u-field-icon icon fa <%- iconName %> fa-fw" aria-hidden="true"></span>
<% } %>
<% } %>
<span class="u-field-value">
......
lms/templates/fields/field_dropdown_account.underscore
<div class="u-field-value field">
<% if (editable !== 'never') { %>
<% if (title && titleVisible) { %>
<label class="u-field-title field-label" for="u-field-select-<%- id %>">
<%- title %>
</label>
<% } else { %>
<label class="sr" for="u-field-select-<%- id %>">
<%- screenReaderTitle %>
</label>
<% } %>
<% if (title && titleVisible) { %>
<label class="u-field-title field-label" for="u-field-select-<%- id %>">
<%- title %>
</label>
<% } else { %>
<label class="sr" for="u-field-select-<%- id %>">
<%- screenReaderTitle %>
</label>
<% } %>
<% if (iconName) { %>
......
lms/templates/fields/field_readonly.underscore
<% if (title) { %>
<span class="u-field-title" aria-hidden="true"><%- title %></span>
<span class="u-field-title" aria-hidden="true"><%- title %></span>
<% } %>
<span class="sr" for="u-field-value-<%- id %>"><%- screenReaderTitle %></span>
<span class="u-field-value" id="u-field-value-<%- id %>" aria-describedby="u-field-message-<%- id %>"><%- value %></span>
<span class="u-field-message" id="u-field-message-<%- id %>">
......
lms/templates/fields/field_textarea.underscore
<div class="wrapper-u-field">
<div class="wrapper-u-field" role="group">
<div class="u-field-header">
<% if (mode === 'edit') { %>
<label class="u-field-title" for="u-field-textarea-<%- id %>" id="u-field-title-<%- id %>"></label>
......@@ -15,7 +15,7 @@
<div class="u-field-value" id="u-field-value-<%- id %>"
<% if (mode === 'edit') { %>
aria-labelledby="u-field-title-<%- id %>"><textarea id="u-field-textarea-<%- id %>" rows="4"
aria-labelledby="u-field-title-<%- id %>"><textarea maxlength="<%- maxCharacters%>" id="u-field-textarea-<%- id %>" rows="4"
<% if (message) { %>
aria-describedby="u-field-message-help-<%- id %>"
<% } %>
......@@ -43,5 +43,20 @@
<span class="u-field-message-help" id="u-field-message-help-<%- id %>"> <%- message %></span>
</span>
<% } %>
<% if (mode === 'edit' && maxCharacters) { %>
<div class="field-textarea-character-count">
<%=
HtmlUtils.interpolateHtml(
gettext('{currentCountOpeningTag}{currentCharacterCount}{currentCountClosingTag} of {maxCharacters}'),
{
currentCountOpeningTag: HtmlUtils.HTML('<span class="current-char-count">'),
currentCountClosingTag: HtmlUtils.HTML('</span>'),
currentCharacterCount: value.length,
maxCharacters: maxCharacters
}
)
%>
</div>
<% } %>
</div>
</div>
openedx/features/course_experience/views/course_home_messages.py
......@@ -114,11 +114,8 @@ class CourseHomeMessageFragmentView(EdxFragmentView):
CourseHomeMessages.register_info_message(
request,
Text(_(
"{add_reminder_open_tag}Don't forget to add a calendar reminder!{add_reminder_close_tag}."
)).format(
add_reminder_open_tag='',
add_reminder_close_tag=''
),
"Don't forget to add a calendar reminder!"
)),
title=Text("Course starts in {days_until_start_string} on {course_start_date}.").format(
days_until_start_string=course_start_data['days_until_start_string'],
course_start_date=course_start_data['course_start_date']
......
openedx/features/learner_profile/static/learner_profile/js/learner_profile_factory.js
......@@ -48,6 +48,7 @@
var accountPrivacyFieldView,
profileImageFieldView,
usernameFieldView,
nameFieldView,
sectionOneFieldViews,
sectionTwoFieldViews,
BadgeCollection,
......@@ -65,10 +66,7 @@
required: true,
editable: 'always',
showMessages: false,
title: StringUtils.interpolate(
gettext('{platform_name} learners can see my:'),
{platform_name: options.platform_name}
),
title: gettext('Profile Visibility:'),
valueAttribute: 'account_privacy',
options: [
['private', gettext('Limited Profile')],
......@@ -97,29 +95,37 @@
helpMessage: ''
});
nameFieldView = new FieldsView.ReadonlyFieldView({
model: accountSettingsModel,
screenReaderTitle: gettext('Full Name'),
valueAttribute: 'name',
helpMessage: ''
});
sectionOneFieldViews = [
new FieldsView.DropdownFieldView({
title: gettext('Location'),
titleVisible: true,
model: accountSettingsModel,
screenReaderTitle: gettext('Country'),
titleVisible: false,
required: true,
editable: editable,
showMessages: false,
iconName: 'fa-map-marker',
placeholderValue: gettext('Add Country'),
valueAttribute: 'country',
options: options.country_options,
helpMessage: '',
persistChanges: true
}),
new AccountSettingsFieldViews.LanguageProficienciesFieldView({
title: gettext('Language'),
titleVisible: true,
model: accountSettingsModel,
screenReaderTitle: gettext('Preferred Language'),
titleVisible: false,
required: false,
editable: editable,
showMessages: false,
iconName: 'fa-comment',
placeholderValue: gettext('Add language'),
valueAttribute: 'language_proficiencies',
options: options.language_options,
......@@ -139,7 +145,8 @@
valueAttribute: 'bio',
helpMessage: '',
persistChanges: true,
messagePosition: 'header'
messagePosition: 'header',
maxCharacters: 300
})
];
......@@ -172,9 +179,11 @@
accountPrivacyFieldView: accountPrivacyFieldView,
profileImageFieldView: profileImageFieldView,
usernameFieldView: usernameFieldView,
nameFieldView: nameFieldView,
sectionOneFieldViews: sectionOneFieldViews,
sectionTwoFieldViews: sectionTwoFieldViews,
badgeListContainer: badgeListContainer
badgeListContainer: badgeListContainer,
platformName: options.platform_name
});
getProfileVisibility = function() {
......
openedx/features/learner_profile/static/learner_profile/js/spec/views/learner_profile_view_spec.js
/* eslint-disable vars-on-top */
define(
[
'gettext',
'backbone',
'jquery',
'underscore',
......@@ -18,7 +19,7 @@ define(
'js/student_account/views/account_settings_fields',
'js/views/message_banner'
],
function(Backbone, $, _, PagingCollection, AjaxHelpers, TemplateHelpers, Helpers, LearnerProfileHelpers,
function(gettext, Backbone, $, _, PagingCollection, AjaxHelpers, TemplateHelpers, Helpers, LearnerProfileHelpers,
FieldViews, UserAccountModel, AccountPreferencesModel, LearnerProfileFields, LearnerProfileView,
BadgeListContainer, AccountSettingsFieldViews, MessageBannerView) {
'use strict';
......@@ -73,13 +74,19 @@ define(
helpMessage: ''
});
var nameFieldView = new FieldViews.ReadonlyFieldView({
model: accountSettingsModel,
valueAttribute: 'name',
helpMessage: ''
});
var sectionOneFieldViews = [
new FieldViews.DropdownFieldView({
title: gettext('Location'),
model: accountSettingsModel,
required: false,
editable: editable,
showMessages: false,
iconName: 'fa-map-marker',
placeholderValue: '',
valueAttribute: 'country',
options: Helpers.FIELD_OPTIONS,
......@@ -87,11 +94,11 @@ define(
}),
new AccountSettingsFieldViews.LanguageProficienciesFieldView({
title: gettext('Language'),
model: accountSettingsModel,
required: false,
editable: editable,
showMessages: false,
iconName: 'fa-comment',
placeholderValue: 'Add language',
valueAttribute: 'language_proficiencies',
options: Helpers.FIELD_OPTIONS,
......@@ -131,6 +138,7 @@ define(
preferencesModel: accountPreferencesModel,
accountPrivacyFieldView: accountPrivacyFieldView,
usernameFieldView: usernameFieldView,
nameFieldView: nameFieldView,
profileImageFieldView: profileImageFieldView,
sectionOneFieldViews: sectionOneFieldViews,
sectionTwoFieldViews: sectionTwoFieldViews,
......
openedx/features/learner_profile/static/learner_profile/js/spec/views/section_two_tab_spec.js
......@@ -65,7 +65,7 @@ define(
view.render();
var bio = view.$el.find('.u-field-bio');
expect(bio.length).toBe(0);
var msg = view.$el.find('span.profile-private--message');
var msg = view.$el.find('span.profile-private-message');
expect(msg.length).toBe(1);
expect(_.count(msg.html(), messageString)).toBeTruthy();
};
......
openedx/features/learner_profile/static/learner_profile/js/spec_helpers/helpers.js
......@@ -41,11 +41,12 @@ define(['underscore', 'URI', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers'
var expectSectionOneTobeRendered = function(learnerProfileView) {
var sectionOneFieldElements = $(learnerProfileView.$('.wrapper-profile-section-one')).find('.u-field');
expect(sectionOneFieldElements.length).toBe(4);
expect(sectionOneFieldElements.length).toBe(5);
expectProfileElementContainsField(sectionOneFieldElements[0], learnerProfileView.options.profileImageFieldView);
expectProfileElementContainsField(sectionOneFieldElements[1], learnerProfileView.options.usernameFieldView);
expectProfileElementContainsField(sectionOneFieldElements[2], learnerProfileView.options.nameFieldView);
_.each(_.rest(sectionOneFieldElements, 2), function(sectionFieldElement, fieldIndex) {
_.each(_.rest(sectionOneFieldElements, 3), function(sectionFieldElement, fieldIndex) {
expectProfileElementContainsField(
sectionFieldElement,
learnerProfileView.options.sectionOneFieldViews[fieldIndex]
......@@ -89,10 +90,10 @@ define(['underscore', 'URI', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers'
);
if (othersProfile) {
expect($('.profile-private--message').text())
expect($('.profile-private-message').text())
.toBe('This learner is currently sharing a limited profile.');
} else {
expect($('.profile-private--message').text()).toBe('You are currently sharing a limited profile.');
expect($('.profile-private-message').text()).toBe('You are currently sharing a limited profile.');
}
};
......
openedx/features/learner_profile/static/learner_profile/js/views/learner_profile_view.js
......@@ -6,9 +6,10 @@
'gettext', 'jquery', 'underscore', 'backbone', 'edx-ui-toolkit/js/utils/html-utils',
'common/js/components/views/tabbed_view',
'learner_profile/js/views/section_two_tab',
'text!learner_profile/templates/learner_profile.underscore'
'text!learner_profile/templates/learner_profile.underscore',
'edx-ui-toolkit/js/utils/string-utils'
],
function(gettext, $, _, Backbone, HtmlUtils, TabbedView, SectionTwoTab, learnerProfileTemplate) {
function(gettext, $, _, Backbone, HtmlUtils, TabbedView, SectionTwoTab, learnerProfileTemplate, StringUtils) {
var LearnerProfileView = Backbone.View.extend({
initialize: function(options) {
......@@ -53,10 +54,19 @@
ownProfile: this.options.ownProfile
});
HtmlUtils.setHtml(this.$el, HtmlUtils.template(learnerProfileTemplate)({
username: self.options.accountSettingsModel.get('username'),
name: self.options.accountSettingsModel.get('name'),
ownProfile: self.options.ownProfile,
showFullProfile: self.showFullProfile()
showFullProfile: self.showFullProfile(),
profile_header: gettext('My Profile'),
profile_subheader:
StringUtils.interpolate(
gettext('Build out your profile to personalize your identity on {platform_name}.'), {
platform_name: self.options.platformName
}
)
}));
this.renderFields();
......@@ -98,7 +108,7 @@
Backbone.history.start();
}
} else {
this.$el.find('.account-settings-container').append(this.sectionTwoView.render().el);
this.$el.find('.wrapper-profile-section-container-two').append(this.sectionTwoView.render().el);
}
return this;
},
......@@ -120,6 +130,10 @@
fieldView.delegateEvents();
}
// Do not show name when in limited mode or no name has been set
if (this.showFullProfile() && this.options.accountSettingsModel.get('name')) {
this.$('.profile-section-one-fields').append(this.options.nameFieldView.render().el);
}
this.$('.profile-section-one-fields').append(this.options.usernameFieldView.render().el);
imageView = this.options.profileImageFieldView;
......
openedx/features/learner_profile/static/learner_profile/templates/learner_profile.underscore
<div class="profile <%- ownProfile ? 'profile-self' : 'profile-other' %>">
<div class="wrapper-profile-field-account-privacy"></div>
<div class="wrapper-profile-sections account-settings-container">
<div class="wrapper-profile-section-one">
<div class="profile-image-field">
<% if (ownProfile) { %>
<div class="profile-header">
<div class="header"> <%- profile_header %></div>
<div class="subheader"> <%- profile_subheader %></div>
</div>
<div class="profile-section-one-fields">
<% } %>
<div class="wrapper-profile-section-container-one">
<div class="wrapper-profile-section-one">
<div class="profile-image-field">
</div>
<div class="profile-section-one-fields">
</div>
</div>
<div class="ui-loading-error is-hidden">
<span class="fa fa-exclamation-triangle message-error" aria-hidden="true"></span>
<span class="copy"><%- gettext("An error occurred. Try loading the page again.") %></span>
</div>
</div>
<div class="ui-loading-error is-hidden">
<span class="fa fa-exclamation-triangle message-error" aria-hidden="true"></span>
<span class="copy"><%- gettext("An error occurred. Try loading the page again.") %></span>
<div class="wrapper-profile-section-container-two">
</div>
</div>
</div>
openedx/features/learner_profile/static/learner_profile/templates/section_two.underscore
......@@ -2,9 +2,9 @@
<div class="field-container"></div>
<% if (!showFullProfile) { %>
<% if(ownProfile) { %>
<span class="profile-private--message" tabindex="0"><%- gettext("You are currently sharing a limited profile.") %></span>
<span class="profile-private-message"><%- gettext("You are currently sharing a limited profile.") %></span>
<% } else { %>
<span class="profile-private--message" tabindex="0"><%- gettext("This learner is currently sharing a limited profile.") %></span>
<span class="profile-private-message"><%- gettext("This learner is currently sharing a limited profile.") %></span>
<% } %>
<% } %>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment