diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index 539cc0a2ce..00666bb618 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -84,14 +84,20 @@ div.full-size( i.fa.fa-times |  Reject div(ng-if="entry.type == 'comment'") - .rp-comment(ng-repeat="comment in entry.thread") + .rp-comment( + ng-repeat="comment in entry.thread" + ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';" + ) + .rp-avatar( + ng-if="!users[comment.user_id].isSelf;" + style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);" + ) {{ users[comment.user_id].avatar_text }} .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 }} + span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 40%);") {{ users[comment.user_id].name }} //- div.small(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 50%)") {{ users[comment.user_id].name }} //- div.small {{ comment.ts }} //- | {{ comment.content }} diff --git a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee index 537cb8fbbd..c224b6f4df 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -12,6 +12,9 @@ define [ adding: false content: "" + # TODO Just for prototyping purposes; remove afterwards. + mockedUserId = '12345abc' + scroller = $element.find(".review-panel-scroller") list = $element.find(".rp-entry-list") @@ -101,6 +104,21 @@ define [ entry.replyContent = "" entry.replying = false $scope.$broadcast "review-panel:layout" + # TODO Just for prototyping purposes; remove afterwards + window.setTimeout((() -> + $scope.$applyAsync(() -> submitMockedReply(entry)) + ), 1000 * 2) + + # TODO Just for prototyping purposes; remove afterwards. + submitMockedReply = (entry) -> + entry.thread.push { + content: 'Lorem ipsum dolor sit amet' + ts: new Date() + user_id: mockedUserId + } + entry.replyContent = "" + entry.replying = false + $scope.$broadcast "review-panel:layout" $scope.cancelReply = (entry) -> entry.replying = false @@ -111,14 +129,27 @@ define [ # when we get an id we don't know. This'll do for client side testing refreshUsers = () -> $scope.users = {} + # TODO Just for prototyping purposes; remove afterwards. + $scope.users[mockedUserId] = { + email: "gerald.butler@gmail.com" + name: "Gerald Butler" + isSelf: false + hue: 70 + avatar_text: "G" + } + for member in $scope.project.members.concat($scope.project.owner) if member._id == window.user_id name = "You" + isSelf = true else name = "#{member.first_name} #{member.last_name}" + isSelf = false + $scope.users[member._id] = { email: member.email name: name + isSelf: isSelf hue: ColorManager.getHueForUserId(member._id) avatar_text: [member.first_name, member.last_name].filter((n) -> n?).map((n) -> n[0]).join "" } diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 7fda9222d0..aa8e76794b 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -149,18 +149,14 @@ align-items: flex-start; padding: 5px; - &:nth-child(even) { - flex-direction: row-reverse; + &.rp-comment-self .rp-comment-body { + margin-left: 0; + margin-right: 9px; - .rp-comment-body { - margin-right: 0; - margin-left: 6px; - - &::after { - content: "\25C4"; - left: -5px; - right: auto; - } + &::after { + content: "\25BA"; + left: auto; + right: -9px; } } } @@ -168,15 +164,15 @@ position: relative; background-color: currentColor; flex-grow: 1; - padding: 0 3px; - margin-right: 6px; + padding: 2px 5px; + margin-left: 9px; border-radius: 3px; &::after { - content: "\25BA"; + content: "\25C4"; position: absolute; top: 3px; - right: -6px; + left: -9px; font-size: 1.2em; line-height: 1; } @@ -186,7 +182,6 @@ color: @rp-type-darkgrey; } - .rp-comment-metadata { color: @rp-type-blue; font-size: @rp-small-font-size;