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

Refactor tag preview screens to new api (#17549)

This commit is contained in:
Ajay Sivan 2023-10-25 03:19:37 -07:00 committed by GitHub
parent 8296bda85b
commit 3197adf855
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 322 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/quo/components/community/token_gating.cljs
View File

@ -3,7 +3,7 @@
[clojure.string :as string] [clojure.string :as string]
[quo.components.community.style :as style] [quo.components.community.style :as style]
[quo.components.markdown.text :as text] [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] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
@ -14,17 +14,17 @@
{:style (style/token-row padding?)} {:style (style/token-row padding?)}
(doall (doall
(map-indexed (fn [token-index token] (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} ^{:key token-index}
[rn/view {:style style/token-tag-spacing} [rn/view {:style style/token-tag-spacing}
[token-tag/token-tag [token-tag/view
{:symbol (:symbol token) {:token-symbol (:symbol token)
:value amount :token-value amount
:size 24 :size :size-24
:sufficient? sufficient? :options (cond
:purchasable purchasable? sufficient? :hold
:loading? loading? purchasable? :add)
:img-src img-src}]])) :token-img-src img-src}]]))
tokens))]) tokens))])
(defn- internal-view (defn- internal-view

124
src/quo/components/tags/token_tag.cljs
View File

@ -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)])))

49
src/quo/components/tags/token_tag/style.cljs Normal file
View File

@ -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)})

57
src/quo/components/tags/token_tag/view.cljs Normal file
View File

@ -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))

4
src/quo/core.cljs
View File

