Skip to content

E
edx-platform
Commit 5e9fd041 by Andy Armstrong Committed by Brian Jacobel
Options

Clean up UX for read and unread posts 

TNL-4557
parent 1f2c843f
Showing with 145 additions and 117 deletions
common/static/common/js/discussion/views/discussion_thread_list_view.js
......@@ -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,
......
common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js
......@@ -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']);
});
});
......
common/static/common/templates/discussion/response-comment-show.underscore
......@@ -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>
common/static/common/templates/discussion/thread-list-item.underscore
<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
......
common/static/common/templates/discussion/thread-response-show.underscore
......@@ -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">
......
common/static/common/templates/discussion/thread-show.underscore
......@@ -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) { %>
......
lms/static/sass/discussion/_discussion.scss
......@@ -202,7 +202,6 @@ body.discussion {
}
}
.discussion-post header,
.responses li header {
margin-bottom: $baseline;
}
......
lms/static/sass/discussion/_mixins.scss
......@@ -112,32 +112,6 @@
text-overflow: ellipsis;
}
@mixin forum-post-label($color) {
@extend %t-weight4;
font-size: $forum-small-font-size;
display: inline;
margin-top: ($baseline/4);
border: 1px solid;
border-radius: $forum-border-radius;
padding: 1px 6px;
white-space: nowrap;
border-color: $color;
color: $color;
.icon {
@include margin-right($baseline/5);
}
&:last-child {
@include margin-right(0);
}
&.is-hidden {
display: none;
}
}
@mixin forum-user-label($color) {
@include margin-left($baseline/4);
@extend %t-weight5;
......
lms/static/sass/discussion/elements/_labels.scss
......@@ -2,28 +2,44 @@
// ====================
body.discussion, .discussion-module {
.post-label-pinned {
@include forum-post-label($forum-color-pinned);
}
.post-label {
@include margin($baseline/4, $baseline/2, 0, 0);
@extend %t-weight4;
font-size: $forum-small-font-size;
display: inline;
white-space: nowrap;
.post-label-following {
@include forum-post-label($forum-color-following);
}
.icon {
@include margin-right($baseline/5);
}
.post-label-reported {
@include forum-post-label($forum-color-reported);
}
&.is-hidden {
display: none;
}
.post-label-closed {
@include forum-post-label($forum-color-closed);
}
&.post-label-pinned {
color: $forum-color-pinned;
}
.post-label-by-staff {
@include forum-post-label($forum-color-staff);
}
&.post-label-following {
color: $forum-color-following;
}
.post-label-by-community-ta {
@include forum-post-label($forum-color-community-ta);
&.post-label-reported {
color: $forum-color-reported;
}
&.post-label-closed {
color: $forum-color-closed;
}
&.post-label-by-staff {
color: $forum-color-staff;
}
&.post-label-by-community-ta {
color: $forum-color-community-ta;
}
}
.user-label-staff {
......@@ -33,5 +49,15 @@ body.discussion, .discussion-module {
.user-label-community-ta {
@include forum-user-label($forum-color-community-ta);
}
}
// Make post labels tighter when shown inside the left nav
.forum-nav-thread-link {
.forum-nav-thread-labels {
.post-label {
.icon {
@include margin-right(0);
}
}
}
}
lms/static/sass/discussion/utilities/_shame.scss
......@@ -70,12 +70,6 @@
// The following rules would be unnecessary but for broadly scoped rules defined
// elsewhere in our CSS.
// Override global ul rules
.forum-nav-thread-list, .forum-nav-thread-labels {
margin: 0;
padding-left: 0;
}
li[class*=forum-nav-thread-label-] {
// Override global span rules
span {
......
lms/static/sass/discussion/utilities/_variables-v1.scss
......@@ -16,6 +16,8 @@ $forum-color-border: $gray-l3 !default;
$forum-color-error: $red !default;
$forum-color-hover-thread: $gray-d3 !default;
$forum-color-reading-thread: $gray-d3 !default;
$forum-color-read-post: $blue !default;
$forum-color-never-read-post: $gray-d3 !default;
// post images
$post-image-dimension: ($baseline*3) !default; // image size + margin
......
lms/static/sass/discussion/utilities/_variables-v2.scss
......@@ -5,17 +5,19 @@
$forum-color-background: $lms-container-background-color !default;
$forum-color-active-thread: $lms-active-color !default;
$forum-color-active-text: $lms-container-background-color !default;
$forum-color-pinned: $pink !default;
$forum-color-reported: $pink !default;
$forum-color-pinned: palette(secondary, dark) !default;
$forum-color-reported: palette(secondary, dark) !default;
$forum-color-closed: $black !default;
$forum-color-following: $blue !default;
$forum-color-staff: $blue !default;
$forum-color-community-ta: $green-d1 !default;
$forum-color-marked-answer: $green-d1 !default;
$forum-color-border: palette(grayscale, base) !default;
$forum-color-following: palette(primary, base) !default;
$forum-color-staff: palette(primary, base) !default;
$forum-color-community-ta: palette(success, text) !default;
$forum-color-marked-answer: palette(success, text) !default;
$forum-color-border: palette(grayscale, back) !default;
$forum-color-error: palette(error, accent) !default;
$forum-color-hover-thread: palette(grayscale, dark) !default;
$forum-color-reading-thread: palette(grayscale, dark) !default;
$forum-color-hover-thread: palette(grayscale, x-back) !default;
$forum-color-reading-thread: palette(primary, base) !default;
$forum-color-read-post: palette(grayscale, base) !default;
$forum-color-never-read-post: palette(primary, base) !default;
// post images
$post-image-dimension: ($baseline*3) !default; // image size + margin
......
lms/static/sass/discussion/views/_thread.scss
......@@ -15,7 +15,6 @@
.wrapper-post-header {
padding-bottom: 0;
margin-bottom: ($baseline*0.75);
}
.post-header-content {
......@@ -34,7 +33,7 @@
.posted-details {
@extend %t-copy-sub2;
margin-top: ($baseline/5);
margin: ($baseline/5) 0;
color: $gray-d1;
.username {
......@@ -178,6 +177,11 @@ body.discussion {
// Layout control for discussion modules that does not apply to the discussion board
.discussion-module {
.discussion {
clear: both;
padding-top: ($baseline/2);
}
.btn-brand {
@include blue-button;
display: inline-block;
......
lms/static/sass/shared-v2/_layouts.scss
......@@ -49,13 +49,10 @@
.form-actions > * {
@include margin-left($baseline/2);
vertical-align: middle;
min-width: 200px;
height: 34px;
}
.form-actions > button {
padding: $baseline/5;
min-width: 200px;
height: 34px;
}
......
lms/static/sass/shared-v2/_variables.scss
// LMS variables
$lms-gray: palette(grayscale, base);
$lms-background-color: rgb(252, 252, 252); // Correct shade of grey not available in the Pattern Library
$lms-background-color: palette(grayscale, x-back);
$lms-container-background-color: $white;
$lms-border-color: palette(grayscale, back);
$lms-label-color: palette(grayscale, black);
......
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