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

New nav bar for preview screens (#17206) 

* quo2: preview themes
This commit is contained in:
Omar Basem 2023-09-07 11:16:26 +04:00 committed by GitHub
parent e9d76c2a0b
commit 2f13dfe22a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
60 changed files with 331 additions and 839 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,5 @@
(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]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -18,7 +17,7 @@
:key :disabled? :key :disabled?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview-browser-input
[] []
(reagent/with-let [keyboard-shown? (reagent/atom false) (reagent/with-let [keyboard-shown? (reagent/atom false)
keyboard-show-listener (.addListener rn/keyboard keyboard-show-listener (.addListener rn/keyboard
@ -27,21 +26,22 @@
keyboard-hide-listener (.addListener rn/keyboard keyboard-hide-listener (.addListener rn/keyboard
"keyboardWillHide" "keyboardWillHide"
#(reset! keyboard-shown? false)) #(reset! keyboard-shown? false))
{:keys [bottom top]} (safe-area/get-insets) {:keys [bottom]} (safe-area/get-insets)
state (reagent/atom {:blur? false 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})]
[rn/keyboard-avoiding-view {:style {:flex 1 :padding-top top}} [preview/preview-container
{:state state
:descriptor descriptor}
[quo/page-nav [quo/page-nav
{:type :no-title {:type :no-title
:icon-name :i/arrow-left :icon-name :i/arrow-left
:on-press #(rf/dispatch [:navigate-back])}] :on-press #(rf/dispatch [:navigate-back])}]
[rn/flat-list [rn/flat-list
{:header [preview/customizer state descriptor] {:key-fn str
:key-fn str
:keyboard-should-persist-taps :always :keyboard-should-persist-taps :always
:style {:flex 1}}] :style {:flex 1}}]
[rn/view [rn/view
@ -53,10 +53,3 @@
(finally (finally
(.remove keyboard-show-listener) (.remove keyboard-show-listener)
(.remove keyboard-hide-listener)))) (.remove keyboard-hide-listener))))
(defn preview-browser-input
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}}
[cool-preview]])

25
src/status_im2/contexts/quo_preview/common.cljs Normal file
View File

@ -0,0 +1,25 @@
(ns status-im2.contexts.quo-preview.common
(:require
[quo2.core :as quo]
[quo2.theme :as theme]
[utils.re-frame :as rf]))
(defn navigation-bar
[]
(let [logged-in? (rf/sub [:multiaccount/logged-in?])
has-profiles? (boolean (rf/sub [:profile/profiles-overview]))
root (if has-profiles? :profiles :intro)
light? (= (theme/get-theme) :light)]
[quo/page-nav
{:type :title
:title "Quo2 components preview"
:text-align :left
:icon-name :i/close
:right-side [{:icon-name (if light? :i/dark :i/light)
:on-press #(if light? (theme/set-theme :dark) (theme/set-theme :light))}]
:on-press #(if (or logged-in? (not= (rf/sub [:view-id]) :quo2-preview))
(rf/dispatch [:navigate-back])
(do
(theme/set-theme :dark)
(rf/dispatch [:init-root root])))}]))

44
src/status_im2/contexts/quo_preview/community/channel_actions.cljs
View File

@ -1,27 +1,27 @@
(ns status-im2.contexts.quo-preview.community.channel-actions (ns status-im2.contexts.quo-preview.community.channel-actions
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[react-native.core :as rn])) [react-native.core :as rn]
[status-im2.contexts.quo-preview.preview :as preview]))
(defn view (defn view
[] []
[rn/view {:flex 1} [preview/preview-container
[rn/scroll-view {:style {:flex 1 :padding-horizontal 20}} [quo/channel-actions
[quo/channel-actions {:actions [{:big? true
{:actions [{:big? true :label "Pinned Messages"
:label "Pinned Messages" :color :blue
:color :blue :icon :i/pin
:icon :i/pin :counter-value 0}]}]
:counter-value 0}]}] [rn/view {:height 50}]
[rn/view {:height 50}] [quo/channel-actions
[quo/channel-actions {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} {:label "Mute chat" :color :blue :icon :i/muted}]}]
{:label "Mute chat" :color :blue :icon :i/muted}]}] [rn/view {:height 50}]
[rn/view {:height 50}] [quo/channel-actions
[quo/channel-actions {:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} {:label "Mute chat" :color :blue :icon :i/muted}]}]
{:label "Mute chat" :color :blue :icon :i/muted}]}] [rn/view {:height 50}]
[rn/view {:height 50}] [quo/channel-actions
[quo/channel-actions {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} {:label "Mute chat" :color :blue :icon :i/muted}
{:label "Mute chat" :color :blue :icon :i/muted} {:label "Something else" :color :blue :icon :i/placeholder}]}]])
{:label "Something else" :color :blue :icon :i/placeholder}]}]]])

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

@ -48,9 +48,10 @@
:percentage-change "0.00" :percentage-change "0.00"
:fiat-change "€0.00"}})] :fiat-change "€0.00"}})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view [rn/view
[rn/view {:style {:min-height 300}} [preview/customizer state descriptor]]
[rn/view [rn/view
{:style {:align-items :center {:style {:align-items :center
:margin-top 50}} :margin-top 50}}

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

@ -1,7 +1,6 @@
(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 [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.foundations.colors :as colors]
[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.components.list-items.user-list :as user-list]
[utils.address :as address])) [utils.address :as address]))
@ -39,7 +38,7 @@
{:key {:type :close} {:key {:type :close}
:value "Close"}]}]) :value "Close"}]}])
(defn cool-preview (defn preview-user-list
[] []
(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,24 +49,12 @@
:untrustworthy? false :untrustworthy? false
:online? false})] :online? false})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:padding--horizontal 15 :padding--horizontal 15
:justify-content :center} :justify-content :center}
[user-list/user-list @state]]]]))) [user-list/user-list @state]]]])))
(defn preview-user-list
[]
[rn/keyboard-avoiding-view {:style {:flex 1}}
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]]])

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

