uniknow/chat_front_svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

закрепы (нет еще unpin, пофиксил поле ввода)

Browse source
This commit is contained in:
uniknow 2024-06-09 23:30:44 +04:00
parent 60d838af59
commit 442b292c09
1 changed files with 35 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/routes/chat/+page.svelte
View file

@ -32,6 +32,9 @@
let scrollableDiv;
let answerMessageTextShow = false
let answerMessageImgShow = false
let imageFile = undefined
let imageShow = false;
$: console.log(imageFile, "картинка")
let answerMessage = ""
let answerMessageImg = ""
@ -134,6 +137,7 @@
function adjustTextareaHeight() {
const textarea = document.getElementById("msg");
//console.log(textarea.scrollHeight)
if (textarea) {
textarea.style.height = '1em'; //??
textarea.style.height = (textarea.scrollHeight > maxRows * 18) ? `${maxRows * 18}px` : `${textarea.scrollHeight}px`; // Limit height based on maxRows and font size
@ -223,12 +227,8 @@ function helperDivShow(event, id, text, img, username) {
"user_id": userId,
"id": pickedId
}));
}
let imageFile = undefined
let imageShow = false;
$: console.log(imageFile, "картинка")
pinnedMsg = pinnedMsg.filter(pinnedMsg => pinnedMsg.id !== pickedId)
}
function triggerFileInput() {
imageFile.click();
@ -409,13 +409,15 @@ function helperDivShow(event, id, text, img, username) {
on:input={onInput} name="msg" id="msg"></textarea>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<img class="logoForImage" src="logoForImage.svg" alt=""
on:click={() => document.getElementById('fileInput').click()}>
<div class="logoForImageDiv">
<img class="logoForImage" src="logoForImage.svg" alt=""
on:click={() => document.getElementById('fileInput').click()}>
</div>
</div>
<input type="file" accept="image/*" id="fileInput"
on:change={handleFileChange} style="display: none;">
<input type="file" accept="image/*" id="fileInput"
on:change={handleFileChange} style="display: none;">
</div>
{/if}
@ -551,20 +553,24 @@ function helperDivShow(event, id, text, img, username) {
.pinnedMsg{
display: flex;
width: 90%;
margin-bottom: 10px;
}
.pinDiv{
display: flex;
width: 100%;
//background-color: red;
}
.pinnedMain{
display: flex;
flex-direction: column;
margin: 10px;
width: 100%;
height: 100%;
margin-bottom: 10px;
margin: 0 10px;
overflow: auto;
scroll-behavior: smooth;
//background-color: red;
}
.nameAnswerDiv > p,img{
@ -689,18 +695,23 @@ function helperDivShow(event, id, text, img, username) {
}
.logoForImage{
display: flex;
justify-self: center;
align-self: flex-start;
width: 2rem;
width: 2rem;
height: 2rem;
padding: 5px;
}
.logoForImageDiv{
display: flex;
justify-content: center;
align-items: flex-end;
margin-top: -7px;
width: 50px;
height: 100%;
//background-color: red;
}
.messageImage{
padding-bottom: 0px;
border-radius: 0 0 10px 10px;
border-radius: 10px;
max-width: 500px;
max-height: 500px;
}
@ -738,9 +749,7 @@ padding-bottom: 10px;
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 10px;
overflow: auto;
//background-color: red;
scroll-behavior: smooth;
}
@ -752,12 +761,14 @@ padding-bottom: 10px;
background:
linear-gradient(#101010, #101010) padding-box,
var(--gradient) border-box;
margin-top: 5px;
//padding: 5px;
//background-color: red;
}
#msg{
width: 100%;
height: 34px;
background-color: transparent;
border: 0;
line-height: 1em;
@ -769,8 +780,9 @@ padding-bottom: 10px;
.chatDiv{
//background-color: red;
width: 98%;
height: 98%;
width: 100%;
height: 99%;
margin: 0 10px 5px 10px;
display: flex;
flex-direction: column;
align-self: center;