From 8d2189f843df67e077610906a3ef1831adecdb59 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 29 May 2018 16:50:15 +0100 Subject: [PATCH] Support using both point-in-time and compare modes. --- services/web/app/views/project/editor.pug | 2 +- .../project/editor/history-file-tree.pug | 32 +++++- .../project/editor/history/entriesListV2.pug | 108 ++++++++++++++---- .../project/editor/history/previewPanelV2.pug | 7 +- .../project/editor/history/toolbarV2.pug | 12 +- .../ide/history/HistoryV2Manager.coffee | 29 +++-- .../stylesheets/app/editor/history-v2.less | 20 +++- .../stylesheets/app/editor/history.less | 5 +- .../stylesheets/core/_common-variables.less | 6 +- .../public/stylesheets/core/ol-variables.less | 2 + 10 files changed, 174 insertions(+), 49 deletions(-) diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index 45600c4a8f..b34b9f690d 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -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", diff --git a/services/web/app/views/project/editor/history-file-tree.pug b/services/web/app/views/project/editor/history-file-tree.pug index 9d9a784678..f7d4afb18d 100644 --- a/services/web/app/views/project/editor/history-file-tree.pug +++ b/services/web/app/views/project/editor/history-file-tree.pug @@ -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 diff --git a/services/web/app/views/project/editor/history/entriesListV2.pug b/services/web/app/views/project/editor/history/entriesListV2.pug index 6a9c75e08f..0256824293 100644 --- a/services/web/app/views/project/editor/history/entriesListV2.pug +++ b/services/web/app/views/project/editor/history/entriesListV2.pug @@ -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( diff --git a/services/web/app/views/project/editor/history/previewPanelV2.pug b/services/web/app/views/project/editor/history/previewPanelV2.pug index 597dc8b0bf..caca523f14 100644 --- a/services/web/app/views/project/editor/history/previewPanelV2.pug +++ b/services/web/app/views/project/editor/history/previewPanelV2.pug @@ -19,8 +19,13 @@ }" ) | in {{history.diff.pathname}} + .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" diff --git a/services/web/app/views/project/editor/history/toolbarV2.pug b/services/web/app/views/project/editor/history/toolbarV2.pug index 58b94dcaf2..2b1b344324 100644 --- a/services/web/app/views/project/editor/history/toolbarV2.pug +++ b/services/web/app/views/project/editor/history/toolbarV2.pug @@ -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 + |    #{translate("loading")}... span(ng-show="!history.loadingFileTree") Browsing project as of  - time.history-toolbar-time {{ history.selection.updates[0].meta.end_ts | formatDate:'Do MMM YYYY, h:mm a' }} \ No newline at end of file + 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 \ No newline at end of file diff --git a/services/web/public/coffee/ide/history/HistoryV2Manager.coffee b/services/web/public/coffee/ide/history/HistoryV2Manager.coffee index 1bc533d665..7c8f476e39 100644 --- a/services/web/public/coffee/ide/history/HistoryV2Manager.coffee +++ b/services/web/public/coffee/ide/history/HistoryV2Manager.coffee @@ -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: () -> diff --git a/services/web/public/stylesheets/app/editor/history-v2.less b/services/web/public/stylesheets/app/editor/history-v2.less index 478f939d71..f3d92a2838 100644 --- a/services/web/public/stylesheets/app/editor/history-v2.less +++ b/services/web/public/stylesheets/app/editor/history-v2.less @@ -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; diff --git a/services/web/public/stylesheets/app/editor/history.less b/services/web/public/stylesheets/app/editor/history.less index ba4e1e142e..a8d876bc52 100644 --- a/services/web/public/stylesheets/app/editor/history.less +++ b/services/web/public/stylesheets/app/editor/history.less @@ -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 { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 543e169b1e..cdee262789 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -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; \ No newline at end of file +@history-highlight-color : @gray; +@history-toolbar-bg-color : @toolbar-alt-bg-color; +@history-toolbar-color : @text-color; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index cd5b035fc4..61e7a93498 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -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;