From 6fd5a97b59d77a07dce4a7e07688d64f34b3b167 Mon Sep 17 00:00:00 2001 From: Mohsen Ghafouri Date: Mon, 25 Sep 2023 13:19:50 +0300 Subject: [PATCH] [#17288] refactor: migrate previews to new api (#17366) --- .../list_items/token_value/view.cljs | 6 +- .../navigation/bottom_nav_tab/view.cljs | 2 +- src/quo2/core.cljs | 2 + .../quo_preview/browser/browser_input.cljs | 67 ++---- .../quo_preview/list_items/token_value.cljs | 49 ++-- .../quo_preview/list_items/user_list.cljs | 49 ++-- src/status_im2/contexts/quo_preview/main.cljs | 18 +- .../contexts/quo_preview/messages/gap.cljs | 2 +- .../quo_preview/messages/system_message.cljs | 2 +- .../navigation/bottom_nav_tab.cljs | 57 ++--- .../navigation/floating_shell_button.cljs | 39 ++-- .../quo_preview/navigation/page_nav.cljs | 211 ++++++------------ .../quo_preview/navigation/top_nav.cljs | 69 ++---- .../jump_to/components/bottom_tabs/view.cljs | 4 +- 14 files changed, 194 insertions(+), 383 deletions(-) diff --git a/src/quo2/components/list_items/token_value/view.cljs b/src/quo2/components/list_items/token_value/view.cljs index 64e3c0ecd4..84dd240d26 100644 --- a/src/quo2/components/list_items/token_value/view.cljs +++ b/src/quo2/components/list_items/token_value/view.cljs @@ -12,9 +12,9 @@ [reagent.core :as reagent])) (defn- internal-view - [{:keys [theme customization-color status token metrics? values on-press]}] + [] (let [state (reagent/atom :default)] - (fn [] + (fn [{:keys [theme customization-color status token metrics? values on-press]}] (let [bg-opacity (case @state :active 10 :pressed 5 @@ -42,7 +42,7 @@ [text/text {:size :paragraph-2 :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - (str crypto-value " " (string/upper-case (clj->js token)))]]] + (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]] [rn/view {:style {:align-items :flex-end :justify-content :space-between}} diff --git a/src/quo2/components/navigation/bottom_nav_tab/view.cljs b/src/quo2/components/navigation/bottom_nav_tab/view.cljs index a5129c802d..b9a6952371 100644 --- a/src/quo2/components/navigation/bottom_nav_tab/view.cljs +++ b/src/quo2/components/navigation/bottom_nav_tab/view.cljs @@ -86,6 +86,6 @@ counter-label] [rn/view {:style (styles/notification-dot customization-color)}]))]])) -(defn bottom-nav-tab +(defn view [opts] [:f> f-bottom-nav-tab opts]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index fe561af2a1..34dffaf719 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -77,6 +77,7 @@ quo2.components.messages.gap quo2.components.messages.system-message quo2.components.navigation.floating-shell-button.view + quo2.components.navigation.bottom-nav-tab.view quo2.components.navigation.page-nav.view quo2.components.navigation.top-nav.view quo2.components.notifications.activity-log.view @@ -262,6 +263,7 @@ (def skeleton-list quo2.components.loaders.skeleton-list.view/view) ;;;; Navigation +(def bottom-nav-tab quo2.components.navigation.bottom-nav-tab.view/view) (def floating-shell-button quo2.components.navigation.floating-shell-button.view/view) (def page-nav quo2.components.navigation.page-nav.view/page-nav) (def top-nav quo2.components.navigation.top-nav.view/view) diff --git a/src/status_im2/contexts/quo_preview/browser/browser_input.cljs b/src/status_im2/contexts/quo_preview/browser/browser_input.cljs index b760b5951d..5335afd881 100644 --- a/src/status_im2/contexts/quo_preview/browser/browser_input.cljs +++ b/src/status_im2/contexts/quo_preview/browser/browser_input.cljs @@ -1,55 +1,28 @@ (ns status-im2.contexts.quo-preview.browser.browser-input (:require [quo2.core :as quo] - [react-native.core :as rn] - [react-native.safe-area :as safe-area] [reagent.core :as reagent] - [utils.re-frame :as rf] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Show Favicon" - :key :favicon? - :type :boolean} - {:label "Locked" - :key :locked? - :type :boolean} - {:label "Disabled" - :key :disabled? - :type :boolean}]) + [{:key :favicon? :type :boolean} + {:key :locked? :type :boolean} + {:key :blur? :type :boolean} + {:key :placeholder :type :text} + {:key :disabled? :type :boolean} + (preview/customization-color-option)]) -(defn preview-browser-input +(defn view [] - (reagent/with-let [keyboard-shown? (reagent/atom false) - keyboard-show-listener (.addListener rn/keyboard - "keyboardWillShow" - #(reset! keyboard-shown? true)) - keyboard-hide-listener (.addListener rn/keyboard - "keyboardWillHide" - #(reset! keyboard-shown? false)) - {:keys [bottom]} (safe-area/get-insets) - state (reagent/atom {:blur? false - :disabled? false - :favicon? false - :placeholder "Search or enter dapp domain" - :locked? false})] - [preview/preview-container - {:state state - :descriptor descriptor} - [quo/page-nav - {:type :no-title - :icon-name :i/arrow-left - :on-press #(rf/dispatch [:navigate-back])}] - - [rn/flat-list - {:key-fn str - :keyboard-should-persist-taps :always - :style {:flex 1}}] - [rn/view - [quo/browser-input - (assoc @state - :customization-color :blue - :favicon (when (:favicon? @state) :i/verified))] - [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]] - (finally - (.remove keyboard-show-listener) - (.remove keyboard-hide-listener)))) + (let [state (reagent/atom {:blur? false + :disabled? false + :favicon? false + :placeholder "Search or enter dapp domain" + :locked? false})] + (fn [] + [preview/preview-container + {:state state + :descriptor descriptor} + [quo/browser-input + (assoc @state + :favicon + (when (:favicon? @state) :i/verified))]]))) diff --git a/src/status_im2/contexts/quo_preview/list_items/token_value.cljs b/src/status_im2/contexts/quo_preview/list_items/token_value.cljs index ee813d66bd..08317b9290 100644 --- a/src/status_im2/contexts/quo_preview/list_items/token_value.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/token_value.cljs @@ -1,42 +1,23 @@ (ns status-im2.contexts.quo-preview.list-items.token-value (:require [quo2.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Token:" - :key :token + [{:key :token :type :select - :options [{:key :eth - :value "ETH"} - {:key :snt - :value "SNT"}]} - {:label "State:" - :key :state + :options [{:key :eth} + {:key :snt}]} + {:key :status :type :select - :options [{:key :default - :value "Default"} - {:key :pressed - :value "Pressed"} - {:key :active - :value "Active"}]} - {:label "Status:" - :key :status - :type :select - :options [{:key :empty - :value "Empty"} - {:key :positive - :value "Positive"} - {:key :negative - :value "Negative"}]} + :options [{:key :empty} + {:key :positive} + {:key :negative}]} (preview/customization-color-option) - {:label "Metrics?:" - :key :metrics? - :type :boolean}]) + {:key :metrics? :type :boolean}]) -(defn preview +(defn view [] (let [state (reagent/atom {:token :snt :state :default @@ -49,11 +30,9 @@ :fiat-change "โ‚ฌ0.00"}})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - [rn/view - {:style {:align-items :center - :margin-top 50}} - [quo/token-value @state]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:align-items :center + :margin-top 50}} + [quo/token-value @state]]))) diff --git a/src/status_im2/contexts/quo_preview/list_items/user_list.cljs b/src/status_im2/contexts/quo_preview/list_items/user_list.cljs index 200d28fa4f..f6771969a9 100644 --- a/src/status_im2/contexts/quo_preview/list_items/user_list.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/user_list.cljs @@ -1,35 +1,19 @@ (ns status-im2.contexts.quo-preview.list-items.user-list - (:require [react-native.core :as rn] - [reagent.core :as reagent] + (:require [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview] - [quo2.components.list-items.user-list :as user-list] + [quo2.core :as quo] [utils.address :as address])) (def descriptor - [{:label "Primary name" - :key :primary-name + [{:key :primary-name :type :text :limit 24} - {:label "Secondary name" - :key :secondary-name - :type :text} - {:label "Chat key" - :key :chat-key - :type :text} - {:label "Is contact?" - :key :contact? - :type :boolean} - {:label "Is verified?" - :key :verified? - :type :boolean} - {:label "Is untrustworthy?" - :key :untrustworthy? - :type :boolean} - {:label "Online?" - :key :online? - :type :boolean} - {:label "Accessory:" - :key :accessory + {:key :secondary-name :type :text} + {:key :contact? :type :boolean} + {:key :verified? :type :boolean} + {:key :untrustworthy? :type :boolean} + {:key :online? :type :boolean} + {:key :accessory :type :select :options [{:key {:type :options} :value "Options"} @@ -38,7 +22,7 @@ {:key {:type :close} :value "Close"}]}]) -(defn preview-user-list +(defn view [] (let [state (reagent/atom {:primary-name "Alisher Yakupov" :short-chat-key (address/get-shortened-compressed-key @@ -50,11 +34,8 @@ :online? false})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :padding--horizontal 15 - :justify-content :center} - [user-list/user-list @state]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 30 + :padding-horizontal 15}} + [quo/user-list @state]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 0852e1d477..6f0d6f4a27 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -169,7 +169,7 @@ {:name :wallet-ctas :component wallet-ctas/view}] :browser [{:name :browser-input - :component browser-input/preview-browser-input}] + :component browser-input/view}] :calendar [{:name :calendar :component calendar/view} {:name :calendar-day @@ -275,10 +275,10 @@ {:name :preview-lists :component preview-lists/view} {:name :token-value - :component token-value/preview} + :component token-value/view} {:name :user-list :options {:topBar {:visible true}} - :component user-list/preview-user-list}] + :component user-list/view}] :loaders [{:name :skeleton-list :options {:topBar {:visible true}} :component skeleton-list/view}] @@ -287,19 +287,19 @@ {:name :markdown-list :component markdown-list/view}] :messages [{:name :gap - :component messages-gap/preview-messages-gap} + :component messages-gap/view} {:name :system-messages - :component system-message/preview-system-message} + :component system-message/view} {:name :author :component messages-author/view}] :navigation [{:name :bottom-nav-tab - :component bottom-nav-tab/preview-bottom-nav-tab} + :component bottom-nav-tab/view} {:name :top-nav - :component top-nav/preview} + :component top-nav/view} {:name :page-nav - :component page-nav/preview-page-nav} + :component page-nav/view} {:name :floating-shell-button - :component floating-shell-button/preview-floating-shell-button}] + :component floating-shell-button/view}] :notifications [{:name :activity-logs :component activity-logs/preview-activity-logs} {:name :activity-logs-photos diff --git a/src/status_im2/contexts/quo_preview/messages/gap.cljs b/src/status_im2/contexts/quo_preview/messages/gap.cljs index 2210fa9dd7..9b64c9780e 100644 --- a/src/status_im2/contexts/quo_preview/messages/gap.cljs +++ b/src/status_im2/contexts/quo_preview/messages/gap.cljs @@ -8,7 +8,7 @@ [{:key :timestamp-far :type :text} {:key :timestamp-near :type :text}]) -(defn preview-messages-gap +(defn view [] (let [state (reagent/atom {:timestamp-far "Jan 8 ยท 09:12" :timestamp-near "Mar 8 ยท 22:42" diff --git a/src/status_im2/contexts/quo_preview/messages/system_message.cljs b/src/status_im2/contexts/quo_preview/messages/system_message.cljs index cede99d568..fca47b1c2a 100644 --- a/src/status_im2/contexts/quo_preview/messages/system_message.cljs +++ b/src/status_im2/contexts/quo_preview/messages/system_message.cljs @@ -30,7 +30,7 @@ {:child (when (= (:type @state) :pinned) [rn/text (:content @state)]) :display-name (:pinned-by @state)})) -(defn preview-system-message +(defn view [] (let [state (reagent/atom {:type :pinned :pinned-by "Steve" diff --git a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs index 359481f432..feaf9efb38 100644 --- a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs @@ -1,15 +1,12 @@ (ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab - (:require [clojure.string :as string] - [quo2.components.navigation.bottom-nav-tab.view :as quo2] + (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] - [react-native.core :as rn] [react-native.reanimated :as reanimated] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type" - :key :icon + [{:key :icon :type :select :options [{:key :i/communities :value "Communities"} @@ -19,33 +16,15 @@ :value "Wallet"} {:key :i/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 + {:key :selected? :type :boolean} + {:key :pass-through? :type :boolean} + {:key :new-notifications? :type :boolean} + {:key :notification-indicator :type :select - :options [{:key :counter - :value :counter} - {:key :unread-dot - :value :unread-dot}]} - {:label "Counter Label" - :key :counter-label - :type :text} - - {:label "Customization color" - :key :customization-color - :type :select - :options (map (fn [[k _]] - {:key k - :value (string/capitalize (name k))}) - colors/customization)}]) + :options [{:key :counter} + {:key :unread-dot}]} + {:key :counter-label :type :text} + (preview/customization-color-option)]) (defn get-icon-color [selected? pass-through?] @@ -60,11 +39,11 @@ (reanimated/set-shared-value icon-color-anim (get-icon-color selected? pass-through?)) - [quo2/bottom-nav-tab + [quo/bottom-nav-tab (merge state {:icon-color-anim icon-color-anim}) (:value state)])) -(defn preview-bottom-nav-tab +(defn view [] (let [state (reagent/atom {:icon :i/communities :new-notifications? true @@ -76,10 +55,8 @@ pass-through? (reagent/cursor state [:pass-through?])] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :align-items :center} - [:f> f-bottom-tab @state @selected? @pass-through?]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60 + :align-items :center}} + [:f> f-bottom-tab @state @selected? @pass-through?]]))) diff --git a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs index 9c8a2ea378..cea718f0e6 100644 --- a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs @@ -1,29 +1,18 @@ (ns status-im2.contexts.quo-preview.navigation.floating-shell-button (:require [quo2.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [utils.i18n :as i18n] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Show jump to?" - :key :show-jump-to? - :type :boolean} - {:label "Show search?" - :key :show-search? - :type :boolean} - {:label "Show mention?" - :key :show-mention? - :type :boolean} - {:label "Scroll Type" - :key :scroll-type + [{:key :show-jump-to? :type :boolean} + {:key :show-search? :type :boolean} + {:key :show-mention? :type :boolean} + {:key :scroll-type :type :select - :options [{:key :notification-up - :value "Notification Up"} - {:key :notification-down - :value "Notification Down"} - {:key :scroll-to-bottom - :value "Scroll To Bottom"}]}]) + :options [{:key :notification-up} + {:key :notification-down} + {:key :scroll-to-bottom}]}]) (defn mock-data [{:keys [show-jump-to? show-search? show-mention? scroll-type]}] @@ -41,16 +30,14 @@ (= scroll-type :scroll-to-bottom) (assoc :scroll-to-bottom {:on-press #()}))) -(defn preview-floating-shell-button +(defn view [] (let [state (reagent/atom {:show-jump-to? true :scroll-type :notification-down})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :align-items :center} - [quo/floating-shell-button (mock-data @state) nil]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60 + :align-items :center}} + [quo/floating-shell-button (mock-data @state) nil]]))) diff --git a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs index a67930ab5b..ca59feacd0 100644 --- a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs @@ -2,43 +2,31 @@ (:require [clojure.string :as string] [quo2.core :as quo] [quo2.foundations.colors :as colors] - [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) (def ^:private descriptor - [{:label "Type" - :key :type + [{:key :type :type :select - :options [{:key :no-title - :value "No Title"} - {:key :title - :value "Title"} - {:key :dropdown - :value "Dropdown"} - {:key :token - :value "Token"} - {:key :channel - :value "Channel"} + :options [{:key :no-title} + {:key :title} + {:key :dropdown} + {:key :token} + {:key :channel} {:key :title-description :value "Title + Description"} - {:key :wallet-networks - :value "Wallet Networks"} - {:key :community - :value "Community"} - {:key :network - :value "Network"}]} - {:label "Background" - :key :background + {:key :wallet-networks} + {:key :community} + {:key :network}]} + {:key :background :type :select :options (map (fn [bg-type] {:key bg-type :value (string/capitalize (name bg-type))}) [:white :neutral-5 :neutral-90 :neutral-95 :neutral-100 :photo :blur])} - {:label "Icon" - :key :icon-name + {:key :icon-name :type :select :options [{:key :i/placeholder :value "Placeholder"} @@ -60,79 +48,55 @@ :value "3 actions"}])) (def account-switcher - {:key :account-switcher - :value "Account-switcher"}) + {:key :account-switcher}) (def no-title-descriptor - [{:label "Right Side" - :key :right-side + [{:key :right-side :type :select :options (conj right-side-options account-switcher)}]) (def title-descriptor - [{:label "Right Side" - :key :right-side + [{:key :right-side :type :select :options (conj right-side-options account-switcher)} - {:label "Title" - :key :title - :type :text} - {:label "Text Align" - :key :text-align + {:key :title :type :text} + {:key :text-align :type :select - :options [{:key :left - :value "Left"} - {:key :center - :value "Center"}]}]) + :options [{:key :left} + {:key :center}]}]) (def dropdown-descriptor - [{:label "Dropdown Selected?" - :key :dropdown-selected? - :type :boolean} - {:label "Dropdown Text" - :key :dropdown-text - :type :text}]) + [{:key :dropdown-selected? :type :boolean} + {:key :dropdown-text :type :text}]) (def token-descriptor - [{:label "Right Side" - :key :right-side + [{:key :right-side :type :select :options (conj right-side-options account-switcher)} - - {:label "Token Logo" - :key :token-logo + {:key :token-logo :type :select :options [{:key (resources/get-mock-image :status-logo) :value "Status logo"} {:key (resources/get-mock-image :rarible) :value "Rarible"}]} - - {:label "Token Name" - :key :token-name - :type :text} - {:label "Token Abbreviation" - :key :token-abbreviation - :type :text}]) + {:key :token-name + :type :text} + {:key :token-abbreviation + :type :text}]) (def channel-descriptor - [{:label "Right Side" - :key :right-side + [{:key :right-side :type :select :options right-side-options} - - {:label "Channel Emoji" - :key :channel-emoji + {:key :channel-emoji :type :select :options [{:key "๐Ÿ‡" :value "๐Ÿ‡"} {:key "๐Ÿ‘" :value "๐Ÿ‘"}]} - {:label "Channel Name" - :key :channel-name - :type :text} - {:label "Channel Icon" - :key :channel-icon + {:key :channel-name :type :text} + {:key :channel-icon :type :select :options [{:key :i/locked :value "Locked"} @@ -140,18 +104,12 @@ :value "Unlocked"}]}]) (def title-description-descriptor - [{:label "Right Side" - :key :right-side + [{:key :right-side :type :select :options (butlast right-side-options)} - {:label "title" - :key :title - :type :text} - {:label "description" - :key :description - :type :text} - {:label "Picture" - :key :picture + {:key :title :type :text} + {:key :description :type :text} + {:key :picture :type :select :options [{:key nil :value "No picture"} @@ -161,74 +119,49 @@ :value "Photo 2"}]}]) (def wallet-networks-descriptor - [{:label "Right Side" - :key :right-side + [{:key :right-side :type :select :options (conj (take 2 right-side-options) account-switcher)}]) (def community-descriptor - [{:label "Right Side" - :key :right-side + [{:key :right-side :type :select :options right-side-options} - {:label "Community Logo" - :key :community-logo + {:key :community-logo :type :select :options [{:key (resources/get-mock-image :diamond) :value "Diamond"} {:key (resources/get-mock-image :coinbase) :value "Coinbase"}]} - {:label "Community name" - :key :community-name - :type :text}]) + {:key :community-name :type :text}]) (def network-descriptor - [{:label "Right Side" - :key :right-side + [{:key :right-side :type :select :options right-side-options} - {:label "Network Logo" - :key :network-logo + {:key :network-logo :type :select :options [{:key (resources/get-mock-image :diamond) :value "Diamond"} {:key (resources/get-mock-image :coinbase) :value "Coinbase"}]} - {:label "Network name" - :key :network-name - :type :text}]) + {:key :network-name + :type :text}]) (defn- photo-bg [background] - (when (#{:photo :blur} background) + (when (#{:photo} background) [rn/image {:style {:position :absolute :top 0 :bottom 0 - :left 0 + :left 20 :right 0 :width "100%" :height 200} :source (resources/get-mock-image :photo2)}])) -(defn- blur-bg - [background] - (when (= :blur background) - [rn/view - {:style {:position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0 - :width "100%" - :height 200}} - [blur/view - {:style {:width "100%" - :height 20} - :blur-type :light - :blur-amount 20}]])) - -(defn preview-page-nav +(defn view [{:keys [theme]}] (let [state (reagent/atom {:type :title-description @@ -257,30 +190,30 @@ :network-logo (resources/get-mock-image :diamond)})] (fn [] [preview/preview-container - {:state state - :descriptor (concat descriptor - (case (:type @state) - :no-title no-title-descriptor - :title title-descriptor - :dropdown dropdown-descriptor - :token token-descriptor - :channel channel-descriptor - :title-description title-description-descriptor - :wallet-networks wallet-networks-descriptor - :community community-descriptor - :network network-descriptor - nil))} - [rn/view - {:style {:background-color (case (:background @state) - :white colors/white - :neutral-5 colors/neutral-5 - :neutral-90 colors/neutral-90 - :neutral-95 colors/neutral-95 - :neutral-100 colors/neutral-100 - nil) - :padding-vertical 40 - :height 200 - :width "100%"}} - [photo-bg (:background @state)] - [blur-bg (:background @state)] - [quo/page-nav @state]]]))) + {:state state + :descriptor (concat descriptor + (case (:type @state) + :no-title no-title-descriptor + :title title-descriptor + :dropdown dropdown-descriptor + :token token-descriptor + :channel channel-descriptor + :title-description title-description-descriptor + :wallet-networks wallet-networks-descriptor + :community community-descriptor + :network network-descriptor + nil)) + :blur? (= :blur (:background @state)) + :show-blur-background? (= :blur (:background @state)) + :component-container-style {:background-color (case (:background @state) + :white colors/white + :neutral-5 colors/neutral-5 + :neutral-90 colors/neutral-90 + :neutral-95 colors/neutral-95 + :neutral-100 colors/neutral-100 + nil) + :margin-vertical 40 + :width "100%"}} + + [photo-bg (:background @state)] + [quo/page-nav @state]]))) diff --git a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs index 7087e52e93..e16fe943e4 100644 --- a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs @@ -1,11 +1,8 @@ (ns status-im2.contexts.quo-preview.navigation.top-nav (:require [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [quo2.core :as quo] - [status-im2.contexts.quo-preview.preview :as preview] - [status-im2.common.resources :as resources] - [quo2.theme :as quo.theme])) + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor [{:key :notification @@ -21,9 +18,9 @@ :type :number} (preview/customization-color-option)]) -(defn preview +(defn view [] - (let [state (reagent/atom {:noticication-count 0 + (let [state (reagent/atom {:notification-count 0 :customization-color :blue})] (fn [] (let [blur? (:blur? @state) @@ -32,43 +29,25 @@ notification (:notification @state) notification-count (:notification-count @state)] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :padding-horizontal 20 - :flex-direction :row - :align-items :center} - (when blur? - [rn/image - {:source (resources/get-mock-image (quo.theme/theme-value :light-blur-background - :dark-blur-background)) - :style {:position :absolute - :top 0 - :left 0 - :right 0 - :bottom 0}}]) - (when jump-to? - [rn/image - {:background-color colors/neutral-100 - :style {:position :absolute - :top 0 - :left 0 - :right 0 - :bottom 0}}]) - [quo/top-nav - {:container-style {:flex 1 :z-index 2} - :max-unread-notifications 99 - :blur? blur? - :notification notification - :customization-color customization-color - :notification-count notification-count - :jump-to? jump-to? - :avatar-props {:online? true - :full-name "Test User"} - :avatar-on-press #(js/alert "avatar pressed") - :scan-on-press #(js/alert "scan pressed") - :activity-center-on-press #(js/alert "activity-center pressed") - :qr-code-on-press #(js/alert "qr pressed")}]]]])))) + {:state state + :descriptor descriptor + :blur? (and blur? (not jump-to?)) + :show-blur-background? (and blur? (not jump-to?)) + :component-container-style {:padding-vertical 60 + :padding-horizontal 20 + :background-color (when jump-to? colors/neutral-100)}} + [quo/top-nav + {:container-style {:flex 1 :z-index 2} + :max-unread-notifications 99 + :blur? blur? + :notification notification + :customization-color customization-color + :notification-count notification-count + :jump-to? jump-to? + :avatar-props {:online? true + :full-name "Test User"} + :avatar-on-press #(js/alert "avatar pressed") + :scan-on-press #(js/alert "scan pressed") + :activity-center-on-press #(js/alert "activity-center pressed") + :qr-code-on-press #(js/alert "qr pressed")}]])))) diff --git a/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs b/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs index 292092a00e..440d1552de 100644 --- a/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs @@ -4,11 +4,11 @@ [react-native.gesture :as gesture] [react-native.platform :as platform] [react-native.reanimated :as reanimated] + [quo2.core :as quo] [status-im2.contexts.shell.jump-to.utils :as utils] [status-im2.contexts.shell.jump-to.state :as state] [status-im2.contexts.shell.jump-to.animation :as animation] [status-im2.contexts.shell.jump-to.constants :as shell.constants] - [quo2.components.navigation.bottom-nav-tab.view :as bottom-nav-tab] [status-im2.contexts.shell.jump-to.components.bottom-tabs.style :as style])) (defn blur-overlay-params @@ -25,7 +25,7 @@ icon-color (->> stack-id (get shell.constants/tabs-icon-color-keywords) (get shared-values))] - [bottom-nav-tab/bottom-nav-tab + [quo/bottom-nav-tab (-> notifications-data (get stack-id) (assoc :test-ID stack-id