diff --git a/src/quo/components/tags/collectible_tag/style.cljs b/src/quo/components/tags/collectible_tag/style.cljs new file mode 100644 index 0000000000..37fddc472a --- /dev/null +++ b/src/quo/components/tags/collectible_tag/style.cljs @@ -0,0 +1,50 @@ +(ns quo.components.tags.collectible-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 0 + :border-color (colors/resolve-color :success theme)} + (condp = size + :size-24 {:height (if hold? 26 24) + :padding-right 10 + :border-radius 8} + :size-32 {:height (if hold? 34 32) + :padding-right 12 + :border-radius 10})))) + +(defn options-icon + [size] + (assoc + (condp = size + :size-24 {:right -8 + :top -8} + :size-32 {:right -6 + :top -6}) + :position + :absolute)) + +(defn collectible-img + [size] + (condp = size + :size-24 {:width 20 + :height 20 + :margin-right 6 + :border-radius 6} + :size-32 {:width 28 + :height 28 + :margin-right 8 + :border-radius 8})) + +(defn label + [theme] + {:color (colors/theme-colors colors/neutral-100 colors/white theme)}) diff --git a/src/quo/components/tags/collectible_tag/view.cljs b/src/quo/components/tags/collectible_tag/view.cljs new file mode 100644 index 0000000000..da2613271f --- /dev/null +++ b/src/quo/components/tags/collectible_tag/view.cljs @@ -0,0 +1,70 @@ +(ns quo.components.tags.collectible-tag.view + (:require + [quo.components.icon :as icons] + [quo.components.markdown.text :as text] + [quo.components.tags.collectible-tag.style :as style] + [quo.theme] + [react-native.core :as rn] + [react-native.hole-view :as hole-view] + [schema.core :as schema])) + +(def ?schema + [:=> + [:catn + [:props + [:map {:closed true} + [:options {:optional true} [:maybe [:enum false :add :hold]]] + [:size {:optional true} [:enum :size-24 :size-32]] + [:blur? {:optional true} :boolean] + [:theme :schema.common/theme] + [:collectible-img-src [:or :int :string]] + [:collectible-name :string] + [:collectible-id :string] + [:container-width :number] + [:on-layout {:optional true} [:maybe fn?]]]]] + :any]) + +(defn- view-internal + [] + (fn [{:keys [options size blur? theme collectible-img-src collectible-name collectible-id + container-width on-layout] + :or {size :size-24}}] + [rn/view + {:on-layout on-layout} + [hole-view/hole-view + {:holes (if options + [{:x (- container-width + (case size + :size-24 10 + :size-32 12 + nil)) + :y (case size + :size-24 -6 + :size-32 -4 + nil) + :width 16 + :height 16 + :borderRadius 8}] + [])} + [rn/view {:style (style/container size options blur? theme)} + [rn/image {:style (style/collectible-img size) :source collectible-img-src}] + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/label theme)} + collectible-name] + [text/text + {:size :paragraph-2 + :weight :medium + :margin-left 5 + :style (style/label theme)} + collectible-id]]] + (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 + (schema/instrument #'view-internal ?schema))) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 1f11134770..c0a5286065 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -135,6 +135,7 @@ quo.components.tabs.account-selector quo.components.tabs.segmented-tab quo.components.tabs.tabs.view + quo.components.tags.collectible-tag.view quo.components.tags.context-tag.view quo.components.tags.network-tags.view quo.components.tags.number-tag.view @@ -387,6 +388,7 @@ (def account-selector quo.components.tabs.account-selector/account-selector) ;;;; Tags +(def collectible-tag quo.components.tags.collectible-tag.view/view) (def context-tag quo.components.tags.context-tag.view/view) (def network-tags quo.components.tags.network-tags.view/view) (def number-tag quo.components.tags.number-tag.view/view) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index e73012254c..d79cb88f40 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -158,6 +158,7 @@ [status-im.contexts.preview.quo.tabs.account-selector :as account-selector] [status-im.contexts.preview.quo.tabs.segmented-tab :as segmented] [status-im.contexts.preview.quo.tabs.tabs :as tabs] + [status-im.contexts.preview.quo.tags.collectible-tag :as collectible-tag] [status-im.contexts.preview.quo.tags.context-tags :as context-tags] [status-im.contexts.preview.quo.tags.network-tags :as network-tags] [status-im.contexts.preview.quo.tags.number-tag :as number-tag] @@ -457,7 +458,9 @@ :component tabs/view} {:name :account-selector :component account-selector/view}] - :tags [{:name :context-tags + :tags [{:name :collectible-tag + :component collectible-tag/view} + {:name :context-tags :component context-tags/view} {:name :network-tags :component network-tags/view} diff --git a/src/status_im/contexts/preview/quo/tags/collectible_tag.cljs b/src/status_im/contexts/preview/quo/tags/collectible_tag.cljs new file mode 100644 index 0000000000..3bc1b064cf --- /dev/null +++ b/src/status_im/contexts/preview/quo/tags/collectible_tag.cljs @@ -0,0 +1,51 @@ +(ns status-im.contexts.preview.quo.tags.collectible-tag + (:require + [oops.core :refer [oget]] + [quo.core :as quo] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im.common.resources :as resources] + [status-im.contexts.preview.quo.preview :as preview])) + +(def descriptor + [{:key :size + :type :select + :options [{:key :size-24 + :value "Size 24"} + {:key :size-32 + :value "Size 32"}]} + {:key :options + :type :select + :options [{:key false + :value false} + {:key :add + :value :add} + {:key :hold + :value :hold}]} + {:key :blur? + :type :boolean} + {:key :collectible-name + :type :text} + {:key :collectible-id + :type :text}]) + +(defn view + [] + (let [state (reagent/atom {:size :size-24 + :collectible-name "Collectible" + :collectible-id "#123" + :collectible-img-src (resources/mock-images :collectible) + :options false + :blur? false + :container-width 0}) + on-layout #(swap! state assoc + :container-width + (oget % :nativeEvent :layout :width))] + (fn [] + [preview/preview-container + {:state state + :blur? (:blur? @state) + :show-blur-background? true + :descriptor descriptor} + [rn/view {:style {:align-items :center}} + [quo/collectible-tag (assoc @state :on-layout on-layout)]]])))