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:
parent
e582ba4169
commit
d707230b17
|
@ -146,7 +146,8 @@
|
|||
[quo/text "↓"]]]]]))))
|
||||
|
||||
(defn customizer [state descriptors]
|
||||
[rn/view {:style {:flex 1}}
|
||||
[rn/view {:style {:flex 1}
|
||||
:padding-horizontal 16}
|
||||
(doall
|
||||
(for [{:keys [key type]
|
||||
:as desc} descriptors
|
||||
|
|
|
@ -28,14 +28,14 @@
|
|||
:emoji "🍑"
|
||||
:emoji-background-color :gray})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/channel-avatar @state]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/channel-avatar @state]]]])))
|
||||
|
||||
(defn preview-channel-avatar []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white
|
||||
|
@ -44,4 +44,4 @@
|
|||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str}]])
|
||||
|
|
|
@ -29,14 +29,14 @@
|
|||
:color :purple
|
||||
:size :small})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/group-avatar @state]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/group-avatar @state]]]])))
|
||||
|
||||
(defn preview-group-avatar []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white
|
||||
|
|
|
@ -37,12 +37,12 @@
|
|||
:icon :main-icons/placeholder20
|
||||
:color :primary})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/icon-avatar @state]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/icon-avatar @state]]]])))
|
||||
|
||||
(defn preview-icon-avatar []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
|
@ -43,14 +43,14 @@
|
|||
:size :medium
|
||||
:ring? true})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/user-avatar @state]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/user-avatar @state]]]])))
|
||||
|
||||
(defn preview-user-avatar []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
|
@ -37,11 +37,11 @@
|
|||
:size :x-large
|
||||
:color :indigo})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[quo2/wallet-user-avatar @state]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[quo2/wallet-user-avatar @state]]]])))
|
||||
|
||||
(defn preview-wallet-user-avatar []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
|
@ -59,23 +59,23 @@
|
|||
above (reagent/cursor state [:above])
|
||||
icon (reagent/cursor state [:icon])]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/button (merge (dissoc @state
|
||||
:theme :before :after)
|
||||
{:on-press #(println "Hello world!")}
|
||||
(when @above
|
||||
{:above :main-icons2/placeholder})
|
||||
(when @before
|
||||
{:before :main-icons2/placeholder})
|
||||
(when @after
|
||||
{:after :main-icons2/placeholder}))
|
||||
(if @icon :main-icons2/placeholder @label)]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/button (merge (dissoc @state
|
||||
:theme :before :after)
|
||||
{:on-press #(println "Hello world!")}
|
||||
(when @above
|
||||
{:above :main-icons2/placeholder})
|
||||
(when @before
|
||||
{:before :main-icons2/placeholder})
|
||||
(when @after
|
||||
{:after :main-icons2/placeholder}))
|
||||
(if @icon :main-icons2/placeholder @label)]]]])))
|
||||
|
||||
(defn preview-button []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
|
@ -36,15 +36,16 @@
|
|||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:view-style :card-view})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50}
|
||||
[rn/view {:flex 1
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
(if (= :card-view (:view-style @state))
|
||||
[community-card-view/community-card-view-item community-data]
|
||||
[community-list-view/communities-list-view-item community-data])]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
(if (= :card-view (:view-style @state))
|
||||
[community-card-view/community-card-view-item community-data]
|
||||
[community-list-view/communities-list-view-item community-data])]]])))
|
||||
(defn preview-community-card []
|
||||
[rn/view {:background-color (colors/theme-colors colors/neutral-5
|
||||
colors/neutral-95)
|
||||
|
|
|
@ -24,12 +24,12 @@
|
|||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:value 5 :type :default})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/counter @state (:value @state)]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/counter @state (:value @state)]]]])))
|
||||
|
||||
(defn preview-counter []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
|
@ -32,11 +32,11 @@
|
|||
:increase-padding-top? true
|
||||
:blur? false})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[divider-label/divider-label @state]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[divider-label/divider-label @state]]]])))
|
||||
|
||||
(defn preview-divider-label []
|
||||
[rn/view {:background-color (colors/theme-colors
|
||||
|
@ -46,4 +46,4 @@
|
|||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str}]])
|
||||
|
|
|
@ -39,11 +39,11 @@
|
|||
(let [state (reagent/atom {:label "New messages"
|
||||
:color :primary})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[new-messages/new-messages @state]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[new-messages/new-messages @state]]]])))
|
||||
|
||||
(defn preview-new-messages []
|
||||
[rn/view {:background-color (colors/theme-colors
|
||||
|
@ -53,4 +53,4 @@
|
|||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str}]])
|
||||
|
|
|
@ -31,12 +31,12 @@
|
|||
:icon :main-icons2/placeholder
|
||||
:message "This is a message"})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/info-message @state (:message @state)]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/info-message @state (:message @state)]]]])))
|
||||
|
||||
(defn preview-info-message []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
|
@ -35,12 +35,12 @@
|
|||
closed? (reagent/cursor state [:closed?])
|
||||
on-close #(reset! closed? true)]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/information-box (merge @state {:on-close on-close}) (:message @state)]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/information-box (merge @state {:on-close on-close}) (:message @state)]]]])))
|
||||
|
||||
(defn preview-information-box []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
|
@ -35,14 +35,14 @@
|
|||
:bottom-value-bg-color colors/black
|
||||
:bottom-value-text-color colors/white})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/lowest-price @state]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/lowest-price @state]]]])))
|
||||
|
||||
(defn preview-lowest-price []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white
|
||||
|
@ -51,4 +51,4 @@
|
|||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str}]])
|
||||
|
|
|
@ -59,14 +59,14 @@
|
|||
selected-item (reagent/cursor state [:default-item])
|
||||
on-select #(reset! selected-item %)]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[text/text {:color :main} (str "Selected item: " @selected-item)]
|
||||
[quo2/dropdown (merge @state {:on-select on-select
|
||||
:items items})]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[text/text {:color :main} (str "Selected item: " @selected-item)]
|
||||
[quo2/dropdown (merge @state {:on-select on-select
|
||||
:items items})]]]])))
|
||||
|
||||
(defn preview-dropdown []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
@ -76,4 +76,4 @@
|
|||
:nestedScrollEnabled true
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str}]])
|
||||
|
|
|
@ -48,15 +48,15 @@
|
|||
:list-size 10})
|
||||
type (reagent/cursor state [:type])]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/preview-list @state
|
||||
(case @type
|
||||
:user user-list
|
||||
:photo photos-list)]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/preview-list @state
|
||||
(case @type
|
||||
:user user-list
|
||||
:photo photos-list)]]]])))
|
||||
|
||||
(defn preview-preview-lists []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
|
@ -33,12 +33,12 @@
|
|||
(defn cool-preview []
|
||||
(let [state (reagent/atom {})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[quo2/text @state
|
||||
"The quick brown fox jumped over the lazy dog."]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[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)
|
||||
|
|
|
@ -28,13 +28,13 @@
|
|||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:emoji :main-icons/love16})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2.reaction/reaction @state]
|
||||
[quo2.reaction/open-reactions-menu @state]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2.reaction/reaction @state]
|
||||
[quo2.reaction/open-reactions-menu @state]]]])))
|
||||
|
||||
(defn preview-react []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
|
@ -131,12 +131,12 @@
|
|||
:content-type :text
|
||||
:last-message "This is fantastic! Ethereum"})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[switcher-cards/card (:type @state) (get-mock-data @state)]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[switcher-cards/card (:type @state) (get-mock-data @state)]]]])))
|
||||
|
||||
(defn preview-switcher-cards []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-100)
|
||||
|
|
|
@ -53,12 +53,12 @@
|
|||
:account-emoji "🍑"
|
||||
:label-text "Label"})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/account-selector @state]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[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)
|
||||
|
|
|
@ -16,24 +16,24 @@
|
|||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:size 32})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[quo2/segmented-control (merge @state
|
||||
{:default-active 1
|
||||
:data [{:id 1 :label "Tab 1"}
|
||||
{:id 2 :label "Tab 2"}
|
||||
{:id 3 :label "Tab 3"}
|
||||
{:id 4 :label "Tab 4"}]
|
||||
:on-change #(println "Active tab" %)})]]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[quo2/segmented-control (merge @state
|
||||
{:default-active 1
|
||||
:data [{:id 1 :label "Tab 1"}
|
||||
{:id 2 :label "Tab 2"}]
|
||||
:on-change #(println "Active tab" %)})]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[quo2/segmented-control (merge @state
|
||||
{:default-active 1
|
||||
:data [{:id 1 :label "Tab 1"}
|
||||
{:id 2 :label "Tab 2"}
|
||||
{:id 3 :label "Tab 3"}
|
||||
{:id 4 :label "Tab 4"}]
|
||||
:on-change #(println "Active tab" %)})]]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[quo2/segmented-control (merge @state
|
||||
{:default-active 1
|
||||
: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)
|
||||
|
@ -41,4 +41,4 @@
|
|||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str}]])
|
||||
|
|
|
@ -16,20 +16,20 @@
|
|||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:size 32})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/tabs (merge @state
|
||||
{:default-active 1
|
||||
:data [{:id 1 :label "Tab 1"}
|
||||
{:id 2 :label "Tab 2"}
|
||||
{:id 3 :label "Tab 3"}
|
||||
{:id 4 :label "Tab 4"}]
|
||||
:on-change #(println "Active tab" %)})]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/tabs (merge @state
|
||||
{:default-active 1
|
||||
:data [{:id 1 :label "Tab 1"}
|
||||
{:id 2 :label "Tab 2"}
|
||||
{:id 3 :label "Tab 3"}
|
||||
{:id 4 :label "Tab 4"}]
|
||||
:on-change #(println "Active tab" %)})]]]])))
|
||||
|
||||
(defn preview-tabs []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
@ -37,4 +37,4 @@
|
|||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str}]])
|
||||
|
|
|
@ -58,20 +58,20 @@
|
|||
:key :contact
|
||||
:type :select
|
||||
:options contacts-public-keys})))]
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
(case (:type @state)
|
||||
:group-avatar
|
||||
[quo2/group-avatar-tag (:label @state) group-avatar-default-params]
|
||||
:public-key
|
||||
[quo2/public-key-tag {} example-pk]
|
||||
:avatar
|
||||
[quo2/user-avatar-tag {} current-username (:photo @state)])]]))))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
(case (:type @state)
|
||||
:group-avatar
|
||||
[quo2/group-avatar-tag (:label @state) group-avatar-default-params]
|
||||
:public-key
|
||||
[quo2/public-key-tag {} example-pk]
|
||||
:avatar
|
||||
[quo2/user-avatar-tag {} current-username (:photo @state)])]]]))))
|
||||
|
||||
(defn preview-context-tags []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white
|
||||
|
|
|
@ -38,43 +38,43 @@
|
|||
:labelled true
|
||||
:type :emoji})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16
|
||||
:padding-vertical 60}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:flex 1
|
||||
:justify-content :center
|
||||
:top 60}
|
||||
(when (:blurred @state)
|
||||
[rn/view {:flex 1}
|
||||
[react/view {:flex-direction :row
|
||||
:height 100}
|
||||
[react/image {:source (resources/get-image :community-cover)
|
||||
:style {:flex 1
|
||||
:height 100
|
||||
:border-radius 16}}]]
|
||||
[react/view {:flex-direction :row
|
||||
:height 100
|
||||
:position :absolute
|
||||
:left 0
|
||||
:right 0}
|
||||
[react/blur-view {:flex 1
|
||||
:style {:border-radius 16
|
||||
:height 100}
|
||||
:blur-amount 40
|
||||
:overlay-color (colors/theme-colors
|
||||
colors/white-opa-70
|
||||
colors/neutral-80-opa-80)}]]])
|
||||
[rn/scroll-view {:justify-content :center
|
||||
:align-items :center
|
||||
:position :absolute
|
||||
:padding-horizontal 10}
|
||||
[quo2.tags/tags (merge @state
|
||||
{:default-active 1
|
||||
:data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)}
|
||||
{:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)}
|
||||
{:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150
|
||||
:padding-top 60}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:flex 1
|
||||
:justify-content :center
|
||||
:top 60}
|
||||
(when (:blurred @state)
|
||||
[rn/view {:flex 1}
|
||||
[react/view {:flex-direction :row
|
||||
:height 100}
|
||||
[react/image {:source (resources/get-image :community-cover)
|
||||
:style {:flex 1
|
||||
:height 100
|
||||
:border-radius 16}}]]
|
||||
[react/view {:flex-direction :row
|
||||
:height 100
|
||||
:position :absolute
|
||||
:left 0
|
||||
:right 0}
|
||||
[react/blur-view {:flex 1
|
||||
:style {:border-radius 16
|
||||
:height 100}
|
||||
:blur-amount 40
|
||||
:overlay-color (colors/theme-colors
|
||||
colors/white-opa-70
|
||||
colors/neutral-80-opa-80)}]]])
|
||||
[rn/scroll-view {:justify-content :center
|
||||
:align-items :center
|
||||
:position :absolute
|
||||
:padding-horizontal 10}
|
||||
[quo2.tags/tags (merge @state
|
||||
{:default-active 1
|
||||
:data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)}
|
||||
{:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)}
|
||||
{:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]])))
|
||||
(defn preview-filter-tags []
|
||||
[rn/view {:flex 1
|
||||
:background-color (colors/theme-colors
|
||||
|
@ -83,4 +83,4 @@
|
|||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str}]])
|
||||
|
|
|
@ -140,22 +140,22 @@
|
|||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:size 32})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
(when @state
|
||||
(for [{:keys [tokens]} community-tokens]
|
||||
^{:key tokens}
|
||||
[rn/view {:margin-top 20
|
||||
:align-self :flex-end}
|
||||
[permission-tag/tag (merge @state
|
||||
{:tokens tokens
|
||||
:background-color (colors/theme-colors
|
||||
colors/neutral-10
|
||||
colors/neutral-80)})]]))]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
(when @state
|
||||
(for [{:keys [tokens]} community-tokens]
|
||||
^{:key tokens}
|
||||
[rn/view {:margin-top 20
|
||||
:align-self :flex-end}
|
||||
[permission-tag/tag (merge @state
|
||||
{:tokens tokens
|
||||
:background-color (colors/theme-colors
|
||||
colors/neutral-10
|
||||
colors/neutral-80)})]]))]]])))
|
||||
|
||||
(defn preview-permission-tag []
|
||||
[rn/view {:background-color (colors/theme-colors
|
||||
|
@ -165,4 +165,4 @@
|
|||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str}]])
|
||||
|
|
|
@ -33,14 +33,14 @@
|
|||
(= :positive (:status @state)) (assoc :status {:label "Positive" :type :positive})
|
||||
(= :negative (:status @state)) (assoc :status {:label "Negative" :type :negative})
|
||||
(= :pending (:status @state)) (assoc :status {:label "Pending" :type :pending}))]
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/status-tag props]]]))))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/status-tag props]]]]))))
|
||||
|
||||
(defn preview-status-tags []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white
|
||||
|
|
|
@ -53,12 +53,12 @@
|
|||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:size :big :value 10 :token "ETH" :is-required true :is-purchasable false})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[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)})]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[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)
|
||||
|
@ -66,4 +66,4 @@
|
|||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str}]])
|
||||
|
|
|
@ -36,15 +36,16 @@
|
|||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:token "ETH" :account-balance "3.00" :price "1.00" :percentage-change "-3.0" :currency :usd})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50 :padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:border :black
|
||||
:border-width 1
|
||||
:align-items :center}
|
||||
[quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
|
||||
[rn/view {:padding-vertical 25
|
||||
:align-items :center}]
|
||||
[quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]])))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:border :black
|
||||
:border-width 1
|
||||
:align-items :center}
|
||||
[quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
|
||||
[rn/view {:padding-vertical 25
|
||||
:align-items :center}]
|
||||
[quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]]])))
|
||||
|
||||
(defn preview-token-overview []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
Loading…
Reference in New Issue