1. Navbar: Change navbar to be sticky always. 2. Search Filter: Add new inputs. 3. Page-content: Remove offset changing base on menu. 4. Pages add new search-input. 5. Advanced Search Input: Add enter behaviour and make inputs by default equal size.

dashboard/page/pages.component.html

@@ -15,9 +15,9 @@
     <div *ngIf="showLoading" class="uk-position-center">
       <loading></loading>
     </div>
-		<div *ngIf="!showLoading">
+		<ng-container *ngIf="!showLoading">
-			<div class="uk-grid uk-margin-medium-bottom" uk-grid>
+			<div class="uk-grid uk-flex-middle uk-margin-top uk-margin-medium-bottom" uk-grid>
-				<div class="uk-width-expand">
+				<div class="uk-width-expand@m uk-width-1-1">
 					<ul class="uk-subnav uk-subnav-pill">
 						<li [class.uk-active]="filterForm.get('type').value === 'all'"><a
 								(click)="filterForm.get('type').setValue('all')"><span>All pages</span></a></li>
@@ -26,15 +26,8 @@
 								(click)="filterForm.get('type').setValue(type.value)"><span>{{type.label}}</span></a></li>
 					</ul>
 				</div>
-				<div
+				<div class="uk-width-1-3@m uk-width-1-1 uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
-						class="uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid"
+					<div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search page" class="uk-width-expand"></div>
-						uk-grid>
-					<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
-							placeholder="Search page"
-							[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
-							[bordered]="true" colorClass="uk-text-secondary"
-							class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
-	
 					<div *ngIf="isPortalAdministrator">
 						<a (click)="newPage()"
 							 class="uk-flex uk-flex-middle uk-text-uppercase">
@@ -46,8 +39,7 @@
 					</div>
 				</div>
 			</div>
-    </div>
+			<div *ngIf="checkboxes.length > 0" class="uk-section uk-section-small">
-		<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding uk-padding-remove-top">
 				<div
 						class="uk-display-inline"
 						[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null"
@@ -73,7 +65,6 @@
 					</div>
 				</div>
 			</div>
-    <div *ngIf="!showLoading">
 			<ul *ngIf="checkboxes.length > 0" class="uk-list pages">
 				<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
 					<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
@@ -150,7 +141,7 @@
 					 class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
 				<div>No pages found</div>
 			</div>
-    </div>
+		</ng-container>
   </div>
 </div>
 <modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)"

dashboard/page/pages.component.ts

@@ -64,8 +64,6 @@ export class PagesComponent implements OnInit {
   private subscriptions: any[] = [];
   public portalUtils: PortalUtils = new PortalUtils();
   private index: number;
-  public selectedKeyword: string;
-  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
   pageHelpContentsCount = {};
   pageClassContentsCount = {};
 	public stickyPageHeader: boolean = false;
@@ -434,15 +432,6 @@ export class PagesComponent implements OnInit {
     }
   }
   
-  public onSearchClose() {
-    this.selectedKeyword = this.filterForm.get('keyword').value;
-  }
-  
-  public reset() {
-    this.selectedKeyword = null;
-    this.searchInputComponent.reset()
-  }
-  
   selectAll() {
     let checked = this.getSelectedPages().length != this.checkboxes.length;
     for (let check of this.checkboxes) {

dashboard/sharedComponents/page-content/page-content.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
+import {AfterViewInit, Component, EventEmitter, OnDestroy, OnInit, Output} from "@angular/core";
 import {Subscription} from "rxjs";
 
 declare var UIkit;
@@ -8,7 +8,7 @@ declare var UIkit;
   template: `
     <div id="page_content">
       <div id="header">
-        <div id="page_content_header" [attr.uk-sticky]="shouldSticky?'media: @m':null" [attr.offset]="shouldSticky?offset:null">
+        <div id="page_content_header" [attr.uk-sticky]="shouldSticky?'media: @m':null" [attr.offset]="offset">
           <div class="uk-container uk-container-large uk-padding-remove-vertical">
             <div class="uk-padding-small uk-padding-remove-vertical">
               <ng-content select="[header]"></ng-content>
@@ -60,12 +60,6 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   initSticky() {
     this.clear();
     if(this.shouldSticky) {
-      this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', () => {
-        this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
-      }));
-      this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', () => {
-        this.offset = 0;
-      }));
       this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', () => {
         this.sticky = true;
         this.stickyEmitter.emit(this.sticky);

searchPages/searchUtils/searchFilter.component.html

@@ -16,41 +16,17 @@
         <span *ngIf="!isOpen">+ View all</span>
       </a>
       <div *ngIf="isOpen" class="uk-text-small uk-margin-small-bottom">
-        <div class="">
+        <div class="uk-margin-small-left">
-            <span class="uk-text-meta  uk-margin-small-left">Top 100 values are
+          <div class="uk-text-meta">Top 100 values are shown in the filters</div>
-              shown in the filters</span>
+          <div class="uk-flex uk-flex-bottom uk-margin-top">
-          <div class="uk-grid uk-margin-small-left uk-flex uk-flex-bottom">
+						<div input class="uk-width-1-2@m uk-margin-right" [placeholder]="{label: 'Search', static: true}" inputClass="inner x-small" [(value)]="keyword"></div>
-            <!-- <input class="uk-input uk-margin-small-top uk-form-small uk-width-2-3@m uk-width-3-5@s text-input-box "
+            <div *ngIf="showResultCount === true" input type="select" class="uk-width-expand" placeholder="Sort by" inputClass="border-bottom" [(value)]="sortBy" [options]="sortByOptions"></div>
-                   name="filter-keyword"
-                   placeholder="Search..." type="text" [(ngModel)]="keyword"> -->
-						<div input class="uk-width-2-3@m uk-width-3-5@s" placeholder="Search"
-							inputClass="inner x-small" [(value)]="keyword"></div>
-
-            <span *ngIf="showResultCount === true"
-                  class="uk-width-1-3@m uk-width-2-5@s uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
-              <span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
-      <!--        <select [(ngModel)]="sortBy"
-                      class=" uk-width-expand uk-select uk-hidden@m uk-form-small"
-                      id="form-horizontal-select" name="select_order">
-                <option value="num">Results number</option>
-                <option value="name">Name</option>
-              </select>-->
-              <mat-select [(ngModel)]="sortBy" (ngModelChange)="sort(filter.values)"
-                          class="uk-width-expand matSelection uk-visible@m"
-                          id="form-horizontal-select1" name="select_order"
-                          [disableOptionCentering]="true" panelClass="matSelectionPanel">
-                <mat-option value="num">Results number</mat-option>
-                <mat-option value="name">Name</mat-option>
-              </mat-select>
-            </span>
           </div>
         </div>
-
+        <div class="uk-overflow-auto uk-height-max-small uk-margin-small-left uk-margin-small-right uk-margin-top">
-        <div class="uk-overflow-auto uk-height-max-small uk-padding-remove
-                    uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-width-1-1">
           <ng-container *ngFor="let value of this.sortedValues">
             <div *ngIf="filterKeywords(value.name)" title="{{value.name}}"
-                 class="uk-animation-fade filterItem searchFilterItem uk-text-small">
+                 class="uk-animation-fade uk-text-small">
               <ng-container
                   *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
             </div>

searchPages/searchUtils/searchFilter.component.ts

@@ -11,6 +11,7 @@ import {Filter, Value} from './searchHelperClasses.class';
 import {ActivatedRoute, Router} from "@angular/router";
 import {SearchFields} from "../../utils/properties/searchFields";
 import {HelperFunctions} from "../../utils/HelperFunctions.class";
+import {Option} from "../../sharedComponents/input/input.component";
 @Component({
   selector: 'search-filter',
   templateUrl: 'searchFilter.component.html'
@@ -33,6 +34,7 @@ export class SearchFilterComponent implements OnInit, OnChanges {
   @Output() onFilterChange = new EventEmitter();
   keyword = "";
   sortBy: "name" | "num" = "name";
+  sortByOptions: Option[] = [{label: 'Results number', value: 'num'}, {label: 'Name', value: 'name'}];
   queryParams = {};
   paramPosition = 0;
   @Input() actionRoute: boolean = false;

sharedComponents/advanced-search-input/advanced-search-input.component.ts

@@ -2,7 +2,7 @@ import {
   AfterContentInit,
   Component,
   ContentChildren,
-  EventEmitter,
+  EventEmitter, HostListener,
   Input,
   OnDestroy,
   Output,
@@ -13,10 +13,10 @@ import {InputComponent} from "../input/input.component";
 @Component({
   selector: 'advanced-search-input',
   template: `
-    <div class="search-input" [ngClass]="searchInputClass" [class.small-vertical]="smallVertical">
+    <div *ngIf="inputs.length > 0" class="search-input" [ngClass]="searchInputClass" [class.small-vertical]="smallVertical">
-      <div class="uk-grid uk-flex-middle" uk-grid>
+      <div class="uk-flex uk-flex-middle">
         <div class="uk-width-expand">
-          <div class="uk-grid uk-grid-collapse inputs" uk-grid>
+          <div class="uk-grid uk-grid-collapse inputs" [ngClass]="'uk-child-width-1-' + inputs.length" uk-grid>
             <ng-content></ng-content>
           </div>
         </div>
@@ -36,6 +36,16 @@ export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy
   @Input() smallVertical: boolean = false;
   @Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
   
+  @HostListener('window:keydown', ['$event'])
+  keyEvent(event: KeyboardEvent) {
+    if(this.inputs.toArray().filter(input => input.focused).length > 0) {
+      if(event.code === 'Enter') {
+        event.preventDefault();
+        this.searchEmitter.emit();
+      }
+    }
+  }
+  
   constructor() {
   }
   

sharedComponents/input/input.component.ts

@@ -65,12 +65,9 @@ declare var UIkit;
               <div *ngIf="!formControl.value && placeholderInfo.static" class="input placeholder">{{placeholderInfo.label}}</div>
             </ng-template>
             <ng-template [ngIf]="type === 'autocomplete'">
-              <div class="uk-grid uk-width-expand" uk-grid>
+              <input *ngIf="focused" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
-                <div class="uk-width-expand">
-                  <input [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
                      #searchInput class="input" [formControl]="searchControl">
-                </div>
+              <div *ngIf="!focused" class="input">{{getLabel(formAsControl.value)}}</div>
-              </div>
             </ng-template>
             <ng-template [ngIf]="type === 'chips'">
               <div class="uk-grid uk-grid-small uk-grid-row-collapse uk-width-expand" uk-grid>
@@ -89,12 +86,12 @@ declare var UIkit;
               </div>
             </ng-template>
             <div *ngIf="formControl.disabled || icon || (type === 'select' && selectArrow) || type === 'autocomplete'"
-                 class="uk-margin-left uk-margin-right icon">
+                 class="uk-margin-left icon">
               <icon *ngIf="formControl.disabled" [name]="'lock'" [flex]="true"></icon>
               <ng-template [ngIf]="formControl.enabled">
                 <icon *ngIf="!formControl.value && icon" [name]="icon" [flex]="true"></icon>
                 <icon *ngIf="!icon && type === 'select' && selectArrow" name="arrow_drop_down" [flex]="true"></icon>
-                <icon *ngIf="formControl.value && type === 'autocomplete'" class="clickable" (click)="resetSearch($event)"
+                <icon *ngIf="searchControl?.value && type === 'autocomplete'" class="clickable" (click)="resetSearch($event)"
                       [flex]="true" name="close"></icon>
               </ng-template>
             </div>
@@ -335,9 +332,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       if (!this.searchControl) {
         this.searchControl = new FormControl('', this.validators);
       }
-      if(this.formAsControl) {
-        this.searchControl.setValue(this.getLabel(this.formControl.value));
-      }
       this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
         this.filteredOptions = this.filter(value);
         this.cdr.detectChanges();
@@ -364,9 +358,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       } else {
         this.formControl.markAsDirty();
       }
-      if (this.searchControl && this.formAsControl) {
-        this.searchControl.setValue(this.getLabel(this.formControl.value));
-      }
       this.valueChange.emit(this.formControl.value);
     }));
     if (this.input) {
@@ -434,6 +425,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       this.formControl.markAsTouched();
     }
     this.focused = value;
+    this.cdr.detectChanges();
     if (this.focused) {
       if (this.input) {
         this.input.nativeElement.focus();
@@ -451,7 +443,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       this.open(false);
       if (this.searchControl) {
         if(this.formAsControl) {
-          this.searchControl.setValue(this.getLabel(this.formControl.value));
+          this.searchControl.setValue('');
         }
         this.add(event);
       }
@@ -477,9 +469,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   
   resetSearch(event: any) {
     event.stopPropagation();
-    this.formControl.markAsDirty();
-    this.formControl.setValue(null);
-    this.focus(true);
     this.searchControl.setValue('');
   }
   

sharedComponents/navigationBar.component.html

@@ -93,9 +93,7 @@
     </div>
   </div>
   <div id="main-menu" class="uk-visible@m">
-    <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'"
+    <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'" uk-sticky media="@m">
-         uk-sticky="show-on-up: true; top: #main-menu" media="@m" cls-active="uk-active uk-navbar-sticky"
-         [attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
       <div
           *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo  && header.badge">
         <img class="uk-position-top-left"