Review changes: renaming classes, methods, variables

app/assets/stylesheets/layout/_top_menu.sass

@@ -194,7 +194,7 @@ $search-input-width-expanded: 300px
     height: 46px                // ng-option height + 1px border
     z-index: 1051
 
-  .ng-select#q
+  .ng-select#global-search-input
     width: $search-input-width
     font-size: 0.9rem
     -webkit-transition: width 0.2s ease-in-out
@@ -254,28 +254,32 @@ $search-input-width-expanded: 300px
             border-bottom: none
           &.ng-option-marked
             @include varprop(background-color, drop-down-hover-bg-color)
+            @include varprop(color, header-drop-down-item-font-hover-color)
           &.ng-option-disabled
             display: none
-
-        .search-autocomplete--wp-id
-          color: $gray-dark
-          font-size: 13px
-          white-space: nowrap
-
-        .ui-menu-item-wrapper
-          padding: 5px 5px
-          line-height: 25px
-          min-height: 35px  // line-height + padding
-          word-break: break-word
-
-        .search-autocomplete--project-scope
-          position: absolute
-          right: 7px
-          border: 1px solid $button--border-color
-          font-size: 13px
-          background: $button--background-color
-          border-radius: 2px
-          padding: 0 4px
+          &.ng-option-selected
+            @include varprop(background-color, drop-down-selected-bg-color)
+            @include varprop(color, header-drop-down-item-font-hover-color)
+
+.global-search--wp-id
+  color: $gray-dark
+  font-size: 13px
+  white-space: nowrap
+
+.global-search--option-wrapper
+  padding: 5px 5px
+  line-height: 25px
+  min-height: 35px  // line-height + padding
+  word-break: break-word
+
+.global-search--project-scope
+  position: absolute
+  right: 7px
+  border: 1px solid $button--border-color
+  font-size: 13px
+  background: $button--background-color
+  border-radius: 2px
+  padding: 0 4px
 
 
 #quick-search

config/locales/js-en.yml

@@ -829,8 +829,8 @@ en:
     global_search:
       all_projects: "In all projects"
       search: "Search"
-      this_project: "In this project"
-      this_project_and_all_descendants: "In this project + subprojects"
+      current_project: "In this project"
+      current_project_and_all_descendants: "In this project + subprojects"
       title:
         all_projects: "all projects"
         project_and_subprojects: "and all subprojects"

frontend/src/app/modules/global_search/global-search-input.component.html

@@ -10,8 +10,8 @@
     </div>
      <ng-select #select
                 [items]="results"
-                name="q"
-                id="q"
+                name="global-search-input"
+                id="global-search-input"
                 placeholder="{{text.search}}"
                 [ngClass]="'top-menu-search--input'"
                 [class.-expanded]="expanded"
@@ -21,23 +21,23 @@
                 (focus)="onFocus()"
                 (focusout)="onFocusOut()"
                 (search)="search($event)"
-                (open)="toggleMenu(currentValue)"
+                (open)="openCloseMenu(currentValue)"
                 (close)="select.filterValue = currentValue"
                 (change)="onChange($event)">
         <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
           <div *ngIf="!item.id; else workPackageItemTemplate">
-            <div tabindex="-1" class="ui-menu-item">
-              <div class="ui-menu-item-wrapper">
-                <span class="search-autocomplete--search-term"> {{currentValue}} </span>
-                <span class="search-autocomplete--project-scope" title="{{item.projectScope}}"> {{item.text}} ↵ </span>
+            <div tabindex="-1" class="global-search--option">
+              <div class="global-search--option-wrapper">
+                <span class="global-search--search-term"> {{currentValue}} </span>
+                <span class="global-search--project-scope" title="{{item.projectScope}}"> {{item.text}} ↵ </span>
               </div>
             </div>
           </div>
           <ng-template #workPackageItemTemplate>
-            <div tabindex="-1" class="ui-menu-item" [ngOptionHighlight]="currentValue">
-              <div class="ui-menu-item-wrapper" tabindex="-1">
-                <span class="search-autocomplete--wp-id __hl_dot_status_{{item.statusId}}" title="{{item.status}}"> #{{item.id}} </span>
-                <span class="search-autocomplete--subject"> {{item.subject}} </span>
+            <div tabindex="-1" class="global-search--option">
+              <div class="global-search--option-wrapper" tabindex="-1">
+                <span class="global-search--wp-id __hl_dot_status_{{item.statusId}}" title="{{item.status}}" [ngOptionHighlight]="currentValue"> #{{item.id}} </span>
+                <span class="global-search--wp-subject" [ngOptionHighlight]="currentValue"> {{item.subject}} </span>
               </div>
             </div>
         </ng-template>
@@ -51,7 +51,7 @@
        tabindex="0"
        role="button"
        [class.-input-focused]="expanded"
