github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05: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
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")

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

@ -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

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

@ -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()

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

@ -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;