Skip to content

Commit

Permalink
refactor: rename classes according to correct BEM
Browse files Browse the repository at this point in the history
  • Loading branch information
@rasulov1337
rasulov1337 committed Dec 17, 2024
1 parent 4897b8c commit 79aa365
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 112 deletions.
23 changes: 9 additions & 14 deletions src/components/ChatWindow/ChatWindow.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,29 @@
<template id='js-chat-message-template'>
<div class='chat-window__chat-window__message'>
<span class='chat-window__chat-window__message__text js-message-text'>
<div class='message'>
<span class='message__text js-message-text'>
Тут текст сообщения
</span>
<div class='chat-window__chat-window__message__time-wrapper'>
<span
class='chat-window__chat-window__message__time js-message-time'
>
<div class='message__time-wrapper'>
<span class='message__time js-message-time'>
00:00
</span>
</div>
</div>
</template>

<div class='chat-window__chat-window' id='{{id}}'>
<div class='chat-window__chat-window__messages' id='js-messages'>
<div class='chat-window' id='{{id}}'>
<div class='chat-window__messages' id='js-messages'>
<!-- Messages will be here -->
</div>

<div class='chat-window__chat-window__bottom-part'>
<div class='chat-window__bottom-part'>
<textarea
placeholder='Написать сообщение'
class='chat-window__chat-window__input js-message-input'
class='chat-window__input js-message-input'
rows='1'
maxlength='300'
></textarea>
<button
class='chat-window__chat-window__send-button'
id='js-send-message-button'
>
<button class='chat-window__send-button' id='js-send-message-button'>
<svg
aria-hidden='true'
width='16'
Expand Down
186 changes: 92 additions & 94 deletions src/components/ChatWindow/ChatWindow.scss
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,111 @@
.chat-window {
&__chat-window {
flex: 1 1;
background: url('/chat-background.png');
box-sizing: border-box;
margin: 0 auto;
flex: 1 1;
background: url('/chat-background.png');
box-sizing: border-box;
margin: 0 auto;

display: flex;
flex-direction: column;

&__messages {
overflow-y: auto;
flex: 1 1 0;
display: flex;
flex-direction: column;
row-gap: 10px;
padding: 10px 20px 10px;
}

&__messages {
overflow-y: auto;
flex: 1 1 0;
display: flex;
flex-direction: column;
row-gap: 10px;
padding: 10px 20px 10px;
}

&__message {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 0 0 auto;
gap: 15px;
&__bottom-part {
padding: 0 20px;
box-sizing: border-box;
border-top: 1px solid #e4e4e4;
background-color: #fff;
width: 100%;
}

width: fit-content;
height: min-content;
min-width: 70px;
min-height: 30px;
background-color: #ffffff;
border-radius: 20px;
align-items: flex-start;
box-sizing: border-box;
padding: 10px 10px;
align-items: end;
&__input {
display: block;
padding: 4px 12px;
width: 100%;
height: 31px;
line-height: 20px;
overflow: hidden;
outline: none;
border: 1px solid #ced1d7;
font-family: Inter;
font-size: 16px;
box-sizing: border-box;
border-radius: 16px;
resize: none;
}

max-width: 60%;
overflow-wrap: anywhere;
&__bottom-part {
padding: 5px 10px;
display: flex;
gap: 10px;
align-items: flex-end;
}

&__text {
font-size: 17px;
line-height: 24px;
}
&__send-button {
display: flex;
justify-content: center;
align-items: center;
border: none;
background-color: #0468ff;
width: 32px;
height: 32px;
color: #fff;
rotate: 90deg;
border-radius: 50%;
cursor: pointer;
}
}

&__time-wrapper {
display: flex;
align-items: end;
flex: 1 0 auto;
}
.message {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 0 0 auto;
gap: 15px;

&__time {
font-size: 12px;
color: #15224266;
flex: 1 0 auto;
}
width: fit-content;
height: min-content;
min-width: 70px;
min-height: 30px;
background-color: #ffffff;
border-radius: 20px;
align-items: flex-start;
box-sizing: border-box;
padding: 10px 10px;
align-items: end;

&--mine {
margin-left: auto;
color: #fff;
background-color: #0468ff;
.chat-window__chat-window__message__time {
color: #fff;
}
}
}
max-width: 60%;
overflow-wrap: anywhere;

&__bottom-part {
padding: 0 20px;
box-sizing: border-box;
border-top: 1px solid #e4e4e4;
background-color: #fff;
width: 100%;
}
&__text {
font-size: 17px;
line-height: 24px;
}

&__input {
display: block;
padding: 4px 12px;
width: 100%;
height: 31px;
line-height: 20px;
overflow: hidden;
outline: none;
border: 1px solid #ced1d7;
font-family: Inter;
font-size: 16px;
box-sizing: border-box;
border-radius: 16px;
resize: none;
}
&__time-wrapper {
display: flex;
align-items: end;
flex: 1 0 auto;
}

&__bottom-part {
padding: 5px 10px;
display: flex;
gap: 10px;
align-items: flex-end;
}
&__time {
font-size: 12px;
color: #15224266;
flex: 1 0 auto;
}

&__send-button {
display: flex;
justify-content: center;
align-items: center;
border: none;
background-color: #0468ff;
width: 32px;
height: 32px;
&--mine {
margin-left: auto;
color: #fff;
background-color: #0468ff;
.message__time {
color: #fff;
rotate: 90deg;
border-radius: 50%;
cursor: pointer;
}
}
}
8 changes: 4 additions & 4 deletions src/components/ChatWindow/ChatWindow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ export default class ChatWindow extends BaseComponent {
this.messages = messages;

requestAnimationFrame(() => {
this.messagesContainer = document.getElementById('js-messages');
this.messagesContainer = document.getElementById(
'js-messages'
) as HTMLElement;

this.displayMessageHistory();

Expand Down Expand Up @@ -176,9 +178,7 @@ export default class ChatWindow extends BaseComponent {
).textContent = convertTimeToMinutesAndSeconds(message.createdAt);

if (message.senderId == globalStore.auth.userId) {
newMessage.children[0]!.classList!.add(
'chat-window__chat-window__message--mine'
);
newMessage.children[0]!.classList!.add('message--mine');
}

this.messagesContainer.appendChild(newMessage);
Expand Down

0 comments on commit 79aa365

Please sign in to comment.