-       (accessibleClick)="handleClick($event)" >
+       (accessibleClick)="handleClick($event)">
        <op-icon icon-classes="icon5 icon-search ellipsis"></op-icon>
     </a>
 </div>

frontend/src/app/modules/global_search/global-search-input.component.ts

@@ -61,7 +61,6 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
   @ViewChild('btn') btn:ElementRef;
   @ViewChild(NgSelectComponent) public ngSelectComponent:NgSelectComponent;
 
-  public searchTerm:string = '';
   public currentValue:string = '';
   public expanded:boolean = false;
   public results:any[];
@@ -76,8 +75,8 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
 
   public text:{ [key:string]:string } = {
     all_projects: this.I18n.t('js.global_search.all_projects'),
-    this_project: this.I18n.t('js.global_search.this_project'),
-    this_project_and_all_descendants: this.I18n.t('js.global_search.this_project_and_all_descendants'),
+    current_project: this.I18n.t('js.global_search.current_project'),
+    current_project_and_all_descendants: this.I18n.t('js.global_search.current_project_and_all_descendants'),
     search: this.I18n.t('js.global_search.search') + ' ...'
   };
 
@@ -91,7 +90,7 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
               readonly cdRef:ChangeDetectorRef) {
   }
 
-  private projectScopeTypes = ['all_projects', 'this_project', 'this_project_and_all_descendants'];
+  private projectScopeTypes = ['all_projects', 'current_project', 'current_project_and_all_descendants'];
 
   ngOnInit() {
     this.$element = jQuery(this.elementRef.nativeElement);
@@ -132,7 +131,6 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
 
   // load selected item
   public onChange($event:any) {
-    console.log("onChange", $event);
     let selectedOption = $event;
     if (selectedOption.id) {  // item is a work package element
       this.redirectToWp(selectedOption.id);
@@ -144,25 +142,23 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
   }
 
   public search($event:string) {
-    console.log("search", $event);
     this.currentValue = this.ngSelectComponent.filterValue;
-    this.toggleMenu($event);
+    this.openCloseMenu($event);
   }
 
   // close menu when input field is empty
-  public toggleMenu(searchedTerm:string) {
-    console.log("toggleMenu", "searchedTerm: " + searchedTerm, "filterValue: " + this.ngSelectComponent.filterValue, searchedTerm.trim().length);
+  public openCloseMenu(searchedTerm:string) {
     this.ngSelectComponent.isOpen = (searchedTerm.trim().length > 0);
   }
 
   public onFocus() {
     this.expanded = true;
-    console.log("onFocus", this.isFirstFocus, this.currentValue.length);
+    // load result list after page reload
     if (this.isFirstFocus && this.currentValue.length > 0) {
       this.isFirstFocus = false;
       this.getSearchResult(this.ngSelectComponent.filterValue);
     }
-    this.toggleMenu(this.currentValue);
+    this.openCloseMenu(this.currentValue);
   }
 
   public onFocusOut() {
@@ -174,7 +170,13 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
   private getSearchResult(term:string) {
     this.autocompleteWorkPackages(term).then((values) => {
       this.results = this.suggestions.concat(values.map((wp:any) => {
-        return { id: wp.id, subject: wp.subject, status: wp.status.name, statusId: wp.status.idFromLink, $href: wp.$href };
+        return {
+          id: wp.id,
+          subject: wp.subject,
+          status: wp.status.name,
+          statusId: wp.status.idFromLink,
+          $href: wp.$href
+        };
       }));
     });
   }
@@ -217,8 +219,8 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
     // add all options when searching within a project
     // otherwise search in 'all projects'
     if (this.currentProjectService.path) {
-      this.suggestions.push('this_project_and_all_descendants');
-      this.suggestions.push('this_project');
+      this.suggestions.push('current_project_and_all_descendants');
+      this.suggestions.push('current_project');
     }
     if (this.globalSearchService.projectScope === 'current_project') {
       this.suggestions.reverse();
@@ -242,12 +244,12 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
         this.submitNonEmptySearch(forcePageLoad);
         break;
       }
-      case 'this_project': {
+      case 'current_project': {
         this.globalSearchService.projectScope = 'current_project';
         this.submitNonEmptySearch();
         break;
       }
-      case 'this_project_and_all_descendants': {
+      case 'current_project_and_all_descendants': {
         this.globalSearchService.projectScope = '';
         this.submitNonEmptySearch();
         break;
@@ -256,7 +258,6 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
   }
 
   public submitNonEmptySearch(forcePageLoad:boolean = false) {
-    console.log("submitNonEmptySearch", this.currentValue);
     this.globalSearchService.searchTerm = this.currentValue;
     if (this.currentValue.length > 0) {
       this.ngSelectComponent.close();