Review changes: renaming classes, methods, variables

pull/7016/head
Inga Mai 6 years ago
parent f8356677c5
commit eb0157d63a
  1. 46
      app/assets/stylesheets/layout/_top_menu.sass
  2. 4
      config/locales/js-en.yml
  3. 24
      frontend/src/app/modules/global_search/global-search-input.component.html
  4. 35
      frontend/src/app/modules/global_search/global-search-input.component.ts

@ -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

@ -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"

@ -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>

@ -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();

Loading…
Cancel
Save