status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Alexander 2023-06-08 17:48:12 +01:00 committed by GitHub
parent c59de7dbf8
commit 1594ff47f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 89 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo2/components/banners/banner/style.cljs
View File

@ -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

2
src/quo2/components/banners/banner/view.cljs
View File

@ -27,4 +27,4 @@
[rn/view
{:accessibility-label :pins-count
:style style/counter}
(when (> pins-count 1) [counter/counter {:type :secondary} pins-count])]]))
[counter/counter {:type :secondary} pins-count]]]))

4
src/status_im2/contexts/chat/messages/content/pin/style.cljs
View File

@ -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

9
src/status_im2/contexts/chat/messages/list/view.cljs
View File

@ -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]

13
src/status_im2/contexts/chat/messages/navigation/style.cljs
View File

@ -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

12
src/status_im2/contexts/chat/messages/navigation/view.cljs
View File

@ -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]

41
src/status_im2/contexts/chat/messages/pin/banner/style.cljs Normal file
View File

@ -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)))

41
src/status_im2/contexts/chat/messages/pin/banner/view.cljs
View File

@ -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])

7
src/status_im2/contexts/chat/messages/view.cljs
View File

@ -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
[]