fade in-out dialogs list

src/components/Views/Inbox.tsx

@@ -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,22 +123,18 @@ export const InboxView = () => {
           <div class="chat-list__types">
             <ul>
               <li>
-                <strong>
+                <strong>Все</strong>
-                  <a href="/">Все</a>
-                </strong>
-              </li>
-              <li>
-                <a href="/">Переписки</a>
-              </li>
-              <li>
-                <a href="/">Группы</a>
               </li>
+              <li>Переписки</li>
+              <li>Группы</li>
             </ul>
           </div>
-          <div class="dialogs">
+          <div class="holder">
-            <For each={authors()}>
+            <div class="dialogs">
-              {(author) => <DialogCard name={author.name} slug={author.slug} online={true} />}
+              <For each={authors()}>
-            </For>
+                {(author) => <DialogCard name={author.name} slug={author.slug} online={true} />}
+              </For>
+            </div>
           </div>
         </div>
 

src/styles/Inbox.scss

@@ -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: 1;
-  z-index: 100000;
 
   > .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);
 
-  .dialogs {
+  $fade-height: 10px;
-    display: flex;
+  .holder {
-    flex-direction: column;
+    overflow: hidden;
-    overflow: auto;
+    flex: 1;
-    height: 100%;
-    box-sizing: border-box;
     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;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 100%;
+      overflow: auto;
+      flex-direction: column;
+      box-sizing: border-box;
+    }
   }
 }
 
@@ -53,12 +86,10 @@ main {
   padding: 1em 0;
 }
 
+// табы выбора списка
 .chat-list__types {
   @include font-size(1.7rem);
-
+  margin: 16px 0;
-  margin-bottom: 1.5em;
-  padding-top: 1em;
-
   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 {