Merge pull request #6860 from opf/feature/28871-Preselect-of-current-project-in-project-dropdown-field

[28871] Preselect of current project in project-dropdown-field

[ci skip]

app/assets/stylesheets/content/menus/_project_autocompletion.sass

@@ -78,7 +78,7 @@
     // Override the computed width of the input, but span the entire width
     // of the dropdown
     width: 398px !important
-    padding-top: 5px
+    padding-top: 0px
     // Borders to complete the menu look
     border-right: 1px solid $header-drop-down-border-color
     border-left: 1px solid $header-drop-down-border-color

frontend/src/app/components/projects/project-menu-autocomplete/project-menu-autocomplete.component.ts

@@ -112,6 +112,8 @@ export class ProjectMenuAutocompleteComponent extends ILazyAutocompleterBridge<I
       this.addClickHandler();
       this.loaded = true;
       this.cdRef.detectChanges();
+
+      this.scrollCurrentProjectIntoView();
     });
   }
 
@@ -296,6 +298,24 @@ export class ProjectMenuAutocompleteComponent extends ILazyAutocompleterBridge<I
 
     return params;
   }
+
+  private scrollCurrentProjectIntoView() {
+    let currentProject = document.getElementsByClassName('ui-menu-item-wrapper selected')[0] as HTMLElement;
+    let currentProjectHeight = currentProject.offsetHeight
+    let scrollableContainer = document.getElementsByClassName('project-menu-autocomplete--results')[0];
+
+    // Scroll current project to top of the list and
+    // substract half the container width again to center it vertically
+    let scrollValue = currentProject.offsetTop -
+                      (scrollableContainer as HTMLElement).offsetHeight / 2 +
+                      currentProjectHeight / 2;
+
+    // The top visible project shall be seen completely.
+    // Otherwise there will be a scrolling effect when the user hovers over the project.
+    scrollableContainer.scrollTop = (scrollValue % currentProjectHeight === 0) ?
+                                      scrollValue :
+                                      scrollValue - (scrollValue % currentProjectHeight);
+  }
 }
 
 DynamicBootstrapper.register({ selector: 'project-menu-autocomplete', cls: ProjectMenuAutocompleteComponent });