From ddab831474420318f1d8dd60f9fff22eaa746192 Mon Sep 17 00:00:00 2001
From: Henriette Dinger <h.dinger@openproject.com>
Date: Mon, 26 Nov 2018 08:41:02 +0100
Subject: [PATCH] Scroll current project into view

---
 .../menus/_project_autocompletion.sass        |  2 +-
 .../project-menu-autocomplete.component.ts    | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/content/menus/_project_autocompletion.sass b/app/assets/stylesheets/content/menus/_project_autocompletion.sass
index 08b6c6c828..8f622be0f3 100644
--- a/app/assets/stylesheets/content/menus/_project_autocompletion.sass
+++ b/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
diff --git a/frontend/src/app/components/projects/project-menu-autocomplete/project-menu-autocomplete.component.ts b/frontend/src/app/components/projects/project-menu-autocomplete/project-menu-autocomplete.component.ts
index 1a391b2b58..1d20ffc529 100644
--- a/frontend/src/app/components/projects/project-menu-autocomplete/project-menu-autocomplete.component.ts
+++ b/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 });