MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add background modifier in search-input in order to add background in search-icon.

This commit is contained in:
Konstantinos Triantafyllou 2023-05-12 17:25:14 +03:00
parent 123f355344
commit 416a15e3d0
3 changed files with 11 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
searchPages/searchUtils/advancedSearchForm.component.html
View File

@ -175,14 +175,14 @@
<!-- </a>-->
</advanced-search-input>
<div *ngIf="selectedFields[0] && disableSelect" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()">
[searchInputClass]="'inner background'" [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()">
<!-- <a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>-->
<!-- <icon name="filters"></icon>-->
<!-- </a>-->
</div>
</ng-container>
<div *ngIf="selectedFields[0] && !entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()">
[searchInputClass]="'inner background'" [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()">
<!-- <a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>-->
<!-- <icon name="filters"></icon>-->
<!-- </a>-->

2
sharedComponents/navigationBar.component.html
View File

@ -171,7 +171,7 @@
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
</ng-container>
<div *ngIf="searchMode" #search_input search-input [(value)]="keyword" placeholder="Search by name, description, subject..."
[searchInputClass]="'flat small-vertical'" (searchEmitter)="goTo()"
[searchInputClass]="'flat background small-vertical'" (searchEmitter)="goTo()"
class="uk-width-large@l uk-width-medium uk-width-xlarge@xl"></div>
</div>
<div class="uk-navbar-right">

39
sharedComponents/search-input/search-input.component.ts
View File

@ -1,4 +1,5 @@
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
@ -10,7 +11,6 @@ import {
ViewChild
} from '@angular/core';
import {AbstractControl} from '@angular/forms';
import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
import {InputComponent} from "../input/input.component";
import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
@ -33,7 +33,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
</div>
<div class="uk-width-auto" [class.uk-flex-first]="iconPosition === 'left'">
<div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
<icon name="search" [flex]="true" ratio="1.3"></icon>
<icon name="search" [flex]="true" [ratio]="ratio"></icon>
</div>
</div>
<div class="uk-width-auto filters-toggle">
@ -44,7 +44,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
</div>
`
})
export class SearchInputComponent implements OnInit {
export class SearchInputComponent implements OnInit, AfterViewInit {
@Input() disabled: boolean = false;
@Input() searchInputClass: string = 'inner';
@Input() iconPosition: 'left' | 'right' = 'right';
@ -59,6 +59,7 @@ export class SearchInputComponent implements OnInit {
@ViewChild('input') input: InputComponent;
public expanded: boolean = true;
public initialized: boolean = false;
public ratio: number = 1;
constructor(private cdr: ChangeDetectorRef) {
}
@ -86,6 +87,10 @@ export class SearchInputComponent implements OnInit {
this.initialized = true;
}
ngAfterViewInit() {
this.ratio = Number.parseFloat(getComputedStyle(this.searchInput.nativeElement).getPropertyValue('--search-input-icon-ratio'));
}
expand(value: boolean) {
this.expanded = value;
this.cdr.detectChanges();
@ -118,32 +123,4 @@ export class SearchInputComponent implements OnInit {
get hidden(): boolean {
return !this.expanded && (!this.searchControl?.value && !this.value);
}
/** @deprecated all*/
@Input()
showSearch: boolean = true;
@Input()
control: AbstractControl;
@Input()
loading: boolean = false;
@Input()
selected: any;
@Input()
list: any = null;
@Input()
colorClass: string = 'portal-color';
@Input()
bordered: boolean = false;
@Input()
toggleTitle: string = 'search';
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
@Output()
resetEmitter: EventEmitter<any> = new EventEmitter<any>();
@Output()
closeEmitter: EventEmitter<any> = new EventEmitter<any>();
/** @deprecated*/
closeSearch() {
}
}