Project

General

Profile

« Previous | Next » 

Revision 60209

Added by Konstantinos Triantafyllou over 3 years ago

[Usage Counts | Trunk]: Add search-input on analytics

View differences:

analytics.component.html
12 12 
      <div class="uk-padding-small uk-padding-remove-vertical">
13 13 
        <h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
14 14 
        <div class="uk-container uk-text-bold">
15 
          <div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom search-mobile">
16 
            <div class="uk-width-3-5">
17 
              <form [formGroup]="countryFb" (ngSubmit)="search()">
18 
                <input #input type="text" class="uk-width-1-1"
19 
                       [class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
20 
                       [class.uk-hidden@m]="!showSearch"
21 
                       [class.uk-hidden]="country"
22 
                       placeholder="SEARCH FOR A COUNTRY"
23 
                       (blur)="closeSearch()"
24 
                       aria-label="Number"
25 
                       formControlName="country"
26 
                       [matAutocomplete]="auto">
27 
                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
28 
                  <mat-option *ngFor="let option of countries | async" [value]="option">
29 
                    {{option}}
30 
                  </mat-option>
31 
                </mat-autocomplete>
32 
              </form>
33 
              <div *ngIf="country && !showSearch" class="uk-flex uk-flex-left">
34 
                <span class="uk-flex uk-flex-middle">
35 
                  <span>{{country}}</span>
36 
                  <span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
37 
                    <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
38 
                        fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
39 
                      <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
40 
                    </svg>
41 
                  </span>
42 
                </span>
43 
              </div>
15 
          <div class="uk-width-4-5@m uk-align-center">
16 
            <div search-input #searchInput [control]="countryFb" [showSearch]="showSearch"
17 
                 placeholder="SEARCH FOR A COUNTRY"
18 
                 [selected]="country" [loading]="loading" [list]="countries" (searchEmitter)="search($event)" (resetEmitter)="reset()">
44 19 
            </div>
45 
            <button [disabled]="loading" class="search uk-margin-medium-left uk-visible@m"
46 
                    (mousedown)="$event.preventDefault()" (click)="toggle()">
47 
              <img src="assets/usage-statistics-assets/analytics/search.svg">
48 
              <span class="uk-text-uppercase space">search</span>
49 
            </button>
50 
            <button [disabled]="loading" class="search uk-hidden@m"
51 
                    (mousedown)="$event.preventDefault()" (click)="search(false)">
52 
              <img src="assets/usage-statistics-assets/analytics/search.svg">
53 
              <span class="uk-text-uppercase space">search</span>
54 
            </button>
55 20 
          </div>
56 21 
          <div class="uk-margin-medium-bottom">
57 22 
            <div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>

Also available in: Unified diff