github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-03-22 02:04:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

Support using both point-in-time and compare modes.

Browse source
This commit is contained in:
Paulo Reis 2018-05-29 16:50:15 +01:00
parent fb33fc6c30
commit 8d2189f843
10 changed files with 174 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/app/views/project/editor.pug
View file

@ -62,7 +62,7 @@ block content
main#ide-body(
ng-cloak,
role="main",
ng-class="{ 'ide-history-open' : (ui.view == 'history' && history.isV2) }",
ng-class="{ 'ide-history-open' : (ui.view == 'history' && history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME) }",
layout="main",
ng-hide="state.loading",
resize-on="layout:chat:resize",

32
services/web/app/views/project/editor/history-file-tree.pug
View file

@ -1,6 +1,6 @@
aside.file-tree.full-size(
ng-controller="HistoryV2FileTreeController"
ng-if="ui.view == 'history' && history.isV2"
ng-if="ui.view == 'history' && history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME"
)
.history-file-tree-inner
history-file-tree(
@ -10,6 +10,32 @@ aside.file-tree.full-size(
is-loading="history.loadingFileTree"
)
aside.file-tree.file-tree-history.full-size(
ng-controller="FileTreeController"
ng-class="{ 'multi-selected': multiSelectedCount > 0 }"
ng-show="ui.view == 'history' && history.isV2 && history.viewMode === HistoryViewModes.COMPARE")
.toolbar.toolbar-filetree
span Modified files
.file-tree-inner
ul.list-unstyled.file-tree-list
li(
ng-repeat="(pathname, doc) in history.selection.docs"
ng-class="{ 'selected': history.selection.pathname == pathname }"
)
.entity
.entity-name.entity-name-history(
ng-click="history.selection.pathname = pathname",
ng-class="{ 'deleted': !!doc.deletedAtV }"
)
i.fa.fa-fw.fa-pencil
span {{ pathname }}
script(type="text/ng-template", id="historyFileTreeTpl")
.history-file-tree
history-file-entity(
@ -17,9 +43,7 @@ script(type="text/ng-template", id="historyFileTreeTpl")
file-entity="fileEntity"
ng-show="!$ctrl.isLoading"
)
.loading(ng-show="$ctrl.isLoading")
i.fa.fa-spin.fa-refresh
|    #{translate("loading")}...
script(type="text/ng-template", id="historyFileEntityTpl")
.history-file-entity-wrapper

108
services/web/app/views/project/editor/history/entriesListV2.pug
View file

@ -1,5 +1,5 @@
aside.change-list(
ng-if="history.isV2"
ng-if="history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME"
ng-controller="HistoryV2ListController"
)
history-entries-list(
@ -12,6 +12,89 @@ aside.change-list(
on-entry-select="handleEntrySelect(selectedEntry)"
)
aside.change-list(
ng-if="history.isV2 && history.viewMode === HistoryViewModes.COMPARE"
ng-controller="HistoryListController"
infinite-scroll="loadMore()"
infinite-scroll-disabled="history.loading || history.atEnd"
infinite-scroll-initialize="ui.view == 'history'"
)
.infinite-scroll-inner
ul.list-unstyled(
ng-class="{\
'hover-state': history.hoveringOverListSelectors\
}"
)
li.change(
ng-repeat="update in history.updates"
ng-class="{\
'first-in-day': update.meta.first_in_day,\
'selected': update.inSelection,\
'selected-to': update.selectedTo,\
'selected-from': update.selectedFrom,\
'hover-selected': update.inHoverSelection,\
'hover-selected-to': update.hoverSelectedTo,\
'hover-selected-from': update.hoverSelectedFrom,\
}"
ng-controller="HistoryListItemController"
)
div.day(ng-show="update.meta.first_in_day") {{ update.meta.end_ts | relativeDate }}
div.selectors
div.range
form
input.selector-from(
type="radio"
name="fromVersion"
ng-model="update.selectedFrom"
ng-value="true"
ng-mouseover="mouseOverSelectedFrom()"
ng-mouseout="mouseOutSelectedFrom()"
ng-show="update.afterSelection || update.inSelection"
)
form
input.selector-to(
type="radio"
name="toVersion"
ng-model="update.selectedTo"
ng-value="true"
ng-mouseover="mouseOverSelectedTo()"
ng-mouseout="mouseOutSelectedTo()"
ng-show="update.beforeSelection || update.inSelection"
)
div.description(ng-click="select()")
div.time {{ update.meta.end_ts | formatDate:'h:mm a' }}
div.action.action-edited(ng-if="history.isV2 && update.pathnames.length > 0")
| Edited
div.docs(ng-repeat="pathname in update.pathnames")
.doc {{ pathname }}
div.docs(ng-repeat="project_op in update.project_ops")
div(ng-if="project_op.rename")
.action Renamed
.doc {{ project_op.rename.pathname }} → {{ project_op.rename.newPathname }}
div(ng-if="project_op.add")
.action Created
.doc {{ project_op.add.pathname }}
div(ng-if="project_op.remove")
.action Deleted
.doc {{ project_op.remove.pathname }}
div.users
div.user(ng-repeat="update_user in update.meta.users")
.color-square(ng-if="update_user != null", ng-style="{'background-color': 'hsl({{ update_user.hue }}, 70%, 50%)'}")
.color-square(ng-if="update_user == null", ng-style="{'background-color': 'hsl(100, 70%, 50%)'}")
.name(ng-if="update_user && update_user.id != user.id" ng-bind="displayName(update_user)")
.name(ng-if="update_user && update_user.id == user.id") You
.name(ng-if="update_user == null") #{translate("anonymous")}
div.user(ng-if="update.meta.users.length == 0")
.color-square(style="background-color: hsl(100, 100%, 50%)")
span #{translate("anonymous")}
.loading(ng-show="history.loading")
i.fa.fa-spin.fa-refresh
|    #{translate("loading")}...
script(type="text/ng-template", id="historyEntriesListTpl")
.history-entries(
infinite-scroll="$ctrl.loadEntries()"
@ -45,29 +128,6 @@ script(type="text/ng-template", id="historyEntryTpl")
time.history-entry-day(ng-if="::$ctrl.entry.meta.first_in_day") {{ ::$ctrl.entry.meta.end_ts | relativeDate }}
//- div.selectors
//- div.range
//- form
//- input.selector-from(
//- type="radio"
//- name="fromVersion"
//- ng-model="$ctrl.entry.selectedFrom"
//- ng-value="true"
//- ng-mouseover="mouseOverSelectedFrom()"
//- ng-mouseout="mouseOutSelectedFrom()"
//- ng-show="$ctrl.entry.afterSelection || $ctrl.entry.inSelection"
//- )
//- form
//- input.selector-to(
//- type="radio"
//- name="toVersion"
//- ng-model="$ctrl.entry.selectedTo"
//- ng-value="true"
//- ng-mouseover="mouseOverSelectedTo()"
//- ng-mouseout="mouseOutSelectedTo()"
//- ng-show="$ctrl.entry.beforeSelection || $ctrl.entry.inSelection"
)
.history-entry-details(ng-click="$ctrl.onSelect({ selectedEntry: $ctrl.entry })")
ol.history-entry-changes
li.history-entry-change(

7
services/web/app/views/project/editor/history/previewPanelV2.pug
View file

@ -19,8 +19,13 @@
}"
)
| in <strong>{{history.diff.pathname}}</strong>
.btn.btn-info.btn-xs(
ng-click="toggleHistoryViewMode();"
)
i.fa
| Enter "Point-in-time" mode
.toolbar-right(ng-if="history.selection.docs[history.selection.pathname].deletedAtV")
button.btn.btn-danger.btn-sm(
button.btn.btn-danger.btn-xs(
ng-click="restoreDeletedFile()"
ng-show="!restoreState.error"
ng-disabled="restoreState.inflight"

12
services/web/app/views/project/editor/history/toolbarV2.pug
View file

@ -1,5 +1,13 @@
.history-toolbar(
ng-if="ui.view == 'history' && history.isV2"
ng-if="ui.view == 'history' && history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME"
)
span(ng-show="history.loadingFileTree")
i.fa.fa-spin.fa-refresh
| &nbsp;&nbsp; #{translate("loading")}...
span(ng-show="!history.loadingFileTree") Browsing project as of&nbsp;
time.history-toolbar-time {{ history.selection.updates[0].meta.end_ts | formatDate:'Do MMM YYYY, h:mm a' }}
time.history-toolbar-time {{ history.selection.updates[0].meta.end_ts | formatDate:'Do MMM YYYY, h:mm a' }}
.history-toolbar-btn(
ng-click="toggleHistoryViewMode();"
)
i.fa
| Enter "Compare" mode

29
services/web/public/coffee/ide/history/HistoryV2Manager.coffee
View file

@ -23,21 +23,31 @@ define [
else
@show()
# @$scope.$watch "history.selection.updates", (updates) =>
# if updates? and updates.length > 0
# @_selectDocFromUpdates()
# @reloadDiff()
@$scope.toggleHistoryViewMode = () =>
if @$scope.history.viewMode == HistoryViewModes.COMPARE
@reset()
@$scope.history.viewMode = HistoryViewModes.POINT_IN_TIME
else
@reset()
@$scope.history.viewMode = HistoryViewModes.COMPARE
# @$scope.$watch "history.selection.pathname", () =>
# @reloadDiff()
@$scope.$watch "history.selection.updates", (updates) =>
if @$scope.history.viewMode == HistoryViewModes.COMPARE
if updates? and updates.length > 0
@_selectDocFromUpdates()
@reloadDiff()
@$scope.$watch "history.selection.pathname", (pathname) =>
if pathname?
@loadFileAtPointInTime()
if @$scope.history.viewMode == HistoryViewModes.POINT_IN_TIME
if pathname?
@loadFileAtPointInTime()
else
@reloadDiff()
show: () ->
@$scope.ui.view = "history"
@reset()
@$scope.history.viewMode = HistoryViewModes.POINT_IN_TIME
hide: () ->
@$scope.ui.view = "editor"
@ -46,7 +56,7 @@ define [
@$scope.history = {
isV2: true
updates: []
viewMode: HistoryViewModes.POINT_IN_TIME
viewMode: null
nextBeforeTimestamp: null
atEnd: false
selection: {
@ -146,7 +156,6 @@ define [
@$scope.history.selectedFile.binary = binary
@$scope.history.selectedFile.text = text
@$scope.history.selectedFile.loading = false
console.log @$scope.history.selectedFile
.catch () ->
reloadDiff: () ->

20
services/web/public/stylesheets/app/editor/history-v2.less
View file

@ -1,17 +1,31 @@
.history-toolbar {
display: flex;
align-items: center;
position: absolute;
width: 100%;
top: @ide-body-top-offset;
height: @editor-toolbar-height;
line-height: @editor-toolbar-height;
background-color: @editor-toolbar-bg;
line-height: 1;
font-size: @font-size-small;
background-color: @history-toolbar-bg-color;
z-index: 1;
color: #FFF;
color: @history-toolbar-color;
padding-left: (@line-height-computed / 2);
}
.history-toolbar when (@is-overleaf = false) {
border-bottom: @toolbar-border-bottom;
}
.history-toolbar-time {
font-weight: bold;
}
.history-toolbar-btn {
.btn;
.btn-info;
.btn-xs;
padding-left: @padding-small-horizontal;
padding-right: @padding-small-horizontal;
margin-left: (@line-height-computed / 2);
}
.history-entries {
font-size: @history-base-font-size;

5
services/web/public/stylesheets/app/editor/history.less
View file

@ -1,4 +1,4 @@
@changesListWidth: 250px;
@changesListWidth: 250px;
@changesListPadding: @line-height-computed / 2;
@selector-padding-vertical: 10px;
@ -50,6 +50,7 @@
.full-size;
.toolbar {
padding: 3px;
height: 32px;
.name {
float: left;
padding: 3px @line-height-computed / 4;
@ -58,7 +59,7 @@
}
.diff-editor {
.full-size;
top: 40px;
top: 32px;
}
.diff-deleted {

6
services/web/public/stylesheets/core/_common-variables.less
View file

@ -978,7 +978,9 @@
// v2 History
@history-base-font-size : @font-size-small;
@history-base-bg : @gray-lightest;
@history-entry-day-bg : @gray-dark;
@history-entry-day-bg : @gray;
@history-entry-selected-bg : @red;
@history-base-color : @gray-light;
@history-highlight-color : @gray;
@history-highlight-color : @gray;
@history-toolbar-bg-color : @toolbar-alt-bg-color;
@history-toolbar-color : @text-color;

2
services/web/public/stylesheets/core/ol-variables.less
View file

@ -273,6 +273,8 @@
@history-entry-selected-bg : @ol-green;
@history-base-color : @ol-blue-gray-2;
@history-highlight-color : @ol-type-color;
@history-toolbar-bg-color : @editor-toolbar-bg;
@history-toolbar-color : #FFF;
// System messages
@sys-msg-background : @ol-blue;