From 71863061c691df7f59cf4be283a3e0772d485378 Mon Sep 17 00:00:00 2001 From: Henry Jameson 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_layout_utils.js | 1 + 1 file changed, 1 insertion(+) (limited to 'src/components/chat/chat_layout_utils.js') diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js index 50a933ac..5c4aa5bf 100644 --- a/src/components/chat/chat_layout_utils.js +++ b/src/components/chat/chat_layout_utils.js @@ -1,5 +1,6 @@ // Captures a scroll position export const getScrollPosition = (el) => { + console.log(el) return { scrollTop: el.scrollTop, scrollHeight: el.scrollHeight, -- cgit v1.2.3-70-g09d2 From cfa8edf2c075d16e3b04f4a6463657eb777c623c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 5 Apr 2022 13:19:12 +0300 Subject: chats work and look a bit better --- src/App.scss | 2 +- src/components/chat/chat.js | 24 +++++++++++++----------- src/components/chat/chat.scss | 1 + src/components/chat/chat_layout_utils.js | 1 - 4 files changed, 15 insertions(+), 13 deletions(-) (limited to 'src/components/chat/chat_layout_utils.js') diff --git a/src/App.scss b/src/App.scss index dbea74a0..5df4d57b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -494,7 +494,7 @@ i[class*=icon-], bottom: 0; left: 0; right: 0; - z-index: 2; + z-index: 100; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); box-shadow: var(--panelShadow); pointer-events: none; diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index 59e884c4..91e5c98e 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -19,6 +19,8 @@ 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 @@ -46,7 +48,7 @@ const Chat = { window.addEventListener('resize', this.handleLayoutChange) }, mounted () { - window.addEventListener('scroll', this.handleScroll) + scroller().addEventListener('scroll', this.handleScroll) if (typeof document.hidden !== 'undefined') { document.addEventListener('visibilitychange', this.handleVisibilityChange, false) } @@ -57,7 +59,7 @@ const Chat = { this.setChatLayout() }, unmounted () { - window.removeEventListener('scroll', this.handleScroll) + scroller().removeEventListener('scroll', this.handleScroll) window.removeEventListener('resize', this.handleLayoutChange) this.unsetChatLayout() if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false) @@ -177,13 +179,13 @@ const Chat = { this.$nextTick(() => { const { offsetHeight = undefined } = this.lastScrollPosition - this.lastScrollPosition = getScrollPosition(document.getElementById('content')) + this.lastScrollPosition = getScrollPosition(scroller()) const diff = this.lastScrollPosition.offsetHeight - offsetHeight if (diff < 0 || (!this.bottomedOut() && expand)) { this.$nextTick(() => { - document.getElementById('content').scrollTo({ - top: document.getElementById('content').scrollTop - diff, + scroller().scrollTo({ + top: scroller().scrollTop - diff, left: 0 }) }) @@ -192,7 +194,7 @@ const Chat = { }, scrollDown (options = {}) { const { behavior = 'auto', forceRead = false } = options - const scrollable = document.getElementById('content') + const scrollable = scroller() if (!scrollable) { return } this.$nextTick(() => { scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior }) @@ -211,10 +213,10 @@ const Chat = { }) }, bottomedOut (offset) { - return isBottomedOut(document.getElementById('content'), offset) + return isBottomedOut(scroller(), offset) }, reachedTop () { - const scrollable = document.getElementById('content') + const scrollable = scroller() return scrollable && scrollable.scrollTop <= 0 }, cullOlderCheck () { @@ -246,8 +248,8 @@ const Chat = { } }, 200), handleScrollUp (positionBeforeLoading) { - const positionAfterLoading = getScrollPosition(document.getElementById('content')) - this.$refs.scrollable.scrollTo({ + const positionAfterLoading = getScrollPosition(scroller()) + scroller().scrollTo({ top: getNewTopPosition(positionBeforeLoading, positionAfterLoading), left: 0 }) @@ -268,7 +270,7 @@ const Chat = { chatService.clear(chatMessageService) } - const positionBeforeUpdate = getScrollPosition(document.getElementById('content')) + const positionBeforeUpdate = getScrollPosition(scroller()) this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => { this.$nextTick(() => { if (fetchOlderMessages) { diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index c1f2dcf2..51bb3ea6 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -37,6 +37,7 @@ bottom: 0; background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); + z-index: 10; } .chat-view-heading { diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js index 5c4aa5bf..50a933ac 100644 --- a/src/components/chat/chat_layout_utils.js +++ b/src/components/chat/chat_layout_utils.js @@ -1,6 +1,5 @@ // Captures a scroll position export const getScrollPosition = (el) => { - console.log(el) return { scrollTop: el.scrollTop, scrollHeight: el.scrollHeight, -- cgit v1.2.3-70-g09d2 From 5b664f464d2aa0121a372dd8b14e26160b6dad5c Mon Sep 17 00:00:00 2001 From: Henry Jameson 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_layout_utils.js') 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 @@
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 @@