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

[#16118] bottom nav tab notification color (#16236)

This commit is contained in:
Ulises Manuel Cárdenas 2023-06-19 07:20:37 -06:00 committed by GitHub
parent 850ac3f9f8
commit 2b465cb980
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/quo2/components/navigation/bottom_nav_tab/styles.cljs Normal file
View File

@ -0,0 +1,17 @@
(ns quo2.components.navigation.bottom-nav-tab.styles
(:require [quo2.foundations.colors :as colors]))
(defn notification-dot
[customization-color]
{:width 8
:height 8
:border-radius 4
:top 6
:left 51
:position :absolute
:background-color (colors/custom-color customization-color 60)})
(def notification-counter
{:position :absolute
:left 48
:top 2})

25
src/quo2/components/navigation/bottom_nav_tab.cljs → src/quo2/components/navigation/bottom_nav_tab/view.cljs
View File

@ -1,10 +1,11 @@
(ns quo2.components.navigation.bottom-nav-tab
(ns quo2.components.navigation.bottom-nav-tab.view
(:require [quo2.components.counter.counter :as counter]
[quo2.components.icons.icons :as icons]
[quo2.components.navigation.bottom-nav-tab.styles :as styles]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.platform :as platform]
[react-native.hole-view :as hole-view]
[react-native.platform :as platform]
[react-native.reanimated :as reanimated]))
(defn toggle-background-color
@ -26,9 +27,12 @@
:on-press bottom-tab on-press function
:pass-through? true/false
:icon-color-anim reanimated shared value
:customization-color Customization color for the notification mark
"
[{:keys [icon new-notifications? notification-indicator counter-label
on-press pass-through? icon-color-anim accessibility-label test-ID]}]
on-press pass-through? icon-color-anim accessibility-label test-ID
customization-color]
:or {customization-color :blue}}]
(let [icon-animated-style (reanimated/apply-animations-to-style
{:tint-color icon-color-anim}
{:width 24
@ -77,19 +81,10 @@
(if (= notification-indicator :counter)
[counter/counter
{:override-text-color colors/white
:override-bg-color colors/primary-50
:style {:position :absolute
:left 48
:top 2}}
:override-bg-color (colors/custom-color customization-color 60)
:style styles/notification-counter}
counter-label]
[rn/view
{:style {:width 8
:height 8
:border-radius 4
:top 6
:left 51
:position :absolute
:background-color colors/primary-50}}]))]]))
[rn/view {:style (styles/notification-dot customization-color)}]))]]))
(defn bottom-nav-tab
[opts]

16
src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs
View File

@ -1,5 +1,6 @@
(ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab
(:require [quo2.components.navigation.bottom-nav-tab :as quo2]
(:require [clojure.string :as string]
[quo2.components.navigation.bottom-nav-tab.view :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
@ -36,7 +37,15 @@
:value :unread-dot}]}
{:label "Counter Label"
:key :counter-label
:type :text}])
:type :text}
{:label "Customization color"
:key :customization-color
:type :select
:options (map (fn [[k _]]
{:key k
:value (string/capitalize (name k))})
colors/customization)}])
(defn get-icon-color
[selected? pass-through?]
@ -61,7 +70,8 @@
:new-notifications? true
:notification-indicator :counter
:counter-label 8
:preview-label-color colors/white})
:preview-label-color colors/white
:customization-color :turquoise})
selected? (reagent/cursor state [:selected?])
pass-through? (reagent/cursor state [:pass-through?])]
(fn []

26
src/status_im2/contexts/shell/components/bottom_tabs/view.cljs
View File

@ -8,7 +8,7 @@
[status-im2.contexts.shell.state :as state]
[status-im2.contexts.shell.animation :as animation]
[status-im2.contexts.shell.constants :as shell.constants]
[quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]
[quo2.components.navigation.bottom-nav-tab.view :as bottom-nav-tab]
[status-im2.contexts.shell.components.bottom-tabs.style :as style]))
(defn blur-overlay-params
@ -21,15 +21,21 @@
(defn bottom-tab
[icon stack-id shared-values notifications-data]
[bottom-nav-tab/bottom-nav-tab
(assoc (get notifications-data stack-id)
:test-ID stack-id
:icon icon
:icon-color-anim (get
shared-values
(get shell.constants/tabs-icon-color-keywords stack-id))
:on-press #(animation/bottom-tab-on-press stack-id true)
:accessibility-label (str (name stack-id) "-tab"))])
(let [{:keys [key-uid]} (rf/sub [:multiaccount])
customization-color (or (:color (rf/sub [:onboarding-2/profile]))
(rf/sub [:profile/customization-color key-uid]))
icon-color (->> stack-id
(get shell.constants/tabs-icon-color-keywords)
(get shared-values))]
[bottom-nav-tab/bottom-nav-tab
(-> notifications-data
(get stack-id)
(assoc :test-ID stack-id
:icon icon
:icon-color-anim icon-color
:on-press #(animation/bottom-tab-on-press stack-id true)
:accessibility-label (str (name stack-id) "-tab")
:customization-color customization-color))]))
(defn f-bottom-tabs
[]