status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-30 18:35:37 +00:00
Code Issues Projects Releases Wiki Activity

fix(messenger): List of users overlap composer input (#21641)

Browse Source 
* Fix mentions overlapped

* Fix rendering blink
This commit is contained in:
Ulises Manuel 2024-11-27 16:05:56 -06:00 committed by GitHub
parent 9f50686042
commit 763b291629
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 56 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/status_im/contexts/chat/messenger/composer/mentions/style.cljs
View File

@ -2,29 +2,39 @@
(:require (:require
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[react-native.platform :as platform] [react-native.platform :as platform]
[react-native.reanimated :as reanimated]
[status-im.contexts.chat.messenger.composer.constants :as constants])) [status-im.contexts.chat.messenger.composer.constants :as constants]))
(defn shadow (defn- add-shadow
[theme] [theme styles]
(if platform/ios? (if platform/ios?
{:shadow-radius (colors/theme-colors 30 50 theme) (assoc styles
:shadow-opacity (colors/theme-colors 0.1 0.7 theme) :shadow-radius (colors/theme-colors 30 50 theme)
:shadow-color colors/neutral-100 :shadow-opacity (colors/theme-colors 0.1 0.7 theme)
:shadow-offset {:width 0 :height (colors/theme-colors 8 12 theme)}} :shadow-color colors/neutral-100
{:elevation 10})) :shadow-offset {:width 0 :height (colors/theme-colors 8 12 theme)})
(assoc styles :elevation 10)))
(defn inner
[top theme]
(add-shadow theme
{:position :absolute
:top (- (+ 8 top))
:left 8
:right 8
:border-radius 16
:z-index 4
:max-height constants/mentions-max-height
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)}))
(defn container (defn container
[opacity top theme] [opacity top theme]
(reanimated/apply-animations-to-style [{:opacity opacity}
{:opacity opacity} (add-shadow theme
(merge {:position :absolute
{:position :absolute :top (- (+ 8 top))
:top (- (+ 8 top)) :left 8
:left 8 :right 8
:right 8 :border-radius 16
:border-radius 16 :z-index 4
:z-index 4 :max-height constants/mentions-max-height
:max-height constants/mentions-max-height :background-color (colors/theme-colors colors/white colors/neutral-95 theme)})])
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)}
(shadow theme))))

49
src/status_im/contexts/chat/messenger/composer/mentions/view.cljs
View File

@ -10,37 +10,36 @@
[status-im.contexts.chat.messenger.messages.constants :as messages.constants] [status-im.contexts.chat.messenger.messages.constants :as messages.constants]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn mention-item (defn- mention-item
[user] [[user-key user]]
[contact-list-item/contact-list-item (with-meta
{:on-press #(rf/dispatch [:chat.ui/select-mention user])} [contact-list-item/contact-list-item {:on-press #(rf/dispatch [:chat.ui/select-mention user])}
user]) user]
{:key user-key}))
(defn view (defn view
[layout-height] [layout-height]
(let [suggestions (rf/sub [:chat/mention-suggestions]) (let [suggestions (rf/sub [:chat/mention-suggestions])
suggestions? (seq suggestions) suggestions? (seq suggestions)
theme (quo.theme/use-theme) theme (quo.theme/use-theme)
opacity (reanimated/use-shared-value (if suggestions? 1 0)) opacity (reanimated/use-shared-value (if suggestions? 1 0))
[suggestions-state set-suggestions-state] (rn/use-state suggestions) [suggestions-state
top (min constants/mentions-max-height set-suggestions-state] (rn/use-state suggestions)
(* (count suggestions-state) 56) top (min constants/mentions-max-height
(- @layout-height (* (count suggestions-state) 56)
(+ (safe-area/get-top) (- @layout-height
messages.constants/top-bar-height (+ (safe-area/get-top)
5)))] messages.constants/top-bar-height
5)))]
(rn/use-effect (rn/use-effect
(fn [] (fn []
(if suggestions? (if suggestions?
(set-suggestions-state suggestions) (set-suggestions-state suggestions)
(js/setTimeout #(set-suggestions-state suggestions) 300)) (js/setTimeout #(set-suggestions-state suggestions) 300))
(reanimated/animate opacity (if suggestions? 1 0))) (reanimated/animate opacity (if suggestions? 1 0)))
[suggestions?]) [suggestions])
[reanimated/view [reanimated/view {:style (style/container opacity top theme)}
{:style (style/container opacity top theme)} [rn/scroll-view
[rn/flat-list {:accessibility-label :mentions-list
{:keyboard-should-persist-taps :always :keyboard-should-persist-taps :always}
:data (vals suggestions-state) (map mention-item suggestions-state)]]))
:key-fn :key
:render-fn mention-item
:accessibility-label :mentions-list}]]))

3
src/status_im/contexts/chat/messenger/messages/list/view.cljs
View File

@ -225,7 +225,8 @@
distance-from-list-top distance-from-list-top
chat-list-scroll-y chat-list-scroll-y
(on-scroll-fn distance-atom layout-height))) (on-scroll-fn distance-atom layout-height)))
:style {:background-color (colors/theme-colors colors/white :style {:height "100%"
:background-color (colors/theme-colors colors/white
colors/neutral-95 colors/neutral-95
theme)} theme)}
:content-container-style (style/list-paddings add-padding-bottom?) :content-container-style (style/list-paddings add-padding-bottom?)