github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Basic support for action icons.

Browse source
This commit is contained in:
Paulo Reis 2016-11-10 10:19:52 +00:00
parent ca178c1a85
commit 950fc0179c
4 changed files with 46 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -49,28 +49,30 @@ div.full-size(
| Track Changes | Track Changes
input(type="checkbox", ng-model="reviewPanel.trackNewChanges") input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
.review-panel-scroller .review-panel-scroller
.review-entry-list(review-panel-sorted) .rp-entry-list(review-panel-sorted)
.review-entry-wrapper( .rp-entry-wrapper(
ng-repeat="(entry_id, entry) in reviewPanel.entries" ng-repeat="(entry_id, entry) in reviewPanel.entries"
) )
.review-entry-callout( .rp-entry-callout(
ng-class="'review-entry-callout-' + entry.type" ng-class="'rp-entry-callout-' + entry.type"
style="top: {{ entry.screenPos.y + 15 }}px; height: {{ top - entry.screenPos.y }}px" style="top: {{ entry.screenPos.y + 15 }}px; height: {{ top - entry.screenPos.y }}px"
) )
.review-entry( .rp-entry(
ng-class="'review-entry-' + entry.type" ng-class="'rp-entry-' + entry.type"
ng-style="{'top': top}" ng-style="{'top': top}"
) )
div(ng-if="entry.type == 'insert' || entry.type == 'delete'") div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
.review-entry-header .rp-entry-header
.review-entry-header-action-icon .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 }} {{ 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 }} .rp-entry-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-body
{{ entry.content }} {{ entry.content }}
.review-entry-actions .rp-entry-actions
div(ng-if="entry.type == 'comment'") div(ng-if="entry.type == 'comment'")
div(ng-repeat="comment in entry.thread", class="comment-thread__comment") div(ng-repeat="comment in entry.thread", class="comment-thread__comment")

2
services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee
View file

@ -13,7 +13,7 @@ define [
content: "" content: ""
scroller = $element.find(".review-panel-scroller") 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 # Use these to avoid unnecessary updates. Scrolling one
# panel causes us to scroll the other panel, but there's no # panel causes us to scroll the other panel, but there's no

2
services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee
View file

@ -6,7 +6,7 @@ define [
link: (scope, element, attrs) -> link: (scope, element, attrs) ->
layout = () -> layout = () ->
entries = [] entries = []
for el in element.find(".review-entry") for el in element.find(".rp-entry")
entries.push { entries.push {
el: el el: el
scope: angular.element(el).scope() scope: angular.element(el).scope()

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

@ -1,4 +1,5 @@
@rp-base-font-size : 12px; @rp-base-font-size : 12px;
@rp-icon-large-size : 22px;
@rp-bg-blue : #dadfed; @rp-bg-blue : #dadfed;
@rp-bg-dim-blue : #fafafa; @rp-bg-dim-blue : #fafafa;
@ -17,8 +18,11 @@
@rp-type-darkgrey : #3f3f3f; @rp-type-darkgrey : #3f3f3f;
@rp-entry-ribbon-width : 4px; @rp-entry-ribbon-width : 4px;
@rp-semibold-weight : 600;
@review-panel-width : 230px; @review-panel-width : 230px;
@rp-scroller-offset : 30px;
#review-panel { #review-panel {
position: absolute; position: absolute;
width: @review-panel-width; width: @review-panel-width;
@ -52,24 +56,22 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
// TODO: Use a more cross-browser method of hiding the scroll bar // 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; overflow-y: scroll;
} }
.review-entry-list { .rp-entry-list {
position: relative; position: relative;
width: @review-panel-width;; width: @review-panel-width;;
} }
.review-entry { .rp-entry {
position: absolute; position: absolute;
padding-left: @rp-entry-ribbon-width; left: 5px;
right: 5px;
border-left: solid @rp-entry-ribbon-width transparent; border-left: solid @rp-entry-ribbon-width transparent;
border-radius: 3px; border-radius: 3px;
margin: 0 6px;
background-color: #FFF; background-color: #FFF;
max-width: 248px;
word-wrap: break-word;
&-insert { &-insert {
border-left-color: @rp-green; border-left-color: @rp-green;
@ -80,33 +82,44 @@
} }
} }
.review-entry-header { .rp-entry-header {
display: flex; display: flex;
padding: 5px;
&-action-icon { }
.rp-entry-action-icon {
font-size: @rp-icon-large-size;
} }
&-metadata { .rp-entry-metadata {
flex-grow: 1; 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; position: absolute;
width: 3px; width: 3px;
border-top: 1px solid grey; border-top: 1px solid grey;