Merge pull request #2416 from overleaf/ta-sk-multi-select-fix

Better UI feedback for multi-select, and "no file selected" case

GitOrigin-RevId: f415a19a0dc93a18a7f00e5854e2181c51f826b1

services/web/app/views/project/editor/editor.pug

@@ -39,10 +39,16 @@ div.full-size(
 
 		!= moduleIncludes('editor:main', locals)
 
+		.multi-selection-ongoing(
+			ng-show="multiSelectedCount > 0"
+		)
+			.multi-selection-message
+				h4 {{ multiSelectedCount }} #{translate('files_selected')}
+
 		#editor(
 			ace-editor="editor",
 			ng-if="!editor.showRichText",
-			ng-show="!!editor.sharejs_doc && !editor.opening",
+			ng-show="!!editor.sharejs_doc && !editor.opening && multiSelectedCount === 0",
 			theme="settings.editorTheme",
 			keybindings="settings.mode",
 			font-size="settings.fontSize",
@@ -106,3 +112,26 @@ div.full-size(
 	ng-show="ui.view == 'pdf'"
 )
 	include ./pdf
+
+// fallback, shown when no file/view is selected
+div.full-size.no-file-selection(
+	ng-if="!ui.view"
+)
+	.no-file-selection-message(
+		ng-if="rootFolder.children && rootFolder.children.length > 0"
+	)
+		h3
+			| #{translate('no_selection_select_file')}
+	.no-file-selection-message(
+		ng-if="rootFolder.children && rootFolder.children.length === 0"
+	)
+		h3
+			| #{translate('no_selection_create_new_file')}
+		div(
+			ng-controller="FileTreeController"
+		)
+			button.btn.btn-primary(
+				ng-click="openNewDocModal()"
+			)
+				| #{translate('new_file')}
+

services/web/frontend/js/ide/editor/EditorManager.js

@@ -50,12 +50,14 @@ define([
         this.$scope.$on('entity:deleted', (event, entity) => {
           if (this.$scope.editor.open_doc_id === entity.id) {
             if (!this.$scope.project.rootDoc_id) {
+              this.$scope.ui.view = null
               return
             }
             const doc = this.ide.fileTreeManager.findEntityById(
               this.$scope.project.rootDoc_id
             )
             if (doc == null) {
+              this.$scope.ui.view = null
               return
             }
             return this.openDoc(doc)

services/web/frontend/js/ide/file-tree/FileTreeManager.js

@@ -213,7 +213,11 @@ define([
     }
 
     multiSelectSelectedEntity() {
-      return __guard__(this.findSelectedEntity(), x => (x.multiSelected = true))
+      const entity = this.findSelectedEntity()
+      if (entity) {
+        entity.multiSelected = true
+      }
+      this.$scope.multiSelectedCount = this.multiSelectedCount()
     }
 
     existsInFolder(folder_id, name) {
@@ -727,6 +731,10 @@ define([
         }
       }
 
+      if (entity.type !== 'folder' && entity.selected) {
+        this.$scope.ui.view = null
+      }
+
       if (entity.type === 'doc' && options.moveToDeleted) {
         entity.deleted = true
         return this.$scope.deletedDocs.push(entity)

services/web/frontend/stylesheets/app/editor.less

@@ -67,6 +67,7 @@
     z-index: 20;
   }
 }
+
 #try-reconnect-now-button {
   margin-left: 20px;
 }
@@ -76,6 +77,7 @@
 }
 
 #ide-body {
+  background-color: @pdf-bg;
   .full-size;
   top: @ide-body-top-offset;
   &.ide-history-open {
@@ -93,6 +95,26 @@
   top: @editor-toolbar-height;
 }
 
+.no-file-selection,
+.multi-selection-ongoing {
+  &::before {
+    .full-size;
+    left: 20px;
+    content: '';
+    background: url(/img/ol-brand/overleaf-o-grey.svg) center / 200px no-repeat;
+    opacity: 0.2;
+    pointer-events: none;
+  }
+}
+
+.no-file-selection-message,
+.multi-selection-message {
+  width: 50%;
+  margin: 0 auto;
+  text-align: center;
+  padding: @line-height-computed 0;
+}
+
 .toolbar-editor {
   height: @editor-toolbar-height;
   background-color: @editor-toolbar-bg;