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", -> ...@@ -6,7 +6,23 @@ describe "DiscussionThreadListView", ->
<script type="text/template" id="thread-list-item-template"> <script type="text/template" id="thread-list-item-template">
<li data-id="<%- id %>" class="forum-nav-thread<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>"> <li data-id="<%- id %>" class="forum-nav-thread<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>">
<a href="#" class="forum-nav-thread-link"> <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> <span class="forum-nav-thread-title"><%- title %></span>
<% <%
var labels = ""; var labels = "";
...@@ -27,9 +43,6 @@ describe "DiscussionThreadListView", -> ...@@ -27,9 +43,6 @@ describe "DiscussionThreadListView", ->
} }
%> %>
</div><div class="forum-nav-thread-wrapper-2"> </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">+<%= <span class="forum-nav-thread-votes-count">+<%=
interpolate( interpolate(
'%(votes_up_count)s%(span_sr_open)s votes %(span_close)s', '%(votes_up_count)s%(span_sr_open)s votes %(span_close)s',
...@@ -372,14 +385,21 @@ describe "DiscussionThreadListView", -> ...@@ -372,14 +385,21 @@ describe "DiscussionThreadListView", ->
expect($.ajax).toHaveBeenCalled() expect($.ajax).toHaveBeenCalled()
expect(@view.addSearchAlert).not.toHaveBeenCalled() expect(@view.addSearchAlert).not.toHaveBeenCalled()
describe "endorsed renders correctly", -> describe "post type renders correctly", ->
it "when absent", -> it "for discussion", ->
renderSingleThreadWithProps({}) renderSingleThreadWithProps({thread_type: "discussion"})
expect($(".forum-nav-thread-endorsed").length).toEqual(0) expect($(".forum-nav-thread-wrapper-0 .icon")).toHaveClass("icon-comments")
expect($(".forum-nav-thread-wrapper-0 .sr")).toHaveText("discussion")
it "when present", ->
renderSingleThreadWithProps({endorsed: true}) it "for answered question", ->
expect($(".forum-nav-thread-endorsed").length).toEqual(1) 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", -> describe "post labels render correctly", ->
beforeEach -> beforeEach ->
......
common/static/coffee/spec/discussion/view/discussion_view_spec_helper.coffee
...@@ -3,6 +3,7 @@ class @DiscussionViewSpecHelper ...@@ -3,6 +3,7 @@ class @DiscussionViewSpecHelper
# Minimal set of properties necessary for rendering # Minimal set of properties necessary for rendering
thread = { thread = {
id: "dummy_id", id: "dummy_id",
thread_type: "discussion",
pinned: false, pinned: false,
endorsed: false, endorsed: false,
votes: {up_count: '0'}, votes: {up_count: '0'},
......
common/static/coffee/src/discussion/views/discussion_content_view.coffee
...@@ -8,16 +8,6 @@ if Backbone? ...@@ -8,16 +8,6 @@ if Backbone?
(event) -> DiscussionUtil.activateOnSpace(event, @toggleFlagAbuse) (event) -> DiscussionUtil.activateOnSpace(event, @toggleFlagAbuse)
attrRenderer: 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) -> closed: (closed) ->
return if not @$(".action-openclose").length return if not @$(".action-openclose").length
return if not @$(".post-status-closed").length return if not @$(".post-status-closed").length
......
common/static/coffee/src/discussion/views/discussion_thread_view.coffee
...@@ -216,7 +216,7 @@ if Backbone? ...@@ -216,7 +216,7 @@ if Backbone?
@model.comment() @model.comment()
endorseThread: (endorsed) => endorseThread: (endorsed) =>
is_endorsed = @$el.find(".is-endorsed").length is_endorsed = @$el.find(".is-endorsed").length > 0
@model.set 'endorsed', is_endorsed @model.set 'endorsed', is_endorsed
submitComment: (event) -> submitComment: (event) ->
......
common/static/coffee/src/discussion/views/thread_response_show_view.coffee
...@@ -12,6 +12,18 @@ if Backbone? ...@@ -12,6 +12,18 @@ if Backbone?
"keydown .discussion-flag-abuse": "keydown .discussion-flag-abuse":
(event) -> DiscussionUtil.activateOnSpace(event, @toggleFlagAbuse) (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) -> $: (selector) ->
@$el.find(selector) @$el.find(selector)
......
common/static/coffee/src/discussion/views/thread_response_view.coffee
...@@ -155,6 +155,7 @@ if Backbone? ...@@ -155,6 +155,7 @@ if Backbone?
@showView = new ThreadResponseShowView(model: @model) @showView = new ThreadResponseShowView(model: @model)
@showView.bind "response:_delete", @_delete @showView.bind "response:_delete", @_delete
@showView.bind "response:edit", @edit @showView.bind "response:edit", @edit
@showView.on "comment:endorse", => @trigger("comment:endorse")
renderShowView: () -> renderShowView: () ->
@renderSubView(@showView) @renderSubView(@showView)
......
lms/static/sass/discussion/elements/_navigation.scss
...@@ -179,14 +179,35 @@ ...@@ -179,14 +179,35 @@
vertical-align: middle; 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 { .forum-nav-thread-wrapper-1 {
@extend %forum-nav-thread-wrapper; @extend %forum-nav-thread-wrapper;
width: 70%; width: 80%;
} }
.forum-nav-thread-wrapper-2 { .forum-nav-thread-wrapper-2 {
@extend %forum-nav-thread-wrapper; @extend %forum-nav-thread-wrapper;
width: 30%; width: 13%;
text-align: right; text-align: right;
} }
...@@ -252,11 +273,6 @@ ...@@ -252,11 +273,6 @@
} }
} }
.forum-nav-thread-endorsed {
@extend %forum-nav-thread-wrapper-2-content;
color: $green-d1;
}
.forum-nav-thread-votes-count { .forum-nav-thread-votes-count {
@extend %forum-nav-thread-wrapper-2-content; @extend %forum-nav-thread-wrapper-2-content;
} }
......
lms/static/sass/discussion/utilities/_variables.scss
...@@ -3,3 +3,4 @@ $forum-color-pinned: $pink; ...@@ -3,3 +3,4 @@ $forum-color-pinned: $pink;
$forum-color-following: $blue; $forum-color-following: $blue;
$forum-color-staff: $blue; $forum-color-staff: $blue;
$forum-color-community-ta: $green-d1; $forum-color-community-ta: $green-d1;
$forum-color-marked-answer: $green-d1;
lms/templates/discussion/_underscore_templates.html
...@@ -264,7 +264,30 @@ ...@@ -264,7 +264,30 @@
<script aria-hidden="true" type="text/template" id="thread-list-item-template"> <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<% } %>'}"> <li data-id="${'<%- id %>'}" class="forum-nav-thread${'<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>'}">
<a href="#" class="forum-nav-thread-link"> <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> <span class="forum-nav-thread-title">${"<%- title %>"}</span>
<% <%
js_block = u""" js_block = u"""
...@@ -297,10 +320,6 @@ ...@@ -297,10 +320,6 @@
%> %>
${"<%"}${js_block}${"%>"} ${"<%"}${js_block}${"%>"}
</div><div class="forum-nav-thread-wrapper-2"> </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""" js_block = u"""
interpolate( 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