From 78e409593b3c3128e4c5ee95c5da33f5225e4ad5 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 10 Nov 2016 17:19:41 +0000 Subject: [PATCH] Threaded comments. --- .../web/app/views/project/editor/editor.jade | 27 ++++-- .../stylesheets/app/editor/review-panel.less | 82 +++++++++++++++---- 2 files changed, 89 insertions(+), 20 deletions(-) diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index 7445f99a7f..c946e7e404 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -70,11 +70,11 @@ div.full-size( .rp-entry-metadata p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} - .rp-entry-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }} + .rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }} .rp-entry-body(ng-switch="entry.type") span(ng-switch-when="insert") Added span.rp-content-highlight  {{ entry.content }} - span(ng-switch-when="delete") Deleted + span(ng-switch-when="delete") Delete span.rp-content-highlight  {{ entry.content }} .rp-entry-actions a.rp-entry-button(href, ng-click="acceptChange(entry_id)") @@ -84,15 +84,30 @@ div.full-size( i.fa.fa-times |  Reject div(ng-if="entry.type == 'comment'") - div(ng-repeat="comment in entry.thread", class="comment-thread__comment") - div.small(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 50%)") {{ users[comment.user_id].name }} - div.small {{ comment.ts }} - | {{ comment.content }} + .rp-comment(ng-repeat="comment in entry.thread") + .rp-comment-body(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 90%);") + p.rp-comment-content {{ comment.content }} + p.rp-comment-metadata + | {{ comment.ts | date : 'MMM d, y h:mm a' }} + |  •  + span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);") {{ users[comment.user_id].name }} + .rp-avatar(style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);") {{ users[comment.user_id].avatar_text }} + //- div.small(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 50%)") {{ users[comment.user_id].name }} + //- div.small {{ comment.ts }} + //- | {{ comment.content }} + //- pre {{ comment | json}} + //- pre {{ users[comment.user_id] | json }} div(ng-if="entry.replying") textarea(ng-model="entry.replyContent") a.btn.btn-sm.btn-primary(href, ng-click="submitReply(entry)") Submit a(href, ng-click="cancelReply(entry)") X a.btn.btn-sm.btn-primary(href, ng-click="startReply(entry)", ng-if="!entry.replying") Reply + + .rp-entry-actions + a.rp-entry-button(href) + i.fa.fa-check + |  Mark as resolved + div(ng-if="entry.type == 'focus-position'") a.btn.btn-sm(href, ng-if="!commentState.adding", ng-click="startNewComment()") Add comment div(ng-if="commentState.adding") diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 0503a0cb04..bc878188f1 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -1,4 +1,5 @@ @rp-base-font-size : 12px; +@rp-small-font-size : 10px; @rp-icon-large-size : 22px; @rp-bg-blue : #dadfed; @@ -80,16 +81,21 @@ &-delete { border-left-color: @rp-red; } + + &-comment { + border-left-color: @rp-yellow; + } } .rp-entry-header { display: flex; align-items: center; - padding: 0 5px; + padding: 5px; } .rp-entry-action-icon { font-size: @rp-icon-large-size; padding: 0 5px; + line-height: 0; } .rp-entry-metadata { @@ -101,20 +107,8 @@ margin: 0; } - .rp-entry-avatar { - border-radius: 3px; - font-weight: @rp-semibold-weight; - font-size: @rp-icon-large-size; - line-height: 1.2; - text-transform: uppercase; - color: #FFF; - width: 1.3em; - height: 1.3em; - text-align: center; - } - .rp-entry-body { - padding: 10px 5px 5px; + padding: 5px; } .rp-content-highlight { color: @rp-type-darkgrey; @@ -145,6 +139,66 @@ } } + .rp-comment { + display: flex; + align-items: flex-start; + padding: 5px; + + &:nth-child(even) { + flex-direction: row-reverse; + + .rp-comment-body { + margin-right: 0; + margin-left: 6px; + + &::after { + content: "\25C4"; + left: -5px; + right: auto; + } + } + } + } + .rp-comment-body { + position: relative; + background-color: currentColor; + flex-grow: 1; + padding: 0 3px; + margin-right: 6px; + border-radius: 3px; + + &::after { + content: "\25BA"; + position: absolute; + top: 3px; + right: -6px; + font-size: 1.2em; + line-height: 1; + } + } + .rp-comment-content { + margin: 0; + color: @rp-type-darkgrey; + } + + + .rp-comment-metadata { + color: @rp-type-blue; + font-size: @rp-small-font-size; + margin: 0; + } + +.rp-avatar { + border-radius: 3px; + font-weight: @rp-semibold-weight; + font-size: @rp-icon-large-size; + line-height: 1.2; + text-transform: uppercase; + color: #FFF; + width: 1.3em; + height: 1.3em; + text-align: center; +} .rp-icon-delete { display: inline-block;