diff --git a/services/web/app/views/project/editor/file-tree.pug b/services/web/app/views/project/editor/file-tree.pug index ba024b6d25..4cad01c092 100644 --- a/services/web/app/views/project/editor/file-tree.pug +++ b/services/web/app/views/project/editor/file-tree.pug @@ -323,7 +323,7 @@ script(type='text/ng-template', id='entityListItemTemplate') ) #{translate("upload_file")} ul.list-unstyled( - ng-if="entity.type == 'folder'" + ng-if="entity.type == 'folder' && (depth == null || depth < MAX_DEPTH)" ng-show="expanded" droppable="permissions.write" accept=".entity-name" @@ -333,8 +333,25 @@ script(type='text/ng-template', id='entityListItemTemplate') entity="child", permissions="permissions", 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 missing + | + 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")} diff --git a/services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js b/services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js index a8a3329dfa..8403326eaf 100644 --- a/services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js +++ b/services/web/frontend/js/ide/file-tree/controllers/FileTreeEntityController.js @@ -20,6 +20,8 @@ App.controller('FileTreeEntityController', function( $modal, $element ) { + $scope.MAX_DEPTH = 8 + $scope.select = function(e) { if (e.ctrlKey || e.metaKey) { e.stopPropagation() diff --git a/services/web/frontend/js/ide/file-tree/directives/fileEntity.js b/services/web/frontend/js/ide/file-tree/directives/fileEntity.js index b4c22c7555..f6d88195c8 100644 --- a/services/web/frontend/js/ide/file-tree/directives/fileEntity.js +++ b/services/web/frontend/js/ide/file-tree/directives/fileEntity.js @@ -16,7 +16,8 @@ export default App.directive('fileEntity', RecursionHelper => ({ restrict: 'E', scope: { entity: '=', - permissions: '=' + permissions: '=', + depth: '=?' }, templateUrl: 'entityListItemTemplate', compile(element) { diff --git a/services/web/frontend/stylesheets/app/editor/file-tree.less b/services/web/frontend/stylesheets/app/editor/file-tree.less index b0908662a2..4242e4fd4c 100644 --- a/services/web/frontend/stylesheets/app/editor/file-tree.less +++ b/services/web/frontend/stylesheets/app/editor/file-tree.less @@ -194,6 +194,24 @@ display: none; } } + + .entity-limit-hit { + color: @file-tree-item-color; + line-height: 2.05; + margin-left: (@line-height-computed / 2); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .entity-limit-hit-message { + font-style: italic; + } + + i.fa.entity-limit-hit-tooltip-trigger { + margin-left: (@line-height-computed / 4); + cursor: pointer; + } } }