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

[#17288] refactor: migrate previews to new api (#17366)

This commit is contained in:
Mohsen Ghafouri 2023-09-25 13:19:50 +03:00 committed by GitHub
parent 848cac31ba
commit 6fd5a97b59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 194 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo2/components/list_items/token_value/view.cljs
View File

@ -12,9 +12,9 @@
[reagent.core :as reagent])) [reagent.core :as reagent]))
(defn- internal-view (defn- internal-view
[{:keys [theme customization-color status token metrics? values on-press]}] []
(let [state (reagent/atom :default)] (let [state (reagent/atom :default)]
(fn [] (fn [{:keys [theme customization-color status token metrics? values on-press]}]
(let [bg-opacity (case @state (let [bg-opacity (case @state
:active 10 :active 10
:pressed 5 :pressed 5
@ -42,7 +42,7 @@
[text/text [text/text
{:size :paragraph-2 {:size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} :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 [rn/view
{:style {:align-items :flex-end {:style {:align-items :flex-end
:justify-content :space-between}} :justify-content :space-between}}

2
src/quo2/components/navigation/bottom_nav_tab/view.cljs
View File

@ -86,6 +86,6 @@
counter-label] counter-label]
[rn/view {:style (styles/notification-dot customization-color)}]))]])) [rn/view {:style (styles/notification-dot customization-color)}]))]]))
(defn bottom-nav-tab (defn view
[opts] [opts]
[:f> f-bottom-nav-tab opts]) [:f> f-bottom-nav-tab opts])

2
src/quo2/core.cljs
View File

@ -77,6 +77,7 @@
quo2.components.messages.gap quo2.components.messages.gap
quo2.components.messages.system-message quo2.components.messages.system-message
quo2.components.navigation.floating-shell-button.view quo2.components.navigation.floating-shell-button.view
quo2.components.navigation.bottom-nav-tab.view
quo2.components.navigation.page-nav.view quo2.components.navigation.page-nav.view
quo2.components.navigation.top-nav.view quo2.components.navigation.top-nav.view
quo2.components.notifications.activity-log.view quo2.components.notifications.activity-log.view
@ -262,6 +263,7 @@
(def skeleton-list quo2.components.loaders.skeleton-list.view/view) (def skeleton-list quo2.components.loaders.skeleton-list.view/view)
;;;; Navigation ;;;; 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 floating-shell-button quo2.components.navigation.floating-shell-button.view/view)
(def page-nav quo2.components.navigation.page-nav.view/page-nav) (def page-nav quo2.components.navigation.page-nav.view/page-nav)
(def top-nav quo2.components.navigation.top-nav.view/view) (def top-nav quo2.components.navigation.top-nav.view/view)

67
src/status_im2/contexts/quo_preview/browser/browser_input.cljs
View File

@ -1,55 +1,28 @@
(ns status-im2.contexts.quo-preview.browser.browser-input (ns status-im2.contexts.quo-preview.browser.browser-input
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent] [reagent.core :as reagent]
[utils.re-frame :as rf]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Show Favicon" [{:key :favicon? :type :boolean}
:key :favicon? {:key :locked? :type :boolean}
:type :boolean} {:key :blur? :type :boolean}
{:label "Locked" {:key :placeholder :type :text}
:key :locked? {:key :disabled? :type :boolean}
:type :boolean} (preview/customization-color-option)])
{:label "Disabled"
:key :disabled?
:type :boolean}])
(defn preview-browser-input (defn view
[] []
(reagent/with-let [keyboard-shown? (reagent/atom false) (let [state (reagent/atom {:blur? false
keyboard-show-listener (.addListener rn/keyboard :disabled? false
"keyboardWillShow" :favicon? false
#(reset! keyboard-shown? true)) :placeholder "Search or enter dapp domain"
keyboard-hide-listener (.addListener rn/keyboard :locked? false})]
"keyboardWillHide" (fn []
#(reset! keyboard-shown? false)) [preview/preview-container
{:keys [bottom]} (safe-area/get-insets) {:state state
state (reagent/atom {:blur? false :descriptor descriptor}
:disabled? false [quo/browser-input
:favicon? false (assoc @state
:placeholder "Search or enter dapp domain" :favicon
:locked? false})] (when (:favicon? @state) :i/verified))]])))
[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))))

49
src/status_im2/contexts/quo_preview/list_items/token_value.cljs
View File

@ -1,42 +1,23 @@
(ns status-im2.contexts.quo-preview.list-items.token-value (ns status-im2.contexts.quo-preview.list-items.token-value
(:require (:require
[quo2.core :as quo] [quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Token:" [{:key :token
:key :token
:type :select :type :select
:options [{:key :eth :options [{:key :eth}
:value "ETH"} {:key :snt}]}
{:key :snt {:key :status
:value "SNT"}]}
{:label "State:"
:key :state
:type :select :type :select
:options [{:key :default :options [{:key :empty}
:value "Default"} {:key :positive}
{:key :pressed {:key :negative}]}
: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"}]}
(preview/customization-color-option) (preview/customization-color-option)
{:label "Metrics?:" {:key :metrics? :type :boolean}])
:key :metrics?
:type :boolean}])
(defn preview (defn view
[] []
(let [state (reagent/atom {:token :snt (let [state (reagent/atom {:token :snt
:state :default :state :default
@ -49,11 +30,9 @@
:fiat-change "€0.00"}})] :fiat-change "€0.00"}})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view :component-container-style {:align-items :center
[rn/view :margin-top 50}}
{:style {:align-items :center [quo/token-value @state]])))
:margin-top 50}}
[quo/token-value @state]]]])))

49
src/status_im2/contexts/quo_preview/list_items/user_list.cljs
View File

@ -1,35 +1,19 @@
(ns status-im2.contexts.quo-preview.list-items.user-list (ns status-im2.contexts.quo-preview.list-items.user-list
(:require [react-native.core :as rn] (:require [reagent.core :as reagent]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [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])) [utils.address :as address]))
(def descriptor (def descriptor
[{:label "Primary name" [{:key :primary-name
:key :primary-name
:type :text :type :text
:limit 24} :limit 24}
{:label "Secondary name" {:key :secondary-name :type :text}
:key :secondary-name {:key :contact? :type :boolean}
:type :text} {:key :verified? :type :boolean}
{:label "Chat key" {:key :untrustworthy? :type :boolean}
:key :chat-key {:key :online? :type :boolean}
:type :text} {:key :accessory
{: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
:type :select :type :select
:options [{:key {:type :options} :options [{:key {:type :options}
:value "Options"} :value "Options"}
@ -38,7 +22,7 @@
{:key {:type :close} {:key {:type :close}
:value "Close"}]}]) :value "Close"}]}])
(defn preview-user-list (defn view
[] []
(let [state (reagent/atom {:primary-name "Alisher Yakupov" (let [state (reagent/atom {:primary-name "Alisher Yakupov"
:short-chat-key (address/get-shortened-compressed-key :short-chat-key (address/get-shortened-compressed-key
@ -50,11 +34,8 @@
:online? false})] :online? false})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view {:padding-bottom 150} :component-container-style {:padding-vertical 30
[rn/view :padding-horizontal 15}}
{:padding-vertical 60 [quo/user-list @state]])))
:padding--horizontal 15
:justify-content :center}
[user-list/user-list @state]]]])))

18
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -169,7 +169,7 @@
{:name :wallet-ctas {:name :wallet-ctas
:component wallet-ctas/view}] :component wallet-ctas/view}]
:browser [{:name :browser-input :browser [{:name :browser-input
:component browser-input/preview-browser-input}] :component browser-input/view}]
:calendar [{:name :calendar :calendar [{:name :calendar
:component calendar/view} :component calendar/view}
{:name :calendar-day {:name :calendar-day
@ -275,10 +275,10 @@
{:name :preview-lists {:name :preview-lists
:component preview-lists/view} :component preview-lists/view}
{:name :token-value {:name :token-value
:component token-value/preview} :component token-value/view}
{:name :user-list {:name :user-list
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component user-list/preview-user-list}] :component user-list/view}]
:loaders [{:name :skeleton-list :loaders [{:name :skeleton-list
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component skeleton-list/view}] :component skeleton-list/view}]
@ -287,19 +287,19 @@
{:name :markdown-list {:name :markdown-list
:component markdown-list/view}] :component markdown-list/view}]
:messages [{:name :gap :messages [{:name :gap
:component messages-gap/preview-messages-gap} :component messages-gap/view}
{:name :system-messages {:name :system-messages
:component system-message/preview-system-message} :component system-message/view}
{:name :author {:name :author
:component messages-author/view}] :component messages-author/view}]
:navigation [{:name :bottom-nav-tab :navigation [{:name :bottom-nav-tab
:component bottom-nav-tab/preview-bottom-nav-tab} :component bottom-nav-tab/view}
{:name :top-nav {:name :top-nav
:component top-nav/preview} :component top-nav/view}
{:name :page-nav {:name :page-nav
:component page-nav/preview-page-nav} :component page-nav/view}
{:name :floating-shell-button {:name :floating-shell-button
:component floating-shell-button/preview-floating-shell-button}] :component floating-shell-button/view}]
:notifications [{:name :activity-logs :notifications [{:name :activity-logs
:component activity-logs/preview-activity-logs} :component activity-logs/preview-activity-logs}
{:name :activity-logs-photos {:name :activity-logs-photos

2
src/status_im2/contexts/quo_preview/messages/gap.cljs
View File

@ -8,7 +8,7 @@
[{:key :timestamp-far :type :text} [{:key :timestamp-far :type :text}
{:key :timestamp-near :type :text}]) {:key :timestamp-near :type :text}])
(defn preview-messages-gap (defn view
[] []
(let [state (reagent/atom {:timestamp-far "Jan 8 · 09:12" (let [state (reagent/atom {:timestamp-far "Jan 8 · 09:12"
:timestamp-near "Mar 8 · 22:42" :timestamp-near "Mar 8 · 22:42"

2
src/status_im2/contexts/quo_preview/messages/system_message.cljs
View File

@ -30,7 +30,7 @@
{:child (when (= (:type @state) :pinned) [rn/text (:content @state)]) {:child (when (= (:type @state) :pinned) [rn/text (:content @state)])
:display-name (:pinned-by @state)})) :display-name (:pinned-by @state)}))
(defn preview-system-message (defn view
[] []
(let [state (reagent/atom {:type :pinned (let [state (reagent/atom {:type :pinned
:pinned-by "Steve" :pinned-by "Steve"

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

@ -1,15 +1,12 @@
(ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab (ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab
(:require [clojure.string :as string] (:require [quo2.core :as quo]
[quo2.components.navigation.bottom-nav-tab.view :as quo2]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type" [{:key :icon
:key :icon
:type :select :type :select
:options [{:key :i/communities :options [{:key :i/communities
:value "Communities"} :value "Communities"}
@ -19,33 +16,15 @@
:value "Wallet"} :value "Wallet"}
{:key :i/browser {:key :i/browser
:value "Browser"}]} :value "Browser"}]}
{:label "Selected?" {:key :selected? :type :boolean}
:key :selected? {:key :pass-through? :type :boolean}
:type :boolean} {:key :new-notifications? :type :boolean}
{:label "Pass through?" {:key :notification-indicator
:key :pass-through?
:type :boolean}
{:label "New Notifications?"
:key :new-notifications?
:type :boolean}
{:label "Notification Indicator"
:key :notification-indicator
:type :select :type :select
:options [{:key :counter :options [{:key :counter}
:value :counter} {:key :unread-dot}]}
{:key :unread-dot {:key :counter-label :type :text}
:value :unread-dot}]} (preview/customization-color-option)])
{: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)}])
(defn get-icon-color (defn get-icon-color
[selected? pass-through?] [selected? pass-through?]
@ -60,11 +39,11 @@
(reanimated/set-shared-value (reanimated/set-shared-value
icon-color-anim icon-color-anim
(get-icon-color selected? pass-through?)) (get-icon-color selected? pass-through?))
[quo2/bottom-nav-tab [quo/bottom-nav-tab
(merge state {:icon-color-anim icon-color-anim}) (merge state {:icon-color-anim icon-color-anim})
(:value state)])) (:value state)]))
(defn preview-bottom-nav-tab (defn view
[] []
(let [state (reagent/atom {:icon :i/communities (let [state (reagent/atom {:icon :i/communities
:new-notifications? true :new-notifications? true
@ -76,10 +55,8 @@
pass-through? (reagent/cursor state [:pass-through?])] pass-through? (reagent/cursor state [:pass-through?])]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view {:padding-bottom 150} :component-container-style {:padding-vertical 60
[rn/view :align-items :center}}
{:padding-vertical 60 [:f> f-bottom-tab @state @selected? @pass-through?]])))
:align-items :center}
[:f> f-bottom-tab @state @selected? @pass-through?]]]])))

39
src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs
View File

@ -1,29 +1,18 @@
(ns status-im2.contexts.quo-preview.navigation.floating-shell-button (ns status-im2.contexts.quo-preview.navigation.floating-shell-button
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Show jump to?" [{:key :show-jump-to? :type :boolean}
:key :show-jump-to? {:key :show-search? :type :boolean}
:type :boolean} {:key :show-mention? :type :boolean}
{:label "Show search?" {:key :scroll-type
:key :show-search?
:type :boolean}
{:label "Show mention?"
:key :show-mention?
:type :boolean}
{:label "Scroll Type"
:key :scroll-type
:type :select :type :select
:options [{:key :notification-up :options [{:key :notification-up}
:value "Notification Up"} {:key :notification-down}
{:key :notification-down {:key :scroll-to-bottom}]}])
:value "Notification Down"}
{:key :scroll-to-bottom
:value "Scroll To Bottom"}]}])
(defn mock-data (defn mock-data
[{:keys [show-jump-to? show-search? show-mention? scroll-type]}] [{:keys [show-jump-to? show-search? show-mention? scroll-type]}]
@ -41,16 +30,14 @@
(= scroll-type :scroll-to-bottom) (= scroll-type :scroll-to-bottom)
(assoc :scroll-to-bottom {:on-press #()}))) (assoc :scroll-to-bottom {:on-press #()})))
(defn preview-floating-shell-button (defn view
[] []
(let [state (reagent/atom {:show-jump-to? true (let [state (reagent/atom {:show-jump-to? true
:scroll-type :notification-down})] :scroll-type :notification-down})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view {:padding-bottom 150} :component-container-style {:padding-vertical 60
[rn/view :align-items :center}}
{:padding-vertical 60 [quo/floating-shell-button (mock-data @state) nil]])))
:align-items :center}
[quo/floating-shell-button (mock-data @state) nil]]]])))

211
src/status_im2/contexts/quo_preview/navigation/page_nav.cljs
View File

@ -2,43 +2,31 @@
(:require [clojure.string :as string] (:require [clojure.string :as string]
[quo2.core :as quo] [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.blur :as blur]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def ^:private descriptor (def ^:private descriptor
[{:label "Type" [{:key :type
:key :type
:type :select :type :select
:options [{:key :no-title :options [{:key :no-title}
:value "No Title"} {:key :title}
{:key :title {:key :dropdown}
:value "Title"} {:key :token}
{:key :dropdown {:key :channel}
:value "Dropdown"}
{:key :token
:value "Token"}
{:key :channel
:value "Channel"}
{:key :title-description {:key :title-description
:value "Title + Description"} :value "Title + Description"}
{:key :wallet-networks {:key :wallet-networks}
:value "Wallet Networks"} {:key :community}
{:key :community {:key :network}]}
:value "Community"} {:key :background
{:key :network
:value "Network"}]}
{:label "Background"
:key :background
:type :select :type :select
:options (map (fn [bg-type] :options (map (fn [bg-type]
{:key bg-type {:key bg-type
:value (string/capitalize (name bg-type))}) :value (string/capitalize (name bg-type))})
[:white :neutral-5 :neutral-90 :neutral-95 :neutral-100 :photo :blur])} [:white :neutral-5 :neutral-90 :neutral-95 :neutral-100 :photo :blur])}
{:label "Icon" {:key :icon-name
:key :icon-name
:type :select :type :select
:options [{:key :i/placeholder :options [{:key :i/placeholder
:value "Placeholder"} :value "Placeholder"}
@ -60,79 +48,55 @@
:value "3 actions"}])) :value "3 actions"}]))
(def account-switcher (def account-switcher
{:key :account-switcher {:key :account-switcher})
:value "Account-switcher"})
(def no-title-descriptor (def no-title-descriptor
[{:label "Right Side" [{:key :right-side
:key :right-side
:type :select :type :select
:options (conj right-side-options account-switcher)}]) :options (conj right-side-options account-switcher)}])
(def title-descriptor (def title-descriptor
[{:label "Right Side" [{:key :right-side
:key :right-side
:type :select :type :select
:options (conj right-side-options account-switcher)} :options (conj right-side-options account-switcher)}
{:label "Title" {:key :title :type :text}
:key :title {:key :text-align
:type :text}
{:label "Text Align"
:key :text-align
:type :select :type :select
:options [{:key :left :options [{:key :left}
:value "Left"} {:key :center}]}])
{:key :center
:value "Center"}]}])
(def dropdown-descriptor (def dropdown-descriptor
[{:label "Dropdown Selected?" [{:key :dropdown-selected? :type :boolean}
:key :dropdown-selected? {:key :dropdown-text :type :text}])
:type :boolean}
{:label "Dropdown Text"
:key :dropdown-text
:type :text}])
(def token-descriptor (def token-descriptor
[{:label "Right Side" [{:key :right-side
:key :right-side
:type :select :type :select
:options (conj right-side-options account-switcher)} :options (conj right-side-options account-switcher)}
{:key :token-logo
{:label "Token Logo"
:key :token-logo
:type :select :type :select
:options [{:key (resources/get-mock-image :status-logo) :options [{:key (resources/get-mock-image :status-logo)
:value "Status logo"} :value "Status logo"}
{:key (resources/get-mock-image :rarible) {:key (resources/get-mock-image :rarible)
:value "Rarible"}]} :value "Rarible"}]}
{:key :token-name
{:label "Token Name" :type :text}
:key :token-name {:key :token-abbreviation
:type :text} :type :text}])
{:label "Token Abbreviation"
:key :token-abbreviation
:type :text}])
(def channel-descriptor (def channel-descriptor
[{:label "Right Side" [{:key :right-side
:key :right-side
:type :select :type :select
:options right-side-options} :options right-side-options}
{:key :channel-emoji
{:label "Channel Emoji"
:key :channel-emoji
:type :select :type :select
:options [{:key "🍇" :options [{:key "🍇"
:value "🍇"} :value "🍇"}
{:key "🍑" {:key "🍑"
:value "🍑"}]} :value "🍑"}]}
{:label "Channel Name" {:key :channel-name :type :text}
:key :channel-name {:key :channel-icon
:type :text}
{:label "Channel Icon"
:key :channel-icon
:type :select :type :select
:options [{:key :i/locked :options [{:key :i/locked
:value "Locked"} :value "Locked"}
@ -140,18 +104,12 @@
:value "Unlocked"}]}]) :value "Unlocked"}]}])
(def title-description-descriptor (def title-description-descriptor
[{:label "Right Side" [{:key :right-side
:key :right-side
:type :select :type :select
:options (butlast right-side-options)} :options (butlast right-side-options)}
{:label "title" {:key :title :type :text}
:key :title {:key :description :type :text}
:type :text} {:key :picture
{:label "description"
:key :description
:type :text}
{:label "Picture"
:key :picture
:type :select :type :select
:options [{:key nil :options [{:key nil
:value "No picture"} :value "No picture"}
@ -161,74 +119,49 @@
:value "Photo 2"}]}]) :value "Photo 2"}]}])
(def wallet-networks-descriptor (def wallet-networks-descriptor
[{:label "Right Side" [{:key :right-side
:key :right-side
:type :select :type :select
:options (conj (take 2 right-side-options) account-switcher)}]) :options (conj (take 2 right-side-options) account-switcher)}])
(def community-descriptor (def community-descriptor
[{:label "Right Side" [{:key :right-side
:key :right-side
:type :select :type :select
:options right-side-options} :options right-side-options}
{:label "Community Logo" {:key :community-logo
:key :community-logo
:type :select :type :select
:options [{:key (resources/get-mock-image :diamond) :options [{:key (resources/get-mock-image :diamond)
:value "Diamond"} :value "Diamond"}
{:key (resources/get-mock-image :coinbase) {:key (resources/get-mock-image :coinbase)
:value "Coinbase"}]} :value "Coinbase"}]}
{:label "Community name" {:key :community-name :type :text}])
:key :community-name
:type :text}])
(def network-descriptor (def network-descriptor
[{:label "Right Side" [{:key :right-side
:key :right-side
:type :select :type :select
:options right-side-options} :options right-side-options}
{:label "Network Logo" {:key :network-logo
:key :network-logo
:type :select :type :select
:options [{:key (resources/get-mock-image :diamond) :options [{:key (resources/get-mock-image :diamond)
:value "Diamond"} :value "Diamond"}
{:key (resources/get-mock-image :coinbase) {:key (resources/get-mock-image :coinbase)
:value "Coinbase"}]} :value "Coinbase"}]}
{:label "Network name" {:key :network-name
:key :network-name :type :text}])
:type :text}])
(defn- photo-bg (defn- photo-bg
[background] [background]
(when (#{:photo :blur} background) (when (#{:photo} background)
[rn/image [rn/image
{:style {:position :absolute {:style {:position :absolute
:top 0 :top 0
:bottom 0 :bottom 0
:left 0 :left 20
:right 0 :right 0
:width "100%" :width "100%"
:height 200} :height 200}
:source (resources/get-mock-image :photo2)}])) :source (resources/get-mock-image :photo2)}]))
(defn- blur-bg (defn view
[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
[{:keys [theme]}] [{:keys [theme]}]
(let [state (reagent/atom (let [state (reagent/atom
{:type :title-description {:type :title-description
@ -257,30 +190,30 @@
:network-logo (resources/get-mock-image :diamond)})] :network-logo (resources/get-mock-image :diamond)})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor (concat descriptor :descriptor (concat descriptor
(case (:type @state) (case (:type @state)
:no-title no-title-descriptor :no-title no-title-descriptor
:title title-descriptor :title title-descriptor
:dropdown dropdown-descriptor :dropdown dropdown-descriptor
:token token-descriptor :token token-descriptor
:channel channel-descriptor :channel channel-descriptor
:title-description title-description-descriptor :title-description title-description-descriptor
:wallet-networks wallet-networks-descriptor :wallet-networks wallet-networks-descriptor
:community community-descriptor :community community-descriptor
:network network-descriptor :network network-descriptor
nil))} nil))
[rn/view :blur? (= :blur (:background @state))
{:style {:background-color (case (:background @state) :show-blur-background? (= :blur (:background @state))
:white colors/white :component-container-style {:background-color (case (:background @state)
:neutral-5 colors/neutral-5 :white colors/white
:neutral-90 colors/neutral-90 :neutral-5 colors/neutral-5
:neutral-95 colors/neutral-95 :neutral-90 colors/neutral-90
:neutral-100 colors/neutral-100 :neutral-95 colors/neutral-95
nil) :neutral-100 colors/neutral-100
:padding-vertical 40 nil)
:height 200 :margin-vertical 40
:width "100%"}} :width "100%"}}
[photo-bg (:background @state)]
[blur-bg (:background @state)] [photo-bg (:background @state)]
[quo/page-nav @state]]]))) [quo/page-nav @state]])))

69
src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
View File

@ -1,11 +1,8 @@
(ns status-im2.contexts.quo-preview.navigation.top-nav (ns status-im2.contexts.quo-preview.navigation.top-nav
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.core :as quo] [quo2.core :as quo]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.quo-preview.preview :as preview]))
[status-im2.common.resources :as resources]
[quo2.theme :as quo.theme]))
(def descriptor (def descriptor
[{:key :notification [{:key :notification
@ -21,9 +18,9 @@
:type :number} :type :number}
(preview/customization-color-option)]) (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})] :customization-color :blue})]
(fn [] (fn []
(let [blur? (:blur? @state) (let [blur? (:blur? @state)
@ -32,43 +29,25 @@
notification (:notification @state) notification (:notification @state)
notification-count (:notification-count @state)] notification-count (:notification-count @state)]
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view {:padding-bottom 150} :blur? (and blur? (not jump-to?))
[rn/view :show-blur-background? (and blur? (not jump-to?))
{:padding-vertical 60 :component-container-style {:padding-vertical 60
:padding-horizontal 20 :padding-horizontal 20
:flex-direction :row :background-color (when jump-to? colors/neutral-100)}}
:align-items :center} [quo/top-nav
(when blur? {:container-style {:flex 1 :z-index 2}
[rn/image :max-unread-notifications 99
{:source (resources/get-mock-image (quo.theme/theme-value :light-blur-background :blur? blur?
:dark-blur-background)) :notification notification
:style {:position :absolute :customization-color customization-color
:top 0 :notification-count notification-count
:left 0 :jump-to? jump-to?
:right 0 :avatar-props {:online? true
:bottom 0}}]) :full-name "Test User"}
(when jump-to? :avatar-on-press #(js/alert "avatar pressed")
[rn/image :scan-on-press #(js/alert "scan pressed")
{:background-color colors/neutral-100 :activity-center-on-press #(js/alert "activity-center pressed")
:style {:position :absolute :qr-code-on-press #(js/alert "qr pressed")}]]))))
: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")}]]]]))))

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

@ -4,11 +4,11 @@
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
[react-native.platform :as platform] [react-native.platform :as platform]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[quo2.core :as quo]
[status-im2.contexts.shell.jump-to.utils :as utils] [status-im2.contexts.shell.jump-to.utils :as utils]
[status-im2.contexts.shell.jump-to.state :as state] [status-im2.contexts.shell.jump-to.state :as state]
[status-im2.contexts.shell.jump-to.animation :as animation] [status-im2.contexts.shell.jump-to.animation :as animation]
[status-im2.contexts.shell.jump-to.constants :as shell.constants] [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])) [status-im2.contexts.shell.jump-to.components.bottom-tabs.style :as style]))
(defn blur-overlay-params (defn blur-overlay-params
@ -25,7 +25,7 @@
icon-color (->> stack-id icon-color (->> stack-id
(get shell.constants/tabs-icon-color-keywords) (get shell.constants/tabs-icon-color-keywords)
(get shared-values))] (get shared-values))]
[bottom-nav-tab/bottom-nav-tab [quo/bottom-nav-tab
(-> notifications-data (-> notifications-data
(get stack-id) (get stack-id)
(assoc :test-ID stack-id (assoc :test-ID stack-id