fade in-out dialogs list

This commit is contained in:
ilya-bkv 2022-11-11 07:34:18 +03:00
parent f180785b46
commit e29c640ccb
2 changed files with 65 additions and 34 deletions

View File

@ -10,6 +10,7 @@ import { useAuthorsStore } from '../../stores/zine/authors'
import '../../styles/Inbox.scss'
// Для моков
import { createClient } from '@urql/core'
import { findAndLoadGraphQLConfig } from '@graphql-codegen/cli'
const OWNER_ID = '501'
const client = createClient({
@ -63,9 +64,11 @@ export const InboxView = () => {
setAuthors(sortedAuthors())
})
// Поиск по диалогам
const getQuery = (query) => {
if (query().length >= 2) {
const match = userSearch(authors(), query())
console.log('!!! match:', match)
setAuthors(match)
} else {
setAuthors(sortedAuthors())
@ -85,7 +88,8 @@ export const InboxView = () => {
const response = await client.mutation(newMessageQuery, { messageBody: msg }).toPromise()
return response.data.createComment
}
let chatWindow // for scrolling
let chatWindow
onMount(async () => {
setLoading(true)
await fetchMessages(messageQuery)
@ -95,6 +99,7 @@ export const InboxView = () => {
})
.catch(() => setLoading(false))
})
const handleSubmit = async () => {
postMessage(postMessageText())
.then((result) => {
@ -103,7 +108,6 @@ export const InboxView = () => {
.then(() => {
setPostMessageText('')
chatWindow.scrollTop = chatWindow.scrollHeight
console.log('!!! msg:', messages())
})
}
const handleChangeMessage = (event) => {
@ -119,24 +123,20 @@ export const InboxView = () => {
<div class="chat-list__types">
<ul>
<li>
<strong>
<a href="/">Все</a>
</strong>
</li>
<li>
<a href="/">Переписки</a>
</li>
<li>
<a href="/">Группы</a>
<strong>Все</strong>
</li>
<li>Переписки</li>
<li>Группы</li>
</ul>
</div>
<div class="holder">
<div class="dialogs">
<For each={authors()}>
{(author) => <DialogCard name={author.name} slug={author.slug} online={true} />}
</For>
</div>
</div>
</div>
<div class="col-md-8 conversation">
<div class="interlocutor user--online">

View File

@ -6,17 +6,18 @@ main {
}
.messages {
top: 0;
top: 74px;
height: calc(100% - 74px);
left: 0;
right: 0;
padding-left: 42px;
padding-right: 26px;
background: #fff;
display: flex;
flex: 1;
flex-direction: column;
height: 100vh;
position: fixed;
//position: relative;
z-index: 100000;
z-index: 1;
> .row {
flex: 1;
@ -30,20 +31,52 @@ main {
position: relative;
}
}
// список диалогов и юзеров
.chat-list {
display: flex;
flex-direction: column;
padding: 10px;
height: 100vh;
height: calc(100% - 10px);
$fade-height: 10px;
.holder {
overflow: hidden;
flex: 1;
position: relative;
padding: $fade-height 0;
&::before,
&::after {
content: '';
position: absolute;
width: 100%;
right: 10px;
z-index: 1;
height: $fade-height;
}
&::before {
top: 0;
background: linear-gradient(white, transparent $fade-height);
}
&::after {
bottom: 0;
background: linear-gradient(transparent, white $fade-height);
}
.dialogs {
scroll-behavior: smooth;
display: flex;
flex-direction: column;
overflow: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
overflow: auto;
flex-direction: column;
box-sizing: border-box;
position: relative;
}
}
}
@ -53,12 +86,10 @@ main {
padding: 1em 0;
}
// табы выбора списка
.chat-list__types {
@include font-size(1.7rem);
margin-bottom: 1.5em;
padding-top: 1em;
margin: 16px 0;
ul {
display: flex;
flex-wrap: wrap;
@ -122,7 +153,6 @@ main {
.conversation__messages {
flex: 1;
min-height: 20em;
overflow: auto;
position: relative;
}
@ -208,10 +238,11 @@ main {
}
.conversation__message {
@include font-size(1.5rem);
font-size: 14px;
max-width: 60%;
padding: 1.6rem 2.4rem;
border-radius: 16px;
padding: 12px 16px;
position: relative;
&:hover {