From ff7e7c8810bc745135c6106d4357ae1902906327 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Mon, 16 Sep 2024 04:50:06 +0200
Subject: [PATCH] Update overlay design for improved appearance

---
 .../channel-information.component.html        | 324 +++++++++---------
 .../channel-information.component.scss        |   4 +
 2 files changed, 167 insertions(+), 161 deletions(-)

diff --git a/src/app/components/main-chat/channel-information/channel-information.component.html b/src/app/components/main-chat/channel-information/channel-information.component.html
index bb7e32c..0fac958 100644
--- a/src/app/components/main-chat/channel-information/channel-information.component.html
+++ b/src/app/components/main-chat/channel-information/channel-information.component.html
@@ -1,170 +1,172 @@
 <div class="menu" (click)="closeMenu()">
   <div class="whiteBox" (click)="preventCloseWhiteBox($event)">
-    @for (channel of getChannelName(currentChannel); track channel) {
-    <div class="headerBox">
-      <div class="headline">
-        <img src="./assets/img/hashtag.svg" alt="" />
-        <p>{{ channel.name }}</p>
-      </div>
-      <div class="closeBtn" (click)="closeMenu()">
-        <img src="./assets/img/closeIcon.svg" alt="" />
-      </div>
-    </div>
-    }
-    <div class="contentChannel">
+    <div class="content">
       @for (channel of getChannelName(currentChannel); track channel) {
-      <div class="contentHeadline">
-        <p>{{ "channel-information.header" | translate }}</p>
-        @if (!openEditNameInput) {
-        <!--check if user is creator-->
-        @if(checkCreator(currentChannel)){
-        <app-small-btn
-          [imgSrc]="'pencil.svg'"
-          [imgSize]="'18px'"
-          [btnSize]="'32px'"
-          [btnBgHoverColor]="'#edeefe'"
-          (click)="editChannelName($event)"
-        ></app-small-btn>
-        } @else {
-        <img class="disableEdit" src="./assets/img/pencil.svg" alt="" />
-        } } @else {
-        <app-small-btn
-          [imgSrc]="'save.svg'"
-          [imgSize]="'18px'"
-          [btnSize]="'32px'"
-          [btnBgHoverColor]="'#edeefe'"
-          (click)="saveEditChannelName($event)"
-        ></app-small-btn>
-        }
-      </div>
-      @if (!openEditNameInput) {
-      <div class="channelName">
-        <img src="./assets/img/hashtag.svg" alt="" />
-        <p>{{ channel.name }}</p>
-      </div>
-      } @else {
-      <div class="channelName">
-        <img src="./assets/img/hashtag.svg" alt="" />
-        <input
-          type="text"
-          [(ngModel)]="nameValue"
-          class="inputName"
-          id="inputName"
-          name="inputName"
-          autocomplete="off"
-        />
-      </div>
-      } }
-    </div>
-    <div class="contentChannel">
-      @for (channel of getChannelName(currentChannel); track channel) {
-
-      <div class="contentHeadline">
-        <p>{{ "channel-information.channelInfo" | translate }}</p>
-        @if (!openEditNameDescription) {
-        <!--check if user is creator-->
-        @if(checkCreator(currentChannel)){
-        <app-small-btn
-          [imgSrc]="'pencil.svg'"
-          [imgSize]="'18px'"
-          [btnSize]="'32px'"
-          [btnBgHoverColor]="'#edeefe'"
-          (click)="editChannelDescription($event)"
-        ></app-small-btn>
-        } @else {
-        <img class="disableEdit" src="./assets/img/pencil.svg" alt="" />
-        } } @else {
-        <app-small-btn
-          [imgSrc]="'save.svg'"
-          [imgSize]="'18px'"
-          [btnSize]="'32px'"
-          [btnBgHoverColor]="'#edeefe'"
-          (click)="saveEditChannelDescription($event)"
-        ></app-small-btn>
-        }
-      </div>
-      @if (!openEditNameDescription) {
-      <div class="channelDescription">
-        @if (channel.description !== "") {
-        <p>{{ channel.description }}</p>
-        } @else {
-        <p>{{ "channel-information.channelInfo2" | translate }}</p>
-        }
-      </div>
-      } @else {
-      <div class="channelName">
-        <textarea
-          cols="30"
-          rows="10"
-          [(ngModel)]="descriptionValue"
-          class="textareaDescription"
-        ></textarea>
-      </div>
-      }
-      <div class="line"></div>
-      <div class="contentHeadline">
-        <p>{{ "channel-information.channelMadeBy" | translate }}</p>
-      </div>
-      <div class="channelCreator">
-        @if(channel.creator == "Admin") {
-        <p class="creatorName">Admin</p>
-        } @else { @for (user of getChatUsers(channel.creator); track user) {
-        <p class="creatorName">{{ user.firstName }} {{ user.lastName }}</p>
-        } } @if(!checkCreator(currentChannel)){
-        <p class="warningPTag">
-          {{ "channel-information.channelErrorText" | translate }}
-        </p>
-        }
-      </div>
-      }
-    </div>
-    <div
-      class="contentChannelMembers"
-      [ngStyle]="{
-        display: viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? 'none' : ''
-      }"
-    >
-      <div class="contentHeadline">
-        <p>{{ "channel-information.members" | translate }}</p>
-      </div>
-      <div class="allUsers">
-        @for(allMembers of getAllChannelMembers(currentChannel)[0].addedUser;
-        track allMembers) { @for (user of getChatUsers(allMembers); track user)
-        {
-        <div class="user" (click)="openUserWindow(user)">
-          <div class="imgBox">
-            <img src="{{ user.avatar }}" class="userImg" />
-            <img
-              src="./assets/img/{{
-                user.status ? 'onlineRing.svg' : 'offlineRing.svg'
-              }}"
-              class="onlineIcon"
-            />
-          </div>
-          <p>
-            {{ user.firstName }} {{ user.lastName }} @if (user.id ==
-            userService.getCurrentUserId()) { (You) }
-          </p>
+      <div class="headerBox">
+        <div class="headline">
+          <img src="./assets/img/hashtag.svg" alt="" />
+          <p>{{ channel.name }}</p>
+        </div>
+        <div class="closeBtn" (click)="closeMenu()">
+          <img src="./assets/img/closeIcon.svg" alt="" />
         </div>
