Bootstrap collapsing behavior in files list. Store state.

This commit is contained in:
Paulo Reis 2017-02-16 15:48:58 +00:00
parent bb7ededaaf
commit a639f13cb6
3 changed files with 43 additions and 23 deletions

View file

@ -92,32 +92,39 @@
)
.rp-overview-file-header(
ng-if="reviewPanel.entries[doc.doc.id] | notEmpty"
ng-click="reviewPanel.overview.docsCollapsedState[doc.doc.id] = ! reviewPanel.overview.docsCollapsedState[doc.doc.id]"
)
| {{ doc.path }}
.rp-entry-wrapper(
ng-repeat="(entry_id, entry) in reviewPanel.entries[doc.doc.id] | orderOverviewEntries"
ng-if="!(entry.type === 'comment' && reviewPanel.commentThreads[entry.thread_id].resolved === true)"
)
div(ng-if="entry.type === 'insert' || entry.type === 'delete'")
change-entry(
entry="entry"
user="users[entry.metadata.user_id]"
on-indicator-click="toggleReviewPanel();"
ng-click="gotoEntry(doc.doc.id, entry)"
permissions="permissions"
)
span.rp-overview-file-header-collapse(
ng-class="{ 'rp-overview-file-header-collapse-on': reviewPanel.overview.docsCollapsedState[doc.doc.id] }"
)
i.fa.fa-angle-down
div(ng-if="entry.type === 'comment'")
comment-entry(
entry="entry"
threads="reviewPanel.commentThreads"
on-reply="submitReply(entry, entry_id);"
on-save-edit="saveEdit(entry.thread_id, comment)"
on-delete="deleteComment(entry.thread_id, comment)"
on-indicator-click="toggleReviewPanel();"
ng-click="gotoEntry(doc.doc.id, entry)"
permissions="permissions"
)
.rp-overview-file-entries(ng-class="{ 'rp-overview-file-entries-collapsed' : reviewPanel.overview.docsCollapsedState[doc.doc.id] }")
.rp-entry-wrapper(
ng-repeat="(entry_id, entry) in reviewPanel.entries[doc.doc.id] | orderOverviewEntries"
ng-if="!(entry.type === 'comment' && reviewPanel.commentThreads[entry.thread_id].resolved === true)"
)
div(ng-if="entry.type === 'insert' || entry.type === 'delete'")
change-entry(
entry="entry"
user="users[entry.metadata.user_id]"
on-indicator-click="toggleReviewPanel();"
ng-click="gotoEntry(doc.doc.id, entry)"
permissions="permissions"
)
div(ng-if="entry.type === 'comment'")
comment-entry(
entry="entry"
threads="reviewPanel.commentThreads"
on-reply="submitReply(entry, entry_id);"
on-save-edit="saveEdit(entry.thread_id, comment)"
on-delete="deleteComment(entry.thread_id, comment)"
on-indicator-click="toggleReviewPanel();"
ng-click="gotoEntry(doc.doc.id, entry)"
permissions="permissions"
)
.rp-nav
a.rp-nav-item(

View file

@ -19,6 +19,7 @@ define [
openSubView: $scope.SubViews.CUR_FILE
overview:
loading: false
docsCollapsedState: {}
dropdown:
loading: false
commentThreads: {}
@ -171,6 +172,8 @@ define [
$http.get "/project/#{$scope.project_id}/ranges"
.success (docs) ->
for doc in docs
if !$scope.reviewPanel.overview.docsCollapsedState[doc.id]?
$scope.reviewPanel.overview.docsCollapsedState[doc.id] = false
if doc.id != $scope.editor.open_doc_id # this is kept up to date in real-time, don't overwrite
rangesTracker = getChangeTracker(doc.id)
rangesTracker.comments = doc.ranges?.comments or []

View file

@ -567,7 +567,17 @@
margin-top: 10px;
font-weight: @rp-semibold-weight;
text-align: center;
cursor: pointer;
}
.rp-overview-file-header-collapse {
display: inline-block;
float: right;
transform: rotateZ(0deg);
transition: transform 0.15s ease
}
.rp-overview-file-header-collapse-on {
transform: rotateZ(180deg);
}
.rp-comment-wrapper {
transition: .35s opacity ease-out .2s;