frontend-park-mail-ru · vovasvl · Dec 17, 2024 · Dec 20, 2024 · Dec 20, 2024 · Dec 20, 2024
diff --git a/public/assets/image/start-branch.png b/public/assets/image/start-branch.png
diff --git a/source/app/ui/index.scss b/source/app/ui/index.scss
@@ -5,11 +5,11 @@ body {
 }
 
 :root {
-  --background: #090707;
-  --background-shadow-50: #0c0f15;
-  --primary: #101723;
-  --primary-shadow-15: #0e141e;
-  --primary-shadow-25: #0a0e16;
+  --background: #0f0f0f;
+  --background-shadow-50: #0D131D;
+  --primary: #172132;
+  --primary-shadow-15: #121A27;
+  --primary-shadow-25: #0C121D;
   --secondary: #4f82bf;
   --accent: #afcbee;
 

diff --git a/source/entities/ChatCard/ui/ChatCard.ts b/source/entities/ChatCard/ui/ChatCard.ts
@@ -18,7 +18,6 @@ export class ChatCard {
 
   async render(chat: TChat, notificate = false, notificationChat : TChat | null = null) {
 
-    console.log(chat);
     if (notificationChat) {
       chat = notificationChat;
     }
@@ -42,7 +41,6 @@ export class ChatCard {
         avatar,
       }),
     );
-    console.log(chat.lastMessage.text)
     this.#parent.lastElementChild!.addEventListener("click", (e) => {
       e.preventDefault();
 

diff --git a/source/entities/ChatMessage/api/MessageHandler.ts b/source/entities/ChatMessage/api/MessageHandler.ts
@@ -1,22 +1,22 @@
-import { UserStorage } from "@/entities/User";
 import { MessageMenu } from "@/widgets/MessageMenu/ui/MessageMenu";
 import { TChatMessage } from "../model/type";
 import { ChatStorage } from "@/entities/Chat/lib/ChatStore";
 import { ChatMessage } from "../ui/ChatMessage";
 
 export const messageHandler = (messageId : string, messages : TChatMessage[], chatMessageObject : ChatMessage) => {
     const message = document.getElementById(messageId)!;
-    if(messages.find(messageItem => messageItem.messageId === messageId)?.message_type === "sticker") {
-      return;
-    }
+    // if(messages.find(messageItem => messageItem.messageId === messageId)?.message_type === "sticker") {
+    //   return;
+    // }
 
     const handleMessageClick = (event : MouseEvent) => {
         const pickedMessage = messages.find((elem) => {
           return elem.messageId === messageId;
         });
 
         if (message) {
-          const messageText = message.querySelector("#message-text-content")!.innerHTML; 
+          const messageTxt = message.querySelector("#message-text-content")!;
+          const messageText = messageTxt ? message.querySelector("#message-text-content")!.textContent : "";
           const menu = message.querySelector("#menu-context")!;
           const messageMenu = new MessageMenu(menu);
           if (messageText) {
@@ -25,9 +25,12 @@ export const messageHandler = (messageId : string, messages : TChatMessage[], ch
                 return;
             }
 
-            messageMenu.render(pickedMessage, messageId, messageText, event.x-100, event.y-25, chatMessageObject, false);
+            messageMenu.render(pickedMessage, messageId, messageText, event.x-100, event.y-25, chatMessageObject, false, true);
 
-           }
+          }
+          else {
+          messageMenu.render(pickedMessage, messageId, messageText, event.x-100, event.y-25, chatMessageObject, false, false);
+          }
         }
       };
 

diff --git a/source/entities/ChatMessage/ui/ChatMessage.scss b/source/entities/ChatMessage/ui/ChatMessage.scss
@@ -38,6 +38,7 @@ $messages-container-width: 700px;
 
     &__username {
       @include font-settings("Inter", 400, 14px, $secondary);
+      margin-bottom: 2px;
 
       overflow: hidden;
       text-overflow: ellipsis;
@@ -157,14 +158,15 @@ $messages-container-width: 700px;
   }
   &__avatar {
     width: 40px;
-    height: 40px;
 
     display: flex;
     align-items: flex-end;
 
     padding: 0px 5px;
 
     &__img {
+      position: absolute;
+
       width: 40px;
       height: 40px;
       border-radius: 100%;

diff --git a/source/entities/ChatMessage/ui/ChatMessage.ts b/source/entities/ChatMessage/ui/ChatMessage.ts
@@ -10,7 +10,7 @@ import { serverHost } from "@/app/config";
 import { ChatStorage } from "@/entities/Chat/lib/ChatStore";
 import { API } from "@/shared/api/api";
 import { MessageMenu } from "@/widgets/MessageMenu/ui/MessageMenu.ts";
-import { ChatMessagesResponse, createBranchResponse, EmptyRequest } from "@/shared/api/types";
+import { ChatMessagesResponse} from "@/shared/api/types";
 import { messageHandler } from "../api/MessageHandler";
 import { formatBytes } from "@/shared/helpers/formatBytes";
 import { InfoMessage } from "@/entities/InfoMessage/ui/InfoMessage";
@@ -49,7 +49,6 @@ export class ChatMessage {
   }
 
   async renderMessages(messages: TChatMessage[], chatIsNotBranch = true) {
-    console.log(messages);
     if ( 
       this.#parent.innerHTML &&
       this.#oldestMessage?.first &&
@@ -121,7 +120,6 @@ export class ChatMessage {
             redactedMessage.classList.remove("hidden");
           }
         }
-
         const currentMessageId = this.#parent.lastElementChild!.id;
         messageHandler(currentMessageId, messages, this);
       }
@@ -132,11 +130,14 @@ export class ChatMessage {
     }
   }
   async renderNewMessage(message: TChatMessage, chatIsNotBranch = true) {
+    if (message.chatId !== ChatStorage.getChat().chatId && ChatStorage.getCurrentBranchId() !== message.chatId) {
+      return;
+    }
     const placeholder= this.#parent.querySelector('#msg-placeholder');
     if(placeholder) {
       placeholder.remove();
     }
-    if (message.text || message.sticker) {
+    if (message.text || message.sticker || message.files || message.photos) {
       if (
         this.#newestMessage?.last &&
         this.#newestMessage.authorID === message.authorID
@@ -206,21 +207,22 @@ export class ChatMessage {
 
       const newMessageElement = document.getElementById(message.messageId)!;
       const handleMessageClick = (event : MouseEvent) => {
-
         const messageId = newMessageElement.id;
         const messageInChat = document.getElementById(messageId)!;
         if (message) {
           const menu = messageInChat.querySelector("#menu-context")!;
           const messageText = messageInChat.querySelector("#message-text-content")?.textContent;
           const messageMenu = new MessageMenu(menu);
           if (messageText) {
-            console.log("hihihi")
             if (ChatStorage.getCurrentBranchId()) {
               messageMenu.render(message, messageId, messageText, event.x-100, event.y-25, this, true);
               return;
             }
             messageMenu.render(message, messageId, messageText, event.x-100, event.y-25, this, false);
           }
+          else {
+            messageMenu.render(message, messageId, "", event.x-100, event.y-25, this, false);
+          }
         }
       };
 

diff --git a/source/entities/SearchedMessageCard/ui/SearchedMessageCard.ts b/source/entities/SearchedMessageCard/ui/SearchedMessageCard.ts
@@ -14,7 +14,6 @@ export class SearchedMessageCard{
     }
 
     render(message : TChatMessage, avatar : string, person : string, chatMessages : HTMLElement, Message : ChatMessage) {
-        console.log(ChatStorage.getCurrentBranchId())
         message.datetime = getTimeString(message.datetime);
 
         avatar = avatar ? serverHost + avatar : "/assets/image/default-avatar.svg";
@@ -57,7 +56,6 @@ export class SearchedMessageCard{
                 }
 
                 message = document.querySelector("#chat-branch")!.querySelector("#chat__messages")!.querySelector(`[id='${messageId}']`)!;
-                console.log(message, messageId)
                 message.scrollIntoView({ block: "center", behavior: "smooth" });
             }
 

diff --git a/source/pages/MainPage/ui/MainPage.scss b/source/pages/MainPage/ui/MainPage.scss
@@ -133,6 +133,7 @@ body#main {
 
   display: flex;
   flex-direction: column;
+  gap: 10px;
 }
 
 @media screen and (max-width: 950px) {

diff --git a/source/pages/MainPage/ui/handlers.ts b/source/pages/MainPage/ui/handlers.ts
@@ -25,8 +25,6 @@ export const renderMessage = async (message: TMessageWS) => {
         if (!message.text) {
           message.text = "file";
         }
-        console.log(message)
-        console.log(message.text)
         const notificationChat : TChat = {
           chatId: message.chatId,
           lastMessage: message,
@@ -36,7 +34,6 @@ export const renderMessage = async (message: TMessageWS) => {
         };
 
         if (newChatResponse && newChatResponse.send_notifications) {
-          console.log(message)
           chatCard.render(notificationChat, true, newChatResponse);
           UserNotification.show();
         }

diff --git a/source/shared/api/ws.ts b/source/shared/api/ws.ts
@@ -25,6 +25,7 @@ class wsConnection {
     this.ws.onmessage = (event: MessageEvent) => {
       try {
         const res = JSON.parse(event.data);
+        console.log('ws', res);
 
         if (res.messageType === "error") {
           return;

diff --git a/source/shared/styles/styles.scss b/source/shared/styles/styles.scss
@@ -110,11 +110,13 @@ $chat-padding-top: var(--chat-padding-top);
   padding-top: $chat-padding-top;
   padding-right: 20px;
   max-width: $main-page-right-column-width;
+  min-width: $main-page-right-column-width;
 
   background: $primary;
 
   @media screen and (max-width: 950px) {
     padding-left: 20px;
+    min-width: unset;
     max-width: unset;
   }
 }

diff --git a/source/widgets/Chat/ui/Chat.scss b/source/widgets/Chat/ui/Chat.scss
@@ -114,6 +114,7 @@ textarea {
 }
 
 .messages {
+  padding-block: 40px;
   width: 100%;
   max-width: $messages-container-max-width;
   flex: 1;
@@ -259,10 +260,10 @@ textarea {
     position: absolute;
     width: 305px;
     height: 400px;
-    right: 0;
+    right: -50px;
     bottom: 45px;
 
-    background: var(--text-over-primary-shadow-30);
+    background: var(--primary-shadow-15);
     border-radius: 10px;
     padding: 10px;
 
@@ -299,6 +300,8 @@ textarea {
         width: 100%;
         min-width: 100%;
         height: 100%;
+
+        color: $text-over-primary;
       }
       .emoji-list {
         display: flex;

diff --git a/source/widgets/Chat/ui/Chat.ts b/source/widgets/Chat/ui/Chat.ts
@@ -270,7 +270,7 @@ export class Chat {
       const messageText = textArea.value.trim();
       textArea.value = "";
 
-      if (messageText) {
+      if (messageText || this.#files.length || this.#photos.length) {
 
         if (textArea.classList.contains('edit')) {
           const messageId = textArea.classList[2]!;

diff --git a/source/widgets/ChatInfo/ui/ChatInfo.scss b/source/widgets/ChatInfo/ui/ChatInfo.scss
@@ -9,6 +9,7 @@ $delete-button-color: var(--delete-button-color);
 
 .chat-info-column{
   flex: 1;
+  min-height: 0;
 
   display: flex;
   flex-direction: column;
@@ -43,6 +44,7 @@ $delete-button-color: var(--delete-button-color);
     color: $text-over-secondary;
     font-family: var(--main-font-family);
     font-size: 20px;
+    line-break: anywhere;
   }
 
   &__span-online-status {
@@ -86,6 +88,7 @@ $delete-button-color: var(--delete-button-color);
     font-size: var(--base-font-size);
     font-family: var(--main-font-family);
     color: $text-over-secondary;
+    line-break: anywhere;
   }
 }
 

diff --git a/source/widgets/ChatInfo/ui/ChatInfo.ts b/source/widgets/ChatInfo/ui/ChatInfo.ts
@@ -98,7 +98,8 @@ export class ChatInfo {
 
 
     const handleNotification = async () => {
-      await API.post(`/chat/${ChatStorage.getChat().chatId}/notifications/${!notificationCheckbox.checked}`, {});
+      const responseNotification : boolean = await API.post(`/chat/${ChatStorage.getChat().chatId}/notifications/${!notificationCheckbox.checked}`, {});
+      ChatStorage.getChat().send_notifications = responseNotification;
     };
 
     notificationToggle.addEventListener("click", handleNotification);

diff --git a/source/widgets/GroupChatInfo/ui/GroupChatInfo.scss b/source/widgets/GroupChatInfo/ui/GroupChatInfo.scss
@@ -28,8 +28,8 @@ $scroll-bar-color: var(--scroll-bar-color);
 
 .group-info-close-button-img {
   position: absolute;
-  top: 15px;
-  left: 15px;
+  top: 0;
+  left: 0;
 
   width: 24px;
   height: 24px;
@@ -47,15 +47,17 @@ $scroll-bar-color: var(--scroll-bar-color);
 
 .group-update-image__img {
   position: absolute;
-  top: 20px;
-  right: 20px;
+  top: 0;
+  right: 0;
 
   width: 15px;
   height: 15px;
   cursor: pointer;
 }
 
 .group-info-header {
+  padding: 20px;
+
   border-radius: 25px;
   background-color: $secondary;
 
@@ -88,7 +90,7 @@ $scroll-bar-color: var(--scroll-bar-color);
 }
 
 .group-content {
-  margin: 10px 0 0 10px;
+  margin: 10px 0;
 
   flex: 1;
   min-height: 0;
@@ -295,5 +297,6 @@ $scroll-bar-color: var(--scroll-bar-color);
 }
 
 .group-notifications {
+  align-self: normal;
   margin-bottom: 15px;
 }
diff --git a/source/widgets/MessageMenu/ui/MessageMenu.handlebars b/source/widgets/MessageMenu/ui/MessageMenu.handlebars
@@ -1,20 +1,24 @@
 <div class="modal">
     <div id="message-menu" class="message-menu" style="margin-left: {{x}}px; margin-top: {{y}}px;">
-        {{#if notPersonalChat}}
-            {{#if notBranch}}
-            <div id="branch-message" class="message-menu-branch">
-                <img class="message-menu-branch__img" src="/assets/image/branch-icon.png" alt="...">
-                <span class="message-menu-branch__span">Ветка</span>
-            </div>
+        {{#if messageIsNoSticker}}
+            {{#if noSticker}}
+                {{#if notPersonalChat}}
+                    {{#if notBranch}}
+                    <div id="branch-message" class="message-menu-branch">
+                        <img class="message-menu-branch__img" src="/assets/image/branch-icon.png" alt="...">
+                        <span class="message-menu-branch__span">Ветка</span>
+                    </div>
+                    {{/if}}
+                {{/if}}
+                {{#if thisUser}}
+                <div id="edit-message" class="message-menu-edit">
+                    <img class="message-menu-edit__img" src="/assets/image/update-group.svg" alt="...">
+                    <span class="message-menu-edit__span">Изменить</span>
+                </div>
+                {{/if}}
             {{/if}}
         {{/if}}
         {{#if thisUser}}
-        <div id="edit-message" class="message-menu-edit">
-            <img class="message-menu-edit__img" src="/assets/image/update-group.svg" alt="...">
-            <span class="message-menu-edit__span">Изменить</span>
-        </div>
-        {{/if}}
-        {{#if thisUser}}
         <div id="delete-message" class="message-menu-delete">
             <img class="message-menu-delete__img" src="/assets/image/delete-icon.png" alt="...">
             <span style="color: tomato;" class="message-menu-delete__span">Удалить</span>