-        }}
       </div>
-    </div>
-    <app-open-send-prv-message-window
-      [ngClass]="{
-        dBlock: openUserWindowBoolean,
-        dNone: !openUserWindowBoolean
-      }"
-      [user]="user"
-      [openUserWindowBoolean]="openUserWindowBoolean"
-      (closeUserWindow)="changeOpenUserWindowBoolean($event)"
-    ></app-open-send-prv-message-window>
-    <div class="leaveChannel">
-      <button
-        [disabled]="openEditNameInput || openEditNameDescription"
-        (click)="leaveChannel(currentChannel, $event)"
+      }
+      <div class="contentChannel">
+        @for (channel of getChannelName(currentChannel); track channel) {
+        <div class="contentHeadline">
+          <p>{{ "channel-information.header" | translate }}</p>
+          @if (!openEditNameInput) {
+          <!--check if user is creator-->
+          @if(checkCreator(currentChannel)){
+          <app-small-btn
+            [imgSrc]="'pencil.svg'"
+            [imgSize]="'18px'"
+            [btnSize]="'32px'"
+            [btnBgHoverColor]="'#edeefe'"
+            (click)="editChannelName($event)"
+          ></app-small-btn>
+          } @else {
+          <img class="disableEdit" src="./assets/img/pencil.svg" alt="" />
+          } } @else {
+          <app-small-btn
+            [imgSrc]="'save.svg'"
+            [imgSize]="'18px'"
+            [btnSize]="'32px'"
+            [btnBgHoverColor]="'#edeefe'"
+            (click)="saveEditChannelName($event)"
+          ></app-small-btn>
+          }
+        </div>
+        @if (!openEditNameInput) {
+        <div class="channelName">
+          <img src="./assets/img/hashtag.svg" alt="" />
+          <p>{{ channel.name }}</p>
+        </div>
+        } @else {
+        <div class="channelName">
+          <img src="./assets/img/hashtag.svg" alt="" />
+          <input
+            type="text"
+            [(ngModel)]="nameValue"
+            class="inputName"
+            id="inputName"
+            name="inputName"
+            autocomplete="off"
+          />
+        </div>
+        } }
+      </div>
+      <div class="contentChannel">
+        @for (channel of getChannelName(currentChannel); track channel) {
+
+        <div class="contentHeadline">
+          <p>{{ "channel-information.channelInfo" | translate }}</p>
+          @if (!openEditNameDescription) {
+          <!--check if user is creator-->
+          @if(checkCreator(currentChannel)){
+          <app-small-btn
+            [imgSrc]="'pencil.svg'"
+            [imgSize]="'18px'"
+            [btnSize]="'32px'"
+            [btnBgHoverColor]="'#edeefe'"
+            (click)="editChannelDescription($event)"
+          ></app-small-btn>
+          } @else {
+          <img class="disableEdit" src="./assets/img/pencil.svg" alt="" />
+          } } @else {
+          <app-small-btn
+            [imgSrc]="'save.svg'"
+            [imgSize]="'18px'"
+            [btnSize]="'32px'"
+            [btnBgHoverColor]="'#edeefe'"
+            (click)="saveEditChannelDescription($event)"
+          ></app-small-btn>
+          }
+        </div>
+        @if (!openEditNameDescription) {
+        <div class="channelDescription">
+          @if (channel.description !== "") {
+          <p>{{ channel.description }}</p>
+          } @else {
+          <p>{{ "channel-information.channelInfo2" | translate }}</p>
+          }
+        </div>
+        } @else {
+        <div class="channelName">
+          <textarea
+            cols="30"
+            rows="10"
+            [(ngModel)]="descriptionValue"
+            class="textareaDescription"
+          ></textarea>
+        </div>
+        }
+        <div class="line"></div>
+        <div class="contentHeadline">
+          <p>{{ "channel-information.channelMadeBy" | translate }}</p>
+        </div>
+        <div class="channelCreator">
+          @if(channel.creator == "Admin") {
+          <p class="creatorName">Admin</p>
+          } @else { @for (user of getChatUsers(channel.creator); track user) {
+          <p class="creatorName">{{ user.firstName }} {{ user.lastName }}</p>
+          } } @if(!checkCreator(currentChannel)){
+          <p class="warningPTag">
+            {{ "channel-information.channelErrorText" | translate }}
+          </p>
+          }
+        </div>
+        }
+      </div>
+      <div
+        class="contentChannelMembers"
+        [ngStyle]="{
+          display: viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? 'none' : ''
+        }"
       >
