From 1e8f2a89a1262d2ca0d2ea25c15543a63b7a2154 Mon Sep 17 00:00:00 2001 From: James Allen Date: Thu, 17 Nov 2016 11:47:20 +0000 Subject: [PATCH] Refactor layout and CSS to be more manageable with overview classes --- .../web/app/views/project/editor/editor.jade | 2 +- .../views/project/editor/review-panel.jade | 122 +++-------- .../stylesheets/app/editor/review-panel.less | 205 +++++++++--------- 3 files changed, 130 insertions(+), 199 deletions(-) diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index 1a365dd131..5d6a0e356b 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -9,7 +9,7 @@ div.full-size( minimum-restore-size-east="300" allow-overflow-on="'center'" ) - .ui-layout-center(ng-controller="ReviewPanelController", ng-class="{'has-review-panel': ui.reviewPanelOpen, 'has-entries': reviewPanel.hasEntries }") + .ui-layout-center(ng-controller="ReviewPanelController", ng-class="{'rp-show-expanded': ui.reviewPanelOpen, 'rp-show-mini': reviewPanel.hasEntries && !ui.reviewPanelOpen }") .loading-panel(ng-show="!editor.sharejs_doc || editor.opening") span(ng-show="editor.open_doc_id") i.fa.fa-spin.fa-refresh diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index 7328bf584f..9e7c4fcbbc 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -2,9 +2,10 @@ .review-panel-toolbar | Track Changes input(type="checkbox", ng-model="reviewPanel.trackNewChanges") - .rp-entry-list( + .rp-entry-list.rp-entry-list-current-file( review-panel-sorted ng-if="reviewPanel.subView === SubViews.CUR_FILE" + ng-class="{ 'rp-entry-list-current-file-expanded': ui.reviewPanelOpen, 'rp-entry-list-current-file-mini': !ui.reviewPanelOpen }" ) .rp-entry-list-inner .rp-entry-wrapper( @@ -36,107 +37,34 @@ on-indicator-click="toggleReviewPanel();" ) - .rp-overview-entry-list( - ng-if="reviewPanel.subView === SubViews.OVERVIEW" + .rp-entry-list.rp-entry-list-overview( + ng-if="reviewPanel.subView === SubViews.OVERVIEW" + ) + .rp-overview-file( + ng-repeat="(doc_id, entries) in reviewPanel.entries" ) - .rp-overview-file( - ng-repeat="(doc_id, entries) in reviewPanel.entries" + .rp-overview-file-header + | {{ doc_id }} + .rp-entry-wrapper( + ng-repeat="(entry_id, entry) in entries" ) - .rp-overview-file-header - | {{ doc_id }} - .rp-entry-wrapper( - ng-repeat="(entry_id, entry) in entries" - ) - .rp-entry-callout( - ng-class="'rp-entry-callout-' + entry.type" + div(ng-if="entry.type === 'insert' || entry.type === 'delete'") + change-entry( + entry="entry" + user="users[entry.metadata.user_id]" + on-reject="rejectChange(entry_id);" + on-accept="acceptChange(entry_id);" + on-indicator-click="toggleReviewPanel();" ) - div(ng-switch="entry.type") - .rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") - i.fa.fa-pencil - .rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") - i.rp-icon-delete - .rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") - i.fa.fa-comment - .rp-entry-indicator( - ng-switch-when="add-comment" - ng-if="!commentState.adding" - ng-click="startNewComment(); toggleReviewPanel();" - ) - i.fa.fa-commenting - - .rp-entry( - ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]" + div(ng-if="entry.type === 'comment'") + comment-entry( + entry="entry" + users="users" + on-resolve="" + on-reply="submitReply(entry);" + on-indicator-click="toggleReviewPanel();" ) - div(ng-if="entry.type == 'insert' || entry.type == 'delete'") - .rp-entry-header - .rp-entry-action-icon(ng-switch="entry.type") - i.fa.fa-pencil(ng-switch-when="insert") - i.rp-icon-delete(ng-switch-when="delete") - - .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-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  - ins.rp-content-highlight {{ entry.content }} - span(ng-switch-when="delete") Delete  - del.rp-content-highlight {{ entry.content }} - .rp-entry-actions - a.rp-entry-button(href, ng-click="rejectChange(entry_id)") - i.fa.fa-times - |  Reject - a.rp-entry-button(href, ng-click="acceptChange(entry_id)") - i.fa.fa-check - |  Accept - div(ng-if="entry.type == 'comment'") - .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%, 40%);") {{ users[comment.user_id].name }} - .rp-comment-reply - textarea.rp-comment-input( - ng-model="entry.replyContent" - ng-keypress="handleCommentReplyKeyPress($event, entry);" - placeholder="Hit \"Enter\" to reply" - ) - .rp-entry-actions - a.rp-entry-button(href) - i.fa.fa-check - |  Mark as resolved - - div(ng-if="entry.type == '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") - .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="cancelNewComment()") - i.fa.fa-times - |  Cancel - a.rp-entry-button(href, ng-click="submitNewComment()") - i.fa.fa-comment - |  Comment .rp-nav a.rp-nav-item( diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 01fff96a77..4e0e5cca44 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -58,8 +58,17 @@ #review-panel { display: none; + .rp-show-expanded & { + display: block; + width: @review-panel-width; + overflow: hidden; + } + .rp-show-mini & { + display: block; + width: @review-off-width; + overflow: hidden; + } position: absolute; - width: @review-off-width; top: 0px; bottom: 0px; right: 0px; @@ -71,6 +80,9 @@ .review-panel-toolbar { display: none; + .rp-show-expanded & { + display: block; + } height: 32px; padding: 6px; border-bottom: 1px solid @rp-border-grey; @@ -84,7 +96,12 @@ } .rp-entry-list { - width: @review-off-width; + .rp-show-expanded & { + width: @review-panel-width; + } + .rp-show-mini & { + width: @review-off-width; + } position: absolute; top: 0; bottom: 0; @@ -95,7 +112,10 @@ } .rp-entry-indicator { - display: block; + display: none; + .rp-show-mini & { + display: block; + } position: absolute; left: 2px; right: 2px; @@ -122,22 +142,48 @@ } .rp-entry { - display: none; - position: absolute; - left: @review-off-width + @rp-entry-arrow-width; - width: @review-panel-width; + .rp-entry-list-current-file & { + position: absolute; + width: @review-panel-width; + } + .rp-entry-list-current-file-mini & { + display: none; + left: @review-off-width + @rp-entry-arrow-width; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, .2); + &::before { + .triangle(left, @rp-entry-arrow-width, 6px, inherit); + top: (@review-off-width / 2) - @rp-entry-arrow-width; + left: -(@rp-entry-ribbon-width + @rp-entry-arrow-width); + content: ''; + } + } + .rp-entry-list-current-file-expanded & { + left: 5px; + right: 5px; + width: auto; + + &-focused { + left: 0px; + right: 10px; + z-index: 1; + } + + &-add-comment { + right: auto; + + &.rp-entry-adding-comment { + right: 5px; + } + } + } + .rp-entry-list-overview & { + margin: 5px; + } + border-left: solid @rp-entry-ribbon-width transparent; border-radius: 3px; background-color: #FFF; transition: top 0.3s, left 0.1s, right 0.1s; - box-shadow: 0 0 10px 5px rgba(0, 0, 0, .2); - - &::before { - .triangle(left, @rp-entry-arrow-width, 6px, inherit); - top: (@review-off-width / 2) - @rp-entry-arrow-width; - left: -(@rp-entry-ribbon-width + @rp-entry-arrow-width); - content: ''; - } &-insert { border-color: @rp-green; @@ -323,21 +369,37 @@ } .rp-entry-callout { - position: absolute; - width: 1px; - border-top: 1px solid grey; - border-right: 1px dashed grey; - &::after { - content: ""; + .rp-entry-list-current-file & { position: absolute; + border-top: 1px solid grey; + border-right: 1px dashed grey; + &::after { + content: ""; + position: absolute; + top: -1px; + left: 3px; + bottom: 0; + border-bottom: 1px solid grey; + } + } + .rp-entry-list-current-file-expanded & { + width: 3px; + &::after { + width: 3px; + } + } + .rp-entry-list-current-file-mini & { width: 1px; - top: -1px; - left: 3px; - bottom: 0; - border-bottom: 1px solid grey; + &::after { + width: 1px; + } } - &-inverted { + .rp-entry-list-overview & { + display: none; + } + + .rp-entry-list-current-file &-inverted { border-top: none; border-bottom: 1px solid grey; &::after { @@ -348,21 +410,21 @@ } } - &-insert { + .rp-entry-list-current-file &-insert { border-color: @rp-green; &::after { border-color: @rp-green; } } - &-delete { + .rp-entry-list-current-file &-delete { border-color: @rp-red; &::after { border-color: @rp-red; } } - &-comment { + .rp-entry-list-current-file &-comment { border-color: @rp-yellow; &::after { border-color: @rp-yellow; @@ -371,7 +433,10 @@ } .rp-nav { - display: none; + display: flex; + .rp-show-mini & { + display: none; + } position: absolute; bottom: 0; width: 100%; @@ -403,22 +468,8 @@ font-size: @rp-base-font-size; } - -.has-entries { - #editor { - right: @review-off-width; - .ace-editor-body { - overflow: visible; - } - } - - #review-panel { - display: block; - } -} - -.has-review-panel { - #editor { +#editor { + .rp-show-expanded & { right: @review-panel-width; left: 0px; width: auto; @@ -429,59 +480,11 @@ } } } - - #review-panel { - display: block; - width: @review-panel-width; - overflow: hidden; + + .rp-show-mini & { + right: @review-off-width; + .ace-editor-body { + overflow: visible; + } } - - .review-panel-toolbar { - display: block; - } - - .rp-entry-list { - width: @review-panel-width; - } - - .rp-entry { - display: block; - left: 5px; - right: 5px; - width: auto; - box-shadow: none; - - &::before { - content: none; - } - - &-focused { - left: 0px; - right: 10px; - z-index: 1; - } - - &-add-comment { - right: auto; - - &.rp-entry-adding-comment { - right: 5px; - } - } - } - - .rp-entry-callout { - width: 3px; - &::after { - width: 3px; - } - } - - .rp-entry-indicator { - display: none; - } - - .rp-nav { - display: flex; - } -} \ No newline at end of file +}