fix(community): Last message overlapped with "join community" button (#21370)
This commit is contained in:
Ulises Manuel
GitHub
parent
874ececc47
commit
131da5f444
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)}))
|
||||
|
|
|
|||
|
|
@ -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 %
|
||||
|
|
|
|||
Loading…
Reference in New Issue