mirror of
https://github.com/overleaf/overleaf.git
synced 2025-02-17 04:51:33 +00:00
Merge pull request #3669 from overleaf/ta-file-tree-history-fix
[ReactFileTree] Use Angular File Tree for v1 History GitOrigin-RevId: a5deb9e6412f2176f74f74e33149a3a2359f8ff6
This commit is contained in:
Timothée Alby
Copybot
parent
8d3bb116d8
commit
cbd4df6e29
3 changed files with 200 additions and 1 deletions
|
|
@ -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
|
||||
|
|
|
|||
198
services/web/app/views/project/editor/file-tree-history.pug
Normal file
198
services/web/app/views/project/editor/file-tree-history.pug
Normal file
|
|
@ -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')}
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue