#1028 WA // Anmerkung styling

apps/sales/src/app/modules/shelf/pages/shelf-order-details/comment/comment.component.html

@@ -1,7 +1,7 @@
 <div class="isa-flex isa-justify-content-space-between isa-align-items-center">
   <strong class="isa-mr-10">Anmerkung</strong>
-  <input #commentInput type="text" class="comment" [formControl]="commentControl" />
-  <button class="isa-btn" *ngIf="!!commentControl.value" (click)="commentControl.reset(''); save()">
+  <input #commentInput type="text" class="comment" [formControl]="commentControl" (focus)="inputFocus()" (blur)="inputBlur()" />
+  <button class="isa-btn" *ngIf="focused && !!commentControl.value" (click)="commentControl.reset(''); save()">
     <lib-icon width="12px" name="close"></lib-icon>
   </button>
   <button class="isa-btn isa-btn-secondary isa-p-0 isa-ml-10" *ngIf="commentControl.enabled && commentControl.dirty" (click)="save()">

apps/sales/src/app/modules/shelf/pages/shelf-order-details/comment/comment.component.scss

@@ -9,6 +9,7 @@ input.comment {
   padding-top: 2px;
   background-color: transparent;
   font-size: inherit;
+  color: #000;
 }
 
 input.comment:active,

apps/sales/src/app/modules/shelf/pages/shelf-order-details/comment/comment.component.ts

@@ -17,6 +17,8 @@ import { FormControl } from '@angular/forms';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShelfOrderDetailsCommentComponent implements OnChanges {
+  focused: boolean;
+
   @Input()
   comment: string;
 
@@ -38,4 +40,15 @@ export class ShelfOrderDetailsCommentComponent implements OnChanges {
   save() {
     this.saveComment.emit(this.commentControl.value);
   }
+
+  inputFocus() {
+    this.focused = true;
+  }
+
+  inputBlur() {
+    setTimeout(() => {
+      this.focused = false;
+      this.cdr.markForCheck();
+    }, 500);
+  }
 }

package.json

@@ -127,4 +127,4 @@
     "tslint": "~5.11.0",
     "typescript": "~3.5.3"
   }
-}
+}