Display "read" status of comments everywhere.

Now comments can be marked as read from normal comments list of a
class/member.

The "read" status of comments is shown in all comment lists when
user is moderator.

Changed the styling of "read" badge into more prominent.

opt/comments-server-side/app.js

@@ -154,7 +154,7 @@ app.namespace('/auth/:sdk/:version', function(){
     /**
      * Returns a list of comments for a particular target (eg class, guide, video)
      */
-    app.get('/comments', function(req, res) {
+    app.get('/comments', util.getCommentReads, function(req, res) {
 
         if (!req.query.startkey) {
             res.json({error: 'Invalid request'});
@@ -298,7 +298,7 @@ app.namespace('/auth/:sdk/:version', function(){
     /**
      * Restores deleted comment
      */
-    app.post('/comments/:commentId/undo_delete', util.requireLoggedInUser, util.findComment, util.requireOwner, function(req, res) {
+    app.post('/comments/:commentId/undo_delete', util.requireLoggedInUser, util.findComment, util.requireOwner, util.getCommentReads, function(req, res) {
         req.comment.deleted = false;
         req.comment.save(function(err, response) {
             res.send({ success: true, comment: util.scoreComments([req.comment], req)[0] });

opt/comments-server-side/util.js

@@ -44,6 +44,10 @@ exports.scoreComments = function(comments, req) {
             createdAt: String(comment.createdAt)
         });
 
+        if (req.commentMeta.reads.length > 0) {
+            comment.read = _.include(req.commentMeta.reads, ""+comment._id);
+        }
+
         if (req.session.user) {
             comment.upVote = _.contains(comment.upVotes, req.session.user.username);
             comment.downVote = _.contains(comment.downVotes, req.session.user.username);
@@ -166,6 +170,16 @@ exports.findCommentMeta = function(req, res, next) {
     }
 };
 
+// True if the user is moderator
+function isModerator(user) {
+    return _.include(user.membergroupids, 7);
+}
+
+// True if the user is author of the comment
+function isAuthor(user, comment) {
+    return user.username === comment.author;
+}
+
 /**
  * Ensures that user is allowed to modify/delete the comment,
  * that is, he is the owner of the comment or a moderator.
@@ -175,10 +189,7 @@ exports.findCommentMeta = function(req, res, next) {
  * @param {Function} next
  */
 exports.requireOwner = function(req, res, next) {
-    var isModerator = _.include(req.session.user.membergroupids, 7);
-    var isAuthor = req.session.user.username == req.comment.author;
-
-    if (isModerator || isAuthor) {
+    if (isModerator(req.session.user) || isAuthor(req.session.user, req.comment)) {
         next();
     }
     else {
@@ -365,7 +376,7 @@ exports.getCommentReads = function(req, res, next) {
 
     req.commentMeta = req.commentMeta || {};
 
-    if (req.session.user) {
+    if (req.session.user && isModerator(req.session.user)) {
         Meta.find({
             userId: req.session.user.userid
         }, function(err, commentMeta) {

template/app/view/Comments.js

@@ -56,7 +56,9 @@ Ext.define('Docs.view.Comments', {
                             '<span class="problem">problem</span>',
                         '</tpl>',
                     '</div>',
-                    '<tpl if="showCls"><a href="#" class="readComment">Read</a></tpl>',
+                    '<tpl if="this.isMod()">',
+                        '<a href="#" class="readComment <tpl if="read">read</tpl>">Read</a>',
+                    '</tpl>',
                     '<tpl if="this.isMod() || this.isAuthor(values.author)"><a href="#" class="editComment">Edit</a><a href="#" class="deleteComment">Delete</a></tpl>',
                     '<div class="time" title="{[this.date(values.createdAt)]}">{[this.dateStr(values.createdAt)]}</div>',
                     '<div class="vote">',

template/resources/sass/_comments.scss

@@ -188,6 +188,7 @@
   &:hover {
     .com-meta {
       .readComment,
+      .readComment.read,
       .editComment,
       .deleteComment,
       .vote {
@@ -239,11 +240,16 @@
     .readComment {
       right: 200px;
       color: #999;
-      opacity: 0;
+      @include opacity(0);
       @include transition(opacity, 0.2s, linear);
-      position: absolute; }
-    .read {
-      font-weight: bold; }
+      position: absolute;
+      &.read {
+        color: white;
+        @include border-radius(2px);
+        background: #3D7E00;
+        font-weight: bold;
+        padding: 0 1em;
+        @include opacity(0.5); } }
     .vote {
       position: absolute;
       left: 2px;