Mohsen Ghafouri
GitHub
parent
848cac31ba
commit
6fd5a97b59
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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])
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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))]])))
|
||||
|
|
|
|||
|
|
@ -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]])))
|
||||
|
||||
|
|
|
|||
|
|
@ -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]])))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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?]])))
|
||||
|
|
|
|||
|
|
@ -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]])))
|
||||
|
|
|
|||
|
|
@ -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]])))
|
||||
|
|
|
|||
|
|
@ -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")}]]))))
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue