First attempt in sprint_3

yandex-praktikum · Apr 16, 2024 · cea1423 · cea1423
1 parent 98904a5
commit cea1423
Show file tree

Hide file tree

Showing 32 changed files with 825 additions and 254 deletions.
diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
@@ -7,30 +7,36 @@
   height: 130px;
   overflow: hidden;
   border-radius: 50%;
-  cursor: pointer;
 
   &__text {
     display: none;
     position: absolute;
+    cursor: pointer;
   }
 
   &__img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
+    background: var(--hover-bg);
   }
 
   &:hover {
-    &__text {
+    .avatar__text {
       background: var(--hover-bg);
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100%;
+
+      span {
+        font-size: 18px;
+        text-align: center;
+      }
     }
 
-    &__img {
+    .avatar__img {
       width: 100%;
       height: 100%;
       object-fit: cover;

diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
@@ -5,9 +5,11 @@ import './avatar.css'
 const avatarTemplate = `
   <div class="avatar {{ className }}">
     <img class="avatar__img" src="{{src}}" alt="{{alt}}">
-    <div class="avatar__text">
-      <span>Сменить аватар</span>
-    </div>
+    {{#if canChange}}
+      <div class="avatar__text">
+        <span>Поменять аватар</span>
+      </div>
+    {{/if}}
   </div>
 `
 
@@ -16,20 +18,16 @@ type AvatarProps = {
   alt: string
   size?: string
   className?: string
+  canChange?: boolean
 } & Props
 
 export default class Avatar extends Block {
   constructor(props: AvatarProps) {
     super(props)
-    const element = this.element as HTMLElement
-
-    if (props.src === '') {
-      const img = element.querySelector('img')
-      if (img) {
-        img.src =
-          'https://i2.wp.com/vdostavka.ru/wp-content/uploads/2019/05/no-avatar.png?fit=512%2C512&ssl=1'
-      }
+    if (!this.props.canChange) {
+      this.props.canChange = false
     }
+    const element = this.element as HTMLElement
 
     if (props.size) {
       element.style.width = props.size
@@ -40,6 +38,13 @@ export default class Avatar extends Block {
     }
   }
 
+  componentDidUpdate(oldProps: Props, newProps: Partial<Props>): boolean {
+    if (!newProps.src) {
+      newProps.src = 'https://i2.wp.com/vdostavka.ru/wp-content/uploads/2019/05/no-avatar.png?fit=512%2C512&ssl=1'
+    }
+    return super.componentDidUpdate(oldProps, newProps)
+  }
+
   render() {
     return this.compile(avatarTemplate, this.props)
   }

diff --git a/src/components/chat/chat.css b/src/components/chat/chat.css
diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts
diff --git a/src/components/chatItem/chatItem.css b/src/components/chatItem/chatItem.css
@@ -28,6 +28,7 @@
     color: var(--color-gray);
     font-weight: 400;
     font-size: 12px;
+    place-self: center center;
   }
 
   &__message {
@@ -37,7 +38,21 @@
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 400;
   }
+
+  &__unreaded {
+    width: 20px;
+    height: 20px;
+    justify-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    background: var(--color-blue);
+    border-radius: 50%;
+    color: var(--color-white);
+    font-size: 12px;
+  }
 }
diff --git a/src/components/chatItem/chatItem.ts b/src/components/chatItem/chatItem.ts
@@ -3,8 +3,8 @@ import { Chat } from '@/constants/types.ts'
 import Block, { Props } from '@/core/Block'
 import './chatItem.css'
 import store from '@/core/Store.ts'
-import getResourceURL from '@/utils/getResourceURL.ts'
 import formatMessageDate from '@/utils/formatMessageDate.ts'
+import getResourceURL from '@/utils/getResourceURL.ts'
 
 // language=hbs
 const ChatItemTemplate = `
@@ -13,6 +13,9 @@ const ChatItemTemplate = `
     <span class="chat-item__nickname">{{{ title }}}</span>
     <span class="chat-item__date">{{{ time }}}</span>
     <span class="chat-item__message">{{{ last_message.content }}}</span>
+    {{#if unreaded}}
+      <span class="chat-item__unreaded">{{{ unreaded }}}</span>
+    {{/if}}
   </div>
 `
 
@@ -23,9 +26,14 @@ export default class ChatItem extends Block {
     super({
       ...props,
       events: {
-        click: () => store.set('selectedChat', { id: props.id }),
+        click: () => {
+          store.set('selectedChat', props.id)
+        },
       },
-      time: props.last_message ? formatMessageDate(props.last_message.time) : '',
+      time: props.last_message
+        ? formatMessageDate(props.last_message.time)
+        : '',
+      unreaded: props.unread_count ? props.unread_count : '',
       avatar: new Avatar({
         src: props.avatar ? getResourceURL(props.avatar) : '',
         alt: 'avatar',

diff --git a/src/components/chatWindow/chatWindow.css b/src/components/chatWindow/chatWindow.css
@@ -0,0 +1,111 @@
+.chat {
+  display: grid;
+  grid-template-rows: 44px auto 64px;
+  padding: 10px 0;
+  gap: 4px;
+  max-height: 100%;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  box-sizing: border-box;
+
+  &__header {
+    display: grid;
+    grid-template-columns: 34px auto 44px;
+    padding: 0 20px 10px;
+    gap: 16px;
+    align-items: center;
+    border-bottom: 1px solid var(--border);
+    z-index: 1000;
+
+    .chat-menu {
+      position: relative;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &__actions {
+        display: none;
+        position: absolute;
+        width: 240px;
+        background: var(--color-white);
+        box-shadow: var(--box-shadow);
+        padding: 12px;
+        border-radius: 10px;
+
+        i {
+          color: var(--color-blue);
+        }
+      }
+
+      &__action {
+        display: flex;
+        align-items: center;
+        padding: 8px;
+        gap: 8px;
+        cursor: pointer;
+        border-radius: 6px;
+        background: none;
+        border: none;
+        font-size: 14px;
+
+        &:hover {
+          background: var(--color1);
+        }
+      }
+    }
+
+    .chat-menu:hover .chat-menu__actions {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      top: 30px;
+      right: 12px;
+    }
+  }
+
+  &__messages {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 20px;
+    height: 100%;
+    padding: 0 20px;
+    overflow-y: scroll;
+    scrollbar-width: thin;
+  }
+
+  &__input-block {
+    display: grid;
+    grid-template-columns: 30px auto 30px;
+    gap: 12px;
+    align-items: center;
+    padding: 10px 20px 0;
+    border-top: 1px solid var(--border);
+
+    .message-label {
+      margin: 0;
+    }
+
+    .message-input {
+      padding: 12px 10px;
+      background: var(--color1);
+      border: none;
+      border-radius: 100px;
+      box-sizing: border-box;
+    }
+
+    .lni-paperclip {
+      color: var(--color-gray);
+      font-size: 20px;
+      transform: rotate(45deg);
+    }
+
+    .send-btn {
+      height: 40px;
+      width: 40px;
+      background: var(--color1);
+      border-radius: 50%;
+      cursor: pointer;
+    }
+  }
+}