github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Adjustments in the threaded comments, mocked comments responses.

Browse source
This commit is contained in:
Paulo Reis 2016-11-11 16:10:26 +00:00
parent 6c5c1549b6
commit d04d7f834e
3 changed files with 51 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
services/web/app/views/project/editor/editor.jade
View file

@ -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 }}

31
services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee
View file

@ -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 ""
}

27
services/web/public/stylesheets/app/editor/review-panel.less
View file

@ -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;