diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index c9be1a360d..e563207224 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -57,7 +57,8 @@ div.full-size( ng-class="'rp-entry-callout-' + entry.type" ) .rp-entry( - ng-class="'rp-entry-' + entry.type" + ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : '') ]" + ng-style="{'top': top}" ) div(ng-if="entry.type == 'insert' || entry.type == 'delete'") .rp-entry-header @@ -107,7 +108,7 @@ div.full-size( //- a(href, ng-click="cancelReply(entry)") X //- a.btn.btn-sm.btn-primary(href, ng-click="startReply(entry)", ng-if="!entry.replying") Reply .rp-comment-reply - textarea.rp-comment-reply-input( + textarea.rp-comment-input( ng-model="entry.replyContent" ng-keypress="handleCommentReplyKeyPress($event, entry);" placeholder="Hit \"Enter\" to reply" @@ -119,11 +120,26 @@ div.full-size( |  Mark as resolved div(ng-if="entry.type == 'focus-position'") - a.btn.btn-sm(href, ng-if="!commentState.adding", ng-click="startNewComment()") Add comment + a.rp-add-comment-btn( + href + ng-if="!commentState.adding" + ng-click="startNewComment()" + ) + i.fa.fa-comment + |  Add comment div(ng-if="commentState.adding") - textarea(ng-model="commentState.content") - a.btn.btn-sm.btn-primary(href, ng-click="submitNewComment()") Submit - a(href, ng-click="cancelNewComment()") X + .rp-new-comment + textarea.rp-comment-input( + ng-model="commentState.content" + placeholder="Add your comment here" + ) + .rp-entry-actions + a.rp-entry-button(href, ng-click="submitNewComment()") + i.fa.fa-comment + |  Comment + a.rp-entry-button(href, ng-click="cancelNewComment()") + i.fa.fa-times + |  Cancel .ui-layout-east div(ng-if="ui.pdfLayout == 'sideBySide'") diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index aa8e76794b..10daee32f2 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -85,6 +85,19 @@ &-comment { border-left-color: @rp-yellow; } + + &-focus-position { + background-color: transparent; + right: auto; + border-left-width: 0; + + &.rp-entry-adding-comment { + background-color: #FFF; + right: 5px; + border-left-width: 3px; + border-left-color: @rp-yellow; + } + } } .rp-entry-header { @@ -191,14 +204,34 @@ .rp-comment-reply { padding: 0 5px; } - .rp-comment-reply-input { - width: 100%; - font-size: @rp-base-font-size; - padding: 2px 5px; - border-radius: 3px; - border: solid 1px @rp-border-grey; - resize: vertical; - } + + .rp-add-comment-btn { + display: block; + background-color: @rp-highlight-blue; + color: #FFF; + padding: 5px 10px; + border-radius: 3px; + + &:hover, + &:focus { + background-color: darken(@rp-highlight-blue, 5%); + text-decoration: none; + color: #FFF; + } + } + + .rp-new-comment { + padding: 5px; + } + + .rp-comment-input { + width: 100%; + font-size: @rp-base-font-size; + padding: 2px 5px; + border-radius: 3px; + border: solid 1px @rp-border-grey; + resize: vertical; + } .rp-avatar { border-radius: 3px;