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

dismiss keyboard inside quo2 screen on pressing outside (#14055) 

also, fixes New component preview area isn't using the full width available (#13913)
This commit is contained in:
Parvesh Monu 2022-09-22 18:25:01 +05:30 committed by GitHub
parent e582ba4169
commit d707230b17
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 275 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/quo/previews/preview.cljs
View File

@ -146,7 +146,8 @@
[quo/text "↓"]]]]])))) [quo/text "↓"]]]]]))))
(defn customizer [state descriptors] (defn customizer [state descriptors]
[rn/view {:style {:flex 1}} [rn/view {:style {:flex 1}
:padding-horizontal 16}
(doall (doall
(for [{:keys [key type] (for [{:keys [key type]
:as desc} descriptors :as desc} descriptors

16
src/quo2/screens/avatars/channel_avatar.cljs
View File

@ -28,14 +28,14 @@
:emoji "🍑" :emoji "🍑"
:emoji-background-color :gray})] :emoji-background-color :gray})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center}
[quo2/channel-avatar @state]]]))) [quo2/channel-avatar @state]]]])))
(defn preview-channel-avatar [] (defn preview-channel-avatar []
[rn/view {:background-color (colors/theme-colors colors/white [rn/view {:background-color (colors/theme-colors colors/white

16
src/quo2/screens/avatars/group_avatar.cljs
View File

@ -29,14 +29,14 @@
:color :purple :color :purple
:size :small})] :size :small})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center}
[quo2/group-avatar @state]]]))) [quo2/group-avatar @state]]]])))
(defn preview-group-avatar [] (defn preview-group-avatar []
[rn/view {:background-color (colors/theme-colors colors/white [rn/view {:background-color (colors/theme-colors colors/white

12
src/quo2/screens/avatars/icon_avatar.cljs
View File

@ -37,12 +37,12 @@
:icon :main-icons/placeholder20 :icon :main-icons/placeholder20
:color :primary})] :color :primary})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/icon-avatar @state]]]))) [quo2/icon-avatar @state]]]])))
(defn preview-icon-avatar [] (defn preview-icon-avatar []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

16
src/quo2/screens/avatars/user_avatar.cljs
View File

@ -43,14 +43,14 @@
:size :medium :size :medium
:ring? true})] :ring? true})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center}
[quo2/user-avatar @state]]]))) [quo2/user-avatar @state]]]])))
(defn preview-user-avatar [] (defn preview-user-avatar []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

10
src/quo2/screens/avatars/wallet_user_avatar.cljs
View File

@ -37,11 +37,11 @@
:size :x-large :size :x-large
:color :indigo})] :color :indigo})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60} [rn/view {:padding-vertical 60}
[quo2/wallet-user-avatar @state]]]))) [quo2/wallet-user-avatar @state]]]])))
(defn preview-wallet-user-avatar [] (defn preview-wallet-user-avatar []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

34
src/quo2/screens/buttons/button.cljs
View File

@ -59,23 +59,23 @@
above (reagent/cursor state [:above]) above (reagent/cursor state [:above])
icon (reagent/cursor state [:icon])] icon (reagent/cursor state [:icon])]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center}
[quo2/button (merge (dissoc @state [quo2/button (merge (dissoc @state
:theme :before :after) :theme :before :after)
{:on-press #(println "Hello world!")} {:on-press #(println "Hello world!")}
(when @above (when @above
{:above :main-icons2/placeholder}) {:above :main-icons2/placeholder})
(when @before (when @before
{:before :main-icons2/placeholder}) {:before :main-icons2/placeholder})
(when @after (when @after
{:after :main-icons2/placeholder})) {:after :main-icons2/placeholder}))
(if @icon :main-icons2/placeholder @label)]]]))) (if @icon :main-icons2/placeholder @label)]]]])))
(defn preview-button [] (defn preview-button []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

19
src/quo2/screens/community/community_card_view.cljs
View File

@ -36,15 +36,16 @@
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:view-style :card-view})] (let [state (reagent/atom {:view-style :card-view})]
(fn [] (fn []
[rn/view {:margin-bottom 50} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:flex 1 [rn/view {:padding-bottom 150}
:padding 16} [rn/view {:flex 1
[preview/customizer state descriptor]] :padding 16}
[rn/view {:padding-vertical 60 [preview/customizer state descriptor]]
:justify-content :center} [rn/view {:padding-vertical 60
(if (= :card-view (:view-style @state)) :justify-content :center}
[community-card-view/community-card-view-item community-data] (if (= :card-view (:view-style @state))
[community-list-view/communities-list-view-item community-data])]]))) [community-card-view/community-card-view-item community-data]
[community-list-view/communities-list-view-item community-data])]]])))
(defn preview-community-card [] (defn preview-community-card []
[rn/view {:background-color (colors/theme-colors colors/neutral-5 [rn/view {:background-color (colors/theme-colors colors/neutral-5
colors/neutral-95) colors/neutral-95)

12
src/quo2/screens/counter/counter.cljs
View File

@ -24,12 +24,12 @@
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:value 5 :type :default})] (let [state (reagent/atom {:value 5 :type :default})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/counter @state (:value @state)]]]))) [quo2/counter @state (:value @state)]]]])))
(defn preview-counter [] (defn preview-counter []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

10
src/quo2/screens/dividers/divider_label.cljs
View File

@ -32,11 +32,11 @@
:increase-padding-top? true :increase-padding-top? true
:blur? false})] :blur? false})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60} [rn/view {:padding-vertical 60}
[divider-label/divider-label @state]]]))) [divider-label/divider-label @state]]]])))
(defn preview-divider-label [] (defn preview-divider-label []
[rn/view {:background-color (colors/theme-colors [rn/view {:background-color (colors/theme-colors

10
src/quo2/screens/dividers/new_messages.cljs
View File

@ -39,11 +39,11 @@
(let [state (reagent/atom {:label "New messages" (let [state (reagent/atom {:label "New messages"
:color :primary})] :color :primary})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60} [rn/view {:padding-vertical 60}
[new-messages/new-messages @state]]]))) [new-messages/new-messages @state]]]])))
(defn preview-new-messages [] (defn preview-new-messages []
[rn/view {:background-color (colors/theme-colors [rn/view {:background-color (colors/theme-colors

12
src/quo2/screens/info/info_message.cljs
View File

@ -31,12 +31,12 @@
:icon :main-icons2/placeholder :icon :main-icons2/placeholder
:message "This is a message"})] :message "This is a message"})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/info-message @state (:message @state)]]]))) [quo2/info-message @state (:message @state)]]]])))
(defn preview-info-message [] (defn preview-info-message []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

12
src/quo2/screens/info/information_box.cljs
View File

@ -35,12 +35,12 @@
closed? (reagent/cursor state [:closed?]) closed? (reagent/cursor state [:closed?])
on-close #(reset! closed? true)] on-close #(reset! closed? true)]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/information-box (merge @state {:on-close on-close}) (:message @state)]]]))) [quo2/information-box (merge @state {:on-close on-close}) (:message @state)]]]])))
(defn preview-information-box [] (defn preview-information-box []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

16
src/quo2/screens/info/lowest_price.cljs
View File

@ -35,14 +35,14 @@
:bottom-value-bg-color colors/black :bottom-value-bg-color colors/black
:bottom-value-text-color colors/white})] :bottom-value-text-color colors/white})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center}
[quo2/lowest-price @state]]]))) [quo2/lowest-price @state]]]])))
(defn preview-lowest-price [] (defn preview-lowest-price []
[rn/view {:background-color (colors/theme-colors colors/white [rn/view {:background-color (colors/theme-colors colors/white

16
src/quo2/screens/list_items/dropdown.cljs
View File

@ -59,14 +59,14 @@
selected-item (reagent/cursor state [:default-item]) selected-item (reagent/cursor state [:default-item])
on-select #(reset! selected-item %)] on-select #(reset! selected-item %)]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[text/text {:color :main} (str "Selected item: " @selected-item)] [text/text {:color :main} (str "Selected item: " @selected-item)]
[quo2/dropdown (merge @state {:on-select on-select [quo2/dropdown (merge @state {:on-select on-select
:items items})]]]))) :items items})]]]])))
(defn preview-dropdown [] (defn preview-dropdown []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

18
src/quo2/screens/list_items/preview_lists.cljs
View File

@ -48,15 +48,15 @@
:list-size 10}) :list-size 10})
type (reagent/cursor state [:type])] type (reagent/cursor state [:type])]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/preview-list @state [quo2/preview-list @state
(case @type (case @type
:user user-list :user user-list
:photo photos-list)]]]))) :photo photos-list)]]]])))
(defn preview-preview-lists [] (defn preview-preview-lists []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

12
src/quo2/screens/markdown/text.cljs
View File

@ -33,12 +33,12 @@
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {})] (let [state (reagent/atom {})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [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 [] (defn preview-text []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

14
src/quo2/screens/reactions/react.cljs
View File

@ -28,13 +28,13 @@
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:emoji :main-icons/love16})] (let [state (reagent/atom {:emoji :main-icons/love16})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2.reaction/reaction @state] [quo2.reaction/reaction @state]
[quo2.reaction/open-reactions-menu @state]]]))) [quo2.reaction/open-reactions-menu @state]]]])))
(defn preview-react [] (defn preview-react []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

12
src/quo2/screens/switcher/switcher_cards.cljs
View File

@ -131,12 +131,12 @@
:content-type :text :content-type :text
:last-message "This is fantastic! Ethereum"})] :last-message "This is fantastic! Ethereum"})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[switcher-cards/card (:type @state) (get-mock-data @state)]]]))) [switcher-cards/card (:type @state) (get-mock-data @state)]]]])))
(defn preview-switcher-cards [] (defn preview-switcher-cards []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-100) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-100)

