Skip to content

Commit

Permalink
Select Recent tab on messages home when double tapping messages icon
Browse files Browse the repository at this point in the history 
This PR uses GestureHandler to select the recent tab on the messages home screen, This was achievable by moving the selected tab atom to app-db and not to be local state inside the UI component.
  • Loading branch information
@ibrkhalil
ibrkhalil committed Apr 8, 2023
1 parent e1bbf4b commit d4e76d0
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 80 deletions.
103 changes: 55 additions & 48 deletions src/quo2/components/navigation/bottom_nav_tab.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
[react-native.core :as rn]
[react-native.platform :as platform]
[react-native.hole-view :as hole-view]
[react-native.reanimated :as reanimated]))
[react-native.reanimated :as reanimated]
[react-native.gesture :as gesture]
[utils.re-frame :as rf]))

(defn toggle-background-color
[background-color press-out? pass-through?]
Expand All @@ -15,7 +17,6 @@
press-out? "transparent"
pass-through? colors/white-opa-5
:else colors/neutral-70)))

(defn bottom-nav-tab
"[bottom-nav-tab opts]
opts
Expand All @@ -42,53 +43,59 @@
{:background-color background-color}
{:width 90
:height 40
:border-radius 10})]
[rn/touchable-without-feedback
{:test-ID test-ID
:on-press on-press
:on-press-in #(toggle-background-color background-color false pass-through?)
:on-press-out #(toggle-background-color background-color true pass-through?)
:accessibility-label accessibility-label}
[reanimated/view {:style background-animated-style}
;; In android animations are not working for the animated components which are nested by
;; hole-view,
;; Interestingly this only happens when hole view and blur view are used together
;; Similar behavior is also seen while removing holes, and to fix that we used key and
;; force-rendered view
;; But we need animations faster for tab clicks, so we can't rely on reagent atoms,
;; so for now only using hole view for the ios tab icon notification boundary
(if platform/ios?
[hole-view/hole-view
{:key new-notifications? ;; Key is required to force removal of holes
:holes (cond
(not new-notifications?) ;; No new notifications, remove holes
[]
:border-radius 10})
double-tap-gesture (-> (gesture/gesture-tap)
(gesture/number-of-taps 2)
(gesture/on-start (fn [_event]
(rf/dispatch [:messages-home-view/select-tab
:recent]))))]
[gesture/gesture-detector {:gesture double-tap-gesture}
[rn/touchable-without-feedback
{:test-ID test-ID
:on-press on-press
:on-press-in #(toggle-background-color background-color false pass-through?)
:on-press-out #(toggle-background-color background-color true pass-through?)
:accessibility-label accessibility-label}
[reanimated/view {:style background-animated-style}
;; In android animations are not working for the animated components which are nested by
;; hole-view,
;; Interestingly this only happens when hole view and blur view are used together
;; Similar behavior is also seen while removing holes, and to fix that we used key and
;; force-rendered view
;; But we need animations faster for tab clicks, so we can't rely on reagent atoms,
;; so for now only using hole view for the ios tab icon notification boundary
(if platform/ios?
[hole-view/hole-view
{:key new-notifications? ;; Key is required to force removal of holes
:holes (cond
(not new-notifications?) ;; No new notifications, remove holes
[]

(= notification-indicator :unread-dot)
[{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
(= notification-indicator :unread-dot)
[{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]

:else
[{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
:else
[{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
[reanimated/image
{:style icon-animated-style
:source (icons/icon-source (keyword (str icon 24)))}]]
[reanimated/image
{:style icon-animated-style
:source (icons/icon-source (keyword (str icon 24)))}]]
[reanimated/image
{:style icon-animated-style
:source (icons/icon-source (keyword (str icon 24)))}])
(when new-notifications?
(if (= notification-indicator :counter)
[counter/counter
{:override-text-color colors/white
:override-bg-color colors/primary-50
:style {:position :absolute
:left 48
:top 2}}
counter-label]
[rn/view
{:style {:width 8
:height 8
:border-radius 4
:top 6
:left 51
:position :absolute
:background-color colors/primary-50}}]))]]))])
:source (icons/icon-source (keyword (str icon 24)))}])
(when new-notifications?
(if (= notification-indicator :counter)
[counter/counter
{:override-text-color colors/white
:override-bg-color colors/primary-50
:style {:position :absolute
:left 48
:top 2}}
counter-label]
[rn/view
{:style {:width 8
:height 8
:border-radius 4
:top 6
:left 51
:position :absolute
:background-color colors/primary-50}}]))]]]))])
3 changes: 2 additions & 1 deletion src/status_im/events.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@
status-im2.contexts.shell.events
status-im2.contexts.onboarding.events
status-im.chat.models.gaps
[status-im2.navigation.events :as navigation]))
[status-im2.navigation.events :as navigation]
status-im2.contexts.chat.home.events))

