mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-11 23:25:02 +00:00
Refactor layout and CSS to be more manageable with overview classes
This commit is contained in:
James Allen
parent
f170fd4b83
commit
1e8f2a89a1
3 changed files with 130 additions and 199 deletions
|
|
@ -9,7 +9,7 @@ div.full-size(
|
|||
minimum-restore-size-east="300"
|
||||
allow-overflow-on="'center'"
|
||||
)
|
||||
.ui-layout-center(ng-controller="ReviewPanelController", ng-class="{'has-review-panel': ui.reviewPanelOpen, 'has-entries': reviewPanel.hasEntries }")
|
||||
.ui-layout-center(ng-controller="ReviewPanelController", ng-class="{'rp-show-expanded': ui.reviewPanelOpen, 'rp-show-mini': reviewPanel.hasEntries && !ui.reviewPanelOpen }")
|
||||
.loading-panel(ng-show="!editor.sharejs_doc || editor.opening")
|
||||
span(ng-show="editor.open_doc_id")
|
||||
i.fa.fa-spin.fa-refresh
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
.review-panel-toolbar
|
||||
| Track Changes
|
||||
input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
|
||||
.rp-entry-list(
|
||||
.rp-entry-list.rp-entry-list-current-file(
|
||||
review-panel-sorted
|
||||
ng-if="reviewPanel.subView === SubViews.CUR_FILE"
|
||||
ng-class="{ 'rp-entry-list-current-file-expanded': ui.reviewPanelOpen, 'rp-entry-list-current-file-mini': !ui.reviewPanelOpen }"
|
||||
)
|
||||
.rp-entry-list-inner
|
||||
.rp-entry-wrapper(
|
||||
|
|
@ -36,107 +37,34 @@
|
|||
on-indicator-click="toggleReviewPanel();"
|
||||
)
|
||||
|
||||
.rp-overview-entry-list(
|
||||
ng-if="reviewPanel.subView === SubViews.OVERVIEW"
|
||||
.rp-entry-list.rp-entry-list-overview(
|
||||
ng-if="reviewPanel.subView === SubViews.OVERVIEW"
|
||||
)
|
||||
.rp-overview-file(
|
||||
ng-repeat="(doc_id, entries) in reviewPanel.entries"
|
||||
)
|
||||
.rp-overview-file(
|
||||
ng-repeat="(doc_id, entries) in reviewPanel.entries"
|
||||
.rp-overview-file-header
|
||||
| {{ doc_id }}
|
||||
.rp-entry-wrapper(
|
||||
ng-repeat="(entry_id, entry) in entries"
|
||||
)
|
||||
.rp-overview-file-header
|
||||
| {{ doc_id }}
|
||||
.rp-entry-wrapper(
|
||||
ng-repeat="(entry_id, entry) in entries"
|
||||
)
|
||||
.rp-entry-callout(
|
||||
ng-class="'rp-entry-callout-' + entry.type"
|
||||
div(ng-if="entry.type === 'insert' || entry.type === 'delete'")
|
||||
change-entry(
|
||||
entry="entry"
|
||||
user="users[entry.metadata.user_id]"
|
||||
on-reject="rejectChange(entry_id);"
|
||||
on-accept="acceptChange(entry_id);"
|
||||
on-indicator-click="toggleReviewPanel();"
|
||||
)
|
||||
|
||||
div(ng-switch="entry.type")
|
||||
.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", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
|
||||
i.rp-icon-delete
|
||||
.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"
|
||||
ng-if="!commentState.adding"
|
||||
ng-click="startNewComment(); toggleReviewPanel();"
|
||||
)
|
||||
i.fa.fa-commenting
|
||||
|
||||
.rp-entry(
|
||||
ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]"
|
||||
div(ng-if="entry.type === 'comment'")
|
||||
comment-entry(
|
||||
entry="entry"
|
||||
users="users"
|
||||
on-resolve=""
|
||||
on-reply="submitReply(entry);"
|
||||
on-indicator-click="toggleReviewPanel();"
|
||||
)
|
||||
div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
|
||||
.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")
|
||||
|
||||
.rp-entry-metadata
|
||||
p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }}
|
||||
p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
|
||||
.rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
|
||||
.rp-entry-body(ng-switch="entry.type")
|
||||
span(ng-switch-when="insert") Added
|
||||
ins.rp-content-highlight {{ entry.content }}
|
||||
span(ng-switch-when="delete") Delete
|
||||
del.rp-content-highlight {{ entry.content }}
|
||||
.rp-entry-actions
|
||||
a.rp-entry-button(href, ng-click="rejectChange(entry_id)")
|
||||
i.fa.fa-times
|
||||
| Reject
|
||||
a.rp-entry-button(href, ng-click="acceptChange(entry_id)")
|
||||
i.fa.fa-check
|
||||
| Accept
|
||||
div(ng-if="entry.type == 'comment'")
|
||||
.rp-comment(
|
||||
ng-repeat="comment in entry.thread"
|
||||
ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';"
|
||||
)
|
||||
.rp-avatar(
|
||||
ng-if="!users[comment.user_id].isSelf;"
|
||||
style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);"
|
||||
) {{ users[comment.user_id].avatar_text }}
|
||||
.rp-comment-body(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 90%);")
|
||||
p.rp-comment-content {{ comment.content }}
|
||||
p.rp-comment-metadata
|
||||
| {{ comment.ts | date : 'MMM d, y h:mm a' }}
|
||||
| •
|
||||
span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 40%);") {{ users[comment.user_id].name }}
|
||||
.rp-comment-reply
|
||||
textarea.rp-comment-input(
|
||||
ng-model="entry.replyContent"
|
||||
ng-keypress="handleCommentReplyKeyPress($event, entry);"
|
||||
placeholder="Hit \"Enter\" to reply"
|
||||
)
|
||||
.rp-entry-actions
|
||||
a.rp-entry-button(href)
|
||||
i.fa.fa-check
|
||||
| Mark as resolved
|
||||
|
||||
div(ng-if="entry.type == 'add-comment'")
|
||||
a.rp-add-comment-btn(
|
||||
href
|
||||
ng-if="!commentState.adding"
|
||||
ng-click="startNewComment()"
|
||||
)
|
||||
i.fa.fa-comment
|
||||
| Add comment
|
||||
div(ng-if="commentState.adding")
|
||||
.rp-new-comment
|
||||
textarea.rp-comment-input(
|
||||
ng-model="commentState.content"
|
||||
placeholder="Add your comment here"
|
||||
)
|
||||
.rp-entry-actions
|
||||
a.rp-entry-button(href, ng-click="cancelNewComment()")
|
||||
i.fa.fa-times
|
||||
| Cancel
|
||||
a.rp-entry-button(href, ng-click="submitNewComment()")
|
||||
i.fa.fa-comment
|
||||
| Comment
|
||||
|
||||
.rp-nav
|
||||
a.rp-nav-item(
|
||||
|
|
|
|||
|
|
@ -58,8 +58,17 @@
|
|||
|
||||
#review-panel {
|
||||
display: none;
|
||||
.rp-show-expanded & {
|
||||
display: block;
|
||||
width: @review-panel-width;
|
||||
overflow: hidden;
|
||||
}
|
||||
.rp-show-mini & {
|
||||
display: block;
|
||||
width: @review-off-width;
|
||||
overflow: hidden;
|
||||
}
|
||||
position: absolute;
|
||||
width: @review-off-width;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
|
|
@ -71,6 +80,9 @@
|
|||
|
||||
.review-panel-toolbar {
|
||||
display: none;
|
||||
.rp-show-expanded & {
|
||||
display: block;
|
||||
}
|
||||
height: 32px;
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid @rp-border-grey;
|
||||
|
|
@ -84,7 +96,12 @@
|
|||
}
|
||||
|
||||
.rp-entry-list {
|
||||
width: @review-off-width;
|
||||
.rp-show-expanded & {
|
||||
width: @review-panel-width;
|
||||
}
|
||||
.rp-show-mini & {
|
||||
width: @review-off-width;
|
||||
}
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -95,7 +112,10 @@
|
|||
}
|
||||
|
||||
.rp-entry-indicator {
|
||||
display: block;
|
||||
display: none;
|
||||
.rp-show-mini & {
|
||||
display: block;
|
||||
}
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
|
|
@ -122,22 +142,48 @@
|
|||
}
|
||||
|
||||
.rp-entry {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: @review-off-width + @rp-entry-arrow-width;
|
||||
width: @review-panel-width;
|
||||
.rp-entry-list-current-file & {
|
||||
position: absolute;
|
||||
width: @review-panel-width;
|
||||
}
|
||||
.rp-entry-list-current-file-mini & {
|
||||
display: none;
|
||||
left: @review-off-width + @rp-entry-arrow-width;
|
||||
box-shadow: 0 0 10px 5px rgba(0, 0, 0, .2);
|
||||
&::before {
|
||||
.triangle(left, @rp-entry-arrow-width, 6px, inherit);
|
||||
top: (@review-off-width / 2) - @rp-entry-arrow-width;
|
||||
left: -(@rp-entry-ribbon-width + @rp-entry-arrow-width);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
.rp-entry-list-current-file-expanded & {
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
width: auto;
|
||||
|
||||
&-focused {
|
||||
left: 0px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-add-comment {
|
||||
right: auto;
|
||||
|
||||
&.rp-entry-adding-comment {
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rp-entry-list-overview & {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
border-left: solid @rp-entry-ribbon-width transparent;
|
||||
border-radius: 3px;
|
||||
background-color: #FFF;
|
||||
transition: top 0.3s, left 0.1s, right 0.1s;
|
||||
box-shadow: 0 0 10px 5px rgba(0, 0, 0, .2);
|
||||
|
||||
&::before {
|
||||
.triangle(left, @rp-entry-arrow-width, 6px, inherit);
|
||||
top: (@review-off-width / 2) - @rp-entry-arrow-width;
|
||||
left: -(@rp-entry-ribbon-width + @rp-entry-arrow-width);
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-insert {
|
||||
border-color: @rp-green;
|
||||
|
|
@ -323,21 +369,37 @@
|
|||
}
|
||||
|
||||
.rp-entry-callout {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
border-top: 1px solid grey;
|
||||
border-right: 1px dashed grey;
|
||||
&::after {
|
||||
content: "";
|
||||
.rp-entry-list-current-file & {
|
||||
position: absolute;
|
||||
border-top: 1px solid grey;
|
||||
border-right: 1px dashed grey;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 3px;
|
||||
bottom: 0;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
}
|
||||
.rp-entry-list-current-file-expanded & {
|
||||
width: 3px;
|
||||
&::after {
|
||||
width: 3px;
|
||||
}
|
||||
}
|
||||
.rp-entry-list-current-file-mini & {
|
||||
width: 1px;
|
||||
top: -1px;
|
||||
left: 3px;
|
||||
bottom: 0;
|
||||
border-bottom: 1px solid grey;
|
||||
&::after {
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&-inverted {
|
||||
.rp-entry-list-overview & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rp-entry-list-current-file &-inverted {
|
||||
border-top: none;
|
||||
border-bottom: 1px solid grey;
|
||||
&::after {
|
||||
|
|
@ -348,21 +410,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-insert {
|
||||
.rp-entry-list-current-file &-insert {
|
||||
border-color: @rp-green;
|
||||
&::after {
|
||||
border-color: @rp-green;
|
||||
}
|
||||
}
|
||||
|
||||
&-delete {
|
||||
.rp-entry-list-current-file &-delete {
|
||||
border-color: @rp-red;
|
||||
&::after {
|
||||
border-color: @rp-red;
|
||||
}
|
||||
}
|
||||
|
||||
&-comment {
|
||||
.rp-entry-list-current-file &-comment {
|
||||
border-color: @rp-yellow;
|
||||
&::after {
|
||||
border-color: @rp-yellow;
|
||||
|
|
@ -371,7 +433,10 @@
|
|||
}
|
||||
|
||||
.rp-nav {
|
||||
display: none;
|
||||
display: flex;
|
||||
.rp-show-mini & {
|
||||
display: none;
|
||||
}
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
|
@ -403,22 +468,8 @@
|
|||
font-size: @rp-base-font-size;
|
||||
}
|
||||
|
||||
|
||||
.has-entries {
|
||||
#editor {
|
||||
right: @review-off-width;
|
||||
.ace-editor-body {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
#review-panel {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.has-review-panel {
|
||||
#editor {
|
||||
#editor {
|
||||
.rp-show-expanded & {
|
||||
right: @review-panel-width;
|
||||
left: 0px;
|
||||
width: auto;
|
||||
|
|
@ -429,59 +480,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#review-panel {
|
||||
display: block;
|
||||
width: @review-panel-width;
|
||||
overflow: hidden;
|
||||
|
||||
.rp-show-mini & {
|
||||
right: @review-off-width;
|
||||
.ace-editor-body {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.review-panel-toolbar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rp-entry-list {
|
||||
width: @review-panel-width;
|
||||
}
|
||||
|
||||
.rp-entry {
|
||||
display: block;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
width: auto;
|
||||
box-shadow: none;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&-focused {
|
||||
left: 0px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-add-comment {
|
||||
right: auto;
|
||||
|
||||
&.rp-entry-adding-comment {
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rp-entry-callout {
|
||||
width: 3px;
|
||||
&::after {
|
||||
width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.rp-entry-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rp-nav {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue