Skip to content

Commit

Permalink
фикс
Browse files Browse the repository at this point in the history
  • Loading branch information
IvanNaum committed May 27, 2024
1 parent c34792c commit 951ce38
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/Components/ChatInput/ChatInput.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
/>
</svg>
</button>
<div class='popup_stickers_bgc'></div>
<div id='popup_stickers_block' class='popup_stickers'>
<div class='popup_stickers_title'>
<h3>Выберите стикер</h3>
Expand Down
7 changes: 6 additions & 1 deletion src/Components/ChatInput/ChatInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -113,18 +113,23 @@ export default class ChatInput extends BaseComponent {
const stickersBlockBtn = this.getParent().querySelector(
'.input_text_block_stickers_btn',
);
const stickersBgc = this.getParent().querySelector(
'.popup_stickers_bgc',
);

stickersBlockBtn.addEventListener('click', (e) => {
e.preventDefault();
stickersBgc.classList.add('is_opened');
stickersBlock.classList.add('is_opened');
});

document.addEventListener('click', (e) => {
stickersBgc.addEventListener('click', (e) => {
e.preventDefault();
if (
!e.target.closest('#popup_stickers_block') &&
!e.target.closest('.input_text_block_stickers_btn')
) {
stickersBgc.classList.remove('is_opened');
stickersBlock.classList.remove('is_opened');
}
});
Expand Down
15 changes: 15 additions & 0 deletions src/Components/ChatInput/ChatInput.scss
Original file line number Diff line number Diff line change
Expand Up @@ -131,4 +131,19 @@
&.is_opened {
display: block;
}

&_bgc {
background-color: #000;
opacity: 0;
position: fixed;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
display: none;

&.is_opened {
display: block;
}
}
}
1 change: 1 addition & 0 deletions src/Components/Sticker/Sticker.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
}

.sticker_wrapper {
cursor: pointer;
flex: 1 0 auto;
max-width: 30%;
aspect-ratio: 1 / 1;
Expand Down

0 comments on commit 951ce38

Please sign in to comment.