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

[Library | Trunk]: Search input: Fix reset function and toggle on selected. Sidebar: fix route on active route 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60488 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2021-02-24 14:35:02 +00:00
parent a856f29fc3
commit 467d1a4ff1
3 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -17,7 +17,7 @@
<li [class.uk-active]="isTheActiveMenuItem(item)"
[class.uk-open]="isTheActiveMenuItem(item)"
[class.uk-parent]="item.items.length > 1">
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null"
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route)?item.route:null"
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center">
<div *ngIf="item.icon && !open" class="uk-margin-auto">
<span [innerHTML]="satinizeHTML(item.icon)"></span>
@ -35,7 +35,7 @@
<ul [class.uk-hidden]="!open" class="uk-nav-sub uk-text-center">
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
<li *ngIf="subItem.route" [class.uk-active]="isTheActiveMenuItem(item, subItem)">
<a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null"
<a [routerLink]="subItem.route"
[queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling">
<div *ngIf="subItem.icon"><i class="material-icons">{{subItem.icon}}</i></div>
<span>{{subItem.title}}</span>

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

@ -12,7 +12,6 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
<input #input type="text" class="uk-width-1-1"
[class.uk-animation-slide-right-medium]="showSearch"
[class.uk-hidden@m]="!showSearch"
[class.uk-hidden]="selected"
[placeholder]="placeholder"
(blur)="closeSearch()"
[formControl]="control"
@ -23,10 +22,10 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
</mat-option>
</mat-autocomplete>
</form>
<div *ngIf="selected" class="uk-flex uk-flex-left selected">
<span class="uk-flex uk-flex-middle">
<span>{{selected}}</span>
<span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="resetEmitter.emit()">
<div *ngIf="selected && !showSearch" class="uk-flex uk-flex-left selected">
<span class="uk-flex uk-flex-middle clickable">
<span (click)="toggle()">{{selected}}</span>
<span class="uk-icon space" uk-icon="icon: close; ratio: 0.8" (click)="resetEmitter.emit()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
<path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
@ -80,13 +79,11 @@ export class SearchInputComponent {
closeEmitter: EventEmitter<any> = new EventEmitter<any>();
toggle() {
if(!this.selected) {
this.showSearch = !this.showSearch;
if (this.showSearch) {
setTimeout(() => { // this will make the execution after the above boolean has changed
this.input.nativeElement.focus();
}, 0);
}
this.showSearch = !this.showSearch;
if (this.showSearch) {
setTimeout(() => { // this will make the execution after the above boolean has changed
this.input.nativeElement.focus();
}, 0);
}
}
@ -101,6 +98,8 @@ export class SearchInputComponent {
}
public reset() {
this.control.setValue('');
this.input.nativeElement.value = '';
this.showSearch = true;
setTimeout(() => {
this.input.nativeElement.focus();

5
utils/icons/icons.ts
View File

@ -121,3 +121,8 @@ export const mail = {
name: 'mail',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>'
}
export const photo = {
name: 'photo',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="3.2"/><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>'
}