From d3ec4ee5a2e08f8b1898e5f2cec349a994203a9a Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sat, 15 Jun 2024 17:44:19 +0200
Subject: [PATCH] clean code

---
 .../chat-msg-box/chat-msg-box.component.html  | 14 +++++--------
 .../chat-msg-box/chat-msg-box.component.ts    |  7 +++++++
 .../small-btn/small-btn.component.html        |  7 ++++---
 .../small-btn/small-btn.component.scss        | 20 +++++++++++++++++++
 .../small-btn/small-btn.component.ts          |  1 +
 src/assets/i18n/de.json                       |  1 -
 src/assets/i18n/en.json                       |  1 -
 7 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.html b/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.html
index 31b6ca8..c48bc7e 100644
--- a/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.html
+++ b/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.html
@@ -44,7 +44,8 @@
         [imgSize]="'16px'"
         [btnSize]="'24px'"
         [btnBgHoverColor]="'#edeefe'"
-        (click)="fileInput.click()"
+        [disable]="downloadFilesService.uploadFiles.length >= 1"
+        (click)="handleFileInputClick()"
       ></app-small-btn>
       <img class="verticalLine" src="./assets/img/verticalLine.svg" />
       <app-small-btn
@@ -63,20 +64,15 @@
         (click)="targetChatUser($event)"
       ></app-small-btn>
       <!-- Warning message -->
-      @if (downloadFilesService.uploadFiles.length >= 1 && !fileDataError &&
-      !fileSizeError){
-      <p class="warningMessage">
-        {{ "channel-msg-box.text0" | translate }}
-      </p>
-      } @if(fileDataError){
+      @if(fileDataError){
       <p class="warningMessage">
         {{ "channel-msg-box.text1" | translate }}
       </p>
-      } @if(fileSizeError){
+      } @else { @if(fileSizeError){
       <p class="warningMessage">
         {{ "channel-msg-box.text2" | translate }}
       </p>
-      }
+      } }
       <div class="filteredElementWindow">
         @if (toggleBoolean.selectUserInMsgBox) {
         <div class="positionOfAllUsersInBox">
diff --git a/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.ts b/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.ts
index 3d17aa0..a9fc27c 100644
--- a/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.ts
+++ b/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.ts
@@ -44,6 +44,7 @@ export class ChatMsgBoxComponent {
   @Input() viewWidth: number = 0;
   @Output() newMsgEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   @ViewChild('textarea') textAreaRef!: ElementRef;
+  @ViewChild('fileInput') fileInput!: ElementRef;
 
   hasFile: boolean = false;
   fileDataError: boolean = false;
@@ -98,6 +99,12 @@ export class ChatMsgBoxComponent {
     }
   }
 
+  handleFileInputClick() {
+    if (this.downloadFilesService.uploadFiles.length < 1) {
+      this.fileInput.nativeElement.click();
+    }
+  }
+
   /**
    * Handles file input change event.
    * @param event The file change event.
diff --git a/src/app/shared/components/small-btn/small-btn.component.html b/src/app/shared/components/small-btn/small-btn.component.html
index 9d59f6c..a486461 100644
--- a/src/app/shared/components/small-btn/small-btn.component.html
+++ b/src/app/shared/components/small-btn/small-btn.component.html
@@ -1,4 +1,4 @@
-<div
+<button
   class="smallBtn"
   [ngStyle]="{
     width: btnSize,
@@ -6,6 +6,7 @@
     'background-color': btnBgColor,
     '--btnBgHoverColor': btnBgHoverColor
   }"
+  [disabled]="disable"
 >
   <img
     [ngStyle]="{
@@ -13,7 +14,7 @@
       height: imgSize,
       '--filter': imgFilter
     }"
-    src="./assets/img/{{ imgSrc }}"
+    [src]="'assets/img/' + imgSrc"
     alt=""
   />
-</div>
+</button>
diff --git a/src/app/shared/components/small-btn/small-btn.component.scss b/src/app/shared/components/small-btn/small-btn.component.scss
index 0d3d6e9..8c23947 100644
--- a/src/app/shared/components/small-btn/small-btn.component.scss
+++ b/src/app/shared/components/small-btn/small-btn.component.scss
@@ -2,11 +2,17 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  border: 0px;
   border-radius: 100%;
+  background-color: transparent;
   width: 0;
   height: 0;
   cursor: pointer;
   transition: 0.125s ease-in-out;
+  img {
+    filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7481%)
+      hue-rotate(228deg) brightness(98%) contrast(106%);
+  }
   &:hover {
     background-color: var(--btnBgHoverColor);
     img {
@@ -15,3 +21,17 @@
     }
   }
 }
+
+.smallBtn[disabled] {
+  cursor: auto;
+  img {
+    filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(29%)
+      hue-rotate(173deg) brightness(99%) contrast(91%);
+  }
+  &:hover {
+    background-color: transparent;
+    img {
+      scale: 1;
+    }
+  }
+}
diff --git a/src/app/shared/components/small-btn/small-btn.component.ts b/src/app/shared/components/small-btn/small-btn.component.ts
index 51e14ba..156f2d1 100644
--- a/src/app/shared/components/small-btn/small-btn.component.ts
+++ b/src/app/shared/components/small-btn/small-btn.component.ts
@@ -16,4 +16,5 @@ export class SmallBtnComponent {
   @Input() btnSize: string = '28px';
   @Input() btnBgColor: string = '';
   @Input() btnBgHoverColor: string = '#edeefe';
+  @Input() disable: boolean = false;
 }
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 16c54a6..97ae478 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -73,7 +73,6 @@
   },
 
   "channel-msg-box": {
-    "text0": "Maximal eine Datei pro Nachricht",
     "text1": "Dieses Dateiformat ist ungültig",
     "text2": "Dateigröße max. 1 MB",
     "placeholder": "Geben Sie Ihre Nachricht ein"
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index b5c3180..417aa85 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -73,7 +73,6 @@
   },
 
   "channel-msg-box": {
-    "text0": "Maximum one file per message",
     "text1": "This file format is invalid",
     "text2": "File size max. 1 MB",
     "placeholder": "Enter your message"