diff --git a/resources/images/mock/collectible.png b/resources/images/mock/collectible.png new file mode 100644 index 0000000000..c22b21c6b2 Binary files /dev/null and b/resources/images/mock/collectible.png differ diff --git a/src/quo2/components/profile/collectible/style.cljs b/src/quo2/components/profile/collectible/style.cljs new file mode 100644 index 0000000000..cb20f0b7fe --- /dev/null +++ b/src/quo2/components/profile/collectible/style.cljs @@ -0,0 +1,68 @@ +(ns quo2.components.profile.collectible.style + (:require [quo2.foundations.colors :as colors])) + +(def tile-style-by-size + {:xl {:width 160 + :height 160 + :border-radius 12} + :lg {:width 104 + :height 104 + :border-radius 10} + :md {:width 76 + :height 76 + :border-radius 10} + :sm {:width 48 + :height 48 + :border-radius 8} + :xs {:width 36 + :height 36 + :border-radius 8}}) + +(def tile-outer-container + {:width 176 + :height 176 + :padding 8}) + +(def tile-inner-container + {:position :relative + :flex 1}) + +(def tile-sub-container + {:position :absolute + :width 76 + :height 76 + :bottom 0 + :right 0}) + +(def top-left + {:position :absolute + :top 0 + :left 0}) + +(def top-right + {:position :absolute + :top 0 + :right 0}) + +(def bottom-left + {:position :absolute + :bottom 0 + :left 0}) + +(def bottom-right + {:position :absolute + :bottom 0 + :right 0}) + +(defn remaining-tiles + [] + (let [bg-color (colors/theme-colors colors/neutral-20 colors/neutral-80) + tile-size (tile-style-by-size :xs)] + (assoc tile-size + :justify-content :center + :align-items :center + :background-color bg-color))) + +(defn remaining-tiles-text + [] + {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}) diff --git a/src/quo2/components/profile/collectible/view.cljs b/src/quo2/components/profile/collectible/view.cljs new file mode 100644 index 0000000000..219e4afe80 --- /dev/null +++ b/src/quo2/components/profile/collectible/view.cljs @@ -0,0 +1,97 @@ +(ns quo2.components.profile.collectible.view + (:require [quo2.components.markdown.text :as text] + [quo2.components.profile.collectible.style :as style] + [react-native.core :as rn])) + +(defn remaining-tiles + [amount] + [rn/view {:style (merge style/bottom-right (style/remaining-tiles))} + [text/text + {:style (style/remaining-tiles-text) + :size :paragraph-2 + :weight :medium} + (str "+" amount)]]) + +(defn tile + [{:keys [style resource size]}] + (let [source (if (string? resource) {:uri resource} resource)] + [rn/view {:style style} + [rn/image + {:style (style/tile-style-by-size size) + :source source}]])) + +(defn two-tiles + [{:keys [images size]}] + [:<> + [tile + {:style style/top-left + :size size + :resource (first images)}] + [tile + {:style style/bottom-right + :size size + :resource (second images)}]]) + +(defn three-tiles + [{:keys [tiles size]}] + (let [[image-1 image-2 image-3 & _] tiles] + [:<> + [tile + {:style style/top-left + :size size + :resource image-1}] + [tile + {:style style/top-right + :size size + :resource image-2}] + [tile + {:style style/bottom-left + :size size + :resource image-3}]])) + +(defn tile-container + [{:keys [images]}] + (let [num-images (count images)] + (case num-images + 1 [tile + {:resource (first images) + :size :xl}] + 2 [two-tiles + {:images images + :size :lg}] + 3 [three-tiles + {:tiles images + :size :md}] + (let [[first-three-images remaining-images] (split-at 3 images)] + [:<> + [three-tiles {:tiles first-three-images :size :md}] + [rn/view {:style style/tile-sub-container} + (case num-images + 4 [tile + {:resource (nth images 3 nil) + :size :md}] + 5 [two-tiles + {:images (take 2 remaining-images) + :size :sm}] + 6 [three-tiles + {:tiles (take 3 remaining-images) + :size :xs}] + 7 [:<> + [three-tiles + {:tiles (take 3 remaining-images) + :size :xs}] + [tile + {:style style/bottom-right + :size :xs + :resource (nth remaining-images 3 nil)}]] + [:<> + [three-tiles + {:tiles (take 3 remaining-images) + :size :xs}] + [remaining-tiles (- (count remaining-images) 3)]])]])))) + +(defn collectible + [{:keys [images]}] + [rn/view {:style style/tile-outer-container} + [rn/view {:style style/tile-inner-container} + [tile-container {:images images}]]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 42fe1368bc..63b1eae795 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -45,6 +45,7 @@ [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs] [status-im2.contexts.quo-preview.notifications.toast :as toast] [status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton :as messages-skeleton] + [status-im2.contexts.quo-preview.profile.collectible :as collectible] [status-im2.contexts.quo-preview.profile.profile-card :as profile-card] [status-im2.contexts.quo-preview.reactions.react :as react] [status-im2.contexts.quo-preview.record-audio.record-audio :as record-audio] @@ -178,7 +179,10 @@ :component messages-skeleton/preview-messages-skeleton}] :profile [{:name :profile-card :insets {:top false} - :component profile-card/preview-profile-card}] + :component profile-card/preview-profile-card} + {:name :collectible + :insets {:top false} + :component collectible/preview-collectible}] :reactions [{:name :react :insets {:top false} :component react/preview-react}] diff --git a/src/status_im2/contexts/quo_preview/profile/collectible.cljs b/src/status_im2/contexts/quo_preview/profile/collectible.cljs new file mode 100644 index 0000000000..1b9dd4de5d --- /dev/null +++ b/src/status_im2/contexts/quo_preview/profile/collectible.cljs @@ -0,0 +1,47 @@ +(ns status-im2.contexts.quo-preview.profile.collectible + (:require + [quo2.components.profile.collectible.view :as quo] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) + +(defonce test-image (js/require "../resources/images/mock/collectible.png")) +(def test-images (repeat 10 test-image)) + +(def descriptor + [{:label "Number of images" + :key :num-images + :type :select + :options (map (fn [n] + {:key n :value (str n " images")}) + (range 1 (inc (count test-images))))} + {:label "Random order of images" + :key :shuffle-images + :type :boolean}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:num-images 1 :shuffle-images false})] + (fn [] + (let [images-to-show (cond->> test-images + (:shuffle-images @state) + (shuffle) + :always + (take (:num-images @state)))] + [rn/view + {:margin-bottom 50 + :padding 16} + [preview/customizer state descriptor] + [rn/view + {:padding-vertical 100 + :align-items :center} + [quo/collectible {:images images-to-show}]]])))) + +(defn preview-collectible + [] + [rn/view {:style {:flex 1}} + [rn/flat-list + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]])