@ -5,7 +5,7 @@
[reagent.core :as reagent] [reagent.core :as reagent]
[react-native.core :as rn] [react-native.core :as rn]
[status-im2.contexts.quo-preview.style :as style] [status-im2.contexts.quo-preview.style :as style]
[status-im2.common.theme.core :as theme] [status-im2.contexts.quo-preview.common :as common]
[status-im2.contexts.quo-preview.animated-header-list.animated-header-list :as animated-header-list] [status-im2.contexts.quo-preview.animated-header-list.animated-header-list :as animated-header-list]
[status-im2.contexts.quo-preview.avatars.account-avatar :as account-avatar] [status-im2.contexts.quo-preview.avatars.account-avatar :as account-avatar]
[status-im2.contexts.quo-preview.avatars.channel-avatar :as channel-avatar] [status-im2.contexts.quo-preview.avatars.channel-avatar :as channel-avatar]
@ -330,7 +330,6 @@
{:name :reorder-item {:name :reorder-item
:component reorder-item/preview-reorder-item} :component reorder-item/preview-reorder-item}
{:name :category {:name :category
:options {:topBar {:visible true}}
:component category/preview} :component category/preview}
{:name :data-item {:name :data-item
:component data-item/preview-data-item}] :component data-item/preview-data-item}]
@ -367,7 +366,6 @@
{:name :account-overview {:name :account-overview
:component account-overview/preview-account-overview} :component account-overview/preview-account-overview}
{:name :keypair {:name :keypair
:options {:topBar {:visible true}}
:component keypair/preview} :component keypair/preview}
{:name :network-amount {:name :network-amount
:component network-amount/preview} :component network-amount/preview}
@ -388,28 +386,6 @@
:keycard [{:name :keycard-component :keycard [{:name :keycard-component
:component keycard/view}]}) :component keycard/view}]})
(defn- navigation-bar
[]
(let [logged-in? (rf/sub [:multiaccount/logged-in?])
has-profiles? (boolean (rf/sub [:profile/profiles-overview]))
root (if has-profiles? :profiles :intro)]
[quo/page-nav
{:type :title
:title "Quo2 components preview"
:text-align :left
:icon-name :i/close
:on-press #(if logged-in?
(rf/dispatch [:navigate-back])
(do
(theme/set-theme :dark)
(rf/dispatch [:init-root root])))}]))
(defn- theme-switcher
[]
[rn/view {:style style/theme-switcher}
[quo/button {:on-press #(theme/set-theme :light)} "Set light theme"]
[quo/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]])
(defn- category-view (defn- category-view
[] []
(let [open? (reagent/atom false) (let [open? (reagent/atom false)
@ -433,8 +409,7 @@
(defn- main-screen (defn- main-screen
[] []
[:<> [:<>
[navigation-bar] [common/navigation-bar]
[theme-switcher]
[rn/scroll-view {:style (style/main)} [rn/scroll-view {:style (style/main)}
(for [category (sort screens-categories)] (for [category (sort screens-categories)]
^{:key (first category)} ^{:key (first category)}
@ -448,7 +423,7 @@
(update-in subcategory (update-in subcategory
[:options :topBar] [:options :topBar]
merge merge
{:visible true}))))) {:visible false})))))
(def main-screens (def main-screens
[{:name :quo2-preview [{:name :quo2-preview

19
src/status_im2/contexts/quo_preview/markdown/text.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.markdown.text (ns status-im2.contexts.quo-preview.markdown.text
(:require [quo2.components.markdown.text :as quo2] (:require [quo2.components.markdown.text :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [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]))
@ -31,24 +30,14 @@
{:key :monospace {:key :monospace
:value "Monospace"}]}]) :value "Monospace"}]}])
(defn cool-preview (defn preview-text
[] []
(let [state (reagent/atom {})] (let [state (reagent/atom {})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60} [rn/view {:padding-vertical 60}
[quo2/text @state [quo2/text @state
"The quick brown fox jumped over the lazy dog."]]]]))) "The quick brown fox jumped over the lazy dog."]]]])))
(defn preview-text
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

20
src/status_im2/contexts/quo_preview/messages/author.cljs
View File

@ -1,7 +1,6 @@
(ns status-im2.contexts.quo-preview.messages.author (ns status-im2.contexts.quo-preview.messages.author
(:require [quo2.components.markdown.text :as text] (:require [quo2.components.markdown.text :as text]
[quo2.components.messages.author.view :as quo2] [quo2.components.messages.author.view :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [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]))
@ -31,7 +30,7 @@
:key :untrustworthy? :key :untrustworthy?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview-author
[] []
(let [state (reagent/atom {:primary-name "Alisher Yakupov" (let [state (reagent/atom {:primary-name "Alisher Yakupov"
:seconadary-name "" :seconadary-name ""
@ -40,10 +39,9 @@
:verified? false :verified? false
:untrustworthy? false})] :untrustworthy? false})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:padding--horizontal 15 :padding--horizontal 15
@ -51,15 +49,3 @@
[rn/view [rn/view
[text/text "Author:"] [text/text "Author:"]
[quo2/author @state]]]]]))) [quo2/author @state]]]]])))
(defn preview-author
[]
[rn/keyboard-avoiding-view {:style {:flex 1}}
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]]])

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

@ -13,7 +13,7 @@
:key :timestamp-near :key :timestamp-near
:type :text}]) :type :text}])
(defn preview (defn preview-messages-gap
[] []
(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"
@ -21,18 +21,10 @@
:on-press #(println "fill gaps") :on-press #(println "fill gaps")
:warning-label (i18n/label :messages-gap-warning)})] :warning-label (i18n/label :messages-gap-warning)})]
(fn [] (fn []
[rn/view {:margin-bottom 50} [preview/preview-container
[rn/view {:padding 16} {:state state
[preview/customizer state descriptor]] :descriptor descriptor}
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:align-items :center} :align-items :center}
[gap/gap @state]]]))) [gap/gap @state]]])))
(defn preview-messages-gap
[]
[rn/view {:flex 1}
[rn/flat-list
{:flex 1
:header [preview]
:key-fn str}]])

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

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.messages.system-message (ns status-im2.contexts.quo-preview.messages.system-message
(:require [quo2.components.messages.system-message :as system-message] (:require [quo2.components.messages.system-message :as system-message]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [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]))
@ -42,7 +41,7 @@
{:child (when (= (:type @state) :pinned) [rn/text "Message content"]) {:child (when (= (:type @state) :pinned) [rn/text "Message content"])
:display-name (:pinned-by @state)})) :display-name (:pinned-by @state)}))
(defn preview (defn preview-system-message
[] []
(let [state (reagent/atom {:type :pinned (let [state (reagent/atom {:type :pinned
:pinned-by "Steve" :pinned-by "Steve"
@ -50,20 +49,10 @@
:content-text "Hello! This is an example of a pinned message!" :content-text "Hello! This is an example of a pinned message!"
:content-info "3 photos"})] :content-info "3 photos"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 60 :flex 1} {:padding-vertical 60 :flex 1}
[system-message/system-message (finalize-state state)]]]]))) [system-message/system-message (finalize-state state)]]]])))
(defn preview-system-message
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:header [preview]
:key-fn str
:keyboard-should-persist-taps :always}]])

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

@ -64,7 +64,7 @@
(merge state {:icon-color-anim icon-color-anim}) (merge state {:icon-color-anim icon-color-anim})
(:value state)])) (:value state)]))
(defn cool-preview (defn preview-bottom-nav-tab
[] []
(let [state (reagent/atom {:icon :i/communities (let [state (reagent/atom {:icon :i/communities
:new-notifications? true :new-notifications? true
@ -75,21 +75,11 @@
selected? (reagent/cursor state [:selected?]) selected? (reagent/cursor state [:selected?])
pass-through? (reagent/cursor state [:pass-through?])] pass-through? (reagent/cursor state [:pass-through?])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:align-items :center} :align-items :center}
[:f> f-bottom-tab @state @selected? @pass-through?]]]]))) [:f> f-bottom-tab @state @selected? @pass-through?]]]])))
(defn preview-bottom-nav-tab
[]
[rn/view
{:background-color colors/neutral-100
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

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

@ -1,6 +1,5 @@
(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]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[utils.i18n :as i18n] [utils.i18n :as i18n]
@ -42,26 +41,16 @@
(= scroll-type :scroll-to-bottom) (= scroll-type :scroll-to-bottom)
(assoc :scroll-to-bottom {:on-press #()}))) (assoc :scroll-to-bottom {:on-press #()})))
(defn cool-preview (defn preview-floating-shell-button
[] []
(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 []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:align-items :center} :align-items :center}
[quo/floating-shell-button (mock-data @state) nil]]]]))) [quo/floating-shell-button (mock-data @state) nil]]]])))
(defn preview-floating-shell-button
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

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

@ -2,14 +2,13 @@
(: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]
[quo2.theme :as quo.theme]
[react-native.blur :as blur] [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 main-descriptor (def ^:private descriptor
[{:label "Type" [{:label "Type"
:key :type :key :type
:type :select :type :select
@ -229,7 +228,7 @@
:blur-type :light :blur-type :light
:blur-amount 20}]])) :blur-amount 20}]]))
(defn- cool-preview (defn preview-page-nav
[{:keys [theme]}] [{:keys [theme]}]
(let [state (reagent/atom (let [state (reagent/atom
{:type :title-description {:type :title-description
@ -257,21 +256,20 @@
:network-name "Mainnet" :network-name "Mainnet"
:network-logo (resources/get-mock-image :diamond)})] :network-logo (resources/get-mock-image :diamond)})]
(fn [] (fn []
[rn/view {:style {:margin-bottom 50 :padding-vertical 16}} [preview/preview-container
[rn/view {:style {:flex 1}} {:state state
[preview/customizer state :descriptor (concat descriptor
(concat main-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 [rn/view
{:style {:background-color (case (:background @state) {:style {:background-color (case (:background @state)
:white colors/white :white colors/white
@ -286,14 +284,3 @@
[photo-bg (:background @state)] [photo-bg (:background @state)]
[blur-bg (:background @state)] [blur-bg (:background @state)]
[quo/page-nav @state]]]))) [quo/page-nav @state]]])))
(defn preview-page-nav
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [(quo.theme/with-theme cool-preview)]
:key-fn str}]])

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

@ -34,9 +34,10 @@
jump-to? (:jump-to? @state) jump-to? (:jump-to? @state)
notification (:notification @state) notification (:notification @state)
notification-count (:notification-count @state)] notification-count (:notification-count @state)]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:padding-horizontal 20 :padding-horizontal 20

15
src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs
View File

@ -104,7 +104,7 @@
{:body "Your favorite color is Turquoise." {:body "Your favorite color is Turquoise."
:title "What's my favorite color?"}) :title "What's my favorite color?"})
(defn preview (defn preview-activity-logs
[] []
(let [state (reagent/atom {:button-1-label "Decline" (let [state (reagent/atom {:button-1-label "Decline"
:button-1-type :danger :button-1-type :danger
@ -165,7 +165,9 @@
(= (:context @state) :complex-user-action) (= (:context @state) :complex-user-action)
(assoc :context complex-user-action))] (assoc :context complex-user-action))]
[rn/view {:margin-bottom 50} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view [rn/view
{:flex 1 {:flex 1
:padding 16} :padding 16}
@ -177,12 +179,3 @@
:justify-content :center :justify-content :center
:padding-vertical 60} :padding-vertical 60}
[quo/activity-log props]]]])))) [quo/activity-log props]]]]))))
(defn preview-activity-logs
[]
[rn/view {:flex 1}
[rn/flat-list
{:flex 1
:header [preview]
:key-fn str
:keyboard-should-persist-taps :always}]])

