mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Basic support for action icons.
This commit is contained in:
Paulo Reis
parent
ca178c1a85
commit
950fc0179c
4 changed files with 46 additions and 31 deletions
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.review-entry-body {
|
||||
.rp-entry-avatar {
|
||||
|
||||
}
|
||||
|
||||
.review-entry-actions {
|
||||
.rp-entry-body {
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue