Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up UX for read and unread posts

Browse Source 
TNL-4557
This commit is contained in:
Andy Armstrong
2016-08-01 15:37:47 -04:00
committed by Brian Jacobel
parent 1f2c843f23
commit 5e9fd04126
16 changed files with 322 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
common/static/common/js/discussion/views/discussion_thread_list_view.js
View File

@@ -124,7 +124,6 @@
this.collection.on('thread:remove', this.threadRemoved);
this.sidebar_padding = 10;
this.boardName = null;
this.template = _.template($('#thread-list-template').html());
this.current_search = '';
this.mode = 'all';
this.searchAlertCollection = new Backbone.Collection([], {
@@ -146,9 +145,12 @@
this.searchAlertCollection.on('remove', function(searchAlert) {
return self.$('#search-alert-' + searchAlert.cid).remove();
});
return this.searchAlertCollection.on('reset', function() {
this.searchAlertCollection.on('reset', function() {
return self.$('.search-alerts').empty();
});
this.template = edx.HtmlUtils.template($('#thread-list-template').html());
this.homeTemplate = edx.HtmlUtils.template($('#discussion-home-template').html());
this.threadListItemTemplate = edx.HtmlUtils.template($('#thread-list-item-template').html());
};
/**
@@ -241,14 +243,16 @@
};
DiscussionThreadListView.prototype.render = function() {
var self = this,
$elem = this.template({
isCohorted: this.courseSettings.get('is_cohorted'),
isPrivilegedUser: DiscussionUtil.isPrivilegedUser()
});
var self = this;
this.timer = 0;
this.$el.empty();
this.$el.append($elem);
edx.HtmlUtils.append(
this.$el,
this.template({
isCohorted: this.courseSettings.get('is_cohorted'),
isPrivilegedUser: DiscussionUtil.isPrivilegedUser()
})
);
this.$('.forum-nav-sort-control option').removeProp('selected');
this.$('.forum-nav-sort-control option[value=' + this.collection.sort_preference + ']')
.prop('selected', true);
@@ -280,17 +284,19 @@
};
DiscussionThreadListView.prototype.showMetadataAccordingToSort = function() {
var commentCounts, voteCounts;
voteCounts = this.$('.forum-nav-thread-votes-count');
commentCounts = this.$('.forum-nav-thread-comments-count');
var voteCounts = this.$('.forum-nav-thread-votes-count'),
unreadCommentCounts = this.$('.forum-nav-thread-unread-comments-count'),
commentCounts = this.$('.forum-nav-thread-comments-count');
voteCounts.hide();
commentCounts.hide();
unreadCommentCounts.hide();
switch (this.$('.forum-nav-sort-control').val()) {
case 'activity':
case 'comments':
return commentCounts.show();
case 'votes':
return voteCounts.show();
voteCounts.show();
break;
default:
unreadCommentCounts.show();
commentCounts.show();
}
};
@@ -370,20 +376,16 @@
};
DiscussionThreadListView.prototype.renderThread = function(thread) {
var content, unreadCount;
content = $(_.template($('#thread-list-item-template').html())(thread.toJSON()));
unreadCount = thread.get('unread_comments_count') + (thread.get('read') ? 0 : 1);
if (unreadCount > 0) {
content.find('.forum-nav-thread-comments-count').attr(
'data-tooltip',
edx.StringUtils.interpolate(
ngettext('{unread_count} new comment', '{unread_count} new comments', unreadCount),
{unread_count: unreadCount},
true
)
var threadCommentCount = thread.get('comments_count'),
threadUnreadCommentCount = thread.get('unread_comments_count'),
neverRead = !thread.get('read') && threadUnreadCommentCount === threadCommentCount,
context = _.extend(
{
neverRead: neverRead
},
thread.toJSON()
);
}
return content;
return $(this.threadListItemTemplate(context).toString());
};
DiscussionThreadListView.prototype.threadSelected = function(e) {
@@ -415,8 +417,7 @@
DiscussionThreadListView.prototype.goHome = function() {
var url, $templateContent;
this.template = _.template($('#discussion-home-template').html());
$templateContent = $(this.template());
$templateContent = $(this.homeTemplate().toString());
$('.forum-content').empty().append($templateContent);
$('.forum-nav-thread-list a').removeClass('is-active').find('.sr')
.remove();
@@ -635,7 +636,7 @@
Content.loadContentInfos(response.annotated_content_info);
self.displayedCollection.reset(self.collection.models);
if (callback) {
return callback();
callback();
}
}
});
@@ -683,7 +684,7 @@
calling discussion.loadMorePages
Mainly because this currently does not reset any pagination variables which could cause problems.
This doesn't use pagination either.
*/
*/
return DiscussionUtil.safeAjax({
$elem: $searchInput,

22
common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js
View File

@@ -37,7 +37,9 @@
votes: {
up_count: '12'
},
read: true,
comments_count: 3,
unread_comments_count: 2,
created_at: '2013-04-03T20:06:39Z'
}), DiscussionViewSpecHelper.makeThreadWithProps({
id: '4',
@@ -172,7 +174,8 @@
describe('thread rendering should be correct', function() {
var checkRender;
checkRender = function(threads, type, sortOrder) {
var discussion, view;
var discussion, view,
isOrderedByVotes = type === 'votes';
discussion = new Discussion(_.map(threads, function(thread) {
return new Thread(thread);
}), {
@@ -183,25 +186,30 @@
view.render();
checkThreadsOrdering(view, sortOrder, type);
expect(view.$el.find('.forum-nav-thread-comments-count:visible').length)
.toEqual(type === 'votes' ? 0 : 4);
.toEqual(isOrderedByVotes ? 0 : 4);
expect(view.$el.find('.forum-nav-thread-unread-comments-count:visible').length)
.toEqual(isOrderedByVotes ? 0 : 1);
expect(view.$el.find('.forum-nav-thread-votes-count:visible').length)
.toEqual(type === 'votes' ? 4 : 0);
if (type === 'votes') {
.toEqual(isOrderedByVotes ? 4 : 0);
if (isOrderedByVotes) {
expect(_.map(view.$el.find('.forum-nav-thread-votes-count'), function(element) {
return $(element).text().trim();
})).toEqual(['+25 votes', '+20 votes', '+42 votes', '+12 votes']);
} else {
expect(view.$el.find('.forum-nav-thread-votes-count:visible').length)
.toEqual(0);
}
};
it('with sort preference activity', function() {
it('with sort preference "activity"', function() {
checkRender(this.threads, 'activity', ['Thread1', 'Thread2', 'Thread3', 'Thread4']);
});
it('with sort preference votes', function() {
it('with sort preference "votes"', function() {
checkRender(this.threads, 'votes', ['Thread4', 'Thread1', 'Thread2', 'Thread3']);
});
it('with sort preference comments', function() {
it('with sort preference "comments"', function() {
checkRender(this.threads, 'comments', ['Thread1', 'Thread4', 'Thread3', 'Thread2']);
});
});

4
common/static/common/templates/discussion/response-comment-show.underscore
View File

@@ -28,6 +28,8 @@
) %>
</p>
<div class="post-labels">
<span class="post-label-reported"><span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %></span>
<span class="post-label post-label-reported">
<span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %>
</span>
</div>
</div>

27
common/static/common/templates/discussion/thread-list-item.underscore
View File

@@ -1,4 +1,4 @@
<li data-id="<%- id %>" class="forum-nav-thread<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>">
<li data-id="<%- id %>" class="forum-nav-thread<% if (neverRead) { %> never-read<% } %>">
<a href="#" class="forum-nav-thread-link">
<div class="forum-nav-thread-wrapper-0">
<%
@@ -25,31 +25,31 @@
<% if(pinned || subscribed || staff_authored || community_ta_authored) { %>
<ul class="forum-nav-thread-labels">
<% if (pinned) { %>
<li class="post-label-pinned">
<li class="post-label post-label-pinned">
<span class="icon fa fa-thumb-tack" aria-hidden="true"></span>
<% // Translators: This is a label for a forum thread that has been pinned %>
<%- gettext("Pinned") %>
</li>
<% } %>
<% if (subscribed) { %>
<li class="post-label-following">
<li class="post-label post-label-following">
<span class="icon fa fa-star" aria-hidden="true"></span>
<% // Translators: This is a label for a forum thread that the user is subscribed to %>
<%- gettext("Following") %>
</li>
<% } %>
<% if (staff_authored) { %>
<li class="post-label-by-staff">
<li class="post-label post-label-by-staff">
<span class="icon fa fa-user" aria-hidden="true"></span>
<% // Translators: This is a label for a forum thread that was authored by a member of the course staff %>
<%- gettext("By: Staff") %>
<%- gettext("Staff") %>
</li>
<% } %>
<% if (community_ta_authored) { %>
<li class="post-label-by-community-ta">
<li class="post-label post-label-by-community-ta">
<span class="icon fa fa-user" aria-hidden="true"></span>
<% // Translators: This is a label for a forum thread that was authored by a community TA %>
<%- gettext("By: Community TA") %>
<%- gettext("Community TA") %>
</li>
<% } %>
</ul>
@@ -72,7 +72,18 @@
%>
</span>
<span class="forum-nav-thread-comments-count <% if (unread_comments_count > 0) { %>is-unread<% } %>">
<% if (!neverRead && unread_comments_count > 0) { %>
<span class="forum-nav-thread-unread-comments-count">
<%-
StringUtils.interpolate(
gettext('{unread_comments_count} new'),
{unread_comments_count: unread_comments_count}
)
%>
</span>
<% } %>
<span class="forum-nav-thread-comments-count">
<%
var fmt;
// Counts in data do not include the post itself, but the UI should

4
common/static/common/templates/discussion/thread-response-show.underscore
View File

@@ -38,7 +38,9 @@
<% } %>
</p>
<div class="post-labels">
<span class="post-label-reported"><span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %></span>
<span class="post-label post-label-reported">
<span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %>
</span>
</div>
</div>
<div class="response-header-actions">

12
common/static/common/templates/discussion/thread-show.underscore
View File

@@ -21,9 +21,15 @@
%>
</p>
<div class="post-labels">
<span class="post-label-pinned"><span class="icon fa fa-thumb-tack" aria-hidden="true"></span><%- gettext("Pinned") %></span>
<span class="post-label-reported"><span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %></span>
<span class="post-label-closed"><span class="icon fa fa-lock" aria-hidden="true"></span><%- gettext("Closed") %></span>
<span class="post-label post-label-pinned">
<span class="icon fa fa-thumb-tack" aria-hidden="true"></span><%- gettext("Pinned") %>
</span>
<span class="post-label post-label-reported">
<span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %>
</span>
<span class="post-label post-label-closed">
<span class="icon fa fa-lock" aria-hidden="true"></span><%- gettext("Closed") %>
</span>
</div>
</div>
<% if (!readOnly) { %>