From 950fc0179ce7726a968d676a5dccf172fb381c95 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 10 Nov 2016 10:19:52 +0000 Subject: [PATCH] Basic support for action icons. --- .../web/app/views/project/editor/editor.jade | 26 +++++----- .../controllers/ReviewPanelController.coffee | 2 +- .../directives/reviewPanelSorted.coffee | 2 +- .../stylesheets/app/editor/review-panel.less | 47 ++++++++++++------- 4 files changed, 46 insertions(+), 31 deletions(-) diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index 176b1518d0..881b57af5c 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -49,28 +49,30 @@ div.full-size( | Track Changes input(type="checkbox", ng-model="reviewPanel.trackNewChanges") .review-panel-scroller - .review-entry-list(review-panel-sorted) - .review-entry-wrapper( + .rp-entry-list(review-panel-sorted) + .rp-entry-wrapper( ng-repeat="(entry_id, entry) in reviewPanel.entries" ) - .review-entry-callout( - ng-class="'review-entry-callout-' + entry.type" + .rp-entry-callout( + ng-class="'rp-entry-callout-' + entry.type" style="top: {{ entry.screenPos.y + 15 }}px; height: {{ top - entry.screenPos.y }}px" ) - .review-entry( - ng-class="'review-entry-' + entry.type" + .rp-entry( + ng-class="'rp-entry-' + entry.type" ng-style="{'top': top}" ) div(ng-if="entry.type == 'insert' || entry.type == 'delete'") - .review-entry-header - .review-entry-header-action-icon + .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") - .review-entry-header-metadata + .rp-entry-metadata {{ users[entry.metadata.user_id].name }} {{ entry.metadata.ts }} - .review-entry-header-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }} - .review-entry-body + .rp-entry-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }} + .rp-entry-body {{ entry.content }} - .review-entry-actions + .rp-entry-actions div(ng-if="entry.type == 'comment'") div(ng-repeat="comment in entry.thread", class="comment-thread__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 d94fe057cd..4420be3bc0 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -13,7 +13,7 @@ define [ content: "" scroller = $element.find(".review-panel-scroller") - list = $element.find(".review-entry-list") + list = $element.find(".rp-entry-list") # Use these to avoid unnecessary updates. Scrolling one # panel causes us to scroll the other panel, but there's no 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 a250c48f47..669a6e9c7a 100644 --- a/services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee @@ -6,7 +6,7 @@ define [ link: (scope, element, attrs) -> layout = () -> entries = [] - for el in element.find(".review-entry") + for el in element.find(".rp-entry") entries.push { el: el scope: angular.element(el).scope() diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index ef99b0bef3..e7ff7c0f5a 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -1,4 +1,5 @@ @rp-base-font-size : 12px; +@rp-icon-large-size : 22px; @rp-bg-blue : #dadfed; @rp-bg-dim-blue : #fafafa; @@ -17,8 +18,11 @@ @rp-type-darkgrey : #3f3f3f; @rp-entry-ribbon-width : 4px; +@rp-semibold-weight : 600; @review-panel-width : 230px; +@rp-scroller-offset : 30px; + #review-panel { position: absolute; width: @review-panel-width; @@ -52,24 +56,22 @@ bottom: 0; left: 0; // TODO: Use a more cross-browser method of hiding the scroll bar - right: -30px; // Hide scroll bar + right: -@rp-scroller-offset; // Hide scroll bar overflow-y: scroll; } -.review-entry-list { +.rp-entry-list { position: relative; width: @review-panel-width;; } -.review-entry { +.rp-entry { position: absolute; - padding-left: @rp-entry-ribbon-width; + left: 5px; + right: 5px; border-left: solid @rp-entry-ribbon-width transparent; border-radius: 3px; - margin: 0 6px; background-color: #FFF; - max-width: 248px; - word-wrap: break-word; &-insert { border-left-color: @rp-green; @@ -80,33 +82,44 @@ } } - .review-entry-header { + .rp-entry-header { display: flex; - - &-action-icon { - + padding: 5px; + } + .rp-entry-action-icon { + font-size: @rp-icon-large-size; } - &-metadata { + .rp-entry-metadata { flex-grow: 1; } - &-avatar { + .rp-entry-avatar { } - } - .review-entry-body { + .rp-entry-body { } - .review-entry-actions { + .rp-entry-actions { } +.rp-icon-delete { + display: inline-block; + line-height: 1; + font-style: normal; + font-size: 0.8em; + text-decoration: line-through; + font-weight: @rp-semibold-weight; + &::before { + content: 'Ab'; + } +} -.review-entry-callout { +.rp-entry-callout { position: absolute; width: 3px; border-top: 1px solid grey;