change design of project chat section, fix websockets

Author: Awakich

projects/social_platform/src/app/office/features/message-input/message-input.component.html

@@ -5,11 +5,16 @@
   <ul class="message-input__action action files-list">
     @for (file of attachFiles; let index = $index; track index) {
     <li class="files-list__item file" [class.file--loading]="file.loading">
-      <i class="file__type" appIcon [icon]="'file_' + (file.type | fileType)" appSquare="24"></i>
-      <h3 class="file__name">{{ file.name }}</h3>
-      <div class="file__size">{{ +file.size | formatedFileSize }}</div>
-      <!--Use hardcoded svg here, because svg sprites
-      aren't capable of animation-->
+      <i class="file__icon file__icon--file" appIcon icon="file" appSquare="8"></i>
+      <div class="file__info">
+        <h3 class="file__name text-body-10">{{ file.name.split(".")[0] }}</h3>
+        @if (file.type) {
+        <div class="file__meta text-body-6">
+          {{ file.type.includes("/") ? (file.type | fileType) : (file.type | uppercase) }} •
+          {{ +file.size | formatedFileSize }}
+        </div>
+        }
+      </div>
       @if (file.loading) {
       <svg
         class="file__loading"
@@ -39,10 +44,10 @@ <h3 class="file__name">{{ file.name }}</h3>
       </svg>
       } @else {
       <i
-        class="file__basket"
+        class="file__icon file__icon--basket"
         appIcon
         icon="basket"
-        appSquare="12"
+        appSquare="8"
         (click)="onDeleteFile(index)"
       ></i>
       }

projects/social_platform/src/app/office/features/message-input/message-input.component.scss

@@ -6,6 +6,7 @@
 $button-size: 40px;
 
 .message-input {
+  position: relative;
   padding: 12px;
   border: 0.5px solid var(--medium-grey-for-outline);
   border-radius: 8px;
@@ -100,23 +101,33 @@ $button-size: 40px;
 }
 
 .files-list {
+  position: absolute;
+  bottom: 77%;
+  left: 15px;
   display: flex;
-  padding: 0 0 12px;
   list-style-type: none;
 
   &__item {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px;
+    background-color: var(--light-white);
+    border-color: var(--medium-grey-for-outline);
+    border-style: solid;
+    border-width: 0.5px 0.5px 0px 0.5px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    box-shadow: 4px -4px 4px rgb(51 51 51 / 20%);
+
     &:not(:last-child) {
       margin-right: 18px;
     }
   }
 }
 
 .file {
-  min-width: 140px;
-  padding: 10px;
-  border: 1px solid var(--medium-grey-for-outline);
-  border-radius: 20px;
-
   &--loading {
     .file__name {
       color: var(--dark-grey);
@@ -128,37 +139,53 @@ $button-size: 40px;
     }
   }
 
-  &__type {
-    display: block;
-    margin-bottom: 12px;
+  &__info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+    cursor: pointer;
+    border-radius: var(--rounded-xl);
+    transition: color 0.2s;
+
+    &--file {
+      color: var(--accent);
+      border: 0.5px solid var(--accent);
+
+      &:hover {
+        color: var(--accent-dark);
+      }
+    }
+
+    &--basket {
+      color: var(--red);
+      border: 0.5px solid var(--red);
+
+      &:hover {
+        color: var(--red-dark);
+      }
+    }
   }
 
   &__name {
     color: var(--black);
-
-    @include typography.body-14;
   }
 
-  &__size {
-    margin-bottom: 12px;
+  &__meta {
     color: var(--dark-grey);
-
-    @include typography.body-12;
   }
 
   &__loading {
     color: var(--accent);
   }
-
-  &__basket {
-    color: var(--red);
-    cursor: pointer;
-    transition: color 0.2s;
-
-    &:hover {
-      color: var(--red-dark);
-    }
-  }
 }
 
 .drop-modal {

projects/social_platform/src/app/office/features/message-input/message-input.component.ts

@@ -18,6 +18,7 @@ import { AutosizeModule } from "ngx-autosize";
 import { NgxMaskModule } from "ngx-mask";
 import { IconComponent } from "@ui/components";
 import { FormatedFileSizePipe } from "@core/pipes/formatted-file-size.pipe";
+import { UpperCasePipe } from "@angular/common";
 
 /**
  * Компонент ввода сообщений для чата
@@ -43,7 +44,14 @@ import { FormatedFileSizePipe } from "@core/pipes/formatted-file-size.pipe";
     },
   ],
   standalone: true,
-  imports: [IconComponent, NgxMaskModule, AutosizeModule, FileTypePipe, FormatedFileSizePipe],
+  imports: [
+    IconComponent,
+    NgxMaskModule,
+    AutosizeModule,
+    FileTypePipe,
+    FormatedFileSizePipe,
+    UpperCasePipe,
+  ],
 })
 export class MessageInputComponent implements OnInit, OnDestroy, ControlValueAccessor {
   /**

projects/social_platform/src/app/office/projects/detail/chat/chat.component.scss

@@ -45,7 +45,6 @@ $input-height: 66px + 18px;
 .main {
   display: flex;
   flex-direction: column;
-  background-color: var(--light-white);
 
   &__chat {
     display: none;
@@ -57,6 +56,8 @@ $input-height: 66px + 18px;
 
     @include responsive.apply-desktop {
       display: block;
+      background-color: var(--light-white);
+      border-radius: 15px;
     }
   }
 }

projects/social_platform/src/app/ui/components/chat-message/chat-message.component.html

@@ -10,27 +10,27 @@
   <div class="message__inner">
     <app-avatar
       class="message__avatar"
-      [size]="40"
+      [size]="30"
       [isOnline]="chatMessage.author.isOnline"
       [onlineBadgeBorder]="2"
       [onlineBadgeSize]="10"
       [url]="chatMessage.author.avatar"
     ></app-avatar>
     <div class="message__info">
       <div class="message__top">
-        <div class="message__name text-bold-body-16">
+        <div class="message__name text-body-10">
           {{ chatMessage.author.firstName }} {{ chatMessage.author.lastName }}
         </div>
-        <div class="message__time text-body-14">
+        <div class="message__time text-body-10">
           {{ chatMessage.createdAt | dayjs: "format":"HH:mm" }}
         </div>
       </div>
       @if (chatMessage.replyTo) {
       <div class="message__reply reply">
-        <div class="reply__name text-bold-body-16">
+        <div class="reply__name text-body-10">
           {{ chatMessage.replyTo.author.firstName }} {{ chatMessage.replyTo.author.lastName }}
         </div>
-        <p class="reply__message text-body-1">
+        <p class="reply__message text-body-10">
           {{ chatMessage.replyTo.text }}
         </p>
       </div>
@@ -47,15 +47,15 @@
         </li>
         }
       </ul>
-      <div class="message__content text-body-14">{{ chatMessage.text }}</div>
+      <div class="message__content text-body-10">{{ chatMessage.text }}</div>
     </div>
   </div>
   <div
     class="message__menu-dots"
     (click)="onOpenContextmenu($event)"
     (clickOutside)="onCloseContextmenu()"
   >
-    <i appIcon icon="dots" appWidth="4" appHeight="16" appViewBox="0 0 4 16"></i>
+    <i appIcon icon="dots" appWidth="4" appHeight="10" appViewBox="0 0 4 10"></i>
   </div>
 </div>
 @if (authService.profile | async; as profile) {
@@ -65,13 +65,13 @@
   [style.opacity]="isOpen ? 1 : 0"
   [style.pointer-events]="isOpen ? 'auto' : 'none'"
 >
-  <li class="contextmenu__item text-body-14" (click)="onCopyContent($event)">Скопировать</li>
-  <li class="contextmenu__item text-body-14" (click)="onReply($event)">Ответить</li>
+  <li class="contextmenu__item text-body-10" (click)="onCopyContent($event)">скопировать</li>
+  <li class="contextmenu__item text-body-10" (click)="onReply($event)">ответить</li>
   @if (profile.id === chatMessage.author.id) {
   <ng-container>
-    <li class="contextmenu__item text-body-14" (click)="onEdit($event)">Редактировать</li>
-    <li class="contextmenu__item contextmenu__item--red text-body-14" (click)="onDelete($event)">
-      Удалить
+    <li class="contextmenu__item text-body-10" (click)="onEdit($event)">редактировать</li>
+    <li class="contextmenu__item contextmenu__item--red text-body-10" (click)="onDelete($event)">
+      удалить
     </li>
   </ng-container>
   }

projects/social_platform/src/app/ui/components/chat-message/chat-message.component.scss

@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   max-width: 100%;
-  padding: 10px 28px 10px 20px;
+  padding: 10px;
 
   &--unread {
     background-color: #f7f3ff;
@@ -37,6 +37,7 @@
   &__top {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     margin-bottom: 5px;
   }
 
@@ -57,14 +58,14 @@
   }
 
   &__content {
-    color: var(--dark-grey);
+    color: var(--black);
     word-break: break-word;
     white-space: pre-wrap;
   }
 
   &__name {
     margin-right: 15px;
-    color: var(--black);
+    color: var(--accent);
   }
 
   &__menu-dots {
@@ -78,13 +79,8 @@
     margin-left: auto;
     color: var(--dark-grey);
     cursor: pointer;
-    background-color: var(--white);
     border-radius: var(--rounded-md);
     transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--light-gray);
-    }
   }
 
   &__contextmenu {
@@ -98,7 +94,7 @@
 }
 
 .contextmenu {
-  padding: 8px;
+  padding: 10px;
   background-color: var(--white);
   border-radius: var(--rounded-lg);
   box-shadow: 5px 5px 25px rgb(159 159 159 / 15%);