From 71863061c691df7f59cf4be283a3e0772d485378 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Apr 2022 19:41:09 +0300
Subject: fixed tons of stuff, at least it looks normalish on desktop

---
 src/components/chat/chat.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'src/components/chat/chat.vue')

diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 493c5d5a..3b0129fa 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -8,7 +8,7 @@
       >
         <div
           ref="header"
-          class="panel-heading chat-view-heading mobile-hidden"
+          class="panel-heading -sticky chat-view-heading mobile-hidden"
         >
           <a
             class="go-back-button"
@@ -27,10 +27,8 @@
           </div>
         </div>
         <div
-          ref="scrollable"
-          class="scrollable-message-list"
+          class="message-list"
           :style="{ height: scrollableContainerHeight }"
-          @scroll="handleScroll"
         >
           <template v-if="!errorLoadingChat">
             <ChatMessage
-- 
cgit v1.2.3-70-g09d2


From 5b664f464d2aa0121a372dd8b14e26160b6dad5c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 19:28:26 +0300
Subject: chat fixes

---
 src/components/chat/chat.js              | 66 ++++++--------------------------
 src/components/chat/chat.vue             |  1 -
 src/components/chat/chat_layout_utils.js | 27 +++++--------
 src/components/chat_new/chat_new.vue     |  1 -
 4 files changed, 21 insertions(+), 74 deletions(-)

(limited to 'src/components/chat/chat.vue')

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 5d2c1d09..a2789d2e 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -19,8 +19,6 @@ library.add(
   faChevronLeft
 )
 
-const scroller = () => document.getElementById('content')
-
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
 const SAFE_RESIZE_TIME_OFFSET = 100
@@ -45,10 +43,9 @@ const Chat = {
   },
   created () {
     this.startFetching()
-    window.addEventListener('resize', this.handleLayoutChange)
   },
   mounted () {
-    scroller().addEventListener('scroll', this.handleScroll)
+    window.addEventListener('scroll', this.handleScroll)
     if (typeof document.hidden !== 'undefined') {
       document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
     }
@@ -56,12 +53,9 @@ const Chat = {
     this.$nextTick(() => {
       this.handleResize()
     })
-    this.setChatLayout()
   },
   unmounted () {
-    scroller().removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleLayoutChange)
-    this.unsetChatLayout()
+    window.removeEventListener('scroll', this.handleScroll)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.dispatch('clearCurrentChat')
   },
@@ -97,8 +91,6 @@ const Chat = {
     ...mapState({
       backendInteractor: state => state.api.backendInteractor,
       mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
-      mobileLayout: state => state.interface.mobileLayout,
-      layoutHeight: state => state.interface.layoutHeight,
       currentUser: state => state.users.currentUser
     })
   },
@@ -116,9 +108,6 @@ const Chat = {
     '$route': function () {
       this.startFetching()
     },
-    layoutHeight () {
-      this.handleResize({ expand: true })
-    },
     mastoUserSocketStatus (newValue) {
       if (newValue === WSConnectionStatus.JOINED) {
         this.fetchChat({ isFirstFetch: true })
@@ -142,30 +131,6 @@ const Chat = {
         }
       })
     },