12
src/quo2/screens/tabs/account_selector.cljs
View File

@ -53,12 +53,12 @@
:account-emoji "🍑" :account-emoji "🍑"
:label-text "Label"})] :label-text "Label"})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/account-selector @state]]]))) [quo2/account-selector @state]]]])))
(defn preview-this [] (defn preview-this []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

36
src/quo2/screens/tabs/segmented_tab.cljs
View File

@ -16,24 +16,24 @@
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:size 32})] (let [state (reagent/atom {:size 32})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60} [rn/view {:padding-vertical 60}
[quo2/segmented-control (merge @state [quo2/segmented-control (merge @state
{:default-active 1 {:default-active 1
:data [{:id 1 :label "Tab 1"} :data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"} {:id 2 :label "Tab 2"}
{:id 3 :label "Tab 3"} {:id 3 :label "Tab 3"}
{:id 4 :label "Tab 4"}] {:id 4 :label "Tab 4"}]
:on-change #(println "Active tab" %)})]] :on-change #(println "Active tab" %)})]]
[rn/view {:padding-vertical 60} [rn/view {:padding-vertical 60}
[quo2/segmented-control (merge @state [quo2/segmented-control (merge @state
{:default-active 1 {:default-active 1
: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 [] (defn preview-segmented []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

28
src/quo2/screens/tabs/tabs.cljs
View File

@ -16,20 +16,20 @@
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:size 32})] (let [state (reagent/atom {:size 32})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center}
[quo2/tabs (merge @state [quo2/tabs (merge @state
{:default-active 1 {:default-active 1
:data [{:id 1 :label "Tab 1"} :data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"} {:id 2 :label "Tab 2"}
{:id 3 :label "Tab 3"} {:id 3 :label "Tab 3"}
{:id 4 :label "Tab 4"}] {:id 4 :label "Tab 4"}]
:on-change #(println "Active tab" %)})]]]))) :on-change #(println "Active tab" %)})]]]])))
(defn preview-tabs [] (defn preview-tabs []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

28
src/quo2/screens/tags/context_tags.cljs
View File

@ -58,20 +58,20 @@
:key :contact :key :contact
:type :select :type :select
:options contacts-public-keys})))] :options contacts-public-keys})))]
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center}
(case (:type @state) (case (:type @state)
:group-avatar :group-avatar
[quo2/group-avatar-tag (:label @state) group-avatar-default-params] [quo2/group-avatar-tag (:label @state) group-avatar-default-params]
:public-key :public-key
[quo2/public-key-tag {} example-pk] [quo2/public-key-tag {} example-pk]
:avatar :avatar
[quo2/user-avatar-tag {} current-username (:photo @state)])]])))) [quo2/user-avatar-tag {} current-username (:photo @state)])]]]))))
(defn preview-context-tags [] (defn preview-context-tags []
[rn/view {:background-color (colors/theme-colors colors/white [rn/view {:background-color (colors/theme-colors colors/white

74
src/quo2/screens/tags/filter_tags.cljs
View File

@ -38,43 +38,43 @@
:labelled true :labelled true
:type :emoji})] :type :emoji})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16 [rn/view {:padding-bottom 150
:padding-vertical 60} :padding-top 60}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:flex 1 [rn/view {:flex 1
:justify-content :center :justify-content :center
:top 60} :top 60}
(when (:blurred @state) (when (:blurred @state)
[rn/view {:flex 1} [rn/view {:flex 1}
[react/view {:flex-direction :row [react/view {:flex-direction :row
:height 100} :height 100}
[react/image {:source (resources/get-image :community-cover) [react/image {:source (resources/get-image :community-cover)
:style {:flex 1 :style {:flex 1
:height 100 :height 100
:border-radius 16}}]] :border-radius 16}}]]
[react/view {:flex-direction :row [react/view {:flex-direction :row
:height 100 :height 100
:position :absolute :position :absolute
:left 0 :left 0
:right 0} :right 0}
[react/blur-view {:flex 1 [react/blur-view {:flex 1
:style {:border-radius 16 :style {:border-radius 16
:height 100} :height 100}
:blur-amount 40 :blur-amount 40
:overlay-color (colors/theme-colors :overlay-color (colors/theme-colors
colors/white-opa-70 colors/white-opa-70
colors/neutral-80-opa-80)}]]]) colors/neutral-80-opa-80)}]]])
[rn/scroll-view {:justify-content :center [rn/scroll-view {:justify-content :center
:align-items :center :align-items :center
:position :absolute :position :absolute
:padding-horizontal 10} :padding-horizontal 10}
[quo2.tags/tags (merge @state [quo2.tags/tags (merge @state
{:default-active 1 {:default-active 1
:data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)} :data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)}
{:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)} {:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)}
{:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]))) {:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]])))
(defn preview-filter-tags [] (defn preview-filter-tags []
[rn/view {:flex 1 [rn/view {:flex 1
:background-color (colors/theme-colors :background-color (colors/theme-colors

32
src/quo2/screens/tags/permission_tag.cljs
View File

@ -140,22 +140,22 @@
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:size 32})] (let [state (reagent/atom {:size 32})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:justify-content :center} :justify-content :center}
(when @state (when @state
(for [{:keys [tokens]} community-tokens] (for [{:keys [tokens]} community-tokens]
^{:key tokens} ^{:key tokens}
[rn/view {:margin-top 20 [rn/view {:margin-top 20
:align-self :flex-end} :align-self :flex-end}
[permission-tag/tag (merge @state [permission-tag/tag (merge @state
{:tokens tokens {:tokens tokens
: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 [] (defn preview-permission-tag []
[rn/view {:background-color (colors/theme-colors [rn/view {:background-color (colors/theme-colors

16
src/quo2/screens/tags/status_tags.cljs
View File

@ -33,14 +33,14 @@
(= :positive (:status @state)) (assoc :status {:label "Positive" :type :positive}) (= :positive (:status @state)) (assoc :status {:label "Positive" :type :positive})
(= :negative (:status @state)) (assoc :status {:label "Negative" :type :negative}) (= :negative (:status @state)) (assoc :status {:label "Negative" :type :negative})
(= :pending (:status @state)) (assoc :status {:label "Pending" :type :pending}))] (= :pending (:status @state)) (assoc :status {:label "Pending" :type :pending}))]
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center}
[quo2/status-tag props]]])))) [quo2/status-tag props]]]]))))
(defn preview-status-tags [] (defn preview-status-tags []
[rn/view {:background-color (colors/theme-colors colors/white [rn/view {:background-color (colors/theme-colors colors/white

12
src/quo2/screens/tags/token_tag.cljs
View File

@ -53,12 +53,12 @@
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:size :big :value 10 :token "ETH" :is-required true :is-purchasable false})] (let [state (reagent/atom {:size :big :value 10 :token "ETH" :is-required true :is-purchasable false})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:padding 16} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/token-tag (merge @state {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]))) [quo2/token-tag (merge @state {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]])))
(defn preview-token-tag [] (defn preview-token-tag []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

19
src/quo2/screens/wallet/token_overview.cljs
View File

@ -36,15 +36,16 @@
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:token "ETH" :account-balance "3.00" :price "1.00" :percentage-change "-3.0" :currency :usd})] (let [state (reagent/atom {:token "ETH" :account-balance "3.00" :price "1.00" :percentage-change "-3.0" :currency :usd})]
(fn [] (fn []
[rn/view {:margin-bottom 50 :padding 16} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[preview/customizer state descriptor] [rn/view {:padding-bottom 150}
[rn/view {:border :black [preview/customizer state descriptor]
:border-width 1 [rn/view {:border :black
:align-items :center} :border-width 1
[quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))] :align-items :center}
[rn/view {:padding-vertical 25 [quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
:align-items :center}] [rn/view {:padding-vertical 25
[quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]]))) :align-items :center}]
[quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]]])))
(defn preview-token-overview [] (defn preview-token-overview []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)