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

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

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