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