Skip to content

Commit

Permalink
Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibrkhalil
ibrkhalil committed Nov 2, 2023
1 parent 3a823cb commit 80b69ba
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 76 deletions.
15 changes: 12 additions & 3 deletions src/status_im2/contexts/chat/composer/actions/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,10 @@
[opacity]
[reanimated/view {:style (reanimated/apply-animations-to-style {:opacity opacity} {})}
[quo/composer-button
{:on-press #(js/alert "to be implemented")
{:on-press (fn []
(rf/dispatch [:chat.ui/set-input-focused false])
(rn/dismiss-keyboard!)
(js/alert "to be implemented"))
:icon :i/audio}]])

(defn audio-button
Expand Down Expand Up @@ -210,13 +213,19 @@
[]
[quo/composer-button
{:icon :i/reaction
:on-press #(js/alert "to be implemented")
:on-press (fn []
(rf/dispatch [:chat.ui/set-input-focused false])
(rn/dismiss-keyboard!)
(js/alert "to be implemented"))
:container-style {:margin-right 12}}])

(defn format-button
[]
[quo/composer-button
{:on-press #(js/alert "to be implemented")
{:on-press (fn []
(rf/dispatch [:chat.ui/set-input-focused false])
(rn/dismiss-keyboard!)
(js/alert "to be implemented"))
:icon :i/format}])

(defn view
Expand Down
4 changes: 3 additions & 1 deletion src/status_im2/contexts/chat/events.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,9 @@
(chat.state/reset-visible-item)
(rf/merge cofx
(merge
{:db (dissoc db :current-chat-id)
{:db (-> db
(dissoc :current-chat-id)
(assoc-in [:chat/inputs chat-id :focused?] false))
:async-storage-set {:chat-id nil
:key-uid nil}}
(let [community-id (get-in db [:chats chat-id :community-id])]
Expand Down
4 changes: 3 additions & 1 deletion src/status_im2/contexts/chat/messages/content/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,9 @@
:outgoing-status outgoing-status})
:on-press (fn []
(if (and platform/ios? keyboard-shown?)
(rn/dismiss-keyboard!)
(do
(rf/dispatch [:chat.ui/set-input-focused false])
(rn/dismiss-keyboard!))
(when (and outgoing
(not= outgoing-status :sending)
(not @show-delivery-state?))
Expand Down
47 changes: 31 additions & 16 deletions src/status_im2/contexts/chat/messages/list/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,9 @@
(defonce ^:const loading-indicator-page-loading-height 100)
(defonce ^:const scroll-animation-input-range [0 50])
(defonce ^:const min-message-height 32)
(defonce ^:const content-height-shared-big-name-invisible-value 900)
(defonce ^:const topbar-visible-scroll-y-value 100)
(defonce ^:const topbar-visible-scroll-y-value 85)
(defonce ^:const topbar-invisible-scroll-y-value 135)
(defn- root-margin-for-big-name-visibility-detector
[composer-active?]
{:bottom (if composer-active? -80 -35)})
(def root-margin-for-big-name-visibility-detector {:bottom -35})
(defonce messages-list-ref (atom nil))

(defn list-key-fn [{:keys [message-id value]}] (or message-id value))
Expand Down Expand Up @@ -283,24 +280,31 @@
[message/message message-data context keyboard-shown?])]))

(defn scroll-handler
[event scroll-y animate-topbar-opacity? on-end-reached?]
[event scroll-y animate-topbar-opacity? on-end-reached? animate-topbar-name?]
(let [content-size-y (- (oops/oget event "nativeEvent.contentSize.height")
(oops/oget event "nativeEvent.layoutMeasurement.height"))
current-y (oops/oget event "nativeEvent.contentOffset.y")
scroll-distance (- content-size-y current-y)]
(when (and @on-end-reached? (> scroll-distance 0))
(when (and @on-end-reached? (pos? scroll-distance))
(reset! on-end-reached? false))
(if (< topbar-visible-scroll-y-value scroll-distance)
(when-not @animate-topbar-opacity?
(reset! animate-topbar-opacity? true))
(when @animate-topbar-opacity?
(reset! animate-topbar-opacity? false)))
(reset! animate-topbar-opacity? true)
(reset! animate-topbar-opacity? false))
(if (< topbar-invisible-scroll-y-value scroll-distance)
(reset! animate-topbar-name? true)
(reset! animate-topbar-name? false))
(reanimated/set-shared-value scroll-y scroll-distance)))

(defn f-messages-list-content
[{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown? inner-state-atoms
big-name-visible? animate-topbar-opacity? composer-active?
on-end-reached?]}]
on-end-reached? animate-topbar-name?]}]
(rn/use-effect (fn []
(if (and (not @on-end-reached?)
(< topbar-visible-scroll-y-value (reanimated/get-shared-value scroll-y)))
(reset! animate-topbar-opacity? true)
(reset! animate-topbar-opacity? false)))
[composer-active? @on-end-reached? @animate-topbar-opacity?])
(let [theme (quo.theme/use-theme-value)
{window-height :height} (rn/get-window)
{:keys [keyboard-height]} (hooks/use-keyboard)
Expand All @@ -313,7 +317,7 @@
messages-view-header-height]} inner-state-atoms]
[rn/view {:style {:flex 1}}
[rnio/flat-list
{:root-margin (root-margin-for-big-name-visibility-detector composer-active?)
{:root-margin root-margin-for-big-name-visibility-detector
:key-fn list-key-fn
:ref list-ref
:bounces false
Expand All @@ -340,9 +344,17 @@
:render-fn render-fn
:on-viewable-items-changed on-viewable-items-changed
:on-content-size-change (fn [_ y]
(if (or
(< 400 (reanimated/get-shared-value scroll-y))
(< topbar-visible-scroll-y-value
(reanimated/get-shared-value scroll-y)))
(reset! animate-topbar-opacity? true)
(reset! animate-topbar-opacity? false))
(when-not (or
(not @big-name-visible?)
(= :initial-render @big-name-visible?))
(= :initial-render @big-name-visible?)
(pos? (reanimated/get-shared-value
scroll-y)))
(reset! on-end-reached? false))
;; NOTE(alwx): here we set the initial value of
;; `scroll-y` which is needed because by default the
Expand All @@ -368,15 +380,18 @@
0)}
:keyboard-dismiss-mode :interactive
:keyboard-should-persist-taps :always
:on-scroll-begin-drag rn/dismiss-keyboard!
:on-scroll-begin-drag #(do
(rf/dispatch [:chat.ui/set-input-focused false])
(rn/dismiss-keyboard!))
:on-momentum-scroll-begin state/start-scrolling
:on-momentum-scroll-end state/stop-scrolling
:scroll-event-throttle 16
:on-scroll (fn [event]
(scroll-handler event
scroll-y
animate-topbar-opacity?
on-end-reached?)
on-end-reached?
animate-topbar-name?)
(on-scroll event show-floating-scroll-down-button?))
:style (add-inverted-y-android
{:background-color (if all-loaded?
Expand Down
64 changes: 46 additions & 18 deletions src/status_im2/contexts/chat/messages/navigation/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
[react-native.reanimated :as reanimated]
[status-im2.common.home.actions.view :as actions]
[status-im2.config :as config]
[status-im2.contexts.chat.messages.list.view :refer [topbar-invisible-scroll-y-value]]
[status-im2.contexts.chat.messages.navigation.style :as style]
[status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
[utils.i18n :as i18n]
Expand All @@ -21,43 +22,70 @@
[{:keys [theme scroll-y chat chat-screen-loaded? all-loaded? display-name online? photo-path
back-icon animate-topbar-name? composer-active? big-name-visible? animate-topbar-opacity?
on-end-reached?]}]
(let [{:keys [group-chat chat-id]} chat
opacity-animation (reanimated/use-shared-value 0)
banner-opacity-animation (reanimated/interpolate scroll-y
[(+ style/navigation-bar-height 150)
(+ style/navigation-bar-height 200)]
[0 1]
{:extrapolateLeft "clamp"
:extrapolateRight "clamp"})
translate-animation (reanimated/use-shared-value title-opacity-interpolation-start)
title-opacity-animation (reanimated/use-shared-value 0)
messages (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)])
more-than-two-messages? (<= 2 (count messages))
more-than-seven-messages? (<= 7 (count messages))]
(let [{:keys [group-chat chat-id]} chat
opacity-animation (reanimated/use-shared-value 0)
banner-opacity-animation (reanimated/interpolate
scroll-y
[(+ style/navigation-bar-height 150)
(+ style/navigation-bar-height 200)]
[0 1]
{:extrapolateLeft "clamp"
:extrapolateRight "clamp"})
translate-animation (reanimated/use-shared-value
title-opacity-interpolation-start)
title-opacity-animation (reanimated/use-shared-value 0)
messages (rf/sub [:chats/raw-chat-messages-stream
(:chat-id chat)])
more-than-two-messages? (<= 2 (count messages))
more-than-eight-messages? (<= 8 (count messages))
scroll-y-sending-eight-messages-threshold 469]
(rn/use-effect
(fn []
(if
(or
(and (not composer-active?)
more-than-eight-messages?
(= :initial-render @big-name-visible?))
(and
(< 80 (reanimated/get-shared-value scroll-y))
(not @on-end-reached?))
(and composer-active?
more-than-two-messages?)
(and
(not @on-end-reached?)
@animate-topbar-opacity?)

(or
(< 350 (reanimated/get-shared-value scroll-y))
(and (pos? (count messages))
composer-active?
(< 85 (reanimated/get-shared-value scroll-y)))))
(reanimated/animate opacity-animation 1)
(reanimated/animate opacity-animation 0))
(if (when-not (and
@on-end-reached?
(not composer-active?)
(true? @big-name-visible?))
(or
(and
(and composer-active?
(not @big-name-visible?))
(< topbar-invisible-scroll-y-value (reanimated/get-shared-value scroll-y)))
(<= scroll-y-sending-eight-messages-threshold (reanimated/get-shared-value scroll-y))
(and (not composer-active?)
more-than-seven-messages?
more-than-eight-messages?
(= :initial-render @big-name-visible?))
(and more-than-two-messages?
(< title-opacity-interpolation-start (reanimated/get-shared-value scroll-y))
composer-active?)
(and more-than-two-messages?
composer-active?)
@animate-topbar-name?
@animate-topbar-opacity?))
@animate-topbar-name?))
(do
(reanimated/animate title-opacity-animation 1)
(reanimated/animate opacity-animation 1)
(reanimated/animate translate-animation 0))
(do
(reanimated/animate title-opacity-animation 0)
(reanimated/animate opacity-animation 0)
(reanimated/animate translate-animation title-opacity-interpolation-start))))
[@animate-topbar-name? @big-name-visible? @animate-topbar-opacity? composer-active?
@on-end-reached?])
Expand Down
60 changes: 23 additions & 37 deletions src/status_im2/contexts/chat/messages/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,52 +14,38 @@
[utils.re-frame :as rf]))