-        {{ "channel-information.leave" | translate }}
-      </button>
+        <div class="contentHeadline">
+          <p>{{ "channel-information.members" | translate }}</p>
+        </div>
+        <div class="allUsers">
+          @for(allMembers of getAllChannelMembers(currentChannel)[0].addedUser;
+          track allMembers) { @for (user of getChatUsers(allMembers); track
+          user) {
+          <div class="user" (click)="openUserWindow(user)">
+            <div class="imgBox">
+              <img src="{{ user.avatar }}" class="userImg" />
+              <img
+                src="./assets/img/{{
+                  user.status ? 'onlineRing.svg' : 'offlineRing.svg'
+                }}"
+                class="onlineIcon"
+              />
+            </div>
+            <p>
+              {{ user.firstName }} {{ user.lastName }} @if (user.id ==
+              userService.getCurrentUserId()) { (You) }
+            </p>
+          </div>
+          }}
+        </div>
+      </div>
+      <app-open-send-prv-message-window
+        [ngClass]="{
+          dBlock: openUserWindowBoolean,
+          dNone: !openUserWindowBoolean
+        }"
+        [user]="user"
+        [openUserWindowBoolean]="openUserWindowBoolean"
+        (closeUserWindow)="changeOpenUserWindowBoolean($event)"
+      ></app-open-send-prv-message-window>
+      <div class="leaveChannel">
+        <button
+          [disabled]="openEditNameInput || openEditNameDescription"
+          (click)="leaveChannel(currentChannel, $event)"
+        >
+          {{ "channel-information.leave" | translate }}
+        </button>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/components/main-chat/channel-information/channel-information.component.scss b/src/app/components/main-chat/channel-information/channel-information.component.scss
index 91ec484..d6352e9 100644
--- a/src/app/components/main-chat/channel-information/channel-information.component.scss
+++ b/src/app/components/main-chat/channel-information/channel-information.component.scss
@@ -20,6 +20,10 @@
     left: 460px;
     height: fit-content;
     overflow: none;
+    .content {
+      overflow: auto;
+      max-height: 580px;
+    }
   }
 }