From 660a40ca0650ae8d38ed89716ce0cf68ae13ce7b Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Mon, 15 May 2023 14:39:11 +0200 Subject: [PATCH] FIX: various fixes following channel height changes (#21553) - apply height on threads list - apply height on thread - correctly applies env(safe-area-inset-bottom) --- .../stylesheets/common/chat-channel.scss | 6 ++- .../stylesheets/common/chat-drawer.scss | 4 +- .../stylesheets/common/chat-thread-list.scss | 29 ------------ .../stylesheets/common/chat-thread.scss | 17 ++++++- .../stylesheets/common/chat-threads-list.scss | 44 +++++++++++++++++++ .../chat/assets/stylesheets/common/index.scss | 2 +- 6 files changed, 68 insertions(+), 34 deletions(-) delete mode 100644 plugins/chat/assets/stylesheets/common/chat-thread-list.scss create mode 100644 plugins/chat/assets/stylesheets/common/chat-threads-list.scss diff --git a/plugins/chat/assets/stylesheets/common/chat-channel.scss b/plugins/chat/assets/stylesheets/common/chat-channel.scss index 37d74b5b24d..37d5bff6843 100644 --- a/plugins/chat/assets/stylesheets/common/chat-channel.scss +++ b/plugins/chat/assets/stylesheets/common/chat-channel.scss @@ -10,14 +10,16 @@ height: calc( var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) - - var(--chat-direct-message-creator-height, 0px) + var(--chat-direct-message-creator-height, 0px) - + env(safe-area-inset-bottom) ); .footer-nav-ipad & { height: calc( var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) - - var(--chat-direct-message-creator-height, 0px) + var(--chat-direct-message-creator-height, 0px) - + env(safe-area-inset-bottom) ); } diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss index 758face2c0f..03114ef2899 100644 --- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss +++ b/plugins/chat/assets/stylesheets/common/chat-drawer.scss @@ -94,7 +94,9 @@ html.rtl { height: auto !important; } - .chat-channel { + .chat-channel, + .chat-thread, + .chat-thread-list { height: 100%; } } diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-list.scss b/plugins/chat/assets/stylesheets/common/chat-thread-list.scss deleted file mode 100644 index b5f61bbdb90..00000000000 --- a/plugins/chat/assets/stylesheets/common/chat-thread-list.scss +++ /dev/null @@ -1,29 +0,0 @@ -.chat-thread-list { - display: flex; - flex-direction: column; - height: 100%; - position: relative; - - &__items { - overflow-y: scroll; - @include chat-scrollbar(); - box-sizing: border-box; - flex-grow: 1; - overscroll-behavior: contain; - display: flex; - flex-direction: column; - - .chat-thread-list-item { - margin: 0.75rem 0.25rem 0.75rem 0.5rem; - - & + .chat-thread-list-item { - margin-top: 0; - } - } - } - - &__no-threads { - @include thread-list-item; - margin: 0.5rem 0rem 0.5rem 0.5rem; - } -} diff --git a/plugins/chat/assets/stylesheets/common/chat-thread.scss b/plugins/chat/assets/stylesheets/common/chat-thread.scss index fa2c3e4c822..1cecf4642b1 100644 --- a/plugins/chat/assets/stylesheets/common/chat-thread.scss +++ b/plugins/chat/assets/stylesheets/common/chat-thread.scss @@ -1,9 +1,24 @@ .chat-thread { display: flex; flex-direction: column; - height: 100%; position: relative; + height: calc( + var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - + var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) - + var(--chat-direct-message-creator-height, 0px) - + env(safe-area-inset-bottom) + ); + + .footer-nav-ipad & { + height: calc( + var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - + var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) - + var(--chat-direct-message-creator-height, 0px) - + env(safe-area-inset-bottom) + ); + } + &__header { height: var(--chat-header-offset); min-height: var(--chat-header-offset); diff --git a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss new file mode 100644 index 00000000000..0ecb2c3a6ea --- /dev/null +++ b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss @@ -0,0 +1,44 @@ +.chat-thread-list { + display: flex; + flex-direction: column; + position: relative; + + height: calc( + var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - + var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) - + var(--chat-direct-message-creator-height, 0px) - + env(safe-area-inset-bottom) + ); + + .footer-nav-ipad & { + height: calc( + var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - + var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) - + var(--chat-direct-message-creator-height, 0px) - + env(safe-area-inset-bottom) + ); + } + + &__items { + overflow-y: scroll; + @include chat-scrollbar(); + box-sizing: border-box; + flex-grow: 1; + overscroll-behavior: contain; + display: flex; + flex-direction: column; + + .chat-thread-list-item { + margin: 0.75rem 0.25rem 0.75rem 0.5rem; + + & + .chat-thread-list-item { + margin-top: 0; + } + } + } + + &__no-threads { + @include thread-list-item; + margin: 0.5rem 0rem 0.5rem 0.5rem; + } +} diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss index a3249918baa..a544774a9b7 100644 --- a/plugins/chat/assets/stylesheets/common/index.scss +++ b/plugins/chat/assets/stylesheets/common/index.scss @@ -48,5 +48,5 @@ @import "incoming-chat-webhooks"; @import "reviewable-chat-message"; @import "chat-thread-list-item"; -@import "chat-thread-list"; +@import "chat-threads-list"; @import "chat-thread-original-message";