From cbd4df6e2908a509f6f024ced7882065c0dae099 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20Alby?= Date: Thu, 18 Feb 2021 12:46:56 +0100 Subject: [PATCH] Merge pull request #3669 from overleaf/ta-file-tree-history-fix [ReactFileTree] Use Angular File Tree for v1 History GitOrigin-RevId: a5deb9e6412f2176f74f74e33149a3a2359f8ff6 --- services/web/app/views/project/editor.pug | 1 + .../project/editor/file-tree-history.pug | 198 ++++++++++++++++++ .../views/project/editor/file-tree-react.pug | 2 +- 3 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 services/web/app/views/project/editor/file-tree-history.pug diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index a3a6ec932e..0034ec8369 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -108,6 +108,7 @@ block content .ui-layout-west if showReactFileTree include ./editor/file-tree-react + include ./editor/file-tree-history else include ./editor/file-tree include ./editor/history/fileTreeV2 diff --git a/services/web/app/views/project/editor/file-tree-history.pug b/services/web/app/views/project/editor/file-tree-history.pug new file mode 100644 index 0000000000..98a9f17f33 --- /dev/null +++ b/services/web/app/views/project/editor/file-tree-history.pug @@ -0,0 +1,198 @@ +aside.editor-sidebar.full-size( + ng-controller="FileTreeController" + ng-class="{ 'multi-selected': multiSelectedCount > 0 }" + ng-show="ui.view == 'history' && !history.isV2" +) + .file-tree + .file-tree-inner( + ng-if="rootFolder", + ng-controller="FileTreeRootFolderController", + ng-class="no-toolbar" + ) + ul.list-unstyled.file-tree-list( + accept=".entity-name" + on-drop-callback="onDrop" + ) + + file-entity( + entity="entity", + ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, 'name']" + ) + + li(ng-show="deletedDocs.length > 0 && ui.view == 'history'") + h3 #{translate("deleted_files")} + li( + ng-class="{ 'selected': entity.selected }", + ng-repeat="entity in deletedDocs | orderBy:'name'", + ng-controller="FileTreeEntityController", + ng-show="ui.view == 'history'" + ) + .entity + .entity-name( + ng-click="select($event)" + ) + //- Just a spacer to align with folders + i.fa.fa-fw.toggle + i.fa.fa-fw.fa-file + + span {{ entity.name }} + + +script(type='text/ng-template', id='entityListItemTemplate') + li( + ng-class="{ 'selected': entity.selected, 'multi-selected': entity.multiSelected }", + ng-controller="FileTreeEntityController" + ) + .entity(ng-if="entity.type != 'folder'") + .entity-name( + ng-click="select($event)" + draggable-helper="draggableHelper" + context-menu + data-target="context-menu-{{ entity.id }}" + context-menu-container="body" + context-menu-disabled="true" + ) + //- Just a spacer to align with folders + i.fa.fa-fw.toggle(ng-if="entity.type != 'folder'") + + i.fa.fa-fw(ng-if="entity.type != 'folder'", ng-class="'fa-' + iconTypeFromName(entity.name)") + i.fa.fa-external-link-square.fa-rotate-180.linked-file-highlight( + ng-if="entity.linkedFileData.provider" + ) + span( + ng-hide="entity.renaming" + ) {{ entity.renamingToName || entity.name }} + + .entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController") + .entity-name( + ng-click="select($event)" + draggable-helper="draggableHelper" + accept=".entity-name" + on-drop-callback="onDrop" + ) + div( + context-menu + data-target="context-menu-{{ entity.id }}" + context-menu-container="body" + context-menu-disabled="true" + ) + i.fa.fa-fw.toggle( + ng-if="entity.type == 'folder'" + ng-class="{'fa-angle-right': !expanded, 'fa-angle-down': expanded}" + ng-click="toggleExpanded()" + ) + + i.fa.fa-fw( + ng-if="entity.type == 'folder'" + ng-class="{\ + 'fa-folder': !expanded, \ + 'fa-folder-open': expanded \ + }" + ng-click="select($event)" + ) + + span( + ng-hide="entity.renaming" + ) {{ entity.renamingToName || entity.name }} + + ul.list-unstyled( + ng-if="entity.type == 'folder' && (depth == null || depth < MAX_DEPTH)" + ng-show="expanded" + accept=".entity-name" + on-drop-callback="onDrop" + ) + file-entity( + entity="child", + ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']" + depth="(depth || 0) + 1" + ) + + .entity-limit-hit( + ng-if="depth === MAX_DEPTH" + ng-show="expanded" + ) + i.fa.fa-fw + span.entity-limit-hit-message + | Some files might be hidden + | + i.fa.fa-question-circle.entity-limit-hit-tooltip-trigger( + tooltip="Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible." + tooltip-append-to-body="true" + aria-hidden="true" + ) + span.sr-only + | Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible. + +script(type='text/ng-template', id='newFolderModalTemplate') + .modal-header + h3 #{translate("new_folder")} + .modal-body + form(novalidate, name="newFolderForm") + input.form-control( + type="text", + placeholder="Folder Name", + required, + ng-model="inputs.name", + on-enter="create()", + select-name-on="open", + valid-file, + name="name" + ) + div.alert.alert-danger.row-spaced-small(ng-show="newFolderForm.name.$error.validFile") + | #{translate('files_cannot_include_invalid_characters')} + div.alert.alert-danger.row-spaced-small(ng-if="error") + div(ng-switch="error") + span(ng-switch-when="already exists") #{translate("file_already_exists")} + span(ng-switch-default) {{error}} + .modal-footer + button.btn.btn-default( + ng-disabled="state.inflight" + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-primary( + ng-disabled="newFolderForm.$invalid || state.inflight" + ng-click="create()" + ) + span(ng-hide="state.inflight") #{translate("create")} + span(ng-show="state.inflight") #{translate("creating")}… + +script(type='text/ng-template', id='duplicateFileModalTemplate') + .modal-header + h3 #{translate("duplicate_file")} + .modal-body + p #{translate("file_already_exists_in_this_location", { fileName: "'{{ fileName }}'" })} + .modal-footer + button.btn.btn-default( + ng-click="cancel()" + ) #{translate("dismiss")} + +include ./new-file-modal + +script(type='text/ng-template', id='deleteEntityModalTemplate') + .modal-header + h3 #{translate("delete")} {{ entity.name }} + .modal-body + p !{translate("sure_you_want_to_delete")} + ul + li(ng-repeat="entity in entities") {{entity.name}} + .modal-footer + button.btn.btn-default( + ng-disabled="state.inflight" + ng-click="cancel()" + ) #{translate("cancel")} + button.btn.btn-danger( + ng-disabled="state.inflight" + ng-click="delete()" + ) + span(ng-hide="state.inflight") #{translate("delete")} + span(ng-show="state.inflight") #{translate("deleting")}… + +script(type='text/ng-template', id='invalidFileNameModalTemplate') + .modal-header + h3 #{translate('invalid_file_name')} + .modal-body + p #{translate('files_cannot_include_invalid_characters')} + .modal-footer + button.btn.btn-default( + ng-click="$close()" + ) #{translate('ok')} diff --git a/services/web/app/views/project/editor/file-tree-react.pug b/services/web/app/views/project/editor/file-tree-react.pug index e12523ebd9..34ba1859dd 100644 --- a/services/web/app/views/project/editor/file-tree-react.pug +++ b/services/web/app/views/project/editor/file-tree-react.pug @@ -1,5 +1,5 @@ aside.editor-sidebar.full-size( - ng-show="ui.view != 'history' || !history.isV2" + ng-show="ui.view != 'history'" vertical-resizable-panes="outline-resizer" vertical-resizable-panes-toggled-externally-on="outline-toggled" vertical-resizable-panes-min-size="32"