19
src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs
View File

@ -2,7 +2,6 @@
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.foundations.colors :as colors]
[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]))
@ -31,23 +30,13 @@
(resources/get-mock-image :photo2) (resources/get-mock-image :photo2)
(resources/get-mock-image :photo3)]) (resources/get-mock-image :photo3)])
(defn cool-preview (defn preview-activity-logs-photos
[] []
(let [state (reagent/atom {:count 1})] (let [state (reagent/atom {:count 1})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view [rn/view
[quo/activity-logs-photos {:photos (take (:count @state) mock-photos)}]]]]))) [quo/activity-logs-photos {:photos (take (:count @state) mock-photos)}]]]])))
(defn preview-activity-logs-photos
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

17
src/status_im2/contexts/quo_preview/notifications/notification.cljs
View File

@ -2,6 +2,7 @@
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[react-native.core :as rn] [react-native.core :as rn]
[status-im2.contexts.quo-preview.code.snippet :as snippet-preview] [status-im2.contexts.quo-preview.code.snippet :as snippet-preview]
[status-im2.contexts.quo-preview.preview :as preview]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn notification-button (defn notification-button
@ -75,10 +76,10 @@
:duration 3000 :duration 3000
:type :notification}]) :type :notification}])
(defn preview (defn preview-notification
[] []
(fn [] (fn []
[rn/view [preview/preview-container
[rn/view [rn/view
{:background-color "#508485" {:background-color "#508485"
:flex-direction :column :flex-direction :column
@ -92,14 +93,4 @@
[^{:key :0} [notification-button-0] [^{:key :0} [notification-button-0]
^{:key :1} [notification-button-1] ^{:key :1} [notification-button-1]
^{:key :2} [notification-button-2] ^{:key :2} [notification-button-2]
^{:key :3} [notification-button-3]] ^{:key :3} [notification-button-3]]]]))
]]))
(defn preview-notification
[]
[rn/view {:flex 1}
[rn/flat-list
{:flex 1
:header [preview]
:key-fn str
:keyboard-should-persist-taps :always}]])

14
src/status_im2/contexts/quo_preview/notifications/toast.cljs
View File

@ -3,6 +3,7 @@
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn toast-button (defn toast-button
@ -85,10 +86,10 @@
:duration 3000}])} :duration 3000}])}
"update above toast"]]))))) "update above toast"]])))))
(defn preview (defn preview-toasts
[] []
(fn [] (fn []
[rn/view [preview/preview-container
[rn/view [rn/view
{:background-color "#508485" {:background-color "#508485"
:flex-direction :column :flex-direction :column
@ -104,12 +105,3 @@
^{:key :30s-duration} [toast-button-30s-duration] ^{:key :30s-duration} [toast-button-30s-duration]
^{:key :upsert} ^{:key :upsert}
[update-toast-button]]]])) [update-toast-button]]]]))
(defn preview-toasts
[]
[rn/view {:flex 1}
[rn/flat-list
{:flex 1
:header [preview]
:key-fn str
:keyboard-should-persist-taps :always}]])

20
src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key (ns status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
@ -22,7 +21,7 @@
{:key :derivation-path {:key :derivation-path
:value "Derivation Path"}]}]) :value "Derivation Path"}]}])
(defn cool-preview (defn preview-keyboard-key
[] []
(let [state (reagent/atom {:disabled? false (let [state (reagent/atom {:disabled? false
:on-press #(js/alert "pressed" %) :on-press #(js/alert "pressed" %)
@ -34,9 +33,9 @@
:derivation-path nil :derivation-path nil
:digit 1 :digit 1
nil)] nil)]
[rn/view {:style {:padding-bottom 150}} [preview/preview-container
[rn/view {:style {:flex 1}} {:state state
[preview/customizer state descriptor]] :descriptor descriptor}
[preview/blur-view [preview/blur-view
{:style {:flex 1 {:style {:flex 1
:align-self :center :align-self :center
@ -46,14 +45,3 @@
:blur-view-props (when (:blur? @state) :blur-view-props (when (:blur? @state)
{:overlay-color colors/neutral-80-opa-80})} {:overlay-color colors/neutral-80-opa-80})}
[quo/keyboard-key @state value]]])))) [quo/keyboard-key @state value]]]))))
(defn preview-keyboard-key
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

20
src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard (ns status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.quo-preview.preview :as preview]
@ -26,7 +25,7 @@
{:key :none {:key :none
:value "None"}]}]) :value "None"}]}])
(defn cool-preview (defn preview-numbered-keyboard
[] []
(let [state (reagent/atom {:disabled? false (let [state (reagent/atom {:disabled? false
:on-press (fn [item] (js/alert (str item " pressed"))) :on-press (fn [item] (js/alert (str item " pressed")))
@ -35,9 +34,9 @@
:left-action :dot}) :left-action :dot})
blur? (reagent/cursor state [:blur?])] blur? (reagent/cursor state [:blur?])]
(fn [] (fn []
[rn/view [preview/preview-container
[rn/view {:flex 1} {:state state
[preview/customizer state descriptor]] :descriptor descriptor}
(when @blur? (when @blur?
[blur/view [blur/view
{:style {:position :absolute {:style {:position :absolute
@ -48,14 +47,3 @@
:background-color colors/neutral-80-opa-70} :background-color colors/neutral-80-opa-70}
:overlay-color :transparent}]) :overlay-color :transparent}])
[quo/numbered-keyboard @state]]))) [quo/numbered-keyboard @state]])))
(defn preview-numbered-keyboard
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

19
src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs
View File

@ -29,7 +29,7 @@
:key :subtitle :key :subtitle
:type :text}]) :type :text}])
(defn cool-preview (defn preview-small-option-card
[] []
(let [state (reagent/atom {:variant :main (let [state (reagent/atom {:variant :main
:image (-> descriptor second :options first :key) :image (-> descriptor second :options first :key)
@ -37,22 +37,11 @@
:subtitle "Your new self-sovereign identity in Status" :subtitle "Your new self-sovereign identity in Status"
:on-press #(js/alert "Small option card pressed!")})] :on-press #(js/alert "Small option card pressed!")})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:padding-bottom 150}} [rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:style {:background-color colors/neutral-80 {:style {:background-color colors/neutral-80
:padding 20}} :padding 20}}
[quo2/small-option-card @state]]]]))) [quo2/small-option-card @state]]]])))
(defn preview-small-option-card
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

21
src/status_im2/contexts/quo_preview/password/tips.cljs
View File

@ -13,29 +13,16 @@
:key :completed? :key :completed?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview-tips
[] []
(let [state (reagent/atom {:text "Lower case" (let [state (reagent/atom {:text "Lower case"
:completed? false}) :completed? false})
text (reagent/cursor state [:text]) text (reagent/cursor state [:text])
completed? (reagent/cursor state [:completed?])] completed? (reagent/cursor state [:completed?])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding 60 :background-color colors/neutral-95} [rn/view {:padding 60 :background-color colors/neutral-95}
[quo/tips {:completed? @completed?} @text]]]]))) [quo/tips {:completed? @completed?} @text]]]])))
(defn preview-tips
[]
[rn/view
{:background-color (colors/theme-colors
colors/white
colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

53
src/status_im2/contexts/quo_preview/preview.cljs
View File

@ -1,8 +1,10 @@
(ns status-im2.contexts.quo-preview.preview (ns status-im2.contexts.quo-preview.preview
(:require [camel-snake-kebab.core :as camel-snake-kebab] (:require [camel-snake-kebab.core :as camel-snake-kebab]
[clojure.string :as string] [clojure.string :as string]
[status-im2.contexts.quo-preview.common :as common]
[quo2.core :as quo] [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.safe-area :as safe-area]
[quo2.theme :as quo.theme] [quo2.theme :as quo.theme]
[react-native.blur :as blur] [react-native.blur :as blur]
[react-native.core :as rn] [react-native.core :as rn]
@ -227,32 +229,37 @@
style)}] style)}]
children)]) children)])
(defn preview-container (defn preview-container
[{:keys [state descriptor blur? [{:keys [state descriptor blur?
component-container-style component-container-style
blur-container-style blur-view-props blur-height show-blur-background?] blur-container-style blur-view-props blur-height show-blur-background?]
:or {blur-height 200}} :or {blur-height 200}}
& children] & children]
[rn/scroll-view [rn/view
{:style (style/panel-basic) {:style {:top (safe-area/get-top)
:shows-vertical-scroll-indicator false} :flex 1}}
[rn/pressable {:on-press rn/dismiss-keyboard!} [common/navigation-bar]
(when descriptor [rn/scroll-view
[rn/view {:style style/customizer-container} {:style (style/panel-basic)
[customizer state descriptor]]) :shows-vertical-scroll-indicator false}
(if blur? [rn/pressable {:on-press rn/dismiss-keyboard!}
[rn/view {:style (merge style/component-container component-container-style)} (when descriptor
(into [blur-view [rn/view {:style style/customizer-container}
{:show-blur-background? show-blur-background? [customizer state descriptor]])
:height blur-height (if blur?
:style (merge {:width "100%" [rn/view {:style (merge style/component-container component-container-style)}
:flex-grow 1} (into [blur-view
(when-not show-blur-background? {:show-blur-background? show-blur-background?
{:padding-horizontal 0 :height blur-height
:top 0}) :style (merge {:width "100%"
blur-container-style) :flex-grow 1}
:blur-view-props (merge {:blur-type (quo.theme/get-theme)} (when-not show-blur-background?
blur-view-props)}] {:padding-horizontal 0
children)] :top 0})
(into [rn/view {:style (merge style/component-container component-container-style)}] blur-container-style)
children))]]) :blur-view-props (merge {:blur-type (quo.theme/get-theme)}
blur-view-props)}]
children)]
(into [rn/view {:style (merge style/component-container component-container-style)}]
children))]]])

