From c2dd9e10f95e99c7186368ed339869f659ef1bb9 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Mon, 17 May 2021 12:43:55 +0200
Subject: [PATCH] OZG-635 styling search-field part 1
---
.../header/_header.theme.scss | 4 +--
.../header/header.component.scss | 5 ++++
.../vorgang-search-container.component.html | 23 +++++++++++-----
.../vorgang-search-container.component.scss | 26 +++++++++++++++++--
.../vorgang-search-container.component.ts | 6 ++++-
.../vorgang-search.formservice.ts | 10 ++++++-
6 files changed, 62 insertions(+), 12 deletions(-)
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/_header.theme.scss b/goofy-client/libs/navigation/src/lib/header-container/header/_header.theme.scss
index ce7457fdf3..1f1faa3c8b 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/_header.theme.scss
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/_header.theme.scss
@@ -1,4 +1,4 @@
-goofy-client-header {
+goofy-client-header header {
background-color: #fff;
}
@@ -6,4 +6,4 @@ body.dark goofy-client-header {
header {
background-color: rgb(40, 40, 40);
}
-}
\ No newline at end of file
+}
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
index 3b0e862b46..7613b2824c 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
@@ -23,6 +23,10 @@ header {
pointer-events: none;
}
+.middle {
+ flex-grow: 1;
+}
+
img {
margin: 0 14px;
height: 40px;
@@ -32,6 +36,7 @@ img {
.left {
display: flex;
align-items: inherit;
+ min-width: 240px;
a {
outline: 0;
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.html b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.html
index 2b5c40faa2..3a19f4204c 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.html
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.html
@@ -1,6 +1,17 @@
-<form (ngSubmit)="search()" [formGroup]="formService.form">
- <div class="c-searchfield">
- <button class="material-icons" type="submit" data-test-id="search-button" matTooltip="Suche ausführen">search</button>
- <input type="text" [formControlName]="formService.SEARCH_FIELD" name="searchString" data-test-id="search-input" placeholder="Eingangskennzeichen" />
- </div>
-</form>
\ No newline at end of file
+<form (ngSubmit)="search()" [formGroup]="formService.form" class="search-field">
+
+ <button type="submit" data-test-id="search-button" mat-icon-button aria-label="icon button with search icon">
+ <mat-icon>search</mat-icon>
+ </button>
+
+ <input type="text" maxlength="32" [formControlName]="formService.SEARCH_FIELD" name="searchString" data-test-id="search-input" placeholder="Eingangskennzeichen" />
+
+ <button
+ *ngIf="isSearchFieldFilled()"
+ (click)="formService.reset()"
+ mat-icon-button aria-label="icon button to clear the search field"
+ data-test-id="clear-button">
+ <mat-icon>close</mat-icon>
+ </button>
+
+</form>
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.scss b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.scss
index f1f2eca0b1..213088c808 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.scss
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.scss
@@ -1,6 +1,28 @@
@import "variables";
-.c-searchfield {
+input {
+ border: 0;
+ background-color: transparent;
+ outline: 0;
+ flex-grow: 1;
+ font-size: 18px;
+
+ &::placeholder {
+ color: rgba(#000, 0.2);
+ }
+}
+
+.search-field {
+ border-radius: 20px;
+ background-color: #fafafa;
+ max-width: 320px;
+ display: flex;
+ box-shadow: 0 0 0 1px rgba(#000, 0.08);
+ margin-left: 16px;
+}
+
+
+.xc-searchfield {
border: 1px solid grey;
display: flex;
border-radius: 25px;
@@ -31,4 +53,4 @@
color: mat-color($primaryPalette);
cursor: pointer;
}
-}
\ No newline at end of file
+}
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.ts b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.ts
index f73a28c90e..818dd96263 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.ts
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.ts
@@ -14,4 +14,8 @@ export class VorgangSearchContainerComponent {
search(): void {
this.formService.submit();
}
-}
\ No newline at end of file
+
+ isSearchFieldFilled(): boolean {
+ return this.formService.hasSearchString();
+ }
+}
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search.formservice.ts b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search.formservice.ts
index 07bec1dcf2..5cdb854253 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search.formservice.ts
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search.formservice.ts
@@ -24,8 +24,16 @@ export class VorgangSearchFormService {
return this.service.search(this.getFormValue());
}
+ reset(): void {
+ this.form.controls[this.SEARCH_FIELD].patchValue('');
+ }
+
+ hasSearchString(): boolean {
+ return !!this.form.controls[this.SEARCH_FIELD].value;
+ }
+
private getFormValue(){
const formValue: string = this.form.value.search;
return isEmpty(formValue) ? null : formValue;
}
-}
\ No newline at end of file
+}
--
GitLab