fix(chat): remove flex reverse

Satellite-im · Sep 12, 2022 · b912bf3 · b912bf3
1 parent 2182998
commit b912bf3
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 21 deletions.
diff --git a/components/ui/CaretDivider/CaretDivider.less b/components/ui/CaretDivider/CaretDivider.less
@@ -45,6 +45,6 @@
   }
   border-bottom: 1px solid @red;
   position: relative;
-  margin: 1rem 0;
+  margin: 1.25rem 0;
   pointer-events: none;
 }
diff --git a/components/views/chat/conversation/Conversation.html b/components/views/chat/conversation/Conversation.html
@@ -1,27 +1,27 @@
 <div class="conversation" ref="container">
+  <UiChatEncrypted />
+  <UiChatInfiniteScroll
+    :isLoading="isLoadingMore"
+    :noMore="noMore"
+    @loadMore="loadMore"
+  />
+  <UiLoadersMessage :count="3" v-if="false" />
   <div class="messages">
     <template v-for="(item, i) of chatItems">
       <TypographyHorizontalRuleText
         v-if="item.isNextDay"
         :value="item.message.at.toString()"
       />
+      <UiCaretDivider
+        v-if="item.isFirstUnreadMessage"
+        :text="$t('messaging.new_messages')"
+      />
       <Message
         :key="item.message.id"
         :message="item.message"
         :showHeader="item.showHeader"
         :replies="item.replies"
       />
-      <UiCaretDivider
-        v-if="item.isFirstUnreadMessage"
-        :text="$t('messaging.new_messages')"
-      />
     </template>
   </div>
-  <UiChatEncrypted />
-  <UiChatInfiniteScroll
-    :isLoading="isLoadingMore"
-    :noMore="noMore"
-    @loadMore="loadMore"
-  />
-  <UiLoadersMessage :count="3" v-if="false" />
 </div>
diff --git a/components/views/chat/conversation/Conversation.less b/components/views/chat/conversation/Conversation.less
@@ -1,6 +1,6 @@
 .conversation {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   flex: 1;
   overflow-y: auto;
   justify-content: space-between;
@@ -14,10 +14,10 @@
     padding-bottom: @normal-spacing;
     margin-top: auto;
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
 
-    .chat-message-container.show-header + .caret_divider {
-      margin-bottom: 0;
+    .caret_divider + .chat-message-container.show-header {
+      margin-top: 0;
     }
   }
 

diff --git a/components/views/chat/conversation/Conversation.vue b/components/views/chat/conversation/Conversation.vue
@@ -94,10 +94,10 @@ export default Vue.extend({
           maxTime || currentTimestamp,
         )
       }
-      return messages.reverse()
+      return messages
     },
     isLastChatItemAuthor(): boolean {
-      const lastItem = this.chatItems.at(0)
+      const lastItem = this.chatItems.at(-1)
       if (!lastItem || !iridium.connector) {
         return false
       }
@@ -122,11 +122,17 @@ export default Vue.extend({
       return
     }
     container.addEventListener('scroll', () => {
-      this.isLockedToBottom = container.scrollTop >= 0
+      this.isLockedToBottom =
+        container.scrollTop === container.scrollHeight - container.clientHeight
     })
+    const scrollToBottom = () => {
+      const y = container.scrollHeight - container.clientHeight
+      container.scrollTo(0, y)
+    }
+    scrollToBottom()
     this.mutationObserver = new MutationObserver(() => {
       if (this.isLockedToBottom || this.isLastChatItemAuthor) {
-        container.scrollTo(0, 0)
+        scrollToBottom()
       }
     })
     this.mutationObserver.observe(container, {

diff --git a/components/views/chat/message/Message.less b/components/views/chat/message/Message.less
@@ -8,6 +8,12 @@
   }
 }
 
+.chat-message-container {
+  &.show-header {
+    margin-top: @normal-spacing;
+  }
+}
+
 .chat-message {
   display: grid;
   text-align: left;
@@ -46,7 +52,6 @@
       'avatar body body'
       'avatar footer footer';
     grid-template-columns: 52px auto 1fr;
-    margin-top: @normal-spacing;
 
     .timestamp {
       margin-left: @light-spacing;