MaDgIK
/
usage-counts
13
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Change search to close on blur and let the label stay on search close

This commit is contained in:
k.triantafyllou 2020-09-22 13:55:50 +00:00
parent 638ca3395f
commit 366835e39b
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/analytics/analytics.component.html
View File

@ -4,9 +4,11 @@
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-large-bottom"> <div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-large-bottom">
<div class="uk-width-3-5"> <div class="uk-width-3-5">
<form [formGroup]="countryFb" (ngSubmit)="search()"> <form [formGroup]="countryFb" (ngSubmit)="search()">
<input #input type="text" class="uk-animation-slide-right-medium uk-width-1-1" <input #input type="text" class="uk-width-1-1"
[class.uk-hidden]="!showSearch || country" [class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
[class.uk-hidden]="!showSearch || (!showSearch && country)"
placeholder="SEARCH FOR A COUNTRY" placeholder="SEARCH FOR A COUNTRY"
(blur)="closeSearch()"
aria-label="Number" aria-label="Number"
formControlName="country" formControlName="country"
[matAutocomplete]="auto"> [matAutocomplete]="auto">
@ -17,8 +19,8 @@
</mat-autocomplete> </mat-autocomplete>
</form> </form>
<div class="uk-flex uk-flex-left"> <div class="uk-flex uk-flex-left">
<span *ngIf="country" class="uk-flex uk-flex-middle"> <span *ngIf="countryFb.get('country').value && !showSearch" class="uk-flex uk-flex-middle">
<span>{{country}}</span> <span (click)="toggle()">{{countryFb.get('country').value}}</span>
<span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()"> <span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path <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" fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000"
@ -28,7 +30,7 @@
</span> </span>
</div> </div>
</div> </div>
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search" (click)="toggle()"> <button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search" (mousedown)="$event.preventDefault()" (click)="toggle()">
<img src="assets/usage-statistics-assets/analytics/search.svg"> <img src="assets/usage-statistics-assets/analytics/search.svg">
<span class="uk-text-uppercase space">search</span> <span class="uk-text-uppercase space">search</span>
</button> </button>

5
src/app/analytics/analytics.component.ts
View File

@ -47,6 +47,7 @@ export class AnalyticsComponent implements OnInit {
public search() { public search() {
this.country = this.countryFb.value.country; this.country = this.countryFb.value.country;
this.showSearch = false;
this.loading = true; this.loading = true;
this.clearTimeouts(); this.clearTimeouts();
if (this.country && this.country.length > 0) { if (this.country && this.country.length > 0) {
@ -100,6 +101,10 @@ export class AnalyticsComponent implements OnInit {
} }
} }
closeSearch() {
this.showSearch = false;
}
clearTimeouts() { clearTimeouts() {
this.timeouts.forEach(timeout => { this.timeouts.forEach(timeout => {
clearTimeout(timeout); clearTimeout(timeout);

2
src/app/home/home.component.html
View File

@ -9,7 +9,7 @@
existing citation mechanisms and assists institutional repository managers, research communities, research existing citation mechanisms and assists institutional repository managers, research communities, research
organizations, funders and policy makers track and evaluate research from an early stage. organizations, funders and policy makers track and evaluate research from an early stage.
</div> </div>
<a routerLink="/about" class="uk-button portal-button">Learn More</a> <a routerLink="/about" class="uk-button uk-button-primary">Learn More</a>
</div> </div>
<div class="uk-hidden@m uk-flex uk-flex-center uk-width-1-1"> <div class="uk-hidden@m uk-flex uk-flex-center uk-width-1-1">
<img src="assets/usage-statistics-assets/home/1-static.svg"/> <img src="assets/usage-statistics-assets/home/1-static.svg"/>