Skip to content

E
edx-platform
Commit 2e308741 by Greg Price
Options

Add post type indicators to forum sidebar nav 

The previously existing checkmark for threads with endorsed responses is
removed, as it is mostly redundant.
parent dd054237
Showing with 95 additions and 35 deletions
common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
......@@ -6,7 +6,23 @@ describe "DiscussionThreadListView", ->
<script type="text/template" id="thread-list-item-template">
<li data-id="<%- id %>" class="forum-nav-thread<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>">
<a href="#" class="forum-nav-thread-link">
<div class="forum-nav-thread-wrapper-1">
<div class="forum-nav-thread-wrapper-0">
<%
var icon_class, sr_text;
if (thread_type == "discussion") {
icon_class = "icon-comments";
sr_text = "discussion";
} else if (endorsed) {
icon_class = "icon-ok";
sr_text = "answered question";
} else {
icon_class = "icon-question";
sr_text = "unanswered question";
}
%>
<span class="sr"><%= sr_text %></span>
<i class="icon <%= icon_class %>"></i>
</div><div class="forum-nav-thread-wrapper-1">
<span class="forum-nav-thread-title"><%- title %></span>
<%
var labels = "";
......@@ -27,9 +43,6 @@ describe "DiscussionThreadListView", ->
}
%>
</div><div class="forum-nav-thread-wrapper-2">
<% if (endorsed) { %>
<span class="forum-nav-thread-endorsed"><i class="icon icon-ok"></i><span class="sr">Endorsed response</span></span>
<% } %>
<span class="forum-nav-thread-votes-count">+<%=
interpolate(
'%(votes_up_count)s%(span_sr_open)s votes %(span_close)s',
......@@ -372,14 +385,21 @@ describe "DiscussionThreadListView", ->
expect($.ajax).toHaveBeenCalled()
expect(@view.addSearchAlert).not.toHaveBeenCalled()
describe "endorsed renders correctly", ->
it "when absent", ->
renderSingleThreadWithProps({})
expect($(".forum-nav-thread-endorsed").length).toEqual(0)
it "when present", ->
renderSingleThreadWithProps({endorsed: true})
expect($(".forum-nav-thread-endorsed").length).toEqual(1)
describe "post type renders correctly", ->
it "for discussion", ->
renderSingleThreadWithProps({thread_type: "discussion"})
expect($(".forum-nav-thread-wrapper-0 .icon")).toHaveClass("icon-comments")
expect($(".forum-nav-thread-wrapper-0 .sr")).toHaveText("discussion")
it "for answered question", ->
renderSingleThreadWithProps({thread_type: "question", endorsed: true})
expect($(".forum-nav-thread-wrapper-0 .icon")).toHaveClass("icon-ok")
expect($(".forum-nav-thread-wrapper-0 .sr")).toHaveText("answered question")
it "for unanswered question", ->
renderSingleThreadWithProps({thread_type: "question", endorsed: false})
expect($(".forum-nav-thread-wrapper-0 .icon")).toHaveClass("icon-question")
expect($(".forum-nav-thread-wrapper-0 .sr")).toHaveText("unanswered question")
describe "post labels render correctly", ->
beforeEach ->
......
common/static/coffee/spec/discussion/view/discussion_view_spec_helper.coffee
......@@ -3,6 +3,7 @@ class @DiscussionViewSpecHelper
# Minimal set of properties necessary for rendering
thread = {
id: "dummy_id",
thread_type: "discussion",
pinned: false,
endorsed: false,
votes: {up_count: '0'},
......
common/static/coffee/src/discussion/views/discussion_content_view.coffee
......@@ -8,16 +8,6 @@ if Backbone?
(event) -> DiscussionUtil.activateOnSpace(event, @toggleFlagAbuse)
attrRenderer:
endorsed: (endorsed) ->
if endorsed
@$(".action-endorse").show().addClass("is-endorsed")
else
if @model.get('ability')?.can_endorse
@$(".action-endorse").show()
else
@$(".action-endorse").hide()
@$(".action-endorse").removeClass("is-endorsed")
closed: (closed) ->
return if not @$(".action-openclose").length
return if not @$(".post-status-closed").length
......
common/static/coffee/src/discussion/views/discussion_thread_view.coffee
......@@ -216,7 +216,7 @@ if Backbone?
@model.comment()
endorseThread: (endorsed) =>
is_endorsed = @$el.find(".is-endorsed").length
is_endorsed = @$el.find(".is-endorsed").length > 0
@model.set 'endorsed', is_endorsed
submitComment: (event) ->
......
common/static/coffee/src/discussion/views/thread_response_show_view.coffee
......@@ -12,6 +12,18 @@ if Backbone?
"keydown .discussion-flag-abuse":
(event) -> DiscussionUtil.activateOnSpace(event, @toggleFlagAbuse)
attrRenderer: $.extend({}, DiscussionContentView.prototype.attrRenderer, {
endorsed: (endorsed) ->
if endorsed
@$(".action-endorse").show().addClass("is-endorsed")
else
if @model.get('ability')?.can_endorse
@$(".action-endorse").show()
else
@$(".action-endorse").hide()
@$(".action-endorse").removeClass("is-endorsed")
})
$: (selector) ->
@$el.find(selector)
......
common/static/coffee/src/discussion/views/thread_response_view.coffee
......@@ -155,6 +155,7 @@ if Backbone?
@showView = new ThreadResponseShowView(model: @model)
@showView.bind "response:_delete", @_delete
@showView.bind "response:edit", @edit
@showView.on "comment:endorse", => @trigger("comment:endorse")
renderShowView: () ->
@renderSubView(@showView)
......
lms/static/sass/discussion/elements/_navigation.scss
......@@ -179,14 +179,35 @@
vertical-align: middle;
}
.forum-nav-thread-wrapper-0 {
@extend %forum-nav-thread-wrapper;
width: 7%;
.icon {
@include font-size(14);
}
.icon-comments {
color: $gray-l2;
}
.icon-ok {
color: $forum-color-marked-answer;
}
.icon-question {
color: $pink;
}
}
.forum-nav-thread-wrapper-1 {
@extend %forum-nav-thread-wrapper;
width: 70%;
width: 80%;
}
.forum-nav-thread-wrapper-2 {
@extend %forum-nav-thread-wrapper;
width: 30%;
width: 13%;
text-align: right;
}
......@@ -252,11 +273,6 @@
}
}
.forum-nav-thread-endorsed {
@extend %forum-nav-thread-wrapper-2-content;
color: $green-d1;
}
.forum-nav-thread-votes-count {
@extend %forum-nav-thread-wrapper-2-content;
}
......
lms/static/sass/discussion/utilities/_variables.scss
......@@ -3,3 +3,4 @@ $forum-color-pinned: $pink;
$forum-color-following: $blue;
$forum-color-staff: $blue;
$forum-color-community-ta: $green-d1;
$forum-color-marked-answer: $green-d1;
lms/templates/discussion/_underscore_templates.html
......@@ -264,7 +264,30 @@
<script aria-hidden="true" type="text/template" id="thread-list-item-template">
<li data-id="${'<%- id %>'}" class="forum-nav-thread${'<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>'}">
<a href="#" class="forum-nav-thread-link">
<div class="forum-nav-thread-wrapper-1">
<div class="forum-nav-thread-wrapper-0">
${u"""<%
var icon_class, sr_text;
if (thread_type == "discussion") {{
icon_class = "icon-comments";
sr_text = "{discussion}";
}} else if (endorsed) {{
icon_class = "icon-ok";
sr_text = "{answered_question}";
}} else {{
icon_class = "icon-question";
sr_text = "{unanswered_question}";
}}
%>""".format(
## Translators: This is a label for a Discussion forum thread
discussion=escapejs(_("discussion")),
## Translators: This is a label for a Question forum thread with a marked answer
answered_question=escapejs(_("answered question")),
## Translators: This is a label for a Question forum thread without a marked answer
unanswered_question=escapejs(_("unanswered question"))
)}
<span class="sr">${"<%= sr_text %>"}</span>
<i class="icon ${"<%= icon_class %>"}"></i>
</div><div class="forum-nav-thread-wrapper-1">
<span class="forum-nav-thread-title">${"<%- title %>"}</span>
<%
js_block = u"""
......@@ -297,10 +320,6 @@
%>
${"<%"}${js_block}${"%>"}
</div><div class="forum-nav-thread-wrapper-2">
${"<% if (endorsed) { %>"}
## Translators: This is a label for a forum thread with a response that was endorsed by the course staff
<span class="forum-nav-thread-endorsed"><i class="icon icon-ok"></i><span class="sr">${_("Endorsed response")}</span></span>
${"<% } %>"}
<%
js_block = u"""
interpolate(
......
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