From b443c5d7dc335982136a87f62fbff30a25b3ed31 Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 15 Nov 2016 17:07:06 +0000 Subject: [PATCH] Make mini review panel entries scroll and stack like main panel --- .../web/app/views/project/editor/editor.jade | 8 +-- .../controllers/ReviewPanelController.coffee | 2 +- .../directives/reviewPanelSorted.coffee | 59 +++++++++++++------ .../stylesheets/app/editor/review-panel.less | 26 ++++++-- 4 files changed, 67 insertions(+), 28 deletions(-) diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index ab16e9d32b..11df10a88b 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -51,7 +51,7 @@ div.full-size( | Track Changes input(type="checkbox", ng-model="reviewPanel.trackNewChanges") .review-panel-scroller - .rp-entry-list(review-panel-sorted) + .rp-entry-list(review-panel-sorted, review-panel-sorted-entry-class="ui.reviewPanelOpen ? 'rp-entry' : 'rp-entry-indicator'") .rp-entry-wrapper( ng-repeat="(entry_id, entry) in reviewPanel.entries" ) @@ -60,11 +60,11 @@ div.full-size( ) div(ng-switch="entry.type") - .rp-entry-indicator(ng-switch-when="insert") + .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") + .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") + .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" 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 f6a92a384e..159a4221ee 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -53,7 +53,6 @@ define [ $scope.$watch "ui.reviewPanelOpen", (reviewPanelOpen) -> return if !reviewPanelOpen? if reviewPanelOpen - $scope.$broadcast "review-panel:layout" scroller.on "scroll", scrollAce $scope.onScroll = scrollPanel # Passed into the editor directive for it to call else @@ -61,6 +60,7 @@ define [ $scope.onScroll = null $timeout () -> $scope.$broadcast "review-panel:toggle" + $scope.$broadcast "review-panel:layout" $scope.$watch (() -> Object.keys($scope.reviewPanel.entries).length), (nEntries) -> $scope.reviewPanel.hasEntries = nEntries > 0 diff --git a/services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee b/services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee index 6a78359a2c..3e2116fc13 100644 --- a/services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee @@ -5,7 +5,8 @@ define [ return { link: (scope, element, attrs) -> TOOLBAR_HEIGHT = 28 - ENTRY_PADDING = 12 + BOX_PADDING = 12 + INDICATOR_PADDING = 4 previous_focused_entry_index = 0 @@ -43,31 +44,55 @@ define [ focused_entry.$indicator_el.css(top: focused_entry_top) focused_entry.$callout_el.css(top: focused_entry_top + line_height, height: 0) - previousBottom = focused_entry_top + focused_entry.$box_el.height() + previousBoxBottom = focused_entry_top + focused_entry.$box_el.height() + previousIndicatorBottom = focused_entry_top + focused_entry.$indicator_el.height() for entry in entries_after - height = entry.$box_el.height() original_top = entry.scope.entry.screenPos.y - top = Math.max(original_top, previousBottom + ENTRY_PADDING) - previousBottom = top + height - entry.$box_el.css(top: top, bottom: 'auto') - entry.$indicator_el.css(top: top, bottom: 'auto') + box_height = entry.$box_el.height() + box_top = Math.max(original_top, previousBoxBottom + BOX_PADDING) + indicator_height = entry.$indicator_el.height() + indicator_top = Math.max(original_top, previousIndicatorBottom + INDICATOR_PADDING) + previousBoxBottom = box_top + box_height + previousIndicatorBottom = indicator_top + indicator_height + entry.$box_el.css(top: box_top, bottom: 'auto') + entry.$indicator_el.css(top: indicator_top, bottom: 'auto') + entry.$callout_el.removeClass("rp-entry-callout-inverted") - entry.$callout_el.css(top: original_top + line_height, height: top - original_top) + + if scope.ui.reviewPanelOpen + callout_height = box_top - original_top + else + callout_height = indicator_top - original_top + + entry.$callout_el.css(top: original_top + line_height, height: callout_height) sl_console.log "ENTRY", {entry: entry.scope.entry, top} - previousTop = focused_entry_top + previousBoxTop = focused_entry_top + previousIndicatorTop = focused_entry_top entries_before.reverse() # Work through backwards, starting with the one just above for entry in entries_before - height = entry.$box_el.height() original_top = entry.scope.entry.screenPos.y - original_bottom = original_top + height - bottom = Math.min(original_bottom, previousTop - ENTRY_PADDING) - top = bottom - height - previousTop = top - entry.$box_el.css(top: top) - entry.$indicator_el.css(top: top, bottom: 'auto') + box_height = entry.$box_el.height() + original_box_bottom = original_top + box_height + box_bottom = Math.min(original_box_bottom, previousBoxTop - BOX_PADDING) + box_top = box_bottom - box_height + indicator_height = entry.$indicator_el.height() + original_indicator_bottom = original_top + indicator_height + indicator_bottom = Math.min(original_indicator_bottom, previousIndicatorTop - INDICATOR_PADDING) + indicator_top = indicator_bottom - indicator_height + previousBoxTop = box_top + previousIndicatorTop = indicator_top + entry.$box_el.css(top: box_top, bottom: 'auto') + entry.$indicator_el.css(top: indicator_top, bottom: 'auto') + entry.$callout_el.addClass("rp-entry-callout-inverted") - entry.$callout_el.css(top: top + line_height + 1, height: original_top - top) + + if scope.ui.reviewPanelOpen + callout_top = box_top + line_height + else + callout_top = indicator_top + line_height + + entry.$callout_el.css(top: callout_top + 1, height: original_top - callout_top + line_height) sl_console.log "ENTRY", {entry: entry.scope.entry, top} scope.$watch "reviewPanel.entryGeneration", (value) -> diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index a92f7aa59e..cc0f9254ca 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -22,7 +22,7 @@ @rp-entry-arrow-width : 4px; @rp-semibold-weight : 600; @review-panel-width : 230px; -@review-off-width : 20px; +@review-off-width : 22px; @rp-scroller-offset : 30px; @@ -83,7 +83,7 @@ top: 0; left: 0; right: 0; - z-index: 1; + z-index: 2; } .review-panel-scroller { @@ -103,13 +103,20 @@ .rp-entry-indicator { display: block; position: absolute; - left: 1px; - right: 1px; + left: 2px; + right: 2px; text-align: center; background-color: @rp-highlight-blue; border-radius: 3px; color: #FFF; cursor: pointer; + transition: top 0.3s, left 0.1s, right 0.1s; + + &-focused { + left: 0px; + right: 4px; + z-index: 1; + } } .rp-entry-wrapper { @@ -323,13 +330,13 @@ .rp-entry-callout { position: absolute; - width: 3px; + width: 1px; border-top: 1px solid grey; border-right: 1px dashed grey; &::after { content: ""; position: absolute; - width: 3px; + width: 1px; top: -1px; left: 3px; bottom: 0; @@ -443,6 +450,13 @@ } + + .rp-entry-callout { + width: 3px; + &::after { + width: 3px; + } + } .rp-entry-indicator { display: none;