-    setChatLayout () {
-      //   This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
-      //   This layout prevents empty spaces from being visible at the bottom
-      //   of the chat on iOS Safari (`safe-area-inset`) when
-      //   - the on-screen keyboard appears and the user starts typing
-      //   - the user selects the text inside the input area
-      //   - the user selects and deletes the text that is multiple lines long
-      //   TODO: unify the chat layout with the global layout.
-      let html = document.querySelector('html')
-      if (html) {
-        html.classList.add('chat-layout')
-      }
-    },
-    unsetChatLayout () {
-      let html = document.querySelector('html')
-      if (html) {
-        html.classList.remove('chat-layout')
-      }
-    },
-    handleLayoutChange () {
-      this.$nextTick(() => {
-        this.scrollDown()
-      })
-    },
     // Preserves the scroll position when OSK appears or the posting form changes its height.
     handleResize (opts = {}) {
       const { expand = false, delayed = false } = opts
@@ -179,25 +144,20 @@ const Chat = {
 
       this.$nextTick(() => {
         const { offsetHeight = undefined } = this.lastScrollPosition
-        this.lastScrollPosition = getScrollPosition(scroller())
+        this.lastScrollPosition = getScrollPosition()
 
         const diff = this.lastScrollPosition.offsetHeight - offsetHeight
         if (diff < 0 || (!this.bottomedOut() && expand)) {
           this.$nextTick(() => {
-            scroller().scrollTo({
-              top: scroller().scrollTop - diff,
-              left: 0
-            })
+            window.scrollTo({ top: window.scrollY - diff })
           })
         }
       })
     },
     scrollDown (options = {}) {
       const { behavior = 'auto', forceRead = false } = options
-      const scrollable = scroller()
-      if (!scrollable) { return }
       this.$nextTick(() => {
-        scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
+        window.scrollTo({ top: document.documentElement.scrollHeight, behavior })
       })
       if (forceRead) {
         this.readChat()
@@ -213,11 +173,10 @@ const Chat = {
       })
     },
     bottomedOut (offset) {
-      return isBottomedOut(scroller(), offset)
+      return isBottomedOut(offset)
     },
     reachedTop () {
-      const scrollable = scroller()
-      return scrollable && scrollable.scrollTop <= 0
+      return window.scrollY <= 0
     },
     cullOlderCheck () {
       window.setTimeout(() => {
@@ -248,10 +207,9 @@ const Chat = {
       }
     }, 200),
     handleScrollUp (positionBeforeLoading) {
-      const positionAfterLoading = getScrollPosition(scroller())
-      scroller().scrollTo({
-        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
-        left: 0
+      const positionAfterLoading = getScrollPosition()
+      window.scrollTo({
+        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading)
       })
     },
     fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
@@ -270,7 +228,7 @@ const Chat = {
             chatService.clear(chatMessageService)
           }
 
-          const positionBeforeUpdate = getScrollPosition(scroller())
+          const positionBeforeUpdate = getScrollPosition()
           this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
             this.$nextTick(() => {
               if (fetchOlderMessages) {
@@ -281,7 +239,7 @@ const Chat = {
               // full height of the scrollable container.
               // If this is the case, we want to fetch the messages until the scrollable container
               // is fully populated so that the user has the ability to scroll up and load the history.
-              if (!isScrollable(scroller()) && messages.length > 0) {
+              if (!isScrollable() && messages.length > 0) {
                 this.fetchChat({ maxId: this.currentChatMessageService.minId })
               }
             })
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 3b0129fa..d909bed9 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -2,7 +2,6 @@
   <div class="chat-view">
     <div class="chat-view-inner">
       <div
-        id="nav"
         ref="inner"
         class="panel-default panel chat-view-body"
       >
diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js
index 50a933ac..c187892d 100644
--- a/src/components/chat/chat_layout_utils.js
+++ b/src/components/chat/chat_layout_utils.js
@@ -1,9 +1,9 @@
 // Captures a scroll position
-export const getScrollPosition = (el) => {
+export const getScrollPosition = () => {
   return {
-    scrollTop: el.scrollTop,
-    scrollHeight: el.scrollHeight,
-    offsetHeight: el.offsetHeight
+    scrollTop: window.scrollY,
+    scrollHeight: document.documentElement.scrollHeight,
+    offsetHeight: window.innerHeight
   }
 }
 
@@ -13,21 +13,12 @@ export const getNewTopPosition = (previousPosition, newPosition) => {
   return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
 }
 
-export const isBottomedOut = (el, offset = 0) => {
-  if (!el) { return }
-  const scrollHeight = el.scrollTop + offset
-  const totalHeight = el.scrollHeight - el.offsetHeight
+export const isBottomedOut = (offset = 0) => {
+  const scrollHeight = window.scrollY + offset
+  const totalHeight = document.documentElement.scrollHeight - window.innerHeight
   return totalHeight <= scrollHeight
 }
-
-// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form.
-export const scrollableContainerHeight = (inner, header, footer) => {
-  return inner.offsetHeight - header.clientHeight - footer.clientHeight
-}
-
 // Returns whether or not the scrollbar is visible.
-export const isScrollable = (el) => {
-  if (!el) return
-
-  return el.scrollHeight > el.clientHeight
+export const isScrollable = () => {
+  return document.documentElement.scrollHeight > window.innerHeight
 }
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index f3894a3a..0790bb37 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    id="nav"
     class="panel-default panel chat-new"
   >
     <div
-- 
cgit v1.2.3-70-g09d2


From 08ad2923a58b08f8522b90938d9a330993904ea7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 17:17:52 +0300
Subject: fix chats button alignment

---
 src/components/chat/chat.scss            |  9 ++++-----
 src/components/chat/chat.vue             |  6 +++---
 src/components/chat_title/chat_title.vue | 16 +++++++++-------
 3 files changed, 16 insertions(+), 15 deletions(-)

(limited to 'src/components/chat/chat.vue')

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 430319d9..8b745e86 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -47,7 +47,6 @@
   }
 
   .chat-view-heading {
-    align-items: center;
     justify-content: space-between;
     display: flex;
     z-index: 2;
@@ -56,11 +55,11 @@
   }
 
   .go-back-button {
-    cursor: pointer;
-    width: 28px;
     text-align: center;
-    padding: 0.6em;
-    margin: -0.6em 0.6em -0.6em -0.6em;
+    padding: 0 0.7em;
+    line-height: 100%;
+    height: 100%;
+    align-self: stretch;
   }
 
   .jump-to-bottom-button {
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index d909bed9..31eecbc0 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -9,15 +9,15 @@
           ref="header"
           class="panel-heading -sticky chat-view-heading mobile-hidden"
         >
-          <a
-            class="go-back-button"
+          <button
+            class="button-unstyled go-back-button"
             @click="goBack"
           >
             <FAIcon
               size="lg"
               icon="chevron-left"
             />
-          </a>
+          </button>
           <div class="title text-center">
             <ChatTitle
               :user="recipient"
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index 06ad129d..99a7a64e 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -4,13 +4,13 @@
     :title="title"
   >
     <router-link
+      class="avatar-container"
       v-if="withAvatar && user"
       :to="getUserProfileLink(user)"
     >
       <UserAvatar
+        class="titlebar-avatar"
         :user="user"
-        width="23px"
-        height="23px"
       />
     </router-link>
     <RichContent
@@ -32,7 +32,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  align-items: center;
 
   --emoji-size: 14px;
 
@@ -45,11 +44,14 @@
     overflow: hidden;
   }
 
-  .Avatar {
-    width: 23px;
-    height: 23px;
-    margin-right: 0.5em;
+  .avatar-container {
+    align-self: center;
+  }
 
+  .titlebar-avatar {
+    margin-right: 0.5em;
+    height: 1.5em;
+    width: 1.5em;
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
 
-- 
cgit v1.2.3-70-g09d2


From 076c52788b46258078ce2d83fdac82d75692c74b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 20:43:10 +0300
Subject: fixes for mobile

---
 src/components/chat/chat.vue             | 2 +-
 src/components/mobile_nav/mobile_nav.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/components/chat/chat.vue')

diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 31eecbc0..2e7df7bd 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -7,7 +7,7 @@
       >
         <div
           ref="header"
-          class="panel-heading -sticky chat-view-heading mobile-hidden"
+          class="panel-heading -sticky chat-view-heading"
         >
           <button
             class="button-unstyled go-back-button"
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 362441bb..d2d48a03 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -5,7 +5,6 @@
     <nav
       id="nav"
       class="mobile-nav"
-      :class="{ 'mobile-hidden': isChat }"
       @click="scrollToTop()"
     >
       <div class="item">
-- 
cgit v1.2.3-70-g09d2

