Skip to content

E
edx-platform
Commit 9c821958 by Chris
Options

Merge pull request #6880 from edx/clrux/lms-navigation-icon-update 

Adding markup for icon fonts; adding custom styles for said icons
parents 1b07bcdf 0326c191
Showing with 56 additions and 55 deletions
common/lib/xmodule/xmodule/css/sequence/display.scss
......@@ -70,7 +70,7 @@ $sequence--border-color: #C8C8C8;
position: relative;
border: 1px solid $gray-l3;
height: 44px;
margin: 0 ($baseline*1.5);
margin: 0 ($baseline*2);
box-shadow: 0 1px 3px $shadow-l1 inset;
}
......@@ -105,79 +105,80 @@ $sequence--border-color: #C8C8C8;
display: block;
padding: 0;
position: relative;
text-align: center;
&:hover, &:focus {
background-color: $white;
background-repeat: no-repeat;
background-position: center 14px;
.icon {
line-height: 42px; // This matches the height of the <a> it's within (the parent) to get vertical centering.
font-size: 90%; // The icons at 100% are just a tad too big.
color: rgb(90, 90, 90);
-webkit-font-smoothing: antialiased; // Clear up the lines on the icons
}
&.inactive {
.icon {
color: rgb(90, 90, 90);
}
}
&.active {
@extend %ui-depth1;
background-color: $white;
.icon {
color: rgb(10, 10, 10);
}
&:hover, &:focus {
background-color: $white;
background-repeat: no-repeat;
background-position: center 14px;
.icon {
color: rgb(10, 10, 10);
}
}
//video
&.seq_video {
&.inactive {
background-image: url('../images/sequence-nav/video-icon-normal.png');
}
&.visited {
background-image: url('../images/sequence-nav/video-icon-visited.png');
&:hover, &:focus {
background-color: $white;
background-repeat: no-repeat;
background-position: center 14px;
}
&.active {
@extend .active;
background-image: url('../images/sequence-nav/video-icon-current.png');
//video
&.seq_video {
.icon:before {
content: "\f008"; // .fa-film
}
}
//other
&.seq_other {
&.inactive {
background-image: url('../images/sequence-nav/document-icon-normal.png');
}
&.visited {
background-image: url('../images/sequence-nav/document-icon-visited.png');
}
&.active {
background-image: url('../images/sequence-nav/document-icon-current.png');
.icon:before {
content: "\f016"; // .fa-file-o
}
}
//vertical & problems
&.seq_vertical, &.seq_problem {
&.inactive {
background-image: url('../images/sequence-nav/list-icon-normal.png');
}
&.visited {
background-image: url('../images/sequence-nav/list-icon-visited.png');
}
&.active {
background-image: url('../images/sequence-nav/list-icon-current.png');
.icon:before {
content: "\f00b"; // .fa-tasks
}
&.progress-none {
background-image: url('../images/sequence-nav/list-unstarted.png');
}
&.progress-some, &.progress-in_progress {
background-image: url('../images/sequence-nav/list-unfinished.png');
}
&.progress-done {
background-image: url('../images/sequence-nav/list-finished.png');
}
}
......
common/lib/xmodule/xmodule/js/spec/sequence/display_spec.coffee
......@@ -20,7 +20,8 @@ xdescribe 'Sequence', ->
elements = $('#sequence-list li>a').map(-> $(this).attr('data-element')).get()
titles = $('#sequence-list li>a>p').map(-> $(this).html()).get()
expect(classes).toEqual ['seq_video_active', 'seq_video_inactive', 'seq_problem_inactive']
# expect(classes).toEqual ['seq_video_active', 'seq_video_inactive', 'seq_problem_inactive']
expect(classes).toEqual ['active', 'inactive', 'visited']
expect(elements).toEqual ['1', '2', '3']
expect(titles).toEqual ['Video 1', 'Video 2', 'Sample Problem']
......@@ -92,13 +93,15 @@ xdescribe 'Sequence', ->
@sequence.render 1
it 'mark the previous tab as visited', ->
expect($('[data-element="2"]')).toHaveClass 'seq_video_visited'
# expect($('[data-element="2"]')).toHaveClass 'seq_video_visited'
expect($('[data-element="2"]')).toHaveClass 'visited'
it 'save the new position', ->
expect($.postWithPrefix).toHaveBeenCalledWith '/modx/1/goto_position', position: 1
it 'mark new tab as active', ->
expect($('[data-element="1"]')).toHaveClass 'seq_video_active'
# expect($('[data-element="1"]')).toHaveClass 'seq_video_active'
expect($('[data-element="1"]')).toHaveClass 'active'
it 'render the new content', ->
expect($('#seq_content').html()).toEqual 'Video 1'
......
common/lib/xmodule/xmodule/js/src/sequence/display.coffee
......@@ -74,17 +74,17 @@ class @Sequence
toggleArrows: =>
@$('.sequence-nav-button').unbind('click')
if @contents.length == 0
if @contents.length == 0 ## There are no modules to display, and therefore no nav to build.
@$('.sequence-nav-button.button-previous').addClass('disabled').attr('disabled', true)
@$('.sequence-nav-button.button-next').addClass('disabled').attr('disabled', true)
return
if @position == 1
if @position == 1 ## 1 != 0 here. 1 is the first item in the sequence nav.
@$('.sequence-nav-button.button-previous').addClass('disabled').attr('disabled', true)
else
@$('.sequence-nav-button.button-previous').removeClass('disabled').removeAttr('disabled').click(@previous)
if @position == @contents.length
if @position == @contents.length ## If the final position on the nav matches the total contents.
@$('.sequence-nav-button.button-next').addClass('disabled').attr('disabled', true)
else
@$('.sequence-nav-button.button-next').removeClass('disabled').removeAttr('disabled').click(@next)
......@@ -117,14 +117,14 @@ class @Sequence
sequence_links.click @goto
@sr_container.focus();
@$("a.active").blur()
# @$("a.active").blur()
goto: (event) =>
event.preventDefault()
if $(event.target).hasClass 'seqnav' # Links from courseware <a class='seqnav' href='n'>...</a>
new_position = $(event.target).attr('href')
if $(event.currentTarget).hasClass 'seqnav' # Links from courseware <a class='seqnav' href='n'>...</a>, was .target
new_position = $(event.currentTarget).attr('href')
else # Tab links generated by backend template
new_position = $(event.target).data('element')
new_position = $(event.currentTarget).data('element')
if (1 <= new_position) and (new_position <= @num_contents)
Logger.log "seq_goto", old: @position, new: new_position, id: @id
......@@ -137,7 +137,7 @@ class @Sequence
@render new_position
else
alert_template = gettext("Sequence error! Cannot navigate to tab %(tab_name)s in the current SequenceModule. Please contact the course staff.")
alert_template = gettext("Sequence error! Cannot navigate to %(tab_name)s in the current SequenceModule. Please contact the course staff.")
alert_text = interpolate(alert_template, {tab_name: new_position}, true)
alert alert_text
......@@ -175,13 +175,8 @@ class @Sequence
.addClass("visited")
mark_active: (position) ->
# Mark the correct tab as selected, for a11y helpfulness.
@$('#sequence-list [role="tab"]').attr({
'aria-selected' : null
});
# Don't overwrite class attribute to avoid changing Progress class
element = @link_for(position)
element.removeClass("inactive")
.removeClass("visited")
.addClass("active")
.attr({"aria-selected": "true", 'tabindex': '0'})
lms/templates/seq_module.html
......@@ -19,9 +19,9 @@
data-page-title="${item['page_title']|h}"
aria-controls="seq_contents_${idx}"
id="tab_${idx}"
tabindex="0"
role="tab">
<p aria-hidden="false">${item['title']}</p>
tabindex="0">
<i class="icon fa seq_${item['type']}" aria-hidden="true"></i>
<p><span class="sr">${item['type']}</span> ${item['title']}</p>
</a>
</li>
% endfor
......@@ -30,6 +30,8 @@
<button class="sequence-nav-button button-next">${_('Next')}</button>
</div>
<div id="sr-is-focusable" tabindex="-1"></div>
% for idx, item in enumerate(items):
<div id="seq_contents_${idx}"
aria-labelledby="tab_${idx}"
......
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