18
src/status_im2/contexts/quo_preview/profile/collectible.cljs
View File

@ -20,7 +20,7 @@
:key :shuffle-images :key :shuffle-images
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview-collectible
[] []
(let [state (reagent/atom {:num-images 1 :shuffle-images false})] (let [state (reagent/atom {:num-images 1 :shuffle-images false})]
(fn [] (fn []
@ -29,22 +29,12 @@
(shuffle) (shuffle)
:always :always
(take (:num-images @state)))] (take (:num-images @state)))]
[rn/view [preview/preview-container
{:margin-bottom 50 {:state state
:padding 16} :descriptor descriptor}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 100 {:padding-vertical 100
:align-items :center} :align-items :center}
[quo/collectible [quo/collectible
{:images images-to-show {:images images-to-show
:on-press #(js/alert "Pressed")}]]])))) :on-press #(js/alert "Pressed")}]]]))))
(defn preview-collectible
[]
[rn/view {:style {:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

20
src/status_im2/contexts/quo_preview/profile/profile_card.cljs
View File

@ -45,7 +45,7 @@
:key :emoji-hash :key :emoji-hash
:type :text}]) :type :text}])
(defn cool-preview (defn preview-profile-card
[] []
(let [state (reagent/atom {:keycard-account? false (let [state (reagent/atom {:keycard-account? false
:name "Matt Grote" :name "Matt Grote"
@ -63,24 +63,12 @@
:hash "zQ3k83euenmcikw7474hfu73t5N" :hash "zQ3k83euenmcikw7474hfu73t5N"
:emoji-hash "😄😂🫣🍑😇🤢😻🥷🏻🦸🏻‍♀️🦸🏻🦸🏻‍♂️🦹🏻‍♀️🧑🏻‍🎄🎅🏻"})] :emoji-hash "😄😂🫣🍑😇🤢😻🥷🏻🦸🏻‍♀️🦸🏻🦸🏻‍♂️🦹🏻‍♀️🧑🏻‍🎄🎅🏻"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center}
[quo/profile-card @state]]]]))) [quo/profile-card @state]]]])))
(defn preview-profile-card
[]
[rn/view
{:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

21
src/status_im2/contexts/quo_preview/profile/select_profile.cljs
View File

@ -21,7 +21,7 @@
:key :selected? :key :selected?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview-select-profile
[] []
(let [state (reagent/atom {:selected? false (let [state (reagent/atom {:selected? false
:name "Alisher Yakupov" :name "Alisher Yakupov"
@ -29,10 +29,10 @@
:profile-picture (resources/get-mock-image :user-picture-male5)}) :profile-picture (resources/get-mock-image :user-picture-male5)})
selected? (reagent/cursor state [:selected?])] selected? (reagent/cursor state [:selected?])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:flex-direction :row :flex-direction :row
@ -40,16 +40,3 @@
:background-color colors/neutral-90 :background-color colors/neutral-90
:justify-content :center} :justify-content :center}
[quo/select-profile (merge @state {:on-change #(reset! selected? %)})]]]]))) [quo/select-profile (merge @state {:on-change #(reset! selected? %)})]]]])))
(defn preview-select-profile
[]
[rn/view
{:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

19
src/status_im2/contexts/quo_preview/reactions/react.cljs
View File

@ -1,7 +1,6 @@
(ns status-im2.contexts.quo-preview.reactions.react (ns status-im2.contexts.quo-preview.reactions.react
(:require [clojure.string :as string] (:require [clojure.string :as string]
[quo2.components.reactions.reaction :as quo2.reaction] [quo2.components.reactions.reaction :as quo2.reaction]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.constants :as constants] [status-im2.constants :as constants]
@ -21,13 +20,14 @@
:key :neutral? :key :neutral?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview-react
[] []
(let [state (reagent/atom {:emoji :reaction/love})] (let [state (reagent/atom {:emoji :reaction/love})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:justify-content :center :justify-content :center
@ -35,14 +35,3 @@
:align-items :center} :align-items :center}
[quo2.reaction/reaction @state] [quo2.reaction/reaction @state]
[quo2.reaction/add-reaction @state]]]]))) [quo2.reaction/add-reaction @state]]]])))
(defn preview-react
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

15
src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs
View File

@ -3,6 +3,7 @@
[quo2.core :as quo] [quo2.core :as quo]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[utils.re-frame :as rf] [utils.re-frame :as rf]
[status-im2.common.alert.events :as alert] [status-im2.common.alert.events :as alert]
[utils.i18n :as i18n] [utils.i18n :as i18n]
@ -11,7 +12,7 @@
(defonce record-audio-permission-granted (reagent/atom false)) (defonce record-audio-permission-granted (reagent/atom false))
(defn cool-preview (defn preview-record-audio
[] []
(let [message (reagent/atom (let [message (reagent/atom
"Press & hold the mic button to start recording...") "Press & hold the mic button to start recording...")
@ -40,7 +41,7 @@
:t/audio-recorder-permissions-error))) :t/audio-recorder-permissions-error)))
50)}]))] 50)}]))]
(fn [] (fn []
[rn/view [preview/preview-container
[rn/view [rn/view
{:padding-top 150 {:padding-top 150
:align-items :center :align-items :center
@ -56,13 +57,3 @@
:on-request-record-audio-permission on-request-record-audio-permission :on-request-record-audio-permission on-request-record-audio-permission
:max-duration-ms constants/audio-max-duration-ms}]] :max-duration-ms constants/audio-max-duration-ms}]]
[quo/text {:style {:margin-horizontal 20}} @message]]))) [quo/text {:style {:margin-horizontal 20}} @message]])))
(defn preview-record-audio
[]
[rn/view {:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :never
:scroll-enabled false
:header [cool-preview]
:key-fn str}]])

