Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
E
edx-platform
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
edx
edx-platform
Commits
8415d766
Commit
8415d766
authored
Aug 09, 2017
by
Harry Rein
Committed by
GitHub
Aug 09, 2017
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #15676 from edx/HarryRein/LEARNER-1857-new-profile-styling
LEARNER-1857: New profile styling
parents
f0c68530
e8bae62f
Hide whitespace changes
Inline
Side-by-side
Showing
21 changed files
with
290 additions
and
139 deletions
+290
-139
common/test/acceptance/pages/lms/learner_profile.py
+0
-16
common/test/acceptance/tests/lms/test_learner_profile.py
+0
-4
lms/static/js/views/fields.js
+22
-6
lms/static/sass/_build-lms-v1.scss
+1
-1
lms/static/sass/elements/_pagination.scss
+1
-1
lms/static/sass/features/_learner-profile.scss
+143
-48
lms/static/sass/partials/base/_variables.scss
+6
-0
lms/static/sass/shared/_fields.scss
+2
-2
lms/static/sass/shared/_header.scss
+1
-1
lms/templates/fields/field_dropdown.underscore
+12
-12
lms/templates/fields/field_dropdown_account.underscore
+8
-10
lms/templates/fields/field_readonly.underscore
+2
-1
lms/templates/fields/field_textarea.underscore
+17
-2
openedx/features/course_experience/views/course_home_messages.py
+2
-5
openedx/features/learner_profile/static/learner_profile/js/learner_profile_factory.js
+19
-10
openedx/features/learner_profile/static/learner_profile/js/spec/views/learner_profile_view_spec.js
+11
-3
openedx/features/learner_profile/static/learner_profile/js/spec/views/section_two_tab_spec.js
+1
-1
openedx/features/learner_profile/static/learner_profile/js/spec_helpers/helpers.js
+5
-4
openedx/features/learner_profile/static/learner_profile/js/views/learner_profile_view.js
+18
-4
openedx/features/learner_profile/static/learner_profile/templates/learner_profile.underscore
+16
-6
openedx/features/learner_profile/static/learner_profile/templates/section_two.underscore
+3
-2
No files found.
common/test/acceptance/pages/lms/learner_profile.py
View file @
8415d766
...
...
@@ -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
View file @
8415d766
...
...
@@ -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
View file @
8415d766
...
...
@@ -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
View file @
8415d766
...
...
@@ -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
View file @
8415d766
...
...
@@ -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/
view
s/_learner-profile.scss
→
lms/static/sass/
feature
s/_learner-profile.scss
View file @
8415d766
...
...
@@ -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-title
5
;
@extend
%t-weight
4
;
@extend
%t-title
6
;
@extend
%t-weight
5
;
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
View file @
8415d766
...
...
@@ -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
View file @
8415d766
...
...
@@ -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
View file @
8415d766
...
...
@@ -3,7 +3,7 @@
.header-global
{
@extend
%ui-depth1
;
border-bottom
:
2
px
solid
$header-border-color
;
border-bottom
:
1
px
solid
$header-border-color
;
box-shadow
:
0
1px
5px
0
$shadow-l1
;
background
:
$header-bg
;
position
:
relative
;
...
...
lms/templates/fields/field_dropdown.underscore
View file @
8415d766
<% 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
View file @
8415d766
<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
View file @
8415d766
<% 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
View file @
8415d766
<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
View file @
8415d766
...
...
@@ -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
View file @
8415d766
...
...
@@ -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
View file @
8415d766
/* 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
View file @
8415d766
...
...
@@ -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
View file @
8415d766
...
...
@@ -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
View file @
8415d766
...
...
@@ -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
View file @
8415d766
<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
View file @
8415d766
...
...
@@ -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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment