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

Threaded comments.

Browse source
This commit is contained in:
Paulo Reis 2016-11-10 17:19:41 +00:00
parent 8dcbb6ea4f
commit 78e409593b
2 changed files with 89 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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