(defn f-chat
[{:keys [extra-keyboard-height show-floating-scroll-down-button? animate-topbar-name?
[{:keys [show-floating-scroll-down-button? animate-topbar-name?
big-name-visible? animate-topbar-opacity? on-end-reached?]
:as inner-state-atoms}]
(let [insets (safe-area/get-insets)
scroll-y (reanimated/use-shared-value 0)
content-height (reanimated/use-shared-value 0)
{:keys [keyboard-height keyboard-shown]} (hooks/use-keyboard)
(let [insets (safe-area/get-insets)
scroll-y (reanimated/use-shared-value 0)
content-height (reanimated/use-shared-value 0)
{:keys [keyboard-shown]} (hooks/use-keyboard)
{:keys [chat-id
contact-request-state
group-chat
able-to-send-message?
chat-type
chat-name
emoji]
:as chat} (rf/sub [:chats/current-chat-chat-view])
chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?])
all-loaded? (when chat-screen-loaded?
(rf/sub [:chats/all-loaded? (:chat-id chat)]))
display-name (cond
(= chat-type constants/one-to-one-chat-type)
(first (rf/sub
[:contacts/contact-two-names-by-identity
chat-id]))
(= chat-type constants/community-chat-type)
(str (when emoji (str emoji " ")) "# " chat-name)
:else (str emoji chat-name))
online? (rf/sub [:visibility-status-updates/online? chat-id])
photo-path (rf/sub [:chats/photo-path chat-id])
back-icon (if (= chat-type constants/one-to-one-chat-type)
:i/close
:i/arrow-left)
{:keys [focused?]} (rf/sub [:chats/current-chat-input])]
(rn/use-effect
(fn []
;; If keyboard is shown then adjust `scroll-y`
(when (and keyboard-shown (> keyboard-height 0))
(reanimated/set-shared-value scroll-y
(+ (reanimated/get-shared-value scroll-y)
keyboard-height))
(reset! extra-keyboard-height keyboard-height))
;; If keyboard is not shown then subtract the keyboard height from `scroll-y` value
(when-not keyboard-shown
(reanimated/set-shared-value scroll-y
(- (reanimated/get-shared-value scroll-y)
@extra-keyboard-height))))
[keyboard-shown keyboard-height])
:as chat} (rf/sub [:chats/current-chat-chat-view])
chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?])
all-loaded? (when chat-screen-loaded?
(rf/sub [:chats/all-loaded? (:chat-id chat)]))
display-name (cond
(= chat-type constants/one-to-one-chat-type)
(first (rf/sub
[:contacts/contact-two-names-by-identity
chat-id]))
(= chat-type constants/community-chat-type)
(str (when emoji (str emoji " ")) "# " chat-name)
:else (str emoji chat-name))
online? (rf/sub [:visibility-status-updates/online? chat-id])
photo-path (rf/sub [:chats/photo-path chat-id])
back-icon (if (= chat-type constants/one-to-one-chat-type)
:i/close
:i/arrow-left)
{:keys [focused?]} (rf/sub [:chats/current-chat-input])]
;; Note - Don't pass `behavior :height` to keyboard avoiding view,. It breaks composer -
;; https://github.com/status-im/status-mobile/issues/16595
[rn/keyboard-avoiding-view
Expand Down

0 comments on commit 80b69ba

Please sign in to comment.