Fix scrolling on conversation list

PurpleHorrorRus · Aug 12, 2022 · c928401 · c928401
1 parent e454fa1
commit c928401
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "amadeus",
-    "version": "1.0.0-beta.9",
+    "version": "1.0.0-beta.10",
     "description": "Free, functional and open source VK Messenger",
     "main": "./dist/main/index.js",
     "scripts": {

diff --git a/src/main/common.js b/src/main/common.js
@@ -7,7 +7,7 @@ import { app } from "electron";
 import storage from "./storage";
 import WindowsLogic from "./windows/logic";
 
-app.getVersion = () => "1.0.0-beta.9";
+app.getVersion = () => "1.0.0-beta.10";
 
 const isDev = process.env.NODE_ENV === "development";
 const isWindows = process.platform === "win32";

diff --git a/src/renderer/components/Conversations/Conversation.vue b/src/renderer/components/Conversations/Conversation.vue
@@ -166,56 +166,58 @@ export default {
         }
 
         &.minimized {
-            .conversations-list {
-                row-gap: 5px;
-            }
+            #conversations-lists {
+                &::-webkit-scrollbar {
+                    width: 0px;
+                    height: 0px;
+                }
 
-            #conversations-list-pinned-label {
-                display: none;
-            }
+                .conversations-list {
+                    row-gap: 5px;
+                }
 
-            &::-webkit-scrollbar {
-                width: 0px;
-                height: 0px;
-            }
+                #conversations-list-pinned-label {
+                    display: none;
+                }
 
-            .conversation {
-                display: flex;
-                justify-content: center;
-                align-items: center;
+                .conversation {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
 
-                margin: 0px 5px;
-                padding: 5px 0px;
+                    margin: 0px 5px;
+                    padding: 5px 0px;
 
-                border-radius: 4px;
+                    border-radius: 4px;
 
-                .conversation-message {
-                    display: none;
-                }
+                    .conversation-message {
+                        display: none;
+                    }
 
-                .conversation-icons {
-                    position: relative;
+                    .conversation-icons {
+                        position: relative;
 
-                    .conversation-unread-out {
-                        position: absolute;
-                        top: -20px; right: -13px;
-                    }
+                        .conversation-unread-out {
+                            position: absolute;
+                            top: -20px; right: -13px;
+                        }
 
-                    .unread-counter {
-                        position: absolute;
-                        top: -25px; left: -13px;
-                    }
+                        .unread-counter {
+                            position: absolute;
+                            top: -25px; left: -13px;
+                        }
 
-                    .mute-icon {
-                        position: absolute;
-                        left: -45px; top: -25px;
+                        .mute-icon {
+                            position: absolute;
+                            left: -45px; top: -25px;
 
-                        width: 20px;
+                            width: 20px;
 
-                        padding: 3px;
+                            padding: 3px;
 
-                        background: var(--backdrop);
-                        border-radius: 100%;
+                            background: var(--backdrop);
+                            border-radius: 100%;
+                        }
                     }
                 }
             }

diff --git a/src/renderer/components/Conversations/List.vue b/src/renderer/components/Conversations/List.vue
@@ -2,30 +2,32 @@
     <div id="conversations" :class="conversationClass">
         <ConversationsHeader v-if="showHeader" />
 
-        <div v-if="pinned.length > 0" id="pinned" class="conversations-list">
-            <span
-                id="conversations-list-pinned-label"
-                class="small-text"
-                v-text="$strings.CONVERSATIONS.PINNED"
-            />
-
-            <Conversation
-                v-for="conversation of pinned"
-                :key="conversation.message.id"
-                :conversation="conversation"
-                @click.native.left="open(conversation)"
-                @click.native.right="openMenu($event, conversation)"
-            />
-        </div>
-
-        <div class="conversations-list">
-            <Conversation
-                v-for="conversation of notPinned"
-                :key="conversation.message.id"
-                :conversation="conversation"
-                @click.native.left="open(conversation)"
-                @click.native.right="openMenu($event, conversation)"
-            />
+        <div id="conversations-lists" ref="conversations">
+            <div v-if="pinned.length > 0" id="pinned" class="conversations-list">
+                <span
+                    id="conversations-list-pinned-label"
+                    class="small-text"
+                    v-text="$strings.CONVERSATIONS.PINNED"
+                />
+
+                <Conversation
+                    v-for="conversation of pinned"
+                    :key="conversation.message.id"
+                    :conversation="conversation"
+                    @click.native.left="open(conversation)"
+                    @click.native.right="openMenu($event, conversation)"
+                />
+            </div>
+
+            <div class="conversations-list">
+                <Conversation
+                    v-for="conversation of notPinned"
+                    :key="conversation.message.id"
+                    :conversation="conversation"
+                    @click.native.left="open(conversation)"
+                    @click.native.right="openMenu($event, conversation)"
+                />
+            </div>
         </div>
 
         <ContextMenu v-if="menu.show" :menu="menu" />
@@ -146,27 +148,25 @@ export default {
     width: 100%;
     height: 100%;
 
-    overflow-x: hidden;
-    overflow-y: auto;
+    &-lists {
+        overflow-x: hidden;
+        overflow-y: auto;
 
-    .conversations-list {
-        display: flex;
-        flex-direction: column;
-        row-gap: 10px;
+        .conversations-list {
+            display: flex;
+            flex-direction: column;
+            row-gap: 10px;
 
-        padding: 5px 0px;
+            padding: 5px 0px;
 
-        &#pinned {
-            border-bottom: 1px solid var(--border);
+            &#pinned {
+                border-bottom: 1px solid var(--border);
 
-            #conversations-list-pinned-label {
-                padding: 10px 10px 0px 10px;
+                #conversations-list-pinned-label {
+                    padding: 10px 10px 0px 10px;
+                }
             }
         }
     }
-
-    .skeleton-list {
-        flex-direction: column;
-    }
 }
 </style>