Refactor tag preview screens to new api (#17549)
This commit is contained in:
Ajay Sivan
GitHub
parent
8296bda85b
commit
3197adf855
|
|
@ -3,7 +3,7 @@
|
|||
[clojure.string :as string]
|
||||
[quo.components.community.style :as style]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.tags.token-tag :as token-tag]
|
||||
[quo.components.tags.token-tag.view :as token-tag]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[utils.i18n :as i18n]))
|
||||
|
|
@ -14,17 +14,17 @@
|
|||
{:style (style/token-row padding?)}
|
||||
(doall
|
||||
(map-indexed (fn [token-index token]
|
||||
(let [{:keys [img-src amount sufficient? purchasable? loading?]} token]
|
||||
(let [{:keys [img-src amount sufficient? purchasable?]} token]
|
||||
^{:key token-index}
|
||||
[rn/view {:style style/token-tag-spacing}
|
||||
[token-tag/token-tag
|
||||
{:symbol (:symbol token)
|
||||
:value amount
|
||||
:size 24
|
||||
:sufficient? sufficient?
|
||||
:purchasable purchasable?
|
||||
:loading? loading?
|
||||
:img-src img-src}]]))
|
||||
[token-tag/view
|
||||
{:token-symbol (:symbol token)
|
||||
:token-value amount
|
||||
:size :size-24
|
||||
:options (cond
|
||||
sufficient? :hold
|
||||
purchasable? :add)
|
||||
:token-img-src img-src}]]))
|
||||
tokens))])
|
||||
|
||||
(defn- internal-view
|
||||
|
|
|
|||
|
|
@ -1,124 +0,0 @@
|
|||
(ns quo.components.tags.token-tag
|
||||
(:require
|
||||
[quo.components.icon :as icons]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.theme :as theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(def themes
|
||||
{:light {:background-color colors/neutral-20}
|
||||
:dark {:background-color colors/neutral-80}})
|
||||
|
||||
(defn get-value-from-size
|
||||
[size big-option small-option]
|
||||
(if (= size :big) big-option small-option))
|
||||
|
||||
(def icon-container-styles
|
||||
{:display :flex
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:position :absolute
|
||||
:border-radius 20
|
||||
:margin-left 2})
|
||||
|
||||
(defn tag-container
|
||||
[size]
|
||||
{:height (get-value-from-size size 32 24)
|
||||
:align-items :center
|
||||
:flex-direction :row
|
||||
:border-radius 20})
|
||||
|
||||
(defn tag
|
||||
"[tag opts \"label\"]]
|
||||
opts
|
||||
{
|
||||
:size :small/:big
|
||||
:token-img-src :token-img-src
|
||||
:token-img-style {}
|
||||
:border-color :color
|
||||
:overlay child-elements
|
||||
}"
|
||||
[_ _]
|
||||
(fn [{:keys [size img-src img-style border-color overlay]
|
||||
:or {size :small}}
|
||||
label]
|
||||
[rn/view
|
||||
{:style (when border-color
|
||||
{:border-color border-color
|
||||
:border-radius 20
|
||||
:border-width 1})}
|
||||
[rn/view
|
||||
{:style (merge (tag-container size) (get themes (theme/get-theme)))}
|
||||
[rn/image
|
||||
{:src img-src
|
||||
:style (merge
|
||||
{:height (get-value-from-size size 28 20)
|
||||
:width (get-value-from-size size 28 20)
|
||||
:margin-left 2
|
||||
:margin-right (get-value-from-size size 8 6)}
|
||||
img-style)}]
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:number-of-lines 1
|
||||
:style
|
||||
{:margin-right (get-value-from-size size 12 11)}
|
||||
:size (get-value-from-size size :paragraph-2 :label)} label]
|
||||
overlay]]))
|
||||
|
||||
(defn loading-icon
|
||||
[]
|
||||
[rn/view
|
||||
{:style {:align-items :center
|
||||
:justify-content :center
|
||||
:position :absolute
|
||||
:right -8
|
||||
:top -8}}
|
||||
[icons/icon :t/checktoken
|
||||
{:no-color true
|
||||
:size 20}]])
|
||||
|
||||
(defn icon
|
||||
[size border-color sufficient?]
|
||||
[rn/view
|
||||
{:style (merge
|
||||
icon-container-styles
|
||||
{:background-color border-color
|
||||
:border-color (if (= (theme/get-theme) :dark) colors/neutral-100 colors/white)
|
||||
:border-width 1
|
||||
:right (get-value-from-size size -3.75 -5.75)
|
||||
:bottom (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2))})}
|
||||
[icons/icon (if sufficient? :i/hold :i/add)
|
||||
{:no-color true
|
||||
:size 12}]])
|
||||
|
||||
(defn token-tag
|
||||
"[token-tag opts]
|
||||
opts
|
||||
{
|
||||
:symbol string
|
||||
:value string
|
||||
:size :small/:big
|
||||
:token-img-src :token-img-src
|
||||
:border-color :color
|
||||
:sufficient? true/false
|
||||
:purchasable? true/false
|
||||
:loading? true/false
|
||||
}"
|
||||
[_ _]
|
||||
(fn [{:keys [value size img-src border-color purchasable? sufficient? loading?]
|
||||
:or {size :small}
|
||||
:as props}]
|
||||
(let [sym (:symbol props)
|
||||
sufficient? (when-not loading? sufficient?)
|
||||
border-color (if sufficient? colors/success-50 border-color)]
|
||||
[tag
|
||||
{:size size
|
||||
:img-src img-src
|
||||
:border-color (if sufficient? colors/success-50 border-color)
|
||||
:overlay
|
||||
(if loading?
|
||||
[loading-icon]
|
||||
(when (or purchasable? sufficient?)
|
||||
[icon size border-color sufficient?]))}
|
||||
(str value " " sym)])))
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
(ns quo.components.tags.token-tag.style
|
||||
(:require [quo.foundations.colors :as colors]))
|
||||
|
||||
(defn container
|
||||
[size options blur? theme]
|
||||
(let [hold? (= options :hold)]
|
||||
(merge {:background-color (if blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:padding-left 2
|
||||
:border-width (if hold? 1 0)
|
||||
:border-radius 20
|
||||
:border-color (colors/theme-colors colors/success-50 colors/success-60 theme)}
|
||||
(condp = size
|
||||
:size-24 {:height (if hold? 26 24)
|
||||
:padding-right 10
|
||||
:border-radius (if hold? 13 12)}
|
||||
:size-32 {:height (if hold? 34 32)
|
||||
:padding-right 12
|
||||
:border-radius (if hold? 17 16)}))))
|
||||
|
||||
(defn options-icon
|
||||
[size]
|
||||
(assoc
|
||||
(condp = size
|
||||
:size-24 {:right -8
|
||||
:top -8}
|
||||
:size-32 {:right -6
|
||||
:top -6})
|
||||
:position
|
||||
:absolute))
|
||||
|
||||
(defn token-img
|
||||
[size]
|
||||
(condp = size
|
||||
:size-24 {:width 20
|
||||
:height 20
|
||||
:margin-right 6
|
||||
:border-radius 10}
|
||||
:size-32 {:width 28
|
||||
:height 28
|
||||
:margin-right 8
|
||||
:border-radius 14}))
|
||||
|
||||
(defn label
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-100 colors/white theme)})
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
(ns quo.components.tags.token-tag.view
|
||||
(:require
|
||||
[oops.core :refer [oget]]
|
||||
[quo.components.icon :as icons]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.tags.token-tag.style :as style]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.hole-view :as hole-view]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn- view-internal
|
||||
"Options:
|
||||
- :options - false / :add / :hold (default false)
|
||||
- :size - :size-24 / :size-32 (default :size-24)
|
||||
- :blur? - boolean (default false)
|
||||
- :theme - :light / :dark
|
||||
- :token-img-src - token image source
|
||||
- :token-value - string - token value
|
||||
- :token-symbol - string"
|
||||
[]
|
||||
(let [container-width (reagent/atom 0)]
|
||||
(fn [{:keys [options size blur? theme token-img-src token-value token-symbol]
|
||||
:or {size :size-24}}]
|
||||
[rn/view
|
||||
{:on-layout #(reset! container-width
|
||||
(oget % :nativeEvent :layout :width))}
|
||||
[hole-view/hole-view
|
||||
{:holes (if options
|
||||
[{:x (- @container-width
|
||||
(condp = size
|
||||
:size-24 10
|
||||
:size-32 12))
|
||||
:y (condp = size
|
||||
:size-24 -6
|
||||
:size-32 -4)
|
||||
:width 16
|
||||
:height 16
|
||||
:borderRadius 8}]
|
||||
[])}
|
||||
[rn/view
|
||||
{:style (style/container size options blur? theme)}
|
||||
[rn/image
|
||||
{:style (style/token-img size)
|
||||
:source token-img-src}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style (style/label theme)}
|
||||
(str token-value " " token-symbol)]]]
|
||||
(when options
|
||||
[rn/view {:style (style/options-icon size)}
|
||||
[icons/icon (if (= options :hold) :i/hold :i/add-token)
|
||||
{:size 20
|
||||
:no-color true}]])])))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
quo.components.tags.tag
|
||||
quo.components.tags.tags
|
||||
quo.components.tags.tiny-tag.view
|
||||
quo.components.tags.token-tag
|
||||
quo.components.tags.token-tag.view
|
||||
quo.components.text-combinations.view
|
||||
quo.components.wallet.account-card.view
|
||||
quo.components.wallet.account-origin.view
|
||||
|
|
@ -360,7 +360,7 @@
|
|||
(def tag quo.components.tags.tag/tag)
|
||||
(def tags quo.components.tags.tags/tags)
|
||||
(def tiny-tag quo.components.tags.tiny-tag.view/view)
|
||||
(def token-tag quo.components.tags.token-tag/tag)
|
||||
(def token-tag quo.components.tags.token-tag.view/view)
|
||||
|
||||
;;;; Text combinations
|
||||
(def text-combinations quo.components.text-combinations.view/view)
|
||||
|
|
|
|||
|
|
@ -42,8 +42,10 @@
|
|||
[:<>
|
||||
[quo/text {:style {:margin-right 4}} "Hold"]
|
||||
[quo/token-tag
|
||||
{:size :small
|
||||
:token-img-src (quo.resources/get-token :eth)} "ETH"]
|
||||
{:size :size-24
|
||||
:token-img-src (quo.resources/get-token :eth)
|
||||
:token-value 5
|
||||
:token-symbol "ETH"}]
|
||||
[quo/text {:style {:margin-left 4}} "To post"]])
|
||||
|
||||
(defn example-3
|
||||
|
|
|
|||
|
|
@ -151,6 +151,7 @@
|
|||
[status-im2.contexts.quo-preview.tags.number-tag :as number-tag]
|
||||
[status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
|
||||
[status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
|
||||
[status-im2.contexts.quo-preview.tags.tag :as tag]
|
||||
[status-im2.contexts.quo-preview.tags.tags :as tags]
|
||||
[status-im2.contexts.quo-preview.tags.tiny-tag :as tiny-tag]
|
||||
[status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
|
||||
|
|
@ -416,21 +417,23 @@
|
|||
{:name :account-selector
|
||||
:component account-selector/view}]
|
||||
:tags [{:name :context-tags
|
||||
:component context-tags/preview-context-tags}
|
||||
:component context-tags/view}
|
||||
{:name :network-tags
|
||||
:component network-tags/preview}
|
||||
:component network-tags/view}
|
||||
{:name :number-tag
|
||||
:component number-tag/preview}
|
||||
:component number-tag/view}
|
||||
{:name :permission-tag
|
||||
:component permission-tag/preview-permission-tag}
|
||||
:component permission-tag/view}
|
||||
{:name :status-tags
|
||||
:component status-tags/preview-status-tags}
|
||||
:component status-tags/view}
|
||||
{:name :tag
|
||||
:component tag/view}
|
||||
{:name :tags
|
||||
:component tags/preview-tags}
|
||||
:component tags/view}
|
||||
{:name :tiny-tag
|
||||
:component tiny-tag/preview-tiny-tag}
|
||||
{:name :token-tag
|
||||
:component token-tag/preview-token-tag}]
|
||||
:component token-tag/view}]
|
||||
:text-combinations [{:name :text-combinations
|
||||
:component text-combinations/view}]
|
||||
:wallet [{:name :account-card :component account-card/preview-account-card}
|
||||
|
|
|
|||
|
|
@ -21,15 +21,13 @@
|
|||
:value "User pic female 2"}])
|
||||
|
||||
(def size-descriptor
|
||||
{:label "Size"
|
||||
:key :size
|
||||
{:key :size
|
||||
:type :select
|
||||
:options [{:key 24}
|
||||
{:key 32}]})
|
||||
|
||||
(def descriptor
|
||||
[{:label "Type"
|
||||
:key :type
|
||||
[{:key :type
|
||||
:type :select
|
||||
:options [{:key :default}
|
||||
{:key :multiuser}
|
||||
|
|
@ -66,8 +64,7 @@
|
|||
nil
|
||||
(resources/mock-images :user-picture-female2)
|
||||
nil]]
|
||||
[{:label "users"
|
||||
:key :users
|
||||
[{:key :users
|
||||
:type :select
|
||||
:options (map (fn [idx]
|
||||
{:key (mapv (fn [picture idx-name]
|
||||
|
|
@ -81,44 +78,36 @@
|
|||
|
||||
(def group-descriptor
|
||||
[size-descriptor
|
||||
{:label "Group"
|
||||
:key :group-name
|
||||
:type :text}])
|
||||
{:key :group-name
|
||||
:type :text}])
|
||||
|
||||
(def channel-descriptor
|
||||
[size-descriptor
|
||||
{:label "Community name"
|
||||
:key :community-name
|
||||
:type :text}
|
||||
{:label "Channel name"
|
||||
:key :channel-name
|
||||
:type :text}])
|
||||
{:key :community-name
|
||||
:type :text}
|
||||
{:key :channel-name
|
||||
:type :text}])
|
||||
|
||||
(def community-descriptor
|
||||
[size-descriptor
|
||||
{:label "Community name"
|
||||
:key :community-name
|
||||
:type :text}])
|
||||
{:key :community-name
|
||||
:type :text}])
|
||||
|
||||
(def token-descriptor
|
||||
[size-descriptor
|
||||
{:label "Amount"
|
||||
:key :amount
|
||||
:type :text}
|
||||
{:label "Token name"
|
||||
:key :token-name
|
||||
:type :text}])
|
||||
{:key :amount
|
||||
:type :text}
|
||||
{:key :token-name
|
||||
:type :text}])
|
||||
|
||||
(def network-descriptor
|
||||
[size-descriptor
|
||||
{:label "Network name"
|
||||
:key :network-name
|
||||
:type :text}])
|
||||
{:key :network-name
|
||||
:type :text}])
|
||||
|
||||
(def multinetwork-descriptor
|
||||
(let [networks (cycle [(resources/mock-images :monkey) (resources/mock-images :diamond)])]
|
||||
[{:label "Networks"
|
||||
:key :networks
|
||||
[{:key :networks
|
||||
:type :select
|
||||
:options (map (fn [size]
|
||||
{:key (take size networks)
|
||||
|
|
@ -127,11 +116,9 @@
|
|||
|
||||
(def account-descriptor
|
||||
[size-descriptor
|
||||
{:label "Account name"
|
||||
:key :account-name
|
||||
:type :text}
|
||||
{:label "Emoji"
|
||||
:key :emoji
|
||||
{:key :account-name
|
||||
:type :text}
|
||||
{:key :emoji
|
||||
:type :select
|
||||
:options [{:key "🐷" :value "🐷"}
|
||||
{:key "🍇" :value "🍇"}
|
||||
|
|
@ -139,39 +126,63 @@
|
|||
|
||||
(def collectible-descriptor
|
||||
[size-descriptor
|
||||
{:label "Collectible name"
|
||||
:key :collectible-name
|
||||
:type :text}
|
||||
{:label "Collectible number"
|
||||
:key :collectible-number
|
||||
:type :text}])
|
||||
{:key :collectible-name
|
||||
:type :text}
|
||||
{:key :collectible-number
|
||||
:type :text}])
|
||||
|
||||
(def address-descriptor
|
||||
[size-descriptor])
|
||||
|
||||
(def icon-descriptor
|
||||
[size-descriptor
|
||||
{:label "Context"
|
||||
:key :context
|
||||
:type :text}
|
||||
{:label "Icon"
|
||||
:key :icon
|
||||
{:key :context
|
||||
:type :text}
|
||||
{:key :icon
|
||||
:type :select
|
||||
:options [{:key :i/placeholder :value "Placeholder"}
|
||||
{:key :i/add :value "Add"}
|
||||
{:key :i/alert :value "Alert"}]}])
|
||||
|
||||
(def audio-descriptor
|
||||
[{:label "Duration"
|
||||
:key :duration
|
||||
:type :text}])
|
||||
[{:key :duration
|
||||
:type :text}])
|
||||
|
||||
(defn preview-context-tags
|
||||
(defn f-view
|
||||
[state type]
|
||||
(rn/use-effect (fn []
|
||||
(when (#{:multiuser :multinetwork :audio} @type)
|
||||
(swap! state assoc :size 24)))
|
||||
[@type])
|
||||
[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))
|
||||
:blur-height 80
|
||||
:blur? (:blur? @state)
|
||||
:show-blur-background? true}
|
||||
[rn/view {:style {:align-items :center}}
|
||||
[quo/context-tag @state]]])
|
||||
|
||||
(defn view
|
||||
[]
|
||||
(let [state
|
||||
(reagent/atom
|
||||
{:label "Name"
|
||||
:size 32
|
||||
{:size 32
|
||||
:type :group
|
||||
:blur? false
|
||||
:state :selected
|
||||
|
|
@ -208,32 +219,4 @@
|
|||
:context "Context"
|
||||
:duration "00:32"})
|
||||
type (reagent/cursor state [:type])]
|
||||
[:f>
|
||||
(fn []
|
||||
(rn/use-effect (fn []
|
||||
(when (#{:multiuser :multinetwork :audio} @type)
|
||||
(swap! state assoc :size 24)))
|
||||
[@type])
|
||||
[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))
|
||||
:blur-height 80
|
||||
:blur? true
|
||||
:show-blur-background? (:blur? @state)}
|
||||
[rn/view {:style {:align-items :center}}
|
||||
[quo/context-tag @state]]])]))
|
||||
[:f> f-view state type]))
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
:key :blur?}])
|
||||
|
||||
|
||||
(defn preview
|
||||
(defn view
|
||||
[]
|
||||
(let [state (reagent/atom {:title "Tag"
|
||||
:status :default
|
||||
|
|
@ -46,7 +46,6 @@
|
|||
:justify-content :center
|
||||
:flex 1}}
|
||||
[quo/network-tags
|
||||
{:networks (nth community-networks (dec (:networks @state)))
|
||||
:status (:status @state)
|
||||
:title (:title @state)
|
||||
:blur? (:blur? @state)}]]])))
|
||||
(assoc @state
|
||||
:networks
|
||||
(nth community-networks (dec (:networks @state))))]]])))
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
(ns status-im2.contexts.quo-preview.tags.number-tag
|
||||
(:require
|
||||
[quo.core :as quo]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
|
|
@ -27,16 +26,16 @@
|
|||
{:key :blur?
|
||||
:type :boolean}])
|
||||
|
||||
(defn preview
|
||||
(defn view
|
||||
[]
|
||||
(let [state (reagent/atom {:type :squared
|
||||
:number "148"
|
||||
:size :size-32
|
||||
:blur? false})]
|
||||
(fn []
|
||||
[preview/preview-container {:state state :descriptor descriptor}
|
||||
[rn/view
|
||||
{:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo/number-tag @state]]])))
|
||||
[preview/preview-container
|
||||
{:state state
|
||||
:descriptor descriptor
|
||||
:blur? (:blur? @state)
|
||||
:show-blur-background? true}
|
||||
[quo/number-tag @state]])))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
(ns status-im2.contexts.quo-preview.tags.permission-tag
|
||||
(:require
|
||||
[quo.components.tags.permission-tag :as permission-tag]
|
||||
[quo.core :as quo]
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
|
|
@ -8,16 +8,14 @@
|
|||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Size:"
|
||||
:key :size
|
||||
[{:key :size
|
||||
:type :select
|
||||
:options [{:key 32
|
||||
:value "32"}
|
||||
{:key 24
|
||||
:value "24"}]}
|
||||
{:label "Locked:"
|
||||
:key :locked?
|
||||
:type :boolean}])
|
||||
{:key :locked?
|
||||
:type :boolean}])
|
||||
|
||||
(def community-tokens
|
||||
[{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}]}
|
||||
|
|
@ -168,27 +166,23 @@
|
|||
{:id 5 :token-icon (resources/get-mock-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-mock-image :status-logo)}]}]}])
|
||||
|
||||
(defn preview-permission-tag
|
||||
(defn view
|
||||
[]
|
||||
(let [state (reagent/atom {:size 32})]
|
||||
(fn []
|
||||
[preview/preview-container
|
||||
{:state state
|
||||
:descriptor descriptor}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view
|
||||
{:padding-vertical 60
|
||||
:align-self :center
|
||||
: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)})]]))]]])))
|
||||
{:state state
|
||||
:component-container-style {:margin-bottom 40}
|
||||
:descriptor descriptor}
|
||||
(when @state
|
||||
(for [{:keys [tokens]} community-tokens]
|
||||
^{:key tokens}
|
||||
[rn/view
|
||||
{:margin-top 20
|
||||
:align-self :flex-end}
|
||||
[quo/permission-tag
|
||||
(merge @state
|
||||
{:tokens tokens
|
||||
:background-color (colors/theme-colors
|
||||
colors/neutral-10
|
||||
colors/neutral-80)})]]))])))
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
(ns status-im2.contexts.quo-preview.tags.status-tags
|
||||
(:require
|
||||
[quo.components.tags.status-tags :as quo]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.core :as quo]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]
|
||||
|
|
@ -31,7 +30,7 @@
|
|||
:key :blur?
|
||||
:type :boolean}])
|
||||
|
||||
(defn preview-status-tags
|
||||
(defn view
|
||||
[]
|
||||
(let [state (reagent/atom {:status :positive
|
||||
:size :small
|
||||
|
|
@ -48,11 +47,9 @@
|
|||
(assoc :status {:type :pending})
|
||||
(assoc :label (i18n/label :t/pending))))]
|
||||
[preview/preview-container
|
||||
{:state state
|
||||
:descriptor descriptor}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[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}} [quo/status-tag props]]]]))))
|
||||
{:state state
|
||||
:show-blur-background? true
|
||||
:blur? (:blur? @state)
|
||||
:descriptor descriptor}
|
||||
[rn/view {:style {:flex-direction :row}}
|
||||
[quo/status-tag props]]]))))
|
||||
|
|
|
|||
|
|
@ -1,23 +1,18 @@
|
|||
(ns status-im2.contexts.quo-preview.tags.tag
|
||||
(:require
|
||||
[quo.components.tags.tag :as tag]
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo.core :as quo]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Size:"
|
||||
:key :size
|
||||
[{:key :size
|
||||
:type :select
|
||||
:options [{:key 32
|
||||
:value "32"}
|
||||
{:key 24
|
||||
:value "24"}]}
|
||||
{:label "Type:"
|
||||
:key :type
|
||||
{:key :type
|
||||
:type :select
|
||||
:options [{:key :emoji
|
||||
:value "Emoji"}
|
||||
|
|
@ -25,63 +20,31 @@
|
|||
:value "Icons"}
|
||||
{:key :label
|
||||
:value "Label"}]}
|
||||
{:label "Labelled:"
|
||||
:key :labelled?
|
||||
:type :boolean}
|
||||
{:label "Disabled:"
|
||||
:key :disabled?
|
||||
:type :boolean}
|
||||
{:label "Blurred background:"
|
||||
:key :blurred?
|
||||
:type :boolean}])
|
||||
{:key :labelled?
|
||||
:type :boolean}
|
||||
{:key :disabled?
|
||||
:type :boolean}
|
||||
{:key :blurred?
|
||||
:type :boolean}])
|
||||
|
||||
(defn preview-tag
|
||||
(defn view
|
||||
[]
|
||||
(let [state (reagent/atom {:size 32
|
||||
:labelled? true
|
||||
:type :emoji})]
|
||||
(fn []
|
||||
[preview/preview-container
|
||||
{:state state
|
||||
:descriptor descriptor}
|
||||
[rn/view
|
||||
{:style {:padding-bottom 150
|
||||
:padding-top 60}}
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:justify-content :center
|
||||
:top 60
|
||||
:padding-horizontal 16}}
|
||||
(when (:blurred? @state)
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:height 100}}
|
||||
[react/image
|
||||
{:source (resources/get-mock-image :community-cover)
|
||||
:style {:flex 1
|
||||
:width "100%"
|
||||
:border-radius 16}}]
|
||||
[react/blur-view
|
||||
{:flex 1
|
||||
:style {:border-radius 16
|
||||
:height 100
|
||||
:position :absolute
|
||||
:left 0
|
||||
:right 0}
|
||||
:blur-amount 20
|
||||
:overlay-color (colors/theme-colors
|
||||
colors/white-opa-70
|
||||
colors/neutral-80-opa-80)}]])
|
||||
[rn/view
|
||||
{:style {:position :absolute
|
||||
:align-self :center}}
|
||||
[tag/tag
|
||||
(merge @state
|
||||
{:id 1
|
||||
:label "Tag"
|
||||
:labelled? (if (= (:type @state) :label)
|
||||
true
|
||||
(:labelled? @state))
|
||||
:resource (if (= :emoji (:type @state))
|
||||
(resources/get-image :music)
|
||||
:i/placeholder)})]]]]])))
|
||||
{:state state
|
||||
:descriptor descriptor
|
||||
:show-blur-background? true
|
||||
:blur? (:blurred? @state)}
|
||||
[quo/tag
|
||||
(merge @state
|
||||
{:id 1
|
||||
:label "Tag"
|
||||
:labelled? (if (= (:type @state) :label)
|
||||
true
|
||||
(:labelled? @state))
|
||||
:resource (if (= :emoji (:type @state))
|
||||
(resources/get-image :music)
|
||||
:i/placeholder)})]])))
|
||||
|
|
|
|||
|
|
@ -1,23 +1,18 @@
|
|||
(ns status-im2.contexts.quo-preview.tags.tags
|
||||
(:require
|
||||
[quo.components.tags.tags :as tags]
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo.core :as quo]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Size:"
|
||||
:key :size
|
||||
[{:key :size
|
||||
:type :select
|
||||
:options [{:key 32
|
||||
:value "32"}
|
||||
{:key 24
|
||||
:value "24"}]}
|
||||
{:label "Type:"
|
||||
:key :type
|
||||
{:key :type
|
||||
:type :select
|
||||
:options [{:key :emoji
|
||||
:value "Emoji"}
|
||||
|
|
@ -25,27 +20,22 @@
|
|||
:value "Icons"}
|
||||
{:key :label
|
||||
:value "Label"}]}
|
||||
{:label "Scrollable:"
|
||||
:key :scrollable?
|
||||
:type :boolean}
|
||||
{:label "Fade Out:"
|
||||
:key :fade-end-percentage
|
||||
{:key :scrollable?
|
||||
:type :boolean}
|
||||
{:key :fade-end-percentage
|
||||
:type :select
|
||||
:options [{:key 1
|
||||
:value "1%"}
|
||||
{:key 0.4
|
||||
:value "0.4%"}]}
|
||||
{:label "Labelled:"
|
||||
:key :labelled?
|
||||
:type :boolean}
|
||||
{:label "Disabled:"
|
||||
:key :disabled?
|
||||
:type :boolean}
|
||||
{:label "Blurred background:"
|
||||
:key :blurred?
|
||||
:type :boolean}])
|
||||
{:key :labelled?
|
||||
:type :boolean}
|
||||
{:key :disabled?
|
||||
:type :boolean}
|
||||
{:key :blurred?
|
||||
:type :boolean}])
|
||||
|
||||
(defn preview-tags
|
||||
(defn view
|
||||
[]
|
||||
(let [state (reagent/atom {:size 32
|
||||
:labelled? true
|
||||
|
|
@ -54,51 +44,21 @@
|
|||
:scrollable? false})]
|
||||
(fn []
|
||||
[preview/preview-container
|
||||
{:state state
|
||||
:descriptor descriptor}
|
||||
[rn/view
|
||||
{:style {:padding-bottom 150
|
||||
:padding-top 60}}
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:justify-content :center
|
||||
:top 60
|
||||
:padding-horizontal 16}}
|
||||
(when (:blurred? @state)
|
||||
[rn/view
|
||||
{:align-items :center
|
||||
:height 100
|
||||
:border-radius 16}
|
||||
[react/image
|
||||
{:source (resources/get-mock-image :community-cover)
|
||||
:style {:flex 1
|
||||
:width "100%"
|
||||
:border-radius 16}}]
|
||||
[react/blur-view
|
||||
{:flex 1
|
||||
:style {:border-radius 16
|
||||
:height 100
|
||||
:position :absolute
|
||||
:left 0
|
||||
:right 0}
|
||||
:blur-amount 20
|
||||
:overlay-color (colors/theme-colors
|
||||
colors/white-opa-70
|
||||
colors/neutral-80-opa-80)}]])
|
||||
[rn/view
|
||||
{:style {:position :absolute
|
||||
:align-self :center}}
|
||||
[tags/tags
|
||||
(merge
|
||||
@state
|
||||
{:default-active 1
|
||||
:component :tags
|
||||
:labelled? (if (= :label (:type @state)) true (:labelled? @state))
|
||||
:data [{:id 1 :label "Music" :resource (resources/get-image :music)}
|
||||
{:id 2 :label "Lifestyle" :resource (resources/get-image :lifestyle)}
|
||||
{:id 2 :label "Podcasts" :resource (resources/get-image :podcasts)}
|
||||
{:id 2 :label "Music" :resource (resources/get-image :music)}
|
||||
{:id 3 :label "Lifestyle" :resource (resources/get-image :lifestyle)}]}
|
||||
(when (:scrollable? @state)
|
||||
{:scroll-on-press? true
|
||||
:fade-end? true}))]]]]])))
|
||||
{:state state
|
||||
:descriptor descriptor
|
||||
:blur? (:blurred? @state)
|
||||
:show-blur-background? true}
|
||||
[quo/tags
|
||||
(merge
|
||||
@state
|
||||
{:default-active 1
|
||||
:component :tags
|
||||
:labelled? (if (= :label (:type @state)) true (:labelled? @state))
|
||||
:data [{:id 1 :label "Music" :resource (resources/get-image :music)}
|
||||
{:id 2 :label "Lifestyle" :resource (resources/get-image :lifestyle)}
|
||||
{:id 2 :label "Podcasts" :resource (resources/get-image :podcasts)}
|
||||
{:id 2 :label "Music" :resource (resources/get-image :music)}
|
||||
{:id 3 :label "Lifestyle" :resource (resources/get-image :lifestyle)}]}
|
||||
(when (:scrollable? @state)
|
||||
{:scroll-on-press? true
|
||||
:fade-end? true}))]])))
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
(ns status-im2.contexts.quo-preview.tags.token-tag
|
||||
(:require
|
||||
[quo.components.tags.token-tag :as quo]
|
||||
[quo.core :as quo]
|
||||
[quo.foundations.resources :as resources]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Size:"
|
||||
:key :size
|
||||
[{:key :size
|
||||
:type :select
|
||||
:options [{:key :big
|
||||
:value "big"}
|
||||
{:key :small
|
||||
:value "small"}]}
|
||||
{:label "Value:"
|
||||
:key :value
|
||||
:options [{:key :size-24
|
||||
:value "Size 24"}
|
||||
{:key :size-32
|
||||
:value "Size 32"}]}
|
||||
{:key :token-value
|
||||
:type :select
|
||||
:options [{:key 0
|
||||
:value "0"}
|
||||
|
|
@ -27,14 +25,17 @@
|
|||
:value "1000"}
|
||||
{:key 10000
|
||||
:value "10000"}]}
|
||||
{:label "Is Sufficient:"
|
||||
:key :sufficient?
|
||||
:type :boolean}
|
||||
{:label "Is Purchasable:"
|
||||
:key :purchasable?
|
||||
:type :boolean}
|
||||
{:label "Token:"
|
||||
:key :token
|
||||
{:key :options
|
||||
:type :select
|
||||
:options [{:key false
|
||||
:value false}
|
||||
{:key :add
|
||||
:value :add}
|
||||
{:key :hold
|
||||
:value :hold}]}
|
||||
{:key :blur?
|
||||
:type :boolean}
|
||||
{:key :token-symbol
|
||||
:type :select
|
||||
:options [{:key "ETH"
|
||||
:value "ETH"}
|
||||
|
|
@ -44,17 +45,21 @@
|
|||
(def eth-token (resources/get-token :eth))
|
||||
(def snt-token (resources/get-token :snt))
|
||||
|
||||
(defn preview-token-tag
|
||||
(defn view
|
||||
[]
|
||||
(let [state (reagent/atom {:size :big :value 10 :token "ETH" :sufficient? false :purchasable? false})]
|
||||
(let [state (reagent/atom {:size :size-24
|
||||
:token-value 10
|
||||
:token-symbol "ETH"
|
||||
:options false
|
||||
:blur? false})]
|
||||
(fn []
|
||||
[preview/preview-container
|
||||
{:state state
|
||||
:descriptor descriptor}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view
|
||||
{:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo/token-tag
|
||||
(merge @state
|
||||
{:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]])))
|
||||
{:state state
|
||||
:blur? (:blur? @state)
|
||||
:show-blur-background? true
|
||||
:descriptor descriptor}
|
||||
[rn/view {:style {:align-items :center}}
|
||||
[quo/token-tag
|
||||
(assoc @state
|
||||
:token-img-src
|
||||
(if (= (get-in @state [:token-symbol]) "ETH") eth-token snt-token))]]])))
|
||||
|
|
|
|||
Loading…
Reference in New Issue