@ -132,7 +132,7 @@
quo.components.tags.tag quo.components.tags.tag
quo.components.tags.tags quo.components.tags.tags
quo.components.tags.tiny-tag.view quo.components.tags.tiny-tag.view
quo.components.tags.token-tag quo.components.tags.token-tag.view
quo.components.text-combinations.view quo.components.text-combinations.view
quo.components.wallet.account-card.view quo.components.wallet.account-card.view
quo.components.wallet.account-origin.view quo.components.wallet.account-origin.view
@ -360,7 +360,7 @@
(def tag quo.components.tags.tag/tag) (def tag quo.components.tags.tag/tag)
(def tags quo.components.tags.tags/tags) (def tags quo.components.tags.tags/tags)
(def tiny-tag quo.components.tags.tiny-tag.view/view) (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 ;;;; Text combinations
(def text-combinations quo.components.text-combinations.view/view) (def text-combinations quo.components.text-combinations.view/view)

6
src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs
View File

@ -42,8 +42,10 @@
[:<> [:<>
[quo/text {:style {:margin-right 4}} "Hold"] [quo/text {:style {:margin-right 4}} "Hold"]
[quo/token-tag [quo/token-tag
{:size :small {:size :size-24
:token-img-src (quo.resources/get-token :eth)} "ETH"] :token-img-src (quo.resources/get-token :eth)
:token-value 5
:token-symbol "ETH"}]
[quo/text {:style {:margin-left 4}} "To post"]]) [quo/text {:style {:margin-left 4}} "To post"]])
(defn example-3 (defn example-3

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

@ -151,6 +151,7 @@
[status-im2.contexts.quo-preview.tags.number-tag :as number-tag] [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.permission-tag :as permission-tag]
[status-im2.contexts.quo-preview.tags.status-tags :as status-tags] [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.tags :as tags]
[status-im2.contexts.quo-preview.tags.tiny-tag :as tiny-tag] [status-im2.contexts.quo-preview.tags.tiny-tag :as tiny-tag]
[status-im2.contexts.quo-preview.tags.token-tag :as token-tag] [status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
@ -416,21 +417,23 @@
{:name :account-selector {:name :account-selector
:component account-selector/view}] :component account-selector/view}]
:tags [{:name :context-tags :tags [{:name :context-tags
:component context-tags/preview-context-tags} :component context-tags/view}
{:name :network-tags {:name :network-tags
:component network-tags/preview} :component network-tags/view}
{:name :number-tag {:name :number-tag
:component number-tag/preview} :component number-tag/view}
{:name :permission-tag {:name :permission-tag
:component permission-tag/preview-permission-tag} :component permission-tag/view}
{:name :status-tags {:name :status-tags
:component status-tags/preview-status-tags} :component status-tags/view}
{:name :tag
:component tag/view}
{:name :tags {:name :tags
:component tags/preview-tags} :component tags/view}
{:name :tiny-tag {:name :tiny-tag
:component tiny-tag/preview-tiny-tag} :component tiny-tag/preview-tiny-tag}
{:name :token-tag {:name :token-tag
:component token-tag/preview-token-tag}] :component token-tag/view}]
:text-combinations [{:name :text-combinations :text-combinations [{:name :text-combinations
:component text-combinations/view}] :component text-combinations/view}]
:wallet [{:name :account-card :component account-card/preview-account-card} :wallet [{:name :account-card :component account-card/preview-account-card}

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

@ -21,15 +21,13 @@
:value "User pic female 2"}]) :value "User pic female 2"}])
(def size-descriptor (def size-descriptor
{:label "Size" {:key :size
:key :size
:type :select :type :select
:options [{:key 24} :options [{:key 24}
{:key 32}]}) {:key 32}]})
(def descriptor (def descriptor
[{:label "Type" [{:key :type
:key :type
:type :select :type :select
:options [{:key :default} :options [{:key :default}
{:key :multiuser} {:key :multiuser}
@ -66,8 +64,7 @@
nil nil
(resources/mock-images :user-picture-female2) (resources/mock-images :user-picture-female2)
nil]] nil]]
[{:label "users" [{:key :users
:key :users
:type :select :type :select
:options (map (fn [idx] :options (map (fn [idx]
{:key (mapv (fn [picture idx-name] {:key (mapv (fn [picture idx-name]
@ -81,44 +78,36 @@
(def group-descriptor (def group-descriptor
[size-descriptor [size-descriptor
{:label "Group" {:key :group-name
:key :group-name :type :text}])
:type :text}])
(def channel-descriptor (def channel-descriptor
[size-descriptor [size-descriptor
{:label "Community name" {:key :community-name
:key :community-name :type :text}
:type :text} {:key :channel-name
{:label "Channel name" :type :text}])
:key :channel-name
:type :text}])
(def community-descriptor (def community-descriptor
[size-descriptor [size-descriptor
{:label "Community name" {:key :community-name
:key :community-name :type :text}])
:type :text}])
(def token-descriptor (def token-descriptor
[size-descriptor [size-descriptor
{:label "Amount" {:key :amount
:key :amount :type :text}
:type :text} {:key :token-name
{:label "Token name" :type :text}])
:key :token-name
:type :text}])
(def network-descriptor (def network-descriptor
[size-descriptor [size-descriptor
{:label "Network name" {:key :network-name
:key :network-name :type :text}])
:type :text}])
(def multinetwork-descriptor (def multinetwork-descriptor
(let [networks (cycle [(resources/mock-images :monkey) (resources/mock-images :diamond)])] (let [networks (cycle [(resources/mock-images :monkey) (resources/mock-images :diamond)])]
[{:label "Networks" [{:key :networks
:key :networks
:type :select :type :select
:options (map (fn [size] :options (map (fn [size]
{:key (take size networks) {:key (take size networks)
@ -127,11 +116,9 @@
(def account-descriptor (def account-descriptor
[size-descriptor [size-descriptor
{:label "Account name" {:key :account-name
:key :account-name :type :text}
:type :text} {:key :emoji
{:label "Emoji"
:key :emoji
:type :select :type :select
:options [{:key "🐷" :value "🐷"} :options [{:key "🐷" :value "🐷"}
{:key "🍇" :value "🍇"} {:key "🍇" :value "🍇"}
@ -139,39 +126,63 @@
(def collectible-descriptor (def collectible-descriptor
[size-descriptor [size-descriptor
{:label "Collectible name" {:key :collectible-name
:key :collectible-name :type :text}
:type :text} {:key :collectible-number
{:label "Collectible number" :type :text}])
:key :collectible-number
:type :text}])
(def address-descriptor (def address-descriptor
[size-descriptor]) [size-descriptor])
(def icon-descriptor (def icon-descriptor
[size-descriptor [size-descriptor
{:label "Context" {:key :context
:key :context :type :text}
:type :text} {:key :icon
{:label "Icon"
:key :icon
:type :select :type :select
:options [{:key :i/placeholder :value "Placeholder"} :options [{:key :i/placeholder :value "Placeholder"}
{:key :i/add :value "Add"} {:key :i/add :value "Add"}
{:key :i/alert :value "Alert"}]}]) {:key :i/alert :value "Alert"}]}])
(def audio-descriptor (def audio-descriptor
[{:label "Duration" [{:key :duration
:key :duration :type :text}])
: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 (let [state
(reagent/atom (reagent/atom
{:label "Name" {:size 32
:size 32
:type :group :type :group
:blur? false :blur? false
:state :selected :state :selected
@ -208,32 +219,4 @@
:context "Context" :context "Context"
:duration "00:32"}) :duration "00:32"})
type (reagent/cursor state [:type])] type (reagent/cursor state [:type])]
[:f> [:f> f-view state type]))
(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]]])]))

9
src/status_im2/contexts/quo_preview/tags/network_tags.cljs
View File

@ -30,7 +30,7 @@
:key :blur?}]) :key :blur?}])
(defn preview (defn view
[] []
(let [state (reagent/atom {:title "Tag" (let [state (reagent/atom {:title "Tag"
:status :default :status :default
@ -46,7 +46,6 @@
:justify-content :center :justify-content :center
:flex 1}} :flex 1}}
[quo/network-tags [quo/network-tags
{:networks (nth community-networks (dec (:networks @state))) (assoc @state
:status (:status @state) :networks
:title (:title @state) (nth community-networks (dec (:networks @state))))]]])))
:blur? (:blur? @state)}]]])))

15
src/status_im2/contexts/quo_preview/tags/number_tag.cljs
View File

@ -1,7 +1,6 @@
(ns status-im2.contexts.quo-preview.tags.number-tag (ns status-im2.contexts.quo-preview.tags.number-tag
(:require (:require
[quo.core :as quo] [quo.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
@ -27,16 +26,16 @@
{:key :blur? {:key :blur?
:type :boolean}]) :type :boolean}])
(defn preview (defn view
[] []
(let [state (reagent/atom {:type :squared (let [state (reagent/atom {:type :squared
:number "148" :number "148"
:size :size-32 :size :size-32
:blur? false})] :blur? false})]
(fn [] (fn []
[preview/preview-container {:state state :descriptor descriptor} [preview/preview-container
[rn/view {:state state
{:padding-vertical 60 :descriptor descriptor
:flex-direction :row :blur? (:blur? @state)
:justify-content :center} :show-blur-background? true}
[quo/number-tag @state]]]))) [quo/number-tag @state]])))

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

@ -1,6 +1,6 @@
(ns status-im2.contexts.quo-preview.tags.permission-tag (ns status-im2.contexts.quo-preview.tags.permission-tag
(:require (:require
[quo.components.tags.permission-tag :as permission-tag] [quo.core :as quo]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -8,16 +8,14 @@
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size:" [{:key :size
:key :size
:type :select :type :select
:options [{:key 32 :options [{:key 32
:value "32"} :value "32"}
{:key 24 {:key 24
:value "24"}]} :value "24"}]}
{:label "Locked:" {:key :locked?
:key :locked? :type :boolean}])
:type :boolean}])
(def community-tokens (def community-tokens
[{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}]} [{: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 5 :token-icon (resources/get-mock-image :status-logo)}
{:id 6 :token-icon (resources/get-mock-image :status-logo)}]}]}]) {:id 6 :token-icon (resources/get-mock-image :status-logo)}]}]}])
(defn preview-permission-tag (defn view
[] []
(let [state (reagent/atom {:size 32})] (let [state (reagent/atom {:size 32})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :component-container-style {:margin-bottom 40}
[rn/view {:padding-bottom 150} :descriptor descriptor}
[rn/view (when @state
{:padding-vertical 60 (for [{:keys [tokens]} community-tokens]
:align-self :center ^{:key tokens}
:justify-content :center} [rn/view
(when @state {:margin-top 20
(for [{:keys [tokens]} community-tokens] :align-self :flex-end}
^{:key tokens} [quo/permission-tag
[rn/view (merge @state
{:margin-top 20 {:tokens tokens
:align-self :flex-end} :background-color (colors/theme-colors
[permission-tag/tag colors/neutral-10
(merge @state colors/neutral-80)})]]))])))
{:tokens tokens
:background-color (colors/theme-colors
colors/neutral-10
colors/neutral-80)})]]))]]])))

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

@ -1,7 +1,6 @@
(ns status-im2.contexts.quo-preview.tags.status-tags (ns status-im2.contexts.quo-preview.tags.status-tags
(:require (:require
[quo.components.tags.status-tags :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.quo-preview.preview :as preview]
@ -31,7 +30,7 @@
:key :blur? :key :blur?
:type :boolean}]) :type :boolean}])
(defn preview-status-tags (defn view
[] []
(let [state (reagent/atom {:status :positive (let [state (reagent/atom {:status :positive
:size :small :size :small
@ -48,11 +47,9 @@
(assoc :status {:type :pending}) (assoc :status {:type :pending})
(assoc :label (i18n/label :t/pending))))] (assoc :label (i18n/label :t/pending))))]
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :show-blur-background? true
[rn/view {:padding-bottom 150} :blur? (:blur? @state)
[preview/blur-view :descriptor descriptor}
{:show-blur-background? (:blur? @state) [rn/view {:style {:flex-direction :row}}
:blur-view-props {:blur-type :dark [quo/status-tag props]]]))))
:overlay-color colors/neutral-80-opa-80}
:style {:align-self :center}} [quo/status-tag props]]]]))))

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

@ -1,23 +1,18 @@
(ns status-im2.contexts.quo-preview.tags.tag (ns status-im2.contexts.quo-preview.tags.tag
(:require (:require
[quo.components.tags.tag :as tag] [quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.react :as react]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size:" [{:key :size
:key :size
:type :select :type :select
:options [{:key 32 :options [{:key 32
:value "32"} :value "32"}
{:key 24 {:key 24
:value "24"}]} :value "24"}]}
{:label "Type:" {:key :type
:key :type
:type :select :type :select
:options [{:key :emoji :options [{:key :emoji
:value "Emoji"} :value "Emoji"}
@ -25,63 +20,31 @@
:value "Icons"} :value "Icons"}
{:key :label {:key :label
:value "Label"}]} :value "Label"}]}
{:label "Labelled:" {:key :labelled?
:key :labelled? :type :boolean}
:type :boolean} {:key :disabled?
{:label "Disabled:" :type :boolean}
:key :disabled? {:key :blurred?
:type :boolean} :type :boolean}])
{:label "Blurred background:"
:key :blurred?
:type :boolean}])
(defn preview-tag (defn view
[] []
(let [state (reagent/atom {:size 32 (let [state (reagent/atom {:size 32
:labelled? true :labelled? true
:type :emoji})] :type :emoji})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view :show-blur-background? true
{:style {:padding-bottom 150 :blur? (:blurred? @state)}
:padding-top 60}} [quo/tag
[rn/view (merge @state
{:style {:flex 1 {:id 1
:justify-content :center :label "Tag"
:top 60 :labelled? (if (= (:type @state) :label)
:padding-horizontal 16}} true
(when (:blurred? @state) (:labelled? @state))
[rn/view :resource (if (= :emoji (:type @state))
{:style {:flex 1 (resources/get-image :music)
:height 100}} :i/placeholder)})]])))
[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)})]]]]])))

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

