Commit 656fb6b7 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Show tags in UI. 

Send tags along with comments from backend.

Render the tags in comments template.

Improved stylesheet for rendering all the items in top-right corner
of each comment.

For moderators, also render the add/delete buttons for the tags.
parent f3e0be83

comments/lib/api_adapter.js

+1 −0
Original line number Diff line number Diff line
@@ -22,6 +22,7 @@ module.exports = { 
            upVote: comment.vote_dir === 1,

            downVote: comment.vote_dir === -1,

            read: comment.read,

            tags: comment.tags ? comment.tags.split("\t") : [],

            moderator: comment.moderator,

            emailHash: crypto.createHash('md5').update(comment.email).digest("hex")

        };

template/app/Application.js

+1 −1
Original line number Diff line number Diff line
@@ -64,7 +64,7 @@ Ext.define('Docs.Application', { 
        Ext.get("loading").remove();



        // setInterval(function(){

        //     Ext.DomQuery.select('link')[2].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)

        //     Ext.DomQuery.select('link')[2].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000);

        // }, 1000);

    }

});

template/app/model/Comment.js

+1 −0
Original line number Diff line number Diff line
@@ -18,6 +18,7 @@ Ext.define('Docs.model.Comment', { 
        "downVote",

        "contentHtml",

        "read",

        "tags",

        "deleted"

    ],

    proxy: {

template/app/view/comments/Template.js

+21 −7
Original line number Diff line number Diff line
@@ -49,13 +49,27 @@ Ext.define('Docs.view.comments.Template', { 
                                    '<span class="target"> on {[this.target(values.target)]}</span>',

                                '</tpl>',

                            '</div>',



                            '<div class="top-right">',

                                '<tpl for="tags">',

                                    '<span href="#" class="tag">',

                                        '{.}',

                                        '<tpl if="this.isMod()"><a href="#" class="delete" title="Delete tag">&ndash;</a></tpl>',

                                    '</span>',

                                '</tpl>',

                                '<tpl if="this.isMod()">',

                                    '<a href="#" class="add-tag" title="Add new tag">+</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>',

                                    '<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>',

                                '<span class="time" title="{[this.date(values.createdAt)]}">{[this.dateStr(values.createdAt)]}</span>',

                            '</div>',



                            '<div class="vote">',

                                '<a href="#" class="voteCommentUp{[values.upVote ? " selected" : ""]}" ',

                                            'title="Vote Up">&nbsp;</a>',

template/resources/sass/_comments.scss

+52 −24
Original line number Diff line number Diff line
@@ -163,7 +163,7 @@ form.commentForm { 
  padding-top: 10px;

  padding-left: 2px;

  &:hover {

    .com-meta {

    .com-meta .top-right {

      .readComment,

      .readComment.read,

      .editComment,
@@ -188,36 +188,64 @@ form.commentForm { 
      font-size: 14px;

      &.moderator {

        color: $moderator-color; } }

    .time {

    .top-right {

      position: absolute;

      right: 20px;

      color: #999;

      top: 0; }

    .deleteComment {

      right: 110px;

      color: #999;

      @include opacity(0);

      @include transition(opacity, 0.2s, linear);

      position: absolute; }

    .editComment {

      right: 160px;

      color: #999;

      @include opacity(0);

      @include transition(opacity, 0.2s, linear);

      position: absolute; }

    .readComment {

      right: 200px;

      top: 0;

      span, a {

        display: inline-block;

        margin-left: 10px; }

      .tag {

        @include border-radius(2px);

        padding: 0 1em;

        font-weight: bold;

        color: white;

        background: $docs-text-color;

        position: relative;

        a {

          margin: 0;

          color: $docs-text-color;

          position: absolute;

          top: -5px;

          right: -5px;

          background: white;

          width: 13px;

          height: 13px;

          text-align: center;

          line-height: 7px;

          border: 2px solid $docs-text-color;

          @include border-radius(7px);

          &:hover {

            border-color: red;

            color: red; } } }

      .add-tag {

        color: $docs-text-color;

        background: white;

        width: 13px;

        height: 13px;

        text-align: center;

        text-indent: -1px;

        line-height: 9px;

        border: 2px solid $docs-text-color;

        @include border-radius(7px);

        &:hover {

          border-color: $moderator-color;

          color: $moderator-color; } }

      .editComment, .deleteComment, .readComment {

        color: #999;

        @include opacity(0);

      @include transition(opacity, 0.2s, linear);

      position: absolute;

      &.read {

        @include transition(opacity, 0.2s, linear); }

      .readComment.read {

        color: white;

        @include border-radius(2px);

        background: $moderator-color;

        font-weight: bold;

        padding: 0 1em;

        @include opacity(0.5); } }

        @include opacity(0.5); }

      .time {

        color: #999;

        text-align: right;

        width: 90px; } }

    .vote {

      position: absolute;

      left: 2px;