20
src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.selectors.disclaimer (ns status-im2.contexts.quo-preview.selectors.disclaimer
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme] [quo2.theme :as theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -30,16 +29,16 @@
{:style {:flex 1} {:style {:flex 1}
:show-blur-background? true}]])) :show-blur-background? true}]]))
(defn cool-preview (defn preview-disclaimer
[] []
(let [state (reagent/atom {:checked? false (let [state (reagent/atom {:checked? false
:blur? true :blur? true
:text "I agree with the community rules"})] :text "I agree with the community rules"})]
(fn [] (fn []
(let [{:keys [blur? checked? text]} @state] (let [{:keys [blur? checked? text]} @state]
[rn/view {:style {:flex 1}} [preview/preview-container
[rn/view {:style {:flex 1}} {:state state
[preview/customizer state descriptor]] :descriptor descriptor}
[rn/view {:style {:padding-horizontal 15}} [rn/view {:style {:padding-horizontal 15}}
[blur-background blur?] [blur-background blur?]
[rn/view {:style {:margin-vertical 50}} [rn/view {:style {:margin-vertical 50}}
@ -50,14 +49,3 @@
text]] text]]
[quo/button {:disabled? (not checked?)} [quo/button {:disabled? (not checked?)}
"submit"]]])))) "submit"]]]))))
(defn preview-disclaimer
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

21
src/status_im2/contexts/quo_preview/selectors/filter.cljs
View File

@ -18,16 +18,14 @@
:key :blur? :key :blur?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview
[] []
(let [state (reagent/atom {:override-theme (theme/get-theme) (let [state (reagent/atom {:override-theme (theme/get-theme)
:blur? false})] :blur? false})]
(fn [] (fn []
[rn/view [preview/preview-container
{:style {:margin-bottom 50 {:state state
:padding-vertical 16 :descriptor descriptor}
:padding-horizontal 20}}
[preview/customizer state descriptor]
[rn/view [rn/view
{:style {:padding-vertical 60 {:style {:padding-vertical 60
:align-items :center}} :align-items :center}}
@ -43,14 +41,3 @@
(= :light (:override-theme @state)) (= :light (:override-theme @state))
colors/white)}} colors/white)}}
[quo/view @state]]]]))) [quo/view @state]]]])))
(defn preview
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

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

@ -32,14 +32,15 @@
:blur? blur? :blur? blur?
:customization-color customization-color}]]) :customization-color customization-color}]])
(defn cool-preview (defn preview-selectors
[] []
(let [state (reagent/atom {:disabled? false (let [state (reagent/atom {:disabled? false
:blur? false :blur? false
:customization-color :blue})] :customization-color :blue})]
(fn [] (fn []
[rn/view [preview/preview-container
[preview/customizer state descriptor] {:state state
:descriptor descriptor}
[rn/view {:style {:margin-vertical 24}} [rn/view {:style {:margin-vertical 24}}
[preview/blur-view [preview/blur-view
{:style {:width "100%" {:style {:width "100%"
@ -58,14 +59,3 @@
[selector-preview "Radio" quo2/radio @state] [selector-preview "Radio" quo2/radio @state]
[selector-preview "Checkbox" quo2/checkbox @state] [selector-preview "Checkbox" quo2/checkbox @state]
[selector-preview "Checkbox Prefill" quo2/checkbox-prefill @state]]]]]))) [selector-preview "Checkbox Prefill" quo2/checkbox-prefill @state]]]]])))
(defn preview-selectors
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

18
src/status_im2/contexts/quo_preview/settings/accounts.cljs
View File

@ -20,7 +20,7 @@
:key :account-address :key :account-address
:type :text}]) :type :text}])
(defn cool-preview (defn preview-accounts
[] []
(let [state (reagent/atom {:customization-color :blue (let [state (reagent/atom {:customization-color :blue
:account-name "Booze for Dubai" :account-name "Booze for Dubai"
@ -29,10 +29,9 @@
:on-press-menu (fn [] :on-press-menu (fn []
(js/alert "Menu button pressed"))})] (js/alert "Menu button pressed"))})]
(fn [] (fn []
[rn/view [preview/preview-container
{:margin-bottom 50 {:state state
:padding 16} :descriptor descriptor}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 100 {:padding-vertical 100
:align-items :center :align-items :center
@ -40,12 +39,3 @@
colors/neutral-30 colors/neutral-30
colors/neutral-95)} colors/neutral-95)}
[quo/account @state]]]))) [quo/account @state]]])))
(defn preview-accounts
[]
[rn/view {:style {:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

4
src/status_im2/contexts/quo_preview/settings/category.cljs
View File

@ -68,7 +68,9 @@
(reset! data (create-item-array (max (js/parseInt (:size @state)) 1) (reset! data (create-item-array (max (js/parseInt (:size @state)) 1)
@state))) @state)))
[(:blur? @state) (:right-icon? @state) (:image? @state) (:subtitle? @state)]) [(:blur? @state) (:right-icon? @state) (:image? @state) (:subtitle? @state)])
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor (if (= (:list-type @state) :settings) settings-descriptor reorder-descriptor)}
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:padding-bottom 150 :padding-bottom 150

17
src/status_im2/contexts/quo_preview/settings/data_item.cljs
View File

@ -57,7 +57,7 @@
{:source (resources/get-mock-image :decentraland)} {:source (resources/get-mock-image :decentraland)}
{:source (resources/get-mock-image :rarible)}]) {:source (resources/get-mock-image :rarible)}])
(defn cool-preview (defn preview-data-item
[] []
(let [state (reagent/atom {:on-press #(js/alert (str "pressed")) (let [state (reagent/atom {:on-press #(js/alert (str "pressed"))
:blur? false :blur? false
@ -75,7 +75,9 @@
:communities-list communities-list}) :communities-list communities-list})
blur? (reagent/cursor state [:blur?])] blur? (reagent/cursor state [:blur?])]
(fn [] (fn []
[rn/view [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:flex 1}} [rn/view {:style {:flex 1}}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
(when @blur? (when @blur?
@ -92,14 +94,3 @@
:padding-vertical 10 :padding-vertical 10
:margin-horizontal 20}} :margin-horizontal 20}}
[quo/data-item @state]]]))) [quo/data-item @state]]])))
(defn preview-data-item
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-100)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

