From f4f3a4375ba703399d56e86b7c0ff1dcc2d8e3f0 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 22 May 2018 15:40:57 +0100 Subject: [PATCH] Add history toolbar (just scaffolding); show files at point in time. --- services/web/app/views/project/editor.pug | 3 +++ .../project/editor/history-file-tree.pug | 7 ++---- .../web/app/views/project/editor/history.pug | 2 +- .../{diffPanelV2.pug => previewPanelV2.pug} | 22 +++++++++++++++++-- .../project/editor/history/toolbarV2.pug | 4 ++++ .../ide/history/HistoryV2Manager.coffee | 9 +++++--- .../web/public/stylesheets/app/editor.less | 6 ++++- .../stylesheets/app/editor/history-v2.less | 19 +++++++++++++++- .../stylesheets/app/editor/history.less | 15 ++++++++----- .../stylesheets/core/_common-variables.less | 1 + 10 files changed, 69 insertions(+), 19 deletions(-) rename services/web/app/views/project/editor/history/{diffPanelV2.pug => previewPanelV2.pug} (76%) create mode 100644 services/web/app/views/project/editor/history/toolbarV2.pug diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index a9ba703a32..45600c4a8f 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -57,9 +57,12 @@ block content include ./editor/share != moduleIncludes("publish:body", locals) + include ./editor/history/toolbarV2.pug + main#ide-body( ng-cloak, role="main", + ng-class="{ 'ide-history-open' : (ui.view == 'history' && history.isV2) }", 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 fd6dc7c205..1944974ce2 100644 --- a/services/web/app/views/project/editor/history-file-tree.pug +++ b/services/web/app/views/project/editor/history-file-tree.pug @@ -1,11 +1,8 @@ -aside.file-tree.file-tree-history.full-size( +aside.file-tree.full-size( ng-controller="HistoryV2FileTreeController" ng-if="ui.view == 'history' && history.isV2" ) - .toolbar.toolbar-filetree - span Modified files - - .file-tree-inner + .history-file-tree-inner history-file-tree( file-tree="currentFileTree" selected-pathname="history.selection.pathname" diff --git a/services/web/app/views/project/editor/history.pug b/services/web/app/views/project/editor/history.pug index f237aff89e..a7a52d2927 100644 --- a/services/web/app/views/project/editor/history.pug +++ b/services/web/app/views/project/editor/history.pug @@ -44,7 +44,7 @@ div#history(ng-show="ui.view == 'history'") include ./history/entriesListV2 include ./history/diffPanelV1 - include ./history/diffPanelV2 + include ./history/previewPanelV2 script(type="text/ng-template", id="historyRestoreDiffModalTemplate") .modal-header diff --git a/services/web/app/views/project/editor/history/diffPanelV2.pug b/services/web/app/views/project/editor/history/previewPanelV2.pug similarity index 76% rename from services/web/app/views/project/editor/history/diffPanelV2.pug rename to services/web/app/views/project/editor/history/previewPanelV2.pug index 415d587155..704cc2e0a7 100644 --- a/services/web/app/views/project/editor/history/diffPanelV2.pug +++ b/services/web/app/views/project/editor/history/previewPanelV2.pug @@ -1,4 +1,7 @@ -.diff-panel.full-size(ng-if="history.isV2", ng-controller="HistoryV2DiffController") +.diff-panel.full-size( + ng-if="history.isV2 && history.viewMode === HistoryViewModes.COMPARE" + ng-controller="HistoryV2DiffController" +) .diff( ng-if="!!history.diff && !history.diff.loading && !history.diff.error", ng-class="{ 'diff-binary': history.diff.binary }" @@ -47,4 +50,19 @@ i.fa.fa-spin.fa-refresh |   #{translate("loading")}... .error-panel(ng-show="history.diff.error") - .alert.alert-danger #{translate("generic_something_went_wrong")} \ No newline at end of file + .alert.alert-danger #{translate("generic_something_went_wrong")} + +.point-in-time-panel.full-size( + ng-if="history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME" +) + .point-in-time-editor-container( + ng-if="!!history.selectedFile" + ) + .hide-ace-cursor( + 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 diff --git a/services/web/app/views/project/editor/history/toolbarV2.pug b/services/web/app/views/project/editor/history/toolbarV2.pug new file mode 100644 index 0000000000..a66fab3ee3 --- /dev/null +++ b/services/web/app/views/project/editor/history/toolbarV2.pug @@ -0,0 +1,4 @@ +.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 diff --git a/services/web/public/coffee/ide/history/HistoryV2Manager.coffee b/services/web/public/coffee/ide/history/HistoryV2Manager.coffee index 7173cf5b51..aac9c11367 100644 --- a/services/web/public/coffee/ide/history/HistoryV2Manager.coffee +++ b/services/web/public/coffee/ide/history/HistoryV2Manager.coffee @@ -15,7 +15,8 @@ define [ class HistoryManager constructor: (@ide, @$scope) -> @reset() - + @$scope.HistoryViewModes = HistoryViewModes + @$scope.toggleHistory = () => if @$scope.ui.view == "history" @hide() @@ -57,7 +58,8 @@ define [ } } files: [] - diff: null + diff: null # When history.viewMode == HistoryViewModes.COMPARE + selectedFile: null # When history.viewMode == HistoryViewModes.POINT_IN_TIME } restoreFile: (version, pathname) -> @@ -132,7 +134,8 @@ define [ @ide.$http .get(url) .then (response) => - { data } = response + @$scope.history.selectedFile = + text : response.data.diff[0].u .catch () -> reloadDiff: () -> diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 46a35c440f..8b07bd9263 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -73,9 +73,13 @@ #ide-body { .full-size; - top: 40px; + top: @ide-body-top-offset; + &.ide-history-open { + top: @ide-body-top-offset + @editor-toolbar-height; + } } + #editor, #editor-rich-text { .full-size; } diff --git a/services/web/public/stylesheets/app/editor/history-v2.less b/services/web/public/stylesheets/app/editor/history-v2.less index 4741399007..9ff03e55f5 100644 --- a/services/web/public/stylesheets/app/editor/history-v2.less +++ b/services/web/public/stylesheets/app/editor/history-v2.less @@ -1,3 +1,17 @@ +.history-toolbar { + position: absolute; + width: 100%; + top: @ide-body-top-offset; + height: @editor-toolbar-height; + line-height: @editor-toolbar-height; + background-color: @editor-toolbar-bg; + z-index: 1; + color: #FFF; + padding-left: (@line-height-computed / 2); +} + .history-toolbar-time { + font-weight: bold; + } .history-entries { font-size: @history-base-font-size; color: @history-base-color; @@ -64,7 +78,10 @@ } } -.history-file-tree { +.history-file-tree-inner { + .full-size; + overflow-y: auto; + background-color: @file-tree-bg; } .history-file-entity-wrapper { color: #FFF; diff --git a/services/web/public/stylesheets/app/editor/history.less b/services/web/public/stylesheets/app/editor/history.less index 68616f6100..ba4e1e142e 100644 --- a/services/web/public/stylesheets/app/editor/history.less +++ b/services/web/public/stylesheets/app/editor/history.less @@ -40,7 +40,8 @@ } } - .diff-panel { + .diff-panel, + .point-in-time-panel { .full-size; margin-right: @changesListWidth; } @@ -59,11 +60,7 @@ .full-size; top: 40px; } - .hide-ace-cursor { - .ace_active-line, .ace_cursor-layer, .ace_gutter-active-line { - display: none; - } - } + .diff-deleted { padding: @line-height-computed; } @@ -305,6 +302,12 @@ padding-top: 15px; } +.hide-ace-cursor { + .ace_active-line, .ace_cursor-layer, .ace_gutter-active-line { + display: none; + } +} + .editor-dark { #history { aside.change-list { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 3afb428692..543e169b1e 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -888,6 +888,7 @@ @footer-padding : 2em; // Editor header +@ide-body-top-offset : 40px; @toolbar-header-bg-color : transparent; @toolbar-header-shadow : 0 0 2px #ccc; @toolbar-btn-color : @link-color;