From 1594ff47f52bcb48d0cfa82fc7a598401cbf3034 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 8 Jun 2023 17:48:12 +0100 Subject: [PATCH] Layout updates/fixes for pinned messages bar (#16179) * Blur under the pinned message bar * Updated styles * Code style update * Style updates * Updated z-index for composer mentions/suggestions * Fixes for colors * Positioning fix rollback * Small code style update * Formatting fix --- src/quo2/components/banners/banner/style.cljs | 2 +- src/quo2/components/banners/banner/view.cljs | 2 +- .../chat/messages/content/pin/style.cljs | 4 +- .../contexts/chat/messages/list/view.cljs | 9 ++-- .../chat/messages/navigation/style.cljs | 13 ------ .../chat/messages/navigation/view.cljs | 12 +++--- .../chat/messages/pin/banner/style.cljs | 41 +++++++++++++++++++ .../chat/messages/pin/banner/view.cljs | 41 ++++++++++++++----- .../contexts/chat/messages/view.cljs | 7 ++-- 9 files changed, 89 insertions(+), 42 deletions(-) create mode 100644 src/status_im2/contexts/chat/messages/pin/banner/style.cljs diff --git a/src/quo2/components/banners/banner/style.cljs b/src/quo2/components/banners/banner/style.cljs index fb034e349d..23d8790d35 100644 --- a/src/quo2/components/banners/banner/style.cljs +++ b/src/quo2/components/banners/banner/style.cljs @@ -4,7 +4,7 @@ (def container {:height 40 - :background-color colors/primary-50-opa-20 + :background-color (colors/custom-color :blue 50 20) :flex-direction :row :align-items :center :padding-right 22 diff --git a/src/quo2/components/banners/banner/view.cljs b/src/quo2/components/banners/banner/view.cljs index 0d8c8f429b..103206648e 100644 --- a/src/quo2/components/banners/banner/view.cljs +++ b/src/quo2/components/banners/banner/view.cljs @@ -27,4 +27,4 @@ [rn/view {:accessibility-label :pins-count :style style/counter} - (when (> pins-count 1) [counter/counter {:type :secondary} pins-count])]])) \ No newline at end of file + [counter/counter {:type :secondary} pins-count]]])) diff --git a/src/status_im2/contexts/chat/messages/content/pin/style.cljs b/src/status_im2/contexts/chat/messages/content/pin/style.cljs index 55233ced6b..15c3cb74af 100644 --- a/src/status_im2/contexts/chat/messages/content/pin/style.cljs +++ b/src/status_im2/contexts/chat/messages/content/pin/style.cljs @@ -2,7 +2,7 @@ (:require [quo2.foundations.colors :as colors])) (def system-message-default-size 36) -(def system-message-radius (/ system-message-default-size 2)) +(def system-message-margin-right 8) (def pin-indicator-container {:margin-top 4 @@ -26,7 +26,7 @@ (def system-message-inner-container {:width system-message-default-size :height system-message-default-size - :margin-right system-message-radius + :margin-right system-message-margin-right :border-radius system-message-default-size :justify-content :center :align-items :center diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index b13669d0a4..dd09395619 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/src/status_im2/contexts/chat/messages/list/view.cljs @@ -291,10 +291,9 @@ colors/neutral-95))} :inverted true :on-layout (fn [e] - (when platform/android? - ;; FIXME: this is due to Android not triggering the initial - ;; scrollTo event - (scroll-to-offset 1)) + ;; FIXME: this is due to Android not triggering the initial + ;; scrollTo event + (scroll-to-offset 1) (let [layout-height (oops/oget e "nativeEvent.layout.height")] (reset! messages-view-height layout-height))) :scroll-enabled (not recording?)}]])) @@ -326,7 +325,7 @@ :keyboard-shown? keyboard-shown}] (when footer-comp - (footer-comp {:insets insets}))])) + [footer-comp {:insets insets}])])) (defn messages-list [props] diff --git a/src/status_im2/contexts/chat/messages/navigation/style.cljs b/src/status_im2/contexts/chat/messages/navigation/style.cljs index 8b616fba68..02f4cd02be 100644 --- a/src/status_im2/contexts/chat/messages/navigation/style.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/style.cljs @@ -76,19 +76,6 @@ :opacity opacity-animation}) header)) -(def pinned-banner - {:position :absolute - :left 0 - :right 0 - :top navigation-bar-height}) - -(defn animated-pinned-banner - [enabled? animation] - (reanimated/apply-animations-to-style - (when enabled? - {:opacity animation}) - pinned-banner)) - (def header-content-container {:flex-direction :row :align-items :center diff --git a/src/status_im2/contexts/chat/messages/navigation/view.cljs b/src/status_im2/contexts/chat/messages/navigation/view.cljs index 4fc51b262b..06bf349063 100644 --- a/src/status_im2/contexts/chat/messages/navigation/view.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/view.cljs @@ -4,8 +4,8 @@ [re-frame.db] [react-native.blur :as blur] [react-native.core :as rn] - [react-native.platform :as platform] [react-native.reanimated :as reanimated] + [react-native.platform :as platform] [status-im2.contexts.chat.messages.navigation.style :as style] [status-im2.contexts.chat.messages.pin.banner.view :as pin.banner] [status-im2.constants :as constants] @@ -38,7 +38,7 @@ (+ style/navigation-bar-height 100)] [0 1] {:extrapolateLeft "clamp" - :extrapolateRight "clamp"}) + :extrapolateRight "extend"}) translate-animation (reanimated/interpolate scroll-y [(+ style/navigation-bar-height 25) (+ style/navigation-bar-height 100)] @@ -108,9 +108,11 @@ {:content (fn [] [actions/chat-actions chat true])}]))} [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]])] - [reanimated/view - {:style (style/animated-pinned-banner all-loaded? banner-opacity-animation)} - [pin.banner/banner chat-id]]]])) + [pin.banner/banner + {:chat-id chat-id + :opacity-animation banner-opacity-animation + :all-loaded? all-loaded? + :top-offset style/navigation-bar-height}]]])) (defn navigation-view [props] diff --git a/src/status_im2/contexts/chat/messages/pin/banner/style.cljs b/src/status_im2/contexts/chat/messages/pin/banner/style.cljs new file mode 100644 index 0000000000..2cf5ad23b3 --- /dev/null +++ b/src/status_im2/contexts/chat/messages/pin/banner/style.cljs @@ -0,0 +1,41 @@ +(ns status-im2.contexts.chat.messages.pin.banner.style + (:require + [quo2.foundations.colors :as colors] + [react-native.platform :as platform] + [react-native.reanimated :as reanimated])) + +(defonce ^:const pinned-banner-height 40) + +(defn blur-container-style + [top-offset opacity-animation enabled?] + (reanimated/apply-animations-to-style + {:opacity opacity-animation} + {:position :absolute + :display (if enabled? :flex :none) + :top top-offset + :left 0 + :right 0 + :bottom 0 + :height pinned-banner-height + :overflow :hidden})) + +(defn blur-view-style + [] + {:style {:flex 1} + :blur-radius (if platform/ios? 20 10) + :blur-type (colors/theme-colors :light :dark) + :blur-amount 20}) + +(defn pinned-banner + [top-offset] + {:position :absolute + :left 0 + :right 0 + :top top-offset}) + +(defn animated-pinned-banner + [top-offset enabled? animation] + (reanimated/apply-animations-to-style + (when enabled? + {:opacity animation}) + (pinned-banner top-offset))) \ No newline at end of file diff --git a/src/status_im2/contexts/chat/messages/pin/banner/view.cljs b/src/status_im2/contexts/chat/messages/pin/banner/view.cljs index 680826bfa8..176808d728 100644 --- a/src/status_im2/contexts/chat/messages/pin/banner/view.cljs +++ b/src/status_im2/contexts/chat/messages/pin/banner/view.cljs @@ -1,9 +1,13 @@ (ns status-im2.contexts.chat.messages.pin.banner.view (:require [quo2.core :as quo] - [utils.i18n :as i18n] - [utils.re-frame :as rf] + [react-native.blur :as blur] + [react-native.core :as rn] + [react-native.reanimated :as reanimated] [status-im2.contexts.chat.messages.resolver.message-resolver :as resolver] - [status-im2.constants :as constants])) + [status-im2.contexts.chat.messages.pin.banner.style :as style] + [status-im2.constants :as constants] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) (defn message-text [{:keys [content-type] :as message}] @@ -12,8 +16,17 @@ :else (get-in message [:content :parsed-text]))) -(defn banner - [chat-id] +(defn f-blur-view + [top-offset opacity-animation enabled?] + [reanimated/view {:style (style/blur-container-style top-offset opacity-animation enabled?)} + [blur/view (style/blur-view-style)]]) + +(defn blur-view + [top-offset opacity-animation enabled?] + [:f> f-blur-view top-offset opacity-animation enabled?]) + +(defn f-banner + [{:keys [chat-id opacity-animation all-loaded? top-offset]}] (let [pinned-message (rf/sub [:chats/last-pinned-message chat-id]) latest-pin-text (message-text pinned-message) {:keys [deleted? deleted-for-me?]} pinned-message @@ -28,11 +41,17 @@ (:content-type pinned-message)) (resolver/resolve-message latest-pin-text) :else latest-pin-text)] - [quo/banner - {:latest-pin-text latest-pin-text - :pins-count pins-count - :on-press (fn [] - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}])) + [rn/view + [blur-view top-offset opacity-animation (> pins-count 0)] + [reanimated/view {:style (style/animated-pinned-banner top-offset all-loaded? opacity-animation)} + [quo/banner + {:latest-pin-text latest-pin-text + :pins-count pins-count + :on-press (fn [] + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}]]])) +(defn banner + [props] + [:f> f-banner props]) diff --git a/src/status_im2/contexts/chat/messages/view.cljs b/src/status_im2/contexts/chat/messages/view.cljs index 7ca99af026..72696af7e3 100644 --- a/src/status_im2/contexts/chat/messages/view.cljs +++ b/src/status_im2/contexts/chat/messages/view.cljs @@ -34,10 +34,9 @@ :header-comp (fn [{:keys [scroll-y]}] [messages.navigation/navigation-view {:scroll-y scroll-y}]) :footer-comp (fn [{:keys [insets]}] - [rn/view - (if-not able-to-send-message? - [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat] - [:f> composer/composer insets])])}])) + (if-not able-to-send-message? + [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat] + [:f> composer/composer insets]))}])) (defn chat []