status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-13 12:36:11 +00:00
Code Issues Projects Releases Wiki Activity

Implemention of quo2 bottom-nav-tab (#14077)

Browse Source
This commit is contained in:
Parvesh Monu 2022-09-28 01:27:06 +05:30 committed by GitHub
parent 30e7ad585a
commit 20ac0eb2c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 188 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons/browser24@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 888 B

BIN
resources/images/icons/browser24@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
resources/images/icons/communities24@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 939 B

BIN
resources/images/icons/communities24@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
resources/images/icons/messages24@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 815 B

BIN
resources/images/icons/messages24@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
resources/images/icons/wallet24@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 735 B

BIN
resources/images/icons/wallet24@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

16
src/quo/previews/preview.cljs
View File

@ -39,6 +39,13 @@
(def label-style {:flex 0.4
:padding-right 8})
(defn label-view [state label]
[rn/view {:style label-style}
[quo/text
(when-let [label-color (:preview-label-color @state)]
{:style {:color label-color}})
label]])
(defn modal-container []
{:flex 1
:justify-content :center
@ -56,8 +63,7 @@
[{:keys [label key state]}]
(let [state* (reagent/cursor state [key])]
[rn/view {:style container}
[rn/view {:style label-style}
[quo/text label]]
[label-view state label]
[rn/view {:style {:flex-direction :row
:flex 0.6
:border-radius 4
@ -80,8 +86,7 @@
[{:keys [label key state]}]
(let [state* (reagent/cursor state [key])]
[rn/view {:style container}
[rn/view {:style label-style}
[quo/text label]]
[label-view state label]
[rn/view {:style {:flex 0.6}}
[quo/text-input {:value @state*
:show-cancel false
@ -102,8 +107,7 @@
(let [state* (reagent/cursor state [key])
selected (value-for-key @state* options)]
[rn/view {:style container}
[rn/view {:style label-style}
[quo/text label]]
[label-view state label]
[rn/view {:style {:flex 0.6}}
[rn/modal {:visible @open
:on-request-close #(reset! open false)

6
src/quo2/components/counter/counter.cljs
View File

@ -19,7 +19,7 @@
"type: default, secondary, grey
outline: true, false
value: integer"
[{:keys [type outline override-text-color override-bg-color]} value]
[{:keys [type outline override-text-color override-bg-color style]} value]
(let [type (or type :default)
text-color (or override-text-color
(if (or
@ -39,11 +39,13 @@
1 16
2 20
28)]
[rn/view {:style (cond-> {:align-items :center
[rn/view {:style (cond-> (merge
{:align-items :center
:justify-content :center
:border-radius 6
:width width
:height 16}
style)
outline
(merge {:border-width 1
:border-color (get-color (or type :default))})

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

@ -0,0 +1,71 @@
(ns quo2.components.navigation.bottom-nav-tab
(:require [quo.react-native :as rn]
[reagent.core :as reagent]
[quo2.foundations.colors :as colors]
[quo2.components.icon :as icon]
[quo2.components.counter.counter :as counter]))
(defn toggle-background-color [background-color press-out? pass-through?]
(let [color (cond
press-out? nil
pass-through? colors/white-opa-5
:else colors/neutral-70)]
(reset! background-color color)))
(defn bottom-nav-tab
"[bottom-nav-tab opts]
opts
{:icon :main-icons2/communities
:selected? true/false
:new-notifications? true/false
:notification-indicator :unread-dot/:counter
:counter-label number
:on-press bottom-tab on-press function
:pass-through? true/false
"
[_]
(let [background-color (reagent/atom nil)]
(fn [{:keys [icon selected? new-notifications? notification-indicator counter-label on-press pass-through?]}]
[rn/touchable-without-feedback
{: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?)}
[rn/view {:style {:width 90
:height 40
:background-color @background-color
:border-radius 10}}
[rn/hole-view {:style {:padding-left 33
:padding-top 8}
: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}]
:else
[{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
[icon/icon
icon
{:size 24
:color (cond
selected? colors/white
pass-through? colors/white-opa-40
:else colors/neutral-50)}]]
(when new-notifications?
(if (= notification-indicator :counter)
[counter/counter {:outline false
: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}}]))]])))

6
src/quo2/components/switcher/styles.cljs
View File

@ -48,13 +48,13 @@
:weight :medium
:style (subtitle)})
(defn content-container [notification?]
(defn content-container [new-notifications?]
{:position :absolute
:max-width (if notification? 108 136)
:max-width (if new-notifications? 108 136)
:flex-shrink 1
:bottom 12
:margin-left 12
:margin-right (if notification? 8 12)})
:margin-right (if new-notifications? 8 12)})
(defn notification-container []
{:position :absolute

12
src/quo2/components/switcher/switcher_cards.cljs
View File

@ -15,8 +15,8 @@
;; Supporting Components
(defn content-container [{:keys [content-type data notification? color-50]}]
[rn/view {:style (styles/content-container notification?)}
(defn content-container [{:keys [content-type data new-notifications? color-50]}]
[rn/view {:style (styles/content-container new-notifications?)}
(case content-type
:text [text/text (styles/last-message-text-props) data]
:photo [preview-list/preview-list {:type :photo
@ -46,18 +46,18 @@
(:audio :community :link :code) ;; Components not available
[:<>])])
(defn notification-container [{:keys [notification-type counter-label color-60]}]
(defn notification-container [{:keys [notification-indicator counter-label color-60]}]
[rn/view {:style (styles/notification-container)}
(if (= notification-type :counter)
(if (= notification-indicator :counter)
[counter/counter {:outline false
:override-text-color colors/white
:override-bg-color color-60} counter-label]
[rn/view {:style (styles/unread-dot color-60)}])])
(defn bottom-container [{:keys [notification?] :as content}]
(defn bottom-container [{:keys [new-notifications?] :as content}]
[:<>
[content-container content]
(when notification?
(when new-notifications?
[notification-container content])])
(defn avatar [avatar-params type customization-color]

4
src/quo2/screens/main.cljs
View File

@ -28,6 +28,7 @@
[quo2.screens.notifications.activity-logs :as activity-logs]
[quo2.screens.reactions.react :as react]
[quo2.screens.switcher.switcher-cards :as switcher-cards]
[quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab]
[quo2.screens.tabs.account-selector :as account-selector]
[quo2.screens.tabs.segmented-tab :as segmented]
[quo2.screens.tabs.tabs :as tabs]
@ -94,6 +95,9 @@
:messages [{:name :gap
:insets {:top false}
:component messages-gap/preview-messages-gap}]
:navigation [{:name :bottom-nav-tab
:insets {:top false}
:component bottom-nav-tab/preview-bottom-nav-tab}]
:notifications [{:name :activity-logs
:insets {:top false}
:component activity-logs/preview-activity-logs}]

61
src/quo2/screens/navigation/bottom_nav_tab.cljs Normal file
View File

@ -0,0 +1,61 @@
(ns quo2.screens.navigation.bottom-nav-tab
(:require [quo.react-native :as rn]
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.navigation.bottom-nav-tab :as quo2]
[quo2.foundations.colors :as colors]))
(def descriptor [{:label "Type"
:key :icon
:type :select
:options [{:key :main-icons2/communities
:value "Communities"}
{:key :main-icons2/messages
:value "Messages"}
{:key :main-icons2/wallet
:value "Wallet"}
{:key :main-icons2/browser
:value "Browser"}]}
{:label "Selected?"
:key :selected?
:type :boolean}
{:label "Pass through?"
:key :pass-through?
:type :boolean}
{:label "New Notifications?"
:key :new-notifications?
:type :boolean}
{:label "Notification Indicator"
:key :notification-indicator
:type :select
:options [{:key :counter
:value :counter}
{:key :unread-dot
:value :unread-dot}]}
{:label "Counter Label"
:key :counter-label
:type :text}])
(defn cool-preview []
(let [state (reagent/atom {:icon :main-icons2/communities
:selected? true
:pass-through? true
:new-notifications? true
:notification-indicator :counter
:counter-label 8
:preview-label-color colors/white})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/bottom-nav-tab @state (:value @state)]]]])))
(defn preview-bottom-nav-tab []
[rn/view {:background-color colors/neutral-100
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])

29
src/quo2/screens/switcher/switcher_cards.cljs
View File

@ -6,7 +6,7 @@
[status-im.react-native.resources :as resources]
[quo2.components.switcher.switcher-cards :as switcher-cards]))
(def descriptor [{:label "Type:"
(def descriptor [{:label "Type"
:key :type
:type :select
:options [{:key :communities-discover
@ -28,19 +28,19 @@
{:label "Title"
:key :title
:type :text}
{:label "Notification?:"
:key :notification?
{:label "New Notifications?"
:key :new-notifications?
:type :boolean}
{:label "Banner?:"
{:label "Banner?"
:key :banner?
:type :boolean}
{:label "Notification Type"
:key :notification-type
{:label "Notification Indicator"
:key :notification-indicator
:type :select
:options [{:key :counter
:value :counter}
{:key :unread
:value :unread}]}
{:key :unread-dot
:value :unread-dot}]}
{:label "Counter Label"
:key :counter-label
:type :text}
@ -109,8 +109,8 @@
(merge
data
{:banner (when (:banner? data) banner)
:content {:notification? (:notification? data)
:notification-type (:notification-type data)
:content {:new-notifications? (:new-notifications? data)
:notification-indicator (:notification-indicator data)
:counter-label (:counter-label data)
:content-type (:content-type data)
:data (get-mock-content data)}}
@ -124,12 +124,13 @@
(let [state (reagent/atom {:type :group-messaging
:title "Alisher Yakupov"
:customization-color :turquoise
:notification? true
:new-notifications? true
:banner? false
:notification-type :counter
:notification-indicator :counter
:counter-label 2
:content-type :text
:last-message "This is fantastic! Ethereum"})]
:last-message "This is fantastic! Ethereum"
:preview-label-color colors/white})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
@ -139,7 +140,7 @@
[switcher-cards/card (:type @state) (get-mock-data @state)]]]])))
(defn preview-switcher-cards []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-100)
[rn/view {:background-color colors/neutral-100
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always