(re-frame/reg-fx
:dismiss-keyboard
Expand Down
8 changes: 8 additions & 0 deletions src/status_im2/contexts/chat/home/events.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
(ns status-im2.contexts.chat.home.events
(:require
[utils.re-frame :as rf]))

(rf/defn messages-home-select-tab-event
{:events [:messages-home-view/select-tab]}
[{:keys [db]} tab]
{:db (assoc db :messages-home-view/selected-tab tab)})
63 changes: 32 additions & 31 deletions src/status_im2/contexts/chat/home/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
[quo2.core :as quo]
[re-frame.core :as re-frame]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.common.contact-list.view :as contact-list]
[status-im2.common.home.view :as common.home]
[status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item]
Expand Down Expand Up @@ -102,33 +101,35 @@

(defn home
[]
(let [selected-tab (reagent/atom :recent)]
(fn []
(let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])]
[safe-area/consumer
(fn [{:keys [top]}]
[:<>
(if (= @selected-tab :contacts)
[contacts pending-contact-requests top]
[chats @selected-tab top])
[rn/view
{:style (style/blur-container top)}
[blur/view
{:blur-amount (if platform/ios? 20 10)
:blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight))
:style style/blur}]
[common.home/top-nav]
[common.home/title-column
{:label (i18n/label :t/messages)
:handler #(rf/dispatch [:show-bottom-sheet
{:content home.sheet/new-chat-bottom-sheet}])
:accessibility-label :new-chat-button}]
[quo/discover-card
{:title (i18n/label :t/invite-friends-to-status)
:description (i18n/label :t/share-invite-link)}]
[quo/tabs
{:style style/tabs
:size 32
:on-change #(reset! selected-tab %)
:default-active @selected-tab
:data (get-tabs-data (pos? (count pending-contact-requests)))}]]])]))))
(fn []
(let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])
selected-tab (or (rf/sub [:messages-home-view/selected-tab])
:recent)]
[safe-area/consumer
(fn [{:keys [top]}]
[:<>
(if (= selected-tab :contacts)
[contacts pending-contact-requests top]
[chats selected-tab top])
[rn/view
{:style (style/blur-container top)}
[blur/view
{:blur-amount (if platform/ios? 20 10)
:blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight))
:style style/blur}]
[common.home/top-nav]
[common.home/title-column
{:label (i18n/label :t/messages)
:handler #(rf/dispatch [:show-bottom-sheet
{:content home.sheet/new-chat-bottom-sheet}])
:accessibility-label :new-chat-button}]
[quo/discover-card
{:title (i18n/label :t/invite-friends-to-status)
:description (i18n/label :t/share-invite-link)}]
[quo/tabs
{:style style/tabs
:size 32
:on-change (fn [tab]
(rf/dispatch [:messages-home-view/select-tab tab]))
:default-active selected-tab
:data (get-tabs-data (pos? (count pending-contact-requests)))}]]])])))
3 changes: 3 additions & 0 deletions src/status_im2/subs/root.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,3 +280,6 @@
(reg-root-key-sub :messenger/started? :messenger/started?)

(reg-root-key-sub :information-box-states :information-box-states)

; Messages home view -> tabs
(reg-root-key-sub :messages-home-view/selected-tab :messages-home-view/selected-tab)

0 comments on commit d4e76d0

Please sign in to comment.