From 131da5f44415458205d46970253d7dd3c49caeba Mon Sep 17 00:00:00 2001 From: Ulises Manuel <90291778+ulisesmac@users.noreply.github.com> Date: Tue, 8 Oct 2024 18:50:29 -0600 Subject: [PATCH] fix(community): Last message overlapped with "join community" button (#21370) --- .../contact_requests/bottom_drawer/view.cljs | 36 ++++----- .../chat/messenger/messages/list/style.cljs | 79 +++---------------- .../chat/messenger/messages/list/view.cljs | 13 +-- 3 files changed, 32 insertions(+), 96 deletions(-) diff --git a/src/status_im/contexts/chat/messenger/messages/contact_requests/bottom_drawer/view.cljs b/src/status_im/contexts/chat/messenger/messages/contact_requests/bottom_drawer/view.cljs index d3e3488f6b..1e02c76faf 100644 --- a/src/status_im/contexts/chat/messenger/messages/contact_requests/bottom_drawer/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/contact_requests/bottom_drawer/view.cljs @@ -11,25 +11,23 @@ (defn view [{:keys [contact-id]}] - (let [customization-color (rf/sub [:profile/customization-color]) - [primary-name _] (rf/sub [:contacts/contact-two-names-by-identity - contact-id]) - {:keys [contact-request-state community-id]} (rf/sub [:chats/current-chat-chat-view]) - chat-type (rf/sub [:chats/chat-type]) - community-chat? (= chat-type :community-chat) - joined (when community-chat? - (rf/sub [:communities/community-joined - community-id])) - pending? (when community-chat? - (rf/sub [:communities/my-pending-request-to-join - community-id])) - contact-request-send? (or (not contact-request-state) - (= contact-request-state - constants/contact-request-state-none)) - contact-request-received? (= contact-request-state - constants/contact-request-state-received) - contact-request-pending? (= contact-request-state - constants/contact-request-state-sent)] + (let [customization-color (rf/sub [:profile/customization-color]) + [primary-name _] (rf/sub [:contacts/contact-two-names-by-identity contact-id]) + {:keys [contact-request-state + community-id]} (rf/sub [:chats/current-chat-chat-view]) + chat-type (rf/sub [:chats/chat-type]) + community-chat? (= chat-type :community-chat) + joined (when community-chat? + (rf/sub [:communities/community-joined community-id])) + pending? (when community-chat? + (rf/sub [:communities/my-pending-request-to-join community-id])) + contact-request-send? (or (not contact-request-state) + (= contact-request-state + constants/contact-request-state-none)) + contact-request-received? (= contact-request-state + constants/contact-request-state-received) + contact-request-pending? (= contact-request-state + constants/contact-request-state-sent)] [rn/view {:style style/container} [quo/permission-context {:blur? true diff --git a/src/status_im/contexts/chat/messenger/messages/list/style.cljs b/src/status_im/contexts/chat/messenger/messages/list/style.cljs index dce311a65e..e02d1d259c 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/style.cljs @@ -1,11 +1,11 @@ (ns status-im.contexts.chat.messenger.messages.list.style (:require [quo.foundations.colors :as colors] - [quo.foundations.shadows :as shadows] - [react-native.reanimated :as reanimated] + [react-native.safe-area :as safe-area] [status-im.contexts.chat.messenger.messages.constants :as messages.constants])) (def permission-context-height 46) +(def distance-from-last-message 4) (defn keyboard-avoiding-container [theme] @@ -13,70 +13,13 @@ :background-color (colors/theme-colors colors/white colors/neutral-95 theme) :z-index 2}) -(defn background-container - [background-color background-opacity top-margin] - (reanimated/apply-animations-to-style - {:opacity background-opacity} - {:background-color background-color - :position :absolute - :top 0 - :left 0 - :right 0 - :height (+ top-margin messages.constants/header-container-radius)})) +(def permission-context-sheet {:flex 3}) ; Pushes composer to bottom -(defn header-bottom-container - [bottom top-margin] - (reanimated/apply-animations-to-style - {:bottom bottom} - {:margin-top top-margin})) - -(defn header-bottom-part - [theme] - {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) - :padding-horizontal 20 - :border-radius 20}) - -(defn header-bottom-shadow - [theme] - (assoc - (shadows/get 2 theme :inverted) - :left 0 - :right 0 - :height 40 - :position :absolute - :border-radius 20)) - -(defn header-image - [scale top left theme] - (reanimated/apply-animations-to-style - {:transform [{:scale scale}] - :top top - :left left} - {:position :absolute - :border-width 4 - :border-radius 50 - :background-color (colors/theme-colors colors/white colors/neutral-95 theme) - :border-color (colors/theme-colors colors/white colors/neutral-95 theme)})) - -(defn user-name-container - [top left] - (reanimated/apply-animations-to-style - {:top top - :left left} - {:z-index -1})) - -(def user-name - {:align-items :center - :flex-direction :row - :margin-top 52}) - -(defn bio-and-actions - [top] - (reanimated/apply-animations-to-style - {:top top} - {:row-gap 16})) - -(defn permission-context-sheet - [margin-bottom?] - {:flex 3 ;; Pushes composer to bottom - :margin-bottom (when margin-bottom? permission-context-height)}) +(defn list-paddings + [add-padding-bottom?] + (let [{:keys [top bottom]} (safe-area/get-insets)] + ;; WARNING: the flat-list is reversed, so the paddings are applied inverted + {:padding-top (if add-padding-bottom? + (+ distance-from-last-message permission-context-height bottom) + distance-from-last-message) + :padding-bottom (+ top messages.constants/top-bar-height)})) diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs index 9923d959e4..fa697cb409 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -10,11 +10,9 @@ [react-native.hooks :as hooks] [react-native.platform :as platform] [react-native.reanimated :as reanimated] - [react-native.safe-area :as safe-area] [status-im.common.home.actions.view :as home.actions] [status-im.constants :as constants] [status-im.contexts.chat.messenger.composer.constants :as composer.constants] - [status-im.contexts.chat.messenger.messages.constants :as messages.constants] [status-im.contexts.chat.messenger.messages.content.view :as message] [status-im.contexts.chat.messenger.messages.list.state :as state] [status-im.contexts.chat.messenger.messages.list.style :as style] @@ -24,7 +22,6 @@ [utils.re-frame :as rf] [utils.worklets.chat.messenger.messages :as worklets])) -(def ^:const distance-from-last-message 4) (def ^:const loading-indicator-page-loading-height 100) (defn list-key-fn [{:keys [message-id value]}] (or message-id value)) @@ -194,10 +191,9 @@ context (rf/sub [:chats/current-chat-message-list-view-context]) able-to-send-message? (:able-to-send-message? context) messages (rf/sub [:chats/raw-chat-messages-stream chat-id]) - margin-bottom? (and community-channel? (not able-to-send-message?)) - recording? (rf/sub [:chats/recording?]) - top-margin (+ (safe-area/get-top) messages.constants/top-bar-height)] - [rn/view {:style (style/permission-context-sheet margin-bottom?)} + add-padding-bottom? (and community-channel? (not able-to-send-message?)) + recording? (rf/sub [:chats/recording?])] + [rn/view {:style style/permission-context-sheet} [rn/view {:style {:flex-shrink 1}} ;; Keeps flat list on top [reanimated/flat-list {:key-fn list-key-fn @@ -237,8 +233,7 @@ :style {:background-color (colors/theme-colors colors/white colors/neutral-95 theme)} - :content-container-style {:padding-top distance-from-last-message - :padding-bottom top-margin} + :content-container-style (style/list-paddings add-padding-bottom?) :inverted true :on-layout #(on-layout {:event %