@ -1,23 +1,18 @@
(ns status-im2.contexts.quo-preview.tags.tags (ns status-im2.contexts.quo-preview.tags.tags
(:require (:require
[quo.components.tags.tags :as tags] [quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.react :as react]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size:" [{:key :size
:key :size
:type :select :type :select
:options [{:key 32 :options [{:key 32
:value "32"} :value "32"}
{:key 24 {:key 24
:value "24"}]} :value "24"}]}
{:label "Type:" {:key :type
:key :type
:type :select :type :select
:options [{:key :emoji :options [{:key :emoji
:value "Emoji"} :value "Emoji"}
@ -25,27 +20,22 @@
:value "Icons"} :value "Icons"}
{:key :label {:key :label
:value "Label"}]} :value "Label"}]}
{:label "Scrollable:" {:key :scrollable?
:key :scrollable? :type :boolean}
:type :boolean} {:key :fade-end-percentage
{:label "Fade Out:"
:key :fade-end-percentage
:type :select :type :select
:options [{:key 1 :options [{:key 1
:value "1%"} :value "1%"}
{:key 0.4 {:key 0.4
:value "0.4%"}]} :value "0.4%"}]}
{:label "Labelled:" {:key :labelled?
:key :labelled? :type :boolean}
:type :boolean} {:key :disabled?
{:label "Disabled:" :type :boolean}
:key :disabled? {:key :blurred?
:type :boolean} :type :boolean}])
{:label "Blurred background:"
:key :blurred?
:type :boolean}])
(defn preview-tags (defn view
[] []
(let [state (reagent/atom {:size 32 (let [state (reagent/atom {:size 32
:labelled? true :labelled? true
@ -54,51 +44,21 @@
:scrollable? false})] :scrollable? false})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view :blur? (:blurred? @state)
{:style {:padding-bottom 150 :show-blur-background? true}
:padding-top 60}} [quo/tags
[rn/view (merge
{:style {:flex 1 @state
:justify-content :center {:default-active 1
:top 60 :component :tags
:padding-horizontal 16}} :labelled? (if (= :label (:type @state)) true (:labelled? @state))
(when (:blurred? @state) :data [{:id 1 :label "Music" :resource (resources/get-image :music)}
[rn/view {:id 2 :label "Lifestyle" :resource (resources/get-image :lifestyle)}
{:align-items :center {:id 2 :label "Podcasts" :resource (resources/get-image :podcasts)}
:height 100 {:id 2 :label "Music" :resource (resources/get-image :music)}
:border-radius 16} {:id 3 :label "Lifestyle" :resource (resources/get-image :lifestyle)}]}
[react/image (when (:scrollable? @state)
{:source (resources/get-mock-image :community-cover) {:scroll-on-press? true
:style {:flex 1 :fade-end? true}))]])))
: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}))]]]]])))

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

