From fb33fc6c30ef295255d5e58d08e870356584ad9f Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 23 May 2018 12:14:27 +0100 Subject: [PATCH] Add loading indicators; handle binary files; keep selected file across points in time. --- .../project/editor/history-file-tree.pug | 5 ++++ .../project/editor/history/entriesListV2.pug | 3 +- .../project/editor/history/previewPanelV2.pug | 12 ++++++-- .../project/editor/history/toolbarV2.pug | 5 ++-- .../ide/history/HistoryV2Manager.coffee | 15 ++++++++-- .../history/components/historyFileTree.coffee | 1 + .../HistoryV2FileTreeController.coffee | 29 ++++++++++++------- .../stylesheets/app/editor/history-v2.less | 8 +++++ 8 files changed, 61 insertions(+), 17 deletions(-) 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 1944974ce2..9d9a784678 100644 --- a/services/web/app/views/project/editor/history-file-tree.pug +++ b/services/web/app/views/project/editor/history-file-tree.pug @@ -7,6 +7,7 @@ aside.file-tree.full-size( file-tree="currentFileTree" selected-pathname="history.selection.pathname" on-selected-file-change="handleFileSelection(file)" + is-loading="history.loadingFileTree" ) script(type="text/ng-template", id="historyFileTreeTpl") @@ -14,7 +15,11 @@ script(type="text/ng-template", id="historyFileTreeTpl") history-file-entity( ng-repeat="fileEntity in $ctrl.fileTree" 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 2414deb5eb..6a9c75e08f 100644 --- a/services/web/app/views/project/editor/history/entriesListV2.pug +++ b/services/web/app/views/project/editor/history/entriesListV2.pug @@ -24,8 +24,9 @@ script(type="text/ng-template", id="historyEntriesListTpl") entry="entry" current-user="$ctrl.currentUser" on-select="$ctrl.onEntrySelect({ selectedEntry: selectedEntry })" + ng-show="!$ctrl.isLoading" ) - .loading(ng-show="history.loading") + .loading(ng-show="$ctrl.isLoading") i.fa.fa-spin.fa-refresh |    #{translate("loading")}... diff --git a/services/web/app/views/project/editor/history/previewPanelV2.pug b/services/web/app/views/project/editor/history/previewPanelV2.pug index 704cc2e0a7..597dc8b0bf 100644 --- a/services/web/app/views/project/editor/history/previewPanelV2.pug +++ b/services/web/app/views/project/editor/history/previewPanelV2.pug @@ -56,13 +56,21 @@ ng-if="history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME" ) .point-in-time-editor-container( - ng-if="!!history.selectedFile" + ng-if="!!history.selectedFile && !history.selectedFile.loading && !history.selectedFile.error" ) .hide-ace-cursor( + ng-if="!history.selectedFile.binary" ace-editor="history-pointintime", theme="settings.theme", font-size="settings.fontSize", text="history.selectedFile.text", read-only="true", resize-on="layout:main:resize", - ) \ No newline at end of file + ) + .alert.alert-info(ng-if="history.selectedFile.binary") + | We're still working on showing image and binary changes, sorry. Stay tuned! + .loading-panel(ng-show="history.selectedFile.loading") + i.fa.fa-spin.fa-refresh + |   #{translate("loading")}... + .error-panel(ng-show="history.selectedFile.error") + .alert.alert-danger #{translate("generic_something_went_wrong")} diff --git a/services/web/app/views/project/editor/history/toolbarV2.pug b/services/web/app/views/project/editor/history/toolbarV2.pug index a66fab3ee3..58b94dcaf2 100644 --- a/services/web/app/views/project/editor/history/toolbarV2.pug +++ b/services/web/app/views/project/editor/history/toolbarV2.pug @@ -1,4 +1,5 @@ .history-toolbar( ng-if="ui.view == 'history' && history.isV2" -) 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 +) + 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 diff --git a/services/web/public/coffee/ide/history/HistoryV2Manager.coffee b/services/web/public/coffee/ide/history/HistoryV2Manager.coffee index aac9c11367..1bc533d665 100644 --- a/services/web/public/coffee/ide/history/HistoryV2Manager.coffee +++ b/services/web/public/coffee/ide/history/HistoryV2Manager.coffee @@ -30,6 +30,7 @@ define [ # @$scope.$watch "history.selection.pathname", () => # @reloadDiff() + @$scope.$watch "history.selection.pathname", (pathname) => if pathname? @loadFileAtPointInTime() @@ -75,10 +76,14 @@ define [ url = "/project/#{@$scope.project_id}/filetree/diff" query = [ "from=#{toV}", "to=#{toV}" ] url += "?" + query.join("&") + @$scope.history.loadingFileTree = true + @$scope.history.selectedFile = null + @$scope.history.selection.pathname = null @ide.$http .get(url) .then (response) => @$scope.history.files = response.data.diff + @$scope.history.loadingFileTree = false MAX_RECENT_UPDATES_TO_SELECT: 5 autoSelectRecentUpdates: () -> @@ -115,6 +120,7 @@ define [ if @$scope.history.nextBeforeTimestamp? url += "&before=#{@$scope.history.nextBeforeTimestamp}" @$scope.history.loading = true + @$scope.history.loadingFileTree = true @ide.$http .get(url) .then (response) => @@ -131,11 +137,16 @@ define [ url = "/project/#{@$scope.project_id}/diff" query = ["pathname=#{encodeURIComponent(pathname)}", "from=#{toV}", "to=#{toV}"] url += "?" + query.join("&") + @$scope.history.selectedFile = + loading: true @ide.$http .get(url) .then (response) => - @$scope.history.selectedFile = - text : response.data.diff[0].u + {text, binary} = @_parseDiff(response.data.diff) + @$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/coffee/ide/history/components/historyFileTree.coffee b/services/web/public/coffee/ide/history/components/historyFileTree.coffee index e8daf13af9..7e3c636470 100644 --- a/services/web/public/coffee/ide/history/components/historyFileTree.coffee +++ b/services/web/public/coffee/ide/history/components/historyFileTree.coffee @@ -12,6 +12,7 @@ define [ fileTree: "<" selectedPathname: "<" onSelectedFileChange: "&" + isLoading: "<" controller: historyFileTreeController templateUrl: "historyFileTreeTpl" } \ No newline at end of file diff --git a/services/web/public/coffee/ide/history/controllers/HistoryV2FileTreeController.coffee b/services/web/public/coffee/ide/history/controllers/HistoryV2FileTreeController.coffee index fc9caaa6e4..47f5c07c4c 100644 --- a/services/web/public/coffee/ide/history/controllers/HistoryV2FileTreeController.coffee +++ b/services/web/public/coffee/ide/history/controllers/HistoryV2FileTreeController.coffee @@ -3,24 +3,33 @@ define [ ], (App) -> App.controller "HistoryV2FileTreeController", ["$scope", "ide", "_", ($scope, ide, _) -> + _previouslySelectedPathname = null $scope.currentFileTree = [] - _selectedDefaultPathname = (files) -> - # TODO: Improve heuristic to determine the default pathname to show. - if files? and files.length > 0 - mainFile = files.find (file) -> /main\.tex$/.test file.pathname + + _pathnameExistsInFiles = (pathname, files) -> + _.any files, (file) -> file.pathname == pathname + + _getSelectedDefaultPathname = (files) -> + selectedPathname = null + if _previouslySelectedPathname? and _pathnameExistsInFiles _previouslySelectedPathname, files + selectedPathname = _previouslySelectedPathname + else + mainFile = _.find files, (file) -> /main\.tex$/.test file.pathname if mainFile? - mainFile.pathname + selectedPathname = _previouslySelectedPathname = mainFile.pathname else - files[0].pathname + selectedPathname = _previouslySelectedPathname = files[0].pathname + return selectedPathname $scope.handleFileSelection = (file) -> - $scope.history.selection.pathname = file.pathname + $scope.history.selection.pathname = _previouslySelectedPathname = file.pathname $scope.$watch 'history.files', (files) -> - $scope.currentFileTree = _.reduce files, reducePathsToTree, [] - $scope.history.selection.pathname = _selectedDefaultPathname(files) + if files? and files.length > 0 + $scope.currentFileTree = _.reduce files, _reducePathsToTree, [] + $scope.history.selection.pathname = _getSelectedDefaultPathname(files) - reducePathsToTree = (currentFileTree, fileObject) -> + _reducePathsToTree = (currentFileTree, fileObject) -> filePathParts = fileObject.pathname.split "/" currentFileTreeLocation = currentFileTree for pathPart, index in filePathParts diff --git a/services/web/public/stylesheets/app/editor/history-v2.less b/services/web/public/stylesheets/app/editor/history-v2.less index 9ff03e55f5..478f939d71 100644 --- a/services/web/public/stylesheets/app/editor/history-v2.less +++ b/services/web/public/stylesheets/app/editor/history-v2.less @@ -12,6 +12,7 @@ .history-toolbar-time { font-weight: bold; } + .history-entries { font-size: @history-base-font-size; color: @history-base-color; @@ -82,6 +83,13 @@ .full-size; overflow-y: auto; background-color: @file-tree-bg; + + .loading { + color: #FFF; + font-size: @history-base-font-size; + text-align: center; + font-family: @font-family-serif; + } } .history-file-entity-wrapper { color: #FFF;