20
src/status_im2/contexts/quo_preview/settings/privacy_option.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.settings.privacy-option (ns status-im2.contexts.quo-preview.settings.privacy-option
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [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]))
@ -22,7 +21,7 @@
:key :li3 :key :li3
:type :text}]) :type :text}])
(defn cool-preview (defn preview-options
[] []
(let [state (reagent/atom {:selected :contacts (let [state (reagent/atom {:selected :contacts
:header "header" :header "header"
@ -36,15 +35,15 @@
list-items (->> (select-keys @state [:li1 :li2 :li3]) list-items (->> (select-keys @state [:li1 :li2 :li3])
vals vals
(remove empty?))] (remove empty?))]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view [rn/view
{:margin-horizontal 20 {:margin-horizontal 20
:padding 16 :padding 16
:flex 1} :flex 1}
[rn/view {:margin-vertical 2} [rn/view {:margin-vertical 2}
[quo/text {:size :paragraph-2} "Dynamic sample"]] [quo/text {:size :paragraph-2} "Dynamic sample"]]
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:margin-vertical 8} [rn/view {:margin-vertical 8}
[quo/privacy-option [quo/privacy-option
(cond-> {:on-select #(swap! state assoc :selected :preview) (cond-> {:on-select #(swap! state assoc :selected :preview)
@ -88,14 +87,3 @@
:footer "This footer is exceedingly long to test the overflowing behavior of text in it" :footer "This footer is exceedingly long to test the overflowing behavior of text in it"
:list-items :list-items
["A very, very very long text line that serves to test the overflow behavior of this component"]}]]]])))) ["A very, very very long text line that serves to test the overflow behavior of this component"]}]]]]))))
(defn preview-options
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

17
src/status_im2/contexts/quo_preview/settings/settings_list.cljs
View File

@ -51,7 +51,7 @@
:label "example" :label "example"
:override-theme :dark})})) :override-theme :dark})}))
(defn cool-preview (defn preview-settings-list
[] []
(let [state (reagent/atom {:title "Account" (let [state (reagent/atom {:title "Account"
:accessibility-label :settings-list-item :accessibility-label :settings-list-item
@ -59,20 +59,11 @@
:chevron? true :chevron? true
:on-press (fn [] (js/alert "Settings list item pressed"))})] :on-press (fn [] (js/alert "Settings list item pressed"))})]
(fn [] (fn []
[rn/view [preview/preview-container
{:margin-bottom 50} {:state state
[preview/customizer state descriptor] :descriptor descriptor}
[rn/view [rn/view
{:padding-vertical 100 {:padding-vertical 100
:padding-horizontal 20 :padding-horizontal 20
:align-items :center} :align-items :center}
[quo/settings-list (get-props @state)]]]))) [quo/settings-list (get-props @state)]]])))
(defn preview-settings-list
[]
[rn/view {:style {:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

22
src/status_im2/contexts/quo_preview/share/qr_code.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.share.qr-code (ns status-im2.contexts.quo-preview.share.qr-code
(:require [quo2.foundations.colors :as colors] (:require [react-native.core :as rn]
[react-native.core :as rn]
[quo2.core :as quo] [quo2.core :as quo]
[utils.image-server :as image-server] [utils.image-server :as image-server]
[utils.re-frame :as rf] [utils.re-frame :as rf]
@ -23,7 +22,7 @@
{:key :highest {:key :highest
:value "Highest"}]}]) :value "Highest"}]}])
(defn cool-preview (defn preview-qr-code
[] []
(let [state (reagent/atom {:text "https://status.im" (let [state (reagent/atom {:text "https://status.im"
:error-correction-level :highest}) :error-correction-level :highest})
@ -36,9 +35,10 @@
:port (rf/sub [:mediaserver/port]) :port (rf/sub [:mediaserver/port])
:error-level @error-correction-level :error-level @error-correction-level
:qr-size 250})) :qr-size 250}))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:padding-bottom 150}} [rn/view {:style {:padding-bottom 150}}
[preview/customizer state descriptor]
[rn/view {:style {:flex 1}}] [rn/view {:style {:flex 1}}]
[rn/view [rn/view
{:style {:padding-vertical 60 {:style {:padding-vertical 60
@ -53,15 +53,3 @@
[rn/view [rn/view
[rn/text {:style {:padding 20 :flex-shrink 1}} "Media server url -> " [rn/text {:style {:padding 20 :flex-shrink 1}} "Media server url -> "
@media-server-uri]]]]]]))) @media-server-uri]]]]]])))
(defn preview-qr-code
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

22
src/status_im2/contexts/quo_preview/share/share_qr_code.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.share.share-qr-code (ns status-im2.contexts.quo-preview.share.share-qr-code
(:require [quo2.foundations.colors :as colors] (:require [react-native.core :as rn]
[react-native.core :as rn]
[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] [status-im2.common.resources :as resources]
@ -15,16 +14,17 @@
:key :link-title :key :link-title
:type :text}]) :type :text}])
(defn cool-preview (defn preview-share-qr-code
[] []
(let [state (reagent/atom {:info-button? true (let [state (reagent/atom {:info-button? true
:link-title "Link to profile" :link-title "Link to profile"
:url "status.app/u/zQ34e1zlOdas0pKnvrweeedsasas12adjie8"})] :url "status.app/u/zQ34e1zlOdas0pKnvrweeedsasas12adjie8"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:padding-bottom 150}} [rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}] [rn/view {:style {:flex 1}}]
[preview/customizer state descriptor]
[rn/view [rn/view
{:style {:padding-vertical 60 {:style {:padding-vertical 60
:justify-content :center}} :justify-content :center}}
@ -40,15 +40,3 @@
:url-on-long-press #(js/alert "url long pressed") :url-on-long-press #(js/alert "url long pressed")
:share-on-press #(js/alert "share pressed") :share-on-press #(js/alert "share pressed")
:qr-url (:url @state)}]]]]]))) :qr-url (:url @state)}]]]]])))
(defn preview-share-qr-code
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

6
src/status_im2/contexts/quo_preview/style.cljs
View File

@ -171,9 +171,3 @@
:padding-bottom 8 :padding-bottom 8
:padding-horizontal 16 :padding-horizontal 16
:background-color (colors/theme-colors colors/white colors/neutral-90)}) :background-color (colors/theme-colors colors/white colors/neutral-90)})
(def theme-switcher
{:flex-direction :row
:justify-content :space-between
:padding-horizontal 24
:padding-vertical 12})

18
src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs
View File

@ -147,7 +147,7 @@
{:avatar-params community-avatar} {:avatar-params community-avatar}
{}))) {})))
(defn cool-preview (defn preview-switcher-cards
[] []
(let [state (reagent/atom {:type shell.constants/private-group-chat-card (let [state (reagent/atom {:type shell.constants/private-group-chat-card
:title "Alisher Yakupov" :title "Alisher Yakupov"
@ -160,21 +160,11 @@
:last-message "This is fantastic! Ethereum" :last-message "This is fantastic! Ethereum"
:preview-label-color colors/white})] :preview-label-color colors/white})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:align-items :center} :align-items :center}
[switcher-cards/card (get-mock-data @state)]]]]))) [switcher-cards/card (get-mock-data @state)]]]])))
(defn preview-switcher-cards
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

19
src/status_im2/contexts/quo_preview/tabs/account_selector.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.tabs.account-selector (ns status-im2.contexts.quo-preview.tabs.account-selector
(:require [quo2.components.tabs.account-selector :as quo2] (:require [quo2.components.tabs.account-selector :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [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]))
@ -46,7 +45,7 @@
:account-emoji "🍟" :account-emoji "🍟"
:label-text "Label 3"}]) :label-text "Label 3"}])
(defn cool-preview (defn preview-this
[] []
(let [state (reagent/atom {:show-label? true (let [state (reagent/atom {:show-label? true
:transparent? false :transparent? false
@ -55,21 +54,11 @@
:account-emoji "🍑" :account-emoji "🍑"
:label-text "Label"})] :label-text "Label"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/account-selector @state]]]]))) [quo2/account-selector @state]]]])))
(defn preview-this
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

20
src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.tabs.segmented-tab (ns status-im2.contexts.quo-preview.tabs.segmented-tab
(:require [quo2.components.tabs.segmented-tab :as quo2] (:require [quo2.components.tabs.segmented-tab :as quo2]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme] [quo2.theme :as theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -18,15 +17,15 @@
:key :blur? :key :blur?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview-segmented
[] []
(let [state (reagent/atom {:size 32 (let [state (reagent/atom {:size 32
:blur? false})] :blur? false})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[preview/blur-view [preview/blur-view
{:show-blur-background? (:blur? @state) {:show-blur-background? (:blur? @state)
:height 200 :height 200
@ -48,14 +47,3 @@
:data [{:id 1 :label "Tab 1"} :data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}] {:id 2 :label "Tab 2"}]
:on-change #(println "Active tab" %)})]]]]]]))) :on-change #(println "Active tab" %)})]]]]]])))
(defn preview-segmented
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

20
src/status_im2/contexts/quo_preview/tabs/tabs.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.tabs.tabs (ns status-im2.contexts.quo-preview.tabs.tabs
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [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]))
@ -28,15 +27,15 @@
:label (str "Tab " (inc index)) :label (str "Tab " (inc index))
:notification-dot? (and unread-indicators? (zero? (rem index 2)))})) :notification-dot? (and unread-indicators? (zero? (rem index 2)))}))
(defn cool-preview (defn preview-tabs
[] []
(let [state (reagent/atom {:size 32 (let [state (reagent/atom {:size 32
:scrollable? false})] :scrollable? false})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:padding-horizontal 20 :padding-horizontal 20
@ -52,14 +51,3 @@
{:scroll-on-press? true {:scroll-on-press? true
:fade-end-percentage 0.4 :fade-end-percentage 0.4
:fade-end? true}))]]]]))) :fade-end? true}))]]]])))
(defn preview-tabs
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

53
src/status_im2/contexts/quo_preview/tags/context_tags.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.tags.context-tags (ns status-im2.contexts.quo-preview.tags.context-tags
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[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]
@ -26,7 +25,7 @@
:options [{:key 24} :options [{:key 24}
{:key 32}]}) {:key 32}]})
(def main-descriptor (def descriptor
[{:label "Type" [{:label "Type"
:key :type :key :type
:type :select :type :select
@ -164,7 +163,7 @@
:key :duration :key :duration
:type :text}]) :type :text}])
(defn cool-preview (defn preview-context-tags
[] []
(let [state (let [state
(reagent/atom (reagent/atom
@ -203,26 +202,25 @@
:context "Context" :context "Context"
:duration "00:32"})] :duration "00:32"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor (concat descriptor
(case (:type @state)
:default default-descriptor
:multiuser multiuser-descriptor
:group group-descriptor
:channel channel-descriptor
:community community-descriptor
:token token-descriptor
:network network-descriptor
:multinetwork multinetwork-descriptor
:account account-descriptor
:collectible collectible-descriptor
:address address-descriptor
:icon icon-descriptor
:audio audio-descriptor
default-descriptor))}
[rn/view {:style {:padding-bottom 150}} [rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}
[preview/customizer state
(concat main-descriptor
(case (:type @state)
:default default-descriptor
:multiuser multiuser-descriptor
:group group-descriptor
:channel channel-descriptor
:community community-descriptor
:token token-descriptor
:network network-descriptor
:multinetwork multinetwork-descriptor
:account account-descriptor
:collectible collectible-descriptor
:address address-descriptor
:icon icon-descriptor
:audio audio-descriptor
default-descriptor))]]
[rn/view {:style {:padding-vertical 60}} [rn/view {:style {:padding-vertical 60}}
[preview/blur-view [preview/blur-view
{:style {:flex 1 {:style {:flex 1
@ -230,14 +228,3 @@
:margin-horizontal 40} :margin-horizontal 40}
:show-blur-background? (:blur? @state)} :show-blur-background? (:blur? @state)}
[quo/context-tag @state]]]]]))) [quo/context-tag @state]]]]])))
(defn preview-context-tags
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

21
src/status_im2/contexts/quo_preview/tags/permission_tag.cljs
View File

@ -167,14 +167,14 @@
{:id 5 :token-icon (resources/get-mock-image :status-logo)} {:id 5 :token-icon (resources/get-mock-image :status-logo)}
{:id 6 :token-icon (resources/get-mock-image :status-logo)}]}]}]) {:id 6 :token-icon (resources/get-mock-image :status-logo)}]}]}])
(defn cool-preview (defn preview-permission-tag
[] []
(let [state (reagent/atom {:size 32})] (let [state (reagent/atom {:size 32})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:align-self :center :align-self :center
@ -191,16 +191,3 @@
:background-color (colors/theme-colors :background-color (colors/theme-colors
colors/neutral-10 colors/neutral-10
colors/neutral-80)})]]))]]]))) colors/neutral-80)})]]))]]])))
(defn preview-permission-tag
[]
[rn/view
{:background-color (colors/theme-colors
colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

20
src/status_im2/contexts/quo_preview/tags/status_tags.cljs
View File

@ -30,7 +30,7 @@
:key :blur? :key :blur?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview-status-tags
[] []
(let [state (reagent/atom {:status :positive (let [state (reagent/atom {:status :positive
:size :small :size :small
@ -46,24 +46,12 @@
:pending (-> @state :pending (-> @state
(assoc :status {:type :pending}) (assoc :status {:type :pending})
(assoc :label (i18n/label :t/pending))))] (assoc :label (i18n/label :t/pending))))]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[preview/blur-view [preview/blur-view
{:show-blur-background? (:blur? @state) {:show-blur-background? (:blur? @state)
:blur-view-props {:blur-type :dark :blur-view-props {:blur-type :dark
:overlay-color colors/neutral-80-opa-80} :overlay-color colors/neutral-80-opa-80}
:style {:align-self :center}} [quo2/status-tag props]]]])))) :style {:align-self :center}} [quo2/status-tag props]]]]))))
(defn preview-status-tags
[]
[rn/view
{:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

24
src/status_im2/contexts/quo_preview/tags/tag.cljs
View File

@ -1,11 +1,11 @@
(ns status-im2.contexts.quo-preview.tags.tag (ns status-im2.contexts.quo-preview.tags.tag
(:require [quo.react-native :as rn] (:require [quo.react-native :as rn]
[quo.previews.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.tags.tag :as tag] [quo2.components.tags.tag :as tag]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[reagent.core :as reagent])) [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size:" [{:label "Size:"
@ -34,18 +34,18 @@
:key :blurred? :key :blurred?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview-tag
[] []
(let [state (reagent/atom {:size 32 (let [state (reagent/atom {:size 32
:labelled? true :labelled? true
:type :emoji})] :type :emoji})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view [rn/view
{:style {:padding-bottom 150 {:style {:padding-bottom 150
:padding-top 60}} :padding-top 60}}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:justify-content :center :justify-content :center
@ -84,15 +84,3 @@
:resource (if (= :emoji (:type @state)) :resource (if (= :emoji (:type @state))
(resources/get-image :music) (resources/get-image :music)
:i/placeholder)})]]]]]))) :i/placeholder)})]]]]])))
(defn preview-tag
[]
[rn/view
{:flex 1
:background-color (colors/theme-colors
colors/white
colors/neutral-90)}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

20
src/status_im2/contexts/quo_preview/tags/tags.cljs
View File

@ -44,7 +44,7 @@
:key :blurred? :key :blurred?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn preview-tags
[] []
(let [state (reagent/atom {:size 32 (let [state (reagent/atom {:size 32
:labelled? true :labelled? true
@ -52,12 +52,12 @@
:fade-end-percentage 0.4 :fade-end-percentage 0.4
:scrollable? false})] :scrollable? false})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view [rn/view
{:style {:padding-bottom 150 {:style {:padding-bottom 150
:padding-top 60}} :padding-top 60}}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:justify-content :center :justify-content :center
@ -101,15 +101,3 @@
(when (:scrollable? @state) (when (:scrollable? @state)
{:scroll-on-press? true {:scroll-on-press? true
:fade-end? true}))]]]]]))) :fade-end? true}))]]]]])))
(defn preview-tags
[]
[rn/view
{:flex 1
:background-color (colors/theme-colors
colors/white
colors/neutral-90)}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

19
src/status_im2/contexts/quo_preview/tags/token_tag.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.tags.token-tag (ns status-im2.contexts.quo-preview.tags.token-tag
(:require [quo2.components.tags.token-tag :as quo2] (:require [quo2.components.tags.token-tag :as quo2]
[quo2.foundations.colors :as colors]
[quo2.foundations.resources :as resources] [quo2.foundations.resources :as resources]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -44,27 +43,17 @@
(def eth-token (resources/get-token :eth)) (def eth-token (resources/get-token :eth))
(def snt-token (resources/get-token :snt)) (def snt-token (resources/get-token :snt))
(defn cool-preview (defn preview-token-tag
[] []
(let [state (reagent/atom {:size :big :value 10 :token "ETH" :sufficient? false :purchasable? false})] (let [state (reagent/atom {:size :big :value 10 :token "ETH" :sufficient? false :purchasable? false})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/token-tag [quo2/token-tag
(merge @state (merge @state
{:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]]))) {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]])))
(defn preview-token-tag
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

21
src/status_im2/contexts/quo_preview/text_combinations/preview.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.text-combinations.preview (ns status-im2.contexts.quo-preview.text-combinations.preview
(:require [quo2.components.text-combinations.view :as quo2] (:require [quo2.components.text-combinations.view :as quo2]
[quo2.foundations.colors :as colors]
[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]
@ -30,7 +29,7 @@
(assoc state :avatar (resources/get-mock-image :user-picture-male4)) (assoc state :avatar (resources/get-mock-image :user-picture-male4))
state)) state))
(defn cool-preview (defn preview
[] []
(let [state (reagent/atom {:title "Title" (let [state (reagent/atom {:title "Title"
:title-accessibility-label :title :title-accessibility-label :title
@ -38,24 +37,12 @@
:description-props "" :description-props ""
:description-accessibility-label :subtitle})] :description-accessibility-label :subtitle})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/view [quo2/view
(state->text-combinations-props @state)]]]]))) (state->text-combinations-props @state)]]]])))
(defn preview
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:flex-grow 1
:nested-scroll-enabled true
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

20
src/status_im2/contexts/quo_preview/wallet/account_card.cljs
View File

@ -86,7 +86,8 @@
:metrics? true :metrics? true
:type :add-account})) :type :add-account}))
(defn cool-preview
(defn preview-account-card
[] []
(let [state (reagent/atom (initial-state :default))] (let [state (reagent/atom (initial-state :default))]
[:f> [:f>
@ -94,8 +95,9 @@
(rn/use-effect (rn/use-effect
(fn [] (reset! state (initial-state (:type @state)))) (fn [] (reset! state (initial-state (:type @state))))
[(:type @state)]) [(:type @state)])
[rn/view [preview/preview-container
{:style {:flex 1}} {:state state
:descriptor descriptor}
[rn/view [rn/view
{:style {:margin-vertical 40 {:style {:margin-vertical 40
:padding-left 40 :padding-left 40
@ -118,15 +120,3 @@
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:style {:align-items :center :margin-top 40}} [rn/view {:style {:align-items :center :margin-top 40}}
[quo/account-card @state]]])])) [quo/account-card @state]]])]))
(defn preview-account-card
[]
[rn/view
{:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

21
src/status_im2/contexts/quo_preview/wallet/account_overview.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.wallet.account-overview (ns status-im2.contexts.quo-preview.wallet.account-overview
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [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]))
@ -68,7 +67,7 @@
{:key :custom {:key :custom
:value "Custom"}]}]) :value "Custom"}]}])
(defn cool-preview (defn preview-account-overview
[] []
(let [state (reagent/atom {:metrics :positive (let [state (reagent/atom {:metrics :positive
:currency-change "€0.00" :currency-change "€0.00"
@ -81,24 +80,12 @@
:account :default :account :default
:customization-color :blue})] :customization-color :blue})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:padding-bottom 150}} [rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:style {:padding-vertical 60 {:style {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center}} :justify-content :center}}
[quo/account-overview @state]]]]))) [quo/account-overview @state]]]])))
(defn preview-account-overview
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white
colors/neutral-95)
:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

35
src/status_im2/contexts/quo_preview/wallet/keypair.cljs
View File

@ -82,7 +82,7 @@
(def other-details {:full-name "Metamask"}) (def other-details {:full-name "Metamask"})
(defn cool-preview (defn preview
[] []
(let [state (reagent/atom {:accounts accounts (let [state (reagent/atom {:accounts accounts
:customization-color :blue :customization-color :blue
@ -91,25 +91,14 @@
:on-options-press #(js/alert "Options pressed") :on-options-press #(js/alert "Options pressed")
:action :selector})] :action :selector})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:style {:padding-bottom 150}} {:state state
[rn/view {:style {:flex 1}} :descriptor descriptor}
[preview/customizer state descriptor]] [rn/view
[rn/view {:style {:padding-vertical 30
{:style {:padding-vertical 30 :flex-direction :row
:flex-direction :row :justify-content :center}}
:justify-content :center}} [quo/keypair
[quo/keypair (merge
(merge @state
@state {:details (if (= (:type @state) :default-keypair) default-details other-details)})]]])))
{:details (if (= (:type @state) :default-keypair) default-details other-details)})]]]])))
(defn preview
[]
[rn/view
{:style {:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

5
src/status_im2/contexts/quo_preview/wallet/network_amount.cljs
View File

@ -23,9 +23,10 @@
(let [state (reagent/atom {:amount "5.123456" (let [state (reagent/atom {:amount "5.123456"
:token :eth})] :token :eth})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:padding-horizontal 20}} :padding-horizontal 20}}
[rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
[quo/network-amount @state]]]))) [quo/network-amount @state]]])))

5
src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs
View File

@ -31,11 +31,12 @@
:status :default :status :default
:amount "50 SNT"})] :amount "50 SNT"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:padding-horizontal 20}} :padding-horizontal 20}}
[rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:margin-top 50 :margin-top 50

8
src/status_im2/contexts/quo_preview/wallet/network_link.cljs
View File

@ -38,11 +38,9 @@
:source :ethereum :source :ethereum
:destination :optimism})] :destination :optimism})]
(fn [] (fn []
[rn/view [preview/preview-container
{:style {:flex 1 {:state state
:padding-horizontal 20}} :descriptor descriptor}
[rn/view {:style {:min-height 150}}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:padding-top 40 :padding-top 40

8
src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs
View File

@ -23,11 +23,9 @@
(let [state (reagent/atom {:state :pending (let [state (reagent/atom {:state :pending
:customization-color :blue})] :customization-color :blue})]
(fn [] (fn []
[rn/view [preview/preview-container
{:style {:flex 1 {:state state
:padding-horizontal 20}} :descriptor descriptor}
[rn/view {:style {:min-height 150}}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:padding-top 40 :padding-top 40

5
src/status_im2/contexts/quo_preview/wallet/summary_info.cljs
View File

@ -47,9 +47,10 @@
:status-account (merge status-account-props {:size 16})}] :status-account (merge status-account-props {:size 16})}]
(fn [] (fn []
(let [account-props (if (= (:type @state) :status-account) status-account-props user-props)] (let [account-props (if (= (:type @state) :status-account) status-account-props user-props)]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:padding-horizontal 20}} :padding-horizontal 20}}
[rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
[quo/summary-info (merge @state {:account-props account-props})]]])))) [quo/summary-info (merge @state {:account-props account-props})]]]))))

5
src/status_im2/contexts/quo_preview/wallet/token_input.cljs
View File

@ -27,11 +27,12 @@
:currency :usd :currency :usd
:conversion 0.02})] :conversion 0.02})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:padding-horizontal 20}} :padding-horizontal 20}}
[rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:margin-top 50 :margin-top 50

21
src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.wallet.wallet-overview (ns status-im2.contexts.quo-preview.wallet.wallet-overview
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [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]))
@ -42,7 +41,7 @@
{:key :negative {:key :negative
:value "Negative"}]}]) :value "Negative"}]}])
(defn cool-preview (defn preview-wallet-overview
[] []
(let [state (reagent/atom {:state :default (let [state (reagent/atom {:state :default
:time-frame :one-week :time-frame :one-week
@ -54,24 +53,12 @@
:currency-change "€0.00" :currency-change "€0.00"
:percentage-change "0.00%"})] :percentage-change "0.00%"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center}
[quo/wallet-overview @state]]]]))) [quo/wallet-overview @state]]]])))
(defn preview-wallet-overview
[]
[rn/view
{:background-color (colors/theme-colors colors/white
colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])