@ -1,21 +1,19 @@
(ns status-im2.contexts.quo-preview.tags.token-tag (ns status-im2.contexts.quo-preview.tags.token-tag
(:require (:require
[quo.components.tags.token-tag :as quo] [quo.core :as quo]
[quo.foundations.resources :as resources] [quo.foundations.resources :as resources]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size:" [{:key :size
:key :size
:type :select :type :select
:options [{:key :big :options [{:key :size-24
:value "big"} :value "Size 24"}
{:key :small {:key :size-32
:value "small"}]} :value "Size 32"}]}
{:label "Value:" {:key :token-value
:key :value
:type :select :type :select
:options [{:key 0 :options [{:key 0
:value "0"} :value "0"}
@ -27,14 +25,17 @@
:value "1000"} :value "1000"}
{:key 10000 {:key 10000
:value "10000"}]} :value "10000"}]}
{:label "Is Sufficient:" {:key :options
:key :sufficient? :type :select
:type :boolean} :options [{:key false
{:label "Is Purchasable:" :value false}
:key :purchasable? {:key :add
:type :boolean} :value :add}
{:label "Token:" {:key :hold
:key :token :value :hold}]}
{:key :blur?
:type :boolean}
{:key :token-symbol
:type :select :type :select
:options [{:key "ETH" :options [{:key "ETH"
:value "ETH"} :value "ETH"}
@ -44,17 +45,21 @@
(def eth-token (resources/get-token :eth)) (def eth-token (resources/get-token :eth))
(def snt-token (resources/get-token :snt)) (def snt-token (resources/get-token :snt))
(defn 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 [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :blur? (:blur? @state)
[rn/view {:padding-bottom 150} :show-blur-background? true
[rn/view :descriptor descriptor}
{:padding-vertical 60 [rn/view {:style {:align-items :center}}
:align-items :center} [quo/token-tag
[quo/token-tag (assoc @state
(merge @state :token-img-src
{:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]]))) (if (= (get-in @state [:token-symbol]) "ETH") eth-token snt-token))]]])))