fade in-out dialogs list
This commit is contained in:
parent
f180785b46
commit
e29c640ccb
|
@ -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">
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue
Block a user