Improve comments style, add avatars

diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css
new file mode 100644 (file)
index 0000000..b110846
--- /dev/null
+++ b/apps/comments/css/comments.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2016
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+#commentsTabView .newCommentForm {
+       margin-bottom: 20px;
+}
+
+#commentsTabView .newCommentForm .message {
+       width: 90%;
+       resize: none;
+}
+
+#commentsTabView .newCommentForm .submit {
+       display: block;
+}
+
+#commentsTabView .comment {
+       margin-bottom: 30px;
+}
+
+#commentsTabView .comment .avatar {
+       width: 28px;
+       height: 28px;
+       line-height: 28px;
+}
+
+#commentsTabView .authorRow>div {
+       display: inline-block;
+       vertical-align: middle;
+}
+
+#commentsTabView .comment .authorRow {
+       margin-bottom: 5px;
+       position: relative;
+}
+
+#commentsTabView .comment .author {
+       font-weight: bold;
+}
+
+#commentsTabView .comment .date {
+       position: absolute;
+       right: 0;
+}

diff --git a/apps/comments/js/commentmodel.js b/apps/comments/js/commentmodel.js
index 8771bd2d0f4e2e7901403785aad8bf8d901641a6..b945f71fdd2af6c340767eca6591bbb8b5eabea0 100644 (file)
--- a/apps/comments/js/commentmodel.js
+++ b/apps/comments/js/commentmodel.js
@@ -22,7 +22,8 @@
                sync: OC.Backbone.davSync,
 
                defaults: {
-                       // TODO
+                       actorType: 'users',
+                       objectType: 'files'
                },
 
                davProperties: {

diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index 6e51173280303da425fd807c84405c6d05ee3cf0..c2fa08ed20e8d7f4d16e6dede684517cae333af9 100644 (file)
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -8,15 +8,21 @@
  *
  */
 
-(function() {
+(function(OC, OCA) {
        var TEMPLATE =
-               '<div>' +
-               '   <form class="newCommentForm">' +
-               '      <textarea></textarea>' +
-               '      <input type="submit" value="{{submitText}}" />' +
-               '   </form>' +
-               '   <ul class="comments">' +
-               '   </ul>' +
+               '<div class="newCommentRow comment">' +
+               '    <div class="authorRow">' +
+               '        {{#if avatarEnabled}}' +
+               '        <div class="avatar" data-username="{{userId}}"></div>' +
+               '        {{/if}}' +
+               '        <div class="author">{{userDisplayName}}</div>' +
+               '    </div>' +
+               '    <form class="newCommentForm">' +
+               '        <textarea class="message" placeholder="{{newMessagePlaceholder}}"></textarea>' +
+               '        <input class="submit" type="submit" value="{{submitText}}" />' +
+               '    </form>' +
+               '    <ul class="comments">' +
+               '    </ul>' +
                '</div>' +
                '<div class="empty hidden">{{emptyResultLabel}}</div>' +
                '<input type="button" class="showMore hidden" value="{{moreLabel}}"' +
@@ -24,13 +30,15 @@
                '<div class="loading hidden" style="height: 50px"></div>';
 
        var COMMENT_TEMPLATE =
-               '<li>' +
-               '   <hr />' +
-               '   <div class="authorRow">' +
-               '      <span class="author"><em>{{actorDisplayName}}</em></span>' +
-               '      <span class="date has-tooltip" title="{{altDate}}">{{date}}</span>' +
-               '   </div>' +
-               '   <div class="message">{{message}}</div>' +
+               '<li class="comment">' +
+               '    <div class="authorRow">' +
+               '        {{#if avatarEnabled}}' +
+               '        <div class="avatar" data-username="{{actorId}}"> </div>' +
+               '        {{/if}}' +
+               '        <div class="author">{{actorDisplayName}}</div>' +
+               '        <div class="date has-tooltip" title="{{altDate}}">{{date}}</div>' +
+               '    </div>' +
+               '    <div class="message">{{message}}</div>' +
                '</li>';
 
        /**
@@ -52,6 +60,9 @@
                        this.collection.on('request', this._onRequest, this);
                        this.collection.on('sync', this._onEndRequest, this);
                        this.collection.on('add', this._onAddModel, this);
+
+                       this._avatarsEnabled = !!OC.config.enable_avatars;
+
                        // TODO: error handling
                        _.bindAll(this, '_onSubmitComment');
                },
@@ -60,8 +71,13 @@
                        if (!this._template) {
                                this._template = Handlebars.compile(TEMPLATE);
                        }
+                       var currentUser = OC.getCurrentUser();
                        return this._template(_.extend({
-                               submitText: t('comments', 'Submit comment')
+                               avatarEnabled: this._avatarsEnabled,
+                               userId: currentUser.uid,
+                               userDisplayName: currentUser.displayName,
+                               newMessagePlaceholder: t('comments', 'Type in a new comment...'),
+                               submitText: t('comments', 'Post')
                        }, params));
                },
 
@@ -69,7 +85,9 @@
                        if (!this._commentTemplate) {
                                this._commentTemplate = Handlebars.compile(COMMENT_TEMPLATE);
                        }
-                       return this._commentTemplate(params);
+                       return this._commentTemplate(_.extend({
+                               avatarEnabled: this._avatarsEnabled
+                       }, params));
                },
 
                getLabel: function() {
@@ -96,6 +114,7 @@
                        }));
                        this.$el.find('.has-tooltip').tooltip();
                        this.$container = this.$el.find('ul.comments');
+                       this.$el.find('.avatar').avatar(OC.getCurrentUser().uid, 28);
                        this.delegateEvents();
                },
 
@@ -132,7 +151,18 @@
                        } else {
                                this.$container.append($el);
                        }
+
+                       this._postRenderItem($el);
+               },
+
+               _postRenderItem: function($el) {
                        $el.find('.has-tooltip').tooltip();
+                       if(this._avatarsEnabled) {
+                               $el.find('.avatar').each(function() {
+                                       var $this = $(this);
+                                       $this.avatar($this.attr('data-username'), 28);
+                               });
+                       }
                },
 
                nextPage: function() {
@@ -149,12 +179,12 @@
                },
 
                _onSubmitComment: function(e) {
+                       var currentUser = OC.getCurrentUser();
                        var $textArea = $(e.target).find('textarea');
                        e.preventDefault();
                        this.collection.create({
-                               actorId: OC.currentUser,
-                               // FIXME: how to get current user's display name ?
-                               actorDisplayName: OC.currentUser,
+                               actorId: currentUser.uid,
+                               actorDisplayName: currentUser.displayName,
                                actorType: 'users',
                                verb: 'comment',
                                message: $textArea.val(),
@@ -168,5 +198,5 @@
        });
 
        OCA.Comments.CommentsTabView = CommentsTabView;
-})();
+})(OC, OCA);