parent
848cac31ba
commit
6fd5a97b59
|
@ -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}}
|
||||||
|
|
|
@ -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])
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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
|
|
||||||
"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
|
:disabled? false
|
||||||
:favicon? false
|
:favicon? false
|
||||||
:placeholder "Search or enter dapp domain"
|
:placeholder "Search or enter dapp domain"
|
||||||
:locked? false})]
|
:locked? false})]
|
||||||
|
(fn []
|
||||||
[preview/preview-container
|
[preview/preview-container
|
||||||
{:state state
|
{:state state
|
||||||
:descriptor descriptor}
|
: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
|
[quo/browser-input
|
||||||
(assoc @state
|
(assoc @state
|
||||||
:customization-color :blue
|
:favicon
|
||||||
:favicon (when (:favicon? @state) :i/verified))]
|
(when (:favicon? @state) :i/verified))]])))
|
||||||
[rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]
|
|
||||||
(finally
|
|
||||||
(.remove keyboard-show-listener)
|
|
||||||
(.remove keyboard-hide-listener))))
|
|
||||||
|
|
|
@ -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
|
||||||
|
@ -50,10 +31,8 @@
|
||||||
(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
|
|
||||||
{:style {:align-items :center
|
|
||||||
:margin-top 50}}
|
:margin-top 50}}
|
||||||
[quo/token-value @state]]]])))
|
[quo/token-value @state]])))
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
@ -51,10 +35,7 @@
|
||||||
(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]]]])))
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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
|
||||||
|
@ -77,9 +56,7 @@
|
||||||
(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?]]]])))
|
|
||||||
|
|
|
@ -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]]]])))
|
|
||||||
|
|
|
@ -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"
|
|
||||||
:key :token-name
|
|
||||||
:type :text}
|
:type :text}
|
||||||
{:label "Token Abbreviation"
|
{:key :token-abbreviation
|
||||||
:key :token-abbreviation
|
|
||||||
:type :text}])
|
: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
|
||||||
|
@ -269,18 +202,18 @@
|
||||||
: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))
|
||||||
|
:component-container-style {:background-color (case (:background @state)
|
||||||
:white colors/white
|
:white colors/white
|
||||||
:neutral-5 colors/neutral-5
|
:neutral-5 colors/neutral-5
|
||||||
:neutral-90 colors/neutral-90
|
:neutral-90 colors/neutral-90
|
||||||
:neutral-95 colors/neutral-95
|
:neutral-95 colors/neutral-95
|
||||||
:neutral-100 colors/neutral-100
|
:neutral-100 colors/neutral-100
|
||||||
nil)
|
nil)
|
||||||
:padding-vertical 40
|
:margin-vertical 40
|
||||||
:height 200
|
|
||||||
:width "100%"}}
|
:width "100%"}}
|
||||||
|
|
||||||
[photo-bg (:background @state)]
|
[photo-bg (:background @state)]
|
||||||
[blur-bg (:background @state)]
|
[quo/page-nav @state]])))
|
||||||
[quo/page-nav @state]]])))
|
|
||||||
|
|
|
@ -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)
|
||||||
|
@ -33,30 +30,12 @@
|
||||||
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}
|
|
||||||
(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
|
[quo/top-nav
|
||||||
{:container-style {:flex 1 :z-index 2}
|
{:container-style {:flex 1 :z-index 2}
|
||||||
:max-unread-notifications 99
|
:max-unread-notifications 99
|
||||||
|
@ -70,5 +49,5 @@
|
||||||
:avatar-on-press #(js/alert "avatar pressed")
|
:avatar-on-press #(js/alert "avatar pressed")
|
||||||
:scan-on-press #(js/alert "scan pressed")
|
:scan-on-press #(js/alert "scan pressed")
|
||||||
:activity-center-on-press #(js/alert "activity-center pressed")
|
:activity-center-on-press #(js/alert "activity-center pressed")
|
||||||
:qr-code-on-press #(js/alert "qr pressed")}]]]]))))
|
:qr-code-on-press #(js/alert "qr pressed")}]]))))
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue