status-im
/
status-react
mirror of https://github.com/status-im/status-react.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
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
@ -18,7 +17,7 @@
:key :disabled?
:type :boolean}])
(defn cool-preview
(defn preview-browser-input
[]
(reagent/with-let [keyboard-shown? (reagent/atom false)
keyboard-show-listener (.addListener rn/keyboard
@ -27,21 +26,22 @@
keyboard-hide-listener (.addListener rn/keyboard
"keyboardWillHide"
#(reset! keyboard-shown? false))
{:keys [bottom top]} (safe-area/get-insets)
{:keys [bottom]} (safe-area/get-insets)
state (reagent/atom {:blur? false
:disabled? false
:favicon? false
:placeholder "Search or enter dapp domain"
:locked? false})]
[rn/keyboard-avoiding-view {:style {:flex 1 :padding-top top}}
[preview/preview-container
{:state state
:descriptor descriptor}
[quo/page-nav
{:type :no-title
:icon-name :i/arrow-left
:on-press #(rf/dispatch [:navigate-back])}]
[rn/flat-list
{:header [preview/customizer state descriptor]
:key-fn str
{:key-fn str
:keyboard-should-persist-taps :always
:style {:flex 1}}]
[rn/view
@ -53,10 +53,3 @@
(finally
(.remove keyboard-show-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
(: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
[]
[rn/view {:flex 1}
[rn/scroll-view {:style {:flex 1 :padding-horizontal 20}}
[quo/channel-actions
{:actions [{:big? true
:label "Pinned Messages"
:color :blue
:icon :i/pin
:counter-value 0}]}]
[rn/view {:height 50}]
[quo/channel-actions
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}]}]
[rn/view {:height 50}]
[quo/channel-actions
{:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}]}]
[rn/view {:height 50}]
[quo/channel-actions
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}
{:label "Something else" :color :blue :icon :i/placeholder}]}]]])
[preview/preview-container
[quo/channel-actions
{:actions [{:big? true
:label "Pinned Messages"
:color :blue
:icon :i/pin
:counter-value 0}]}]
[rn/view {:height 50}]
[quo/channel-actions
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}]}]
[rn/view {:height 50}]
[quo/channel-actions
{:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}]}]
[rn/view {:height 50}]
[quo/channel-actions
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}
{: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"
:fiat-change "€0.00"}})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
[rn/view {:style {:min-height 300}} [preview/customizer state descriptor]]
[rn/view
{:style {:align-items :center
: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
(:require [react-native.core :as rn]
[reagent.core :as reagent]
[quo2.foundations.colors :as colors]
[status-im2.contexts.quo-preview.preview :as preview]
[quo2.components.list-items.user-list :as user-list]
[utils.address :as address]))
@ -39,7 +38,7 @@
{:key {:type :close}
:value "Close"}]}])
(defn cool-preview
(defn preview-user-list
[]
(let [state (reagent/atom {:primary-name "Alisher Yakupov"
:short-chat-key (address/get-shortened-compressed-key
@ -50,24 +49,12 @@
:untrustworthy? false
:online? false})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:padding--horizontal 15
:justify-content :center}
[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]
[react-native.core :as rn]
[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.avatars.account-avatar :as account-avatar]
[status-im2.contexts.quo-preview.avatars.channel-avatar :as channel-avatar]
@ -330,7 +330,6 @@
{:name :reorder-item
:component reorder-item/preview-reorder-item}
{:name :category
:options {:topBar {:visible true}}
:component category/preview}
{:name :data-item
:component data-item/preview-data-item}]
@ -367,7 +366,6 @@
{:name :account-overview
:component account-overview/preview-account-overview}
{:name :keypair
:options {:topBar {:visible true}}
:component keypair/preview}
{:name :network-amount
:component network-amount/preview}
@ -388,28 +386,6 @@
:keycard [{:name :keycard-component
: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
[]
(let [open? (reagent/atom false)
@ -433,8 +409,7 @@
(defn- main-screen
[]
[:<>
[navigation-bar]
[theme-switcher]
[common/navigation-bar]
[rn/scroll-view {:style (style/main)}
(for [category (sort screens-categories)]
^{:key (first category)}
@ -448,7 +423,7 @@
(update-in subcategory
[:options :topBar]
merge
{:visible true})))))
{:visible false})))))
(def main-screens
[{: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
(:require [quo2.components.markdown.text :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -31,24 +30,14 @@
{:key :monospace
:value "Monospace"}]}])
(defn cool-preview
(defn preview-text
[]
(let [state (reagent/atom {})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[quo2/text @state
"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
(:require [quo2.components.markdown.text :as text]
[quo2.components.messages.author.view :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -31,7 +30,7 @@
:key :untrustworthy?
:type :boolean}])
(defn cool-preview
(defn preview-author
[]
(let [state (reagent/atom {:primary-name "Alisher Yakupov"
:seconadary-name ""
@ -40,10 +39,9 @@
:verified? false
:untrustworthy? false})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state :descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:padding--horizontal 15
@ -51,15 +49,3 @@
[rn/view
[text/text "Author:"]
[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
:type :text}])
(defn preview
(defn preview-messages-gap
[]
(let [state (reagent/atom {:timestamp-far "Jan 8 · 09:12"
:timestamp-near "Mar 8 · 22:42"
@ -21,18 +21,10 @@
:on-press #(println "fill gaps")
:warning-label (i18n/label :messages-gap-warning)})]
(fn []
[rn/view {:margin-bottom 50}
[rn/view {:padding 16}
[preview/customizer state descriptor]]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:padding-vertical 60
:align-items :center}
[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
(:require [quo2.components.messages.system-message :as system-message]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -42,7 +41,7 @@
{:child (when (= (:type @state) :pinned) [rn/text "Message content"])
:display-name (:pinned-by @state)}))
(defn preview
(defn preview-system-message
[]
(let [state (reagent/atom {:type :pinned
:pinned-by "Steve"
@ -50,20 +49,10 @@
:content-text "Hello! This is an example of a pinned message!"
:content-info "3 photos"})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60 :flex 1}
[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})
(:value state)]))
(defn cool-preview
(defn preview-bottom-nav-tab
[]
(let [state (reagent/atom {:icon :i/communities
:new-notifications? true
@ -75,21 +75,11 @@
selected? (reagent/cursor state [:selected?])
pass-through? (reagent/cursor state [:pass-through?])]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[: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
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[utils.i18n :as i18n]
@ -42,26 +41,16 @@
(= scroll-type :scroll-to-bottom)
(assoc :scroll-to-bottom {:on-press #()})))
(defn cool-preview
(defn preview-floating-shell-button
[]
(let [state (reagent/atom {:show-jump-to? true
:scroll-type :notification-down})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[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]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[react-native.blur :as blur]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))
(def ^:private main-descriptor
(def ^:private descriptor
[{:label "Type"
:key :type
:type :select
@ -229,7 +228,7 @@
:blur-type :light
:blur-amount 20}]]))
(defn- cool-preview
(defn preview-page-nav
[{:keys [theme]}]
(let [state (reagent/atom
{:type :title-description
@ -257,21 +256,20 @@
:network-name "Mainnet"
:network-logo (resources/get-mock-image :diamond)})]
(fn []
[rn/view {:style {:margin-bottom 50 :padding-vertical 16}}
[rn/view {:style {:flex 1}}
[preview/customizer state
(concat main-descriptor
(case (:type @state)
:no-title no-title-descriptor
:title title-descriptor
:dropdown dropdown-descriptor
:token token-descriptor
:channel channel-descriptor
:title-description title-description-descriptor
:wallet-networks wallet-networks-descriptor
:community community-descriptor
:network network-descriptor
nil))]]
[preview/preview-container
{:state state
:descriptor (concat descriptor
(case (:type @state)
:no-title no-title-descriptor
:title title-descriptor
:dropdown dropdown-descriptor
:token token-descriptor
:channel channel-descriptor
:title-description title-description-descriptor
:wallet-networks wallet-networks-descriptor
:community community-descriptor
:network network-descriptor
nil))}
[rn/view
{:style {:background-color (case (:background @state)
:white colors/white
@ -286,14 +284,3 @@
[photo-bg (:background @state)]
[blur-bg (:background @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)
notification (:notification @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}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
: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."
:title "What's my favorite color?"})
(defn preview
(defn preview-activity-logs
[]
(let [state (reagent/atom {:button-1-label "Decline"
:button-1-type :danger
@ -165,7 +165,9 @@
(= (:context @state) :complex-user-action)
(assoc :context complex-user-action))]
[rn/view {:margin-bottom 50}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:flex 1
:padding 16}
@ -177,12 +179,3 @@
:justify-content :center
:padding-vertical 60}
[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]
[react-native.core :as rn]
[reagent.core :as reagent]
[quo2.foundations.colors :as colors]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -31,23 +30,13 @@
(resources/get-mock-image :photo2)
(resources/get-mock-image :photo3)])
(defn cool-preview
(defn preview-activity-logs-photos
[]
(let [state (reagent/atom {:count 1})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
[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]
[react-native.core :as rn]
[status-im2.contexts.quo-preview.code.snippet :as snippet-preview]
[status-im2.contexts.quo-preview.preview :as preview]
[utils.re-frame :as rf]))
(defn notification-button
@ -75,10 +76,10 @@
:duration 3000
:type :notification}])
(defn preview
(defn preview-notification
[]
(fn []
[rn/view
[preview/preview-container
[rn/view
{:background-color "#508485"
:flex-direction :column
@ -92,14 +93,4 @@
[^{:key :0} [notification-button-0]
^{:key :1} [notification-button-1]
^{:key :2} [notification-button-2]
^{: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}]])
^{:key :3} [notification-button-3]]]]))

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

@ -3,6 +3,7 @@
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[utils.re-frame :as rf]))
(defn toast-button
@ -85,10 +86,10 @@
:duration 3000}])}
"update above toast"]])))))
(defn preview
(defn preview-toasts
[]
(fn []
[rn/view
[preview/preview-container
[rn/view
{:background-color "#508485"
:flex-direction :column
@ -104,12 +105,3 @@
^{:key :30s-duration} [toast-button-30s-duration]
^{:key :upsert}
[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
(:require [quo2.core :as quo]
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -22,7 +21,7 @@
{:key :derivation-path
:value "Derivation Path"}]}])
(defn cool-preview
(defn preview-keyboard-key
[]
(let [state (reagent/atom {:disabled? false
:on-press #(js/alert "pressed" %)
@ -34,9 +33,9 @@
:derivation-path nil
:digit 1
nil)]
[rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
[preview/preview-container
{:state state
:descriptor descriptor}
[preview/blur-view
{:style {:flex 1
:align-self :center
@ -46,14 +45,3 @@
:blur-view-props (when (:blur? @state)
{:overlay-color colors/neutral-80-opa-80})}
[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
(:require [quo2.core :as quo]
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
@ -26,7 +25,7 @@
{:key :none
:value "None"}]}])
(defn cool-preview
(defn preview-numbered-keyboard
[]
(let [state (reagent/atom {:disabled? false
:on-press (fn [item] (js/alert (str item " pressed")))
@ -35,9 +34,9 @@
:left-action :dot})
blur? (reagent/cursor state [:blur?])]
(fn []
[rn/view
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[preview/preview-container
{:state state
:descriptor descriptor}
(when @blur?
[blur/view
{:style {:position :absolute
@ -48,14 +47,3 @@
:background-color colors/neutral-80-opa-70}
:overlay-color :transparent}])
[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
:type :text}])
(defn cool-preview
(defn preview-small-option-card
[]
(let [state (reagent/atom {:variant :main
:image (-> descriptor second :options first :key)
@ -37,22 +37,11 @@
:subtitle "Your new self-sovereign identity in Status"
:on-press #(js/alert "Small option card pressed!")})]
(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 {:flex 1}}
[preview/customizer state descriptor]]
[rn/view
{:style {:background-color colors/neutral-80
:padding 20}}
[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?
:type :boolean}])
(defn cool-preview
(defn preview-tips
[]
(let [state (reagent/atom {:text "Lower case"
:completed? false})
text (reagent/cursor state [:text])
completed? (reagent/cursor state [:completed?])]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding 60 :background-color colors/neutral-95}
[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
(:require [camel-snake-kebab.core :as camel-snake-kebab]
[clojure.string :as string]
[status-im2.contexts.quo-preview.common :as common]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.safe-area :as safe-area]
[quo2.theme :as quo.theme]
[react-native.blur :as blur]
[react-native.core :as rn]
@ -227,32 +229,37 @@
style)}]
children)])
(defn preview-container
[{:keys [state descriptor blur?
component-container-style
blur-container-style blur-view-props blur-height show-blur-background?]
:or {blur-height 200}}
& children]
[rn/scroll-view
{:style (style/panel-basic)
:shows-vertical-scroll-indicator false}
[rn/pressable {:on-press rn/dismiss-keyboard!}
(when descriptor
[rn/view {:style style/customizer-container}
[customizer state descriptor]])
(if blur?
[rn/view {:style (merge style/component-container component-container-style)}
(into [blur-view
{:show-blur-background? show-blur-background?
:height blur-height
:style (merge {:width "100%"
:flex-grow 1}
(when-not show-blur-background?
{:padding-horizontal 0
:top 0})
blur-container-style)
: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))]])
[rn/view
{:style {:top (safe-area/get-top)
:flex 1}}
[common/navigation-bar]
[rn/scroll-view
{:style (style/panel-basic)
:shows-vertical-scroll-indicator false}
[rn/pressable {:on-press rn/dismiss-keyboard!}
(when descriptor
[rn/view {:style style/customizer-container}
[customizer state descriptor]])
(if blur?
[rn/view {:style (merge style/component-container component-container-style)}
(into [blur-view
{:show-blur-background? show-blur-background?
:height blur-height
:style (merge {:width "100%"
:flex-grow 1}
(when-not show-blur-background?
{:padding-horizontal 0
:top 0})
blur-container-style)
: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
:type :boolean}])
(defn cool-preview
(defn preview-collectible
[]
(let [state (reagent/atom {:num-images 1 :shuffle-images false})]
(fn []
@ -29,22 +29,12 @@
(shuffle)
:always
(take (:num-images @state)))]
[rn/view
{:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:padding-vertical 100
:align-items :center}
[quo/collectible
{:images images-to-show
: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
:type :text}])
(defn cool-preview
(defn preview-profile-card
[]
(let [state (reagent/atom {:keycard-account? false
:name "Matt Grote"
@ -63,24 +63,12 @@
:hash "zQ3k83euenmcikw7474hfu73t5N"
:emoji-hash "😄😂🫣🍑😇🤢😻🥷🏻🦸🏻‍♀️🦸🏻🦸🏻‍♂️🦹🏻‍♀️🧑🏻‍🎄🎅🏻"})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[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?
:type :boolean}])
(defn cool-preview
(defn preview-select-profile
[]
(let [state (reagent/atom {:selected? false
:name "Alisher Yakupov"
@ -29,10 +29,10 @@
:profile-picture (resources/get-mock-image :user-picture-male5)})
selected? (reagent/cursor state [:selected?])]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:flex-direction :row
@ -40,16 +40,3 @@
:background-color colors/neutral-90
:justify-content :center}
[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
(:require [clojure.string :as string]
[quo2.components.reactions.reaction :as quo2.reaction]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.constants :as constants]
@ -21,13 +20,14 @@
:key :neutral?
:type :boolean}])
(defn cool-preview
(defn preview-react
[]
(let [state (reagent/atom {:emoji :reaction/love})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:justify-content :center
@ -35,14 +35,3 @@
:align-items :center}
[quo2.reaction/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]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[utils.re-frame :as rf]
[status-im2.common.alert.events :as alert]
[utils.i18n :as i18n]
@ -11,7 +12,7 @@
(defonce record-audio-permission-granted (reagent/atom false))
(defn cool-preview
(defn preview-record-audio
[]
(let [message (reagent/atom
"Press & hold the mic button to start recording...")
@ -40,7 +41,7 @@
:t/audio-recorder-permissions-error)))
50)}]))]
(fn []
[rn/view
[preview/preview-container
[rn/view
{:padding-top 150
:align-items :center
@ -56,13 +57,3 @@
:on-request-record-audio-permission on-request-record-audio-permission
:max-duration-ms constants/audio-max-duration-ms}]]
[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
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn]
[reagent.core :as reagent]
@ -30,16 +29,16 @@
{:style {:flex 1}
:show-blur-background? true}]]))
(defn cool-preview
(defn preview-disclaimer
[]
(let [state (reagent/atom {:checked? false
:blur? true
:text "I agree with the community rules"})]
(fn []
(let [{:keys [blur? checked? text]} @state]
[rn/view {:style {:flex 1}}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:padding-horizontal 15}}
[blur-background blur?]
[rn/view {:style {:margin-vertical 50}}
@ -50,14 +49,3 @@
text]]
[quo/button {:disabled? (not checked?)}
"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?
:type :boolean}])
(defn cool-preview
(defn preview
[]
(let [state (reagent/atom {:override-theme (theme/get-theme)
:blur? false})]
(fn []
[rn/view
{:style {:margin-bottom 50
:padding-vertical 16
:padding-horizontal 20}}
[preview/customizer state descriptor]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:style {:padding-vertical 60
:align-items :center}}
@ -43,14 +41,3 @@
(= :light (:override-theme @state))
colors/white)}}
[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?
:customization-color customization-color}]])
(defn cool-preview
(defn preview-selectors
[]
(let [state (reagent/atom {:disabled? false
:blur? false
:customization-color :blue})]
(fn []
[rn/view
[preview/customizer state descriptor]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:margin-vertical 24}}
[preview/blur-view
{:style {:width "100%"
@ -58,14 +59,3 @@
[selector-preview "Radio" quo2/radio @state]
[selector-preview "Checkbox" quo2/checkbox @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
:type :text}])
(defn cool-preview
(defn preview-accounts
[]
(let [state (reagent/atom {:customization-color :blue
:account-name "Booze for Dubai"
@ -29,10 +29,9 @@
:on-press-menu (fn []
(js/alert "Menu button pressed"))})]
(fn []
[rn/view
{:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:padding-vertical 100
:align-items :center
@ -40,12 +39,3 @@
colors/neutral-30
colors/neutral-95)}
[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)
@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
{:style {:flex 1
: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 :rarible)}])
(defn cool-preview
(defn preview-data-item
[]
(let [state (reagent/atom {:on-press #(js/alert (str "pressed"))
:blur? false
@ -75,7 +75,9 @@
:communities-list communities-list})
blur? (reagent/cursor state [:blur?])]
(fn []
[rn/view
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
(when @blur?
@ -92,14 +94,3 @@
:padding-vertical 10
:margin-horizontal 20}}
[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
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -22,7 +21,7 @@
:key :li3
:type :text}])
(defn cool-preview
(defn preview-options
[]
(let [state (reagent/atom {:selected :contacts
:header "header"
@ -36,15 +35,15 @@
list-items (->> (select-keys @state [:li1 :li2 :li3])
vals
(remove empty?))]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:margin-horizontal 20
:padding 16
:flex 1}
[rn/view {:margin-vertical 2}
[quo/text {:size :paragraph-2} "Dynamic sample"]]
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:margin-vertical 8}
[quo/privacy-option
(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"
:list-items
["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"
:override-theme :dark})}))
(defn cool-preview
(defn preview-settings-list
[]
(let [state (reagent/atom {:title "Account"
:accessibility-label :settings-list-item
@ -59,20 +59,11 @@
:chevron? true
:on-press (fn [] (js/alert "Settings list item pressed"))})]
(fn []
[rn/view
{:margin-bottom 50}
[preview/customizer state descriptor]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:padding-vertical 100
:padding-horizontal 20
:align-items :center}
[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
(:require [quo2.foundations.colors :as colors]
[react-native.core :as rn]
(:require [react-native.core :as rn]
[quo2.core :as quo]
[utils.image-server :as image-server]
[utils.re-frame :as rf]
@ -23,7 +22,7 @@
{:key :highest
:value "Highest"}]}])
(defn cool-preview
(defn preview-qr-code
[]
(let [state (reagent/atom {:text "https://status.im"
:error-correction-level :highest})
@ -36,9 +35,10 @@
:port (rf/sub [:mediaserver/port])
:error-level @error-correction-level
: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}}
[preview/customizer state descriptor]
[rn/view {:style {:flex 1}}]
[rn/view
{:style {:padding-vertical 60
@ -53,15 +53,3 @@
[rn/view
[rn/text {:style {:padding 20 :flex-shrink 1}} "Media server url -> "
@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
(:require [quo2.foundations.colors :as colors]
[react-native.core :as rn]
(:require [react-native.core :as rn]
[quo2.core :as quo]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.common.resources :as resources]
@ -15,16 +14,17 @@
:key :link-title
:type :text}])
(defn cool-preview
(defn preview-share-qr-code
[]
(let [state (reagent/atom {:info-button? true
:link-title "Link to profile"
:url "status.app/u/zQ34e1zlOdas0pKnvrweeedsasas12adjie8"})]
(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 {:flex 1}}]
[preview/customizer state descriptor]
[rn/view
{:style {:padding-vertical 60
:justify-content :center}}
@ -40,15 +40,3 @@
:url-on-long-press #(js/alert "url long pressed")
:share-on-press #(js/alert "share pressed")
: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-horizontal 16
: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}
{})))
(defn cool-preview
(defn preview-switcher-cards
[]
(let [state (reagent/atom {:type shell.constants/private-group-chat-card
:title "Alisher Yakupov"
@ -160,21 +160,11 @@
:last-message "This is fantastic! Ethereum"
:preview-label-color colors/white})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[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
(:require [quo2.components.tabs.account-selector :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -46,7 +45,7 @@
:account-emoji "🍟"
:label-text "Label 3"}])
(defn cool-preview
(defn preview-this
[]
(let [state (reagent/atom {:show-label? true
:transparent? false
@ -55,21 +54,11 @@
:account-emoji "🍑"
:label-text "Label"})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[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
(:require [quo2.components.tabs.segmented-tab :as quo2]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn]
[reagent.core :as reagent]
@ -18,15 +17,15 @@
:key :blur?
:type :boolean}])
(defn cool-preview
(defn preview-segmented
[]
(let [state (reagent/atom {:size 32
:blur? false})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[preview/blur-view
{:show-blur-background? (:blur? @state)
:height 200
@ -48,14 +47,3 @@
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}]
: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
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -28,15 +27,15 @@
:label (str "Tab " (inc index))
:notification-dot? (and unread-indicators? (zero? (rem index 2)))}))
(defn cool-preview
(defn preview-tabs
[]
(let [state (reagent/atom {:size 32
:scrollable? false})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:padding-horizontal 20
@ -52,14 +51,3 @@
{:scroll-on-press? true
:fade-end-percentage 0.4
: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
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
@ -26,7 +25,7 @@
:options [{:key 24}
{:key 32}]})
(def main-descriptor
(def descriptor
[{:label "Type"
:key :type
:type :select
@ -164,7 +163,7 @@
:key :duration
:type :text}])
(defn cool-preview
(defn preview-context-tags
[]
(let [state
(reagent/atom
@ -203,26 +202,25 @@
:context "Context"
:duration "00:32"})]
(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 {: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}}
[preview/blur-view
{:style {:flex 1
@ -230,14 +228,3 @@
:margin-horizontal 40}
:show-blur-background? (:blur? @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 6 :token-icon (resources/get-mock-image :status-logo)}]}]}])
(defn cool-preview
(defn preview-permission-tag
[]
(let [state (reagent/atom {:size 32})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:align-self :center
@ -191,16 +191,3 @@
:background-color (colors/theme-colors
colors/neutral-10
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?
:type :boolean}])
(defn cool-preview
(defn preview-status-tags
[]
(let [state (reagent/atom {:status :positive
:size :small
@ -46,24 +46,12 @@
:pending (-> @state
(assoc :status {:type :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 {:flex 1}
[preview/customizer state descriptor]]
[preview/blur-view
{:show-blur-background? (:blur? @state)
:blur-view-props {:blur-type :dark
:overlay-color colors/neutral-80-opa-80}
: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
(:require [quo.react-native :as rn]
[quo.previews.preview :as preview]
[quo2.foundations.colors :as colors]
[quo2.components.tags.tag :as tag]
[status-im.ui.components.react :as react]
[status-im2.common.resources :as resources]
[reagent.core :as reagent]))
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Size:"
@ -34,18 +34,18 @@
:key :blurred?
:type :boolean}])
(defn cool-preview
(defn preview-tag
[]
(let [state (reagent/atom {:size 32
:labelled? true
:type :emoji})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:style {:padding-bottom 150
:padding-top 60}}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:style {:flex 1
:justify-content :center
@ -84,15 +84,3 @@
:resource (if (= :emoji (:type @state))
(resources/get-image :music)
: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?
:type :boolean}])
(defn cool-preview
(defn preview-tags
[]
(let [state (reagent/atom {:size 32
:labelled? true
@ -52,12 +52,12 @@
:fade-end-percentage 0.4
:scrollable? false})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:style {:padding-bottom 150
:padding-top 60}}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
[rn/view
{:style {:flex 1
:justify-content :center
@ -101,15 +101,3 @@
(when (:scrollable? @state)
{:scroll-on-press? 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
(:require [quo2.components.tags.token-tag :as quo2]
[quo2.foundations.colors :as colors]
[quo2.foundations.resources :as resources]
[react-native.core :as rn]
[reagent.core :as reagent]
@ -44,27 +43,17 @@
(def eth-token (resources/get-token :eth))
(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})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[quo2/token-tag
(merge @state
{: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
(:require [quo2.components.text-combinations.view :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
@ -30,7 +29,7 @@
(assoc state :avatar (resources/get-mock-image :user-picture-male4))
state))
(defn cool-preview
(defn preview
[]
(let [state (reagent/atom {:title "Title"
:title-accessibility-label :title
@ -38,24 +37,12 @@
:description-props ""
:description-accessibility-label :subtitle})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[quo2/view
(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
:type :add-account}))
(defn cool-preview
(defn preview-account-card
[]
(let [state (reagent/atom (initial-state :default))]
[:f>
@ -94,8 +95,9 @@
(rn/use-effect
(fn [] (reset! state (initial-state (:type @state))))
[(:type @state)])
[rn/view
{:style {:flex 1}}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:style {:margin-vertical 40
:padding-left 40
@ -118,15 +120,3 @@
[preview/customizer state descriptor]]
[rn/view {:style {:align-items :center :margin-top 40}}
[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
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -68,7 +67,7 @@
{:key :custom
:value "Custom"}]}])
(defn cool-preview
(defn preview-account-overview
[]
(let [state (reagent/atom {:metrics :positive
:currency-change "€0.00"
@ -81,24 +80,12 @@
:account :default
:customization-color :blue})]
(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 {:flex 1}}
[preview/customizer state descriptor]]
[rn/view
{:style {:padding-vertical 60
:flex-direction :row
:justify-content :center}}
[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"})
(defn cool-preview
(defn preview
[]
(let [state (reagent/atom {:accounts accounts
:customization-color :blue
@ -91,25 +91,14 @@
:on-options-press #(js/alert "Options pressed")
:action :selector})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
[rn/view
{:style {:padding-vertical 30
:flex-direction :row
:justify-content :center}}
[quo/keypair
(merge
@state
{: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}]])
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:style {:padding-vertical 30
:flex-direction :row
:justify-content :center}}
[quo/keypair
(merge
@state
{:details (if (= (:type @state) :default-keypair) default-details other-details)})]]])))

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

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

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

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

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

@ -38,11 +38,9 @@
:source :ethereum
:destination :optimism})]
(fn []
[rn/view
{:style {:flex 1
:padding-horizontal 20}}
[rn/view {:style {:min-height 150}}
[preview/customizer state descriptor]]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:style {:flex 1
: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
:customization-color :blue})]
(fn []
[rn/view
{:style {:flex 1
:padding-horizontal 20}}
[rn/view {:style {:min-height 150}}
[preview/customizer state descriptor]]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:style {:flex 1
: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})}]
(fn []
(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
{:style {:flex 1
:padding-horizontal 20}}
[rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
[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
:conversion 0.02})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:style {:flex 1
:padding-horizontal 20}}
[rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
[rn/view
{:style {:flex 1
: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
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -42,7 +41,7 @@
{:key :negative
:value "Negative"}]}])
(defn cool-preview
(defn preview-wallet-overview
[]
(let [state (reagent/atom {:state :default
:time-frame :one-week
@ -54,24 +53,12 @@
:currency-change "€0.00"
:percentage-change "0.00%"})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[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}]])