Implemention of quo2 bottom-nav-tab (#14077)
This commit is contained in:
Parvesh Monu
GitHub
parent
30e7ad585a
commit
20ac0eb2c7
Binary file not shown.
|
After Width: | Height: | Size: 888 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 939 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 815 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 735 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
:justify-content :center
|
||||
:border-radius 6
|
||||
:width width
|
||||
:height 16}
|
||||
[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))})
|
||||
|
|
|
|||
|
|
@ -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}}]))]])))
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
|
@ -184,4 +188,4 @@
|
|||
|
||||
(def main-screens [{:name :quo2-preview
|
||||
:insets {:top false}
|
||||
:component main-screen}])
|
||||
:component main-screen}])
|
||||
|
|
|
|||
|
|
@ -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}]])
|
||||
|
|
@ -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,11 +109,11 @@
|
|||
(merge
|
||||
data
|
||||
{:banner (when (:banner? data) banner)
|
||||
:content {:notification? (:notification? data)
|
||||
:notification-type (:notification-type data)
|
||||
:counter-label (:counter-label data)
|
||||
:content-type (:content-type data)
|
||||
:data (get-mock-content 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)}}
|
||||
(case (:type data)
|
||||
:messaging {:avatar-params {:full-name (:title data)}}
|
||||
:group-messaging {}
|
||||
|
|
@ -121,15 +121,16 @@
|
|||
{})))
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:type :group-messaging
|
||||
:title "Alisher Yakupov"
|
||||
:customization-color :turquoise
|
||||
:notification? true
|
||||
:banner? false
|
||||
:notification-type :counter
|
||||
:counter-label 2
|
||||
:content-type :text
|
||||
:last-message "This is fantastic! Ethereum"})]
|
||||
(let [state (reagent/atom {:type :group-messaging
|
||||
:title "Alisher Yakupov"
|
||||
:customization-color :turquoise
|
||||
:new-notifications? true
|
||||
:banner? false
|
||||
:notification-indicator :counter
|
||||
:counter-label 2
|
||||
:content-type :text
|
||||
: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
|
||||
|
|
|
|||
Loading…
Reference in New Issue