diff --git a/resources/images/icons/more12@2x.png b/resources/images/icons/more12@2x.png new file mode 100644 index 0000000000..826181fb28 Binary files /dev/null and b/resources/images/icons/more12@2x.png differ diff --git a/resources/images/icons/more12@3x.png b/resources/images/icons/more12@3x.png new file mode 100644 index 0000000000..0de210915c Binary files /dev/null and b/resources/images/icons/more12@3x.png differ diff --git a/src/quo2/components/list_items/preview_list.cljs b/src/quo2/components/list_items/preview_list.cljs new file mode 100644 index 0000000000..bdb6dfcc98 --- /dev/null +++ b/src/quo2/components/list_items/preview_list.cljs @@ -0,0 +1,115 @@ +(ns quo2.components.list-items.preview-list + (:require [quo.react-native :as rn] + [status-im.i18n.i18n :as i18n] + [quo2.foundations.colors :as colors] + [quo2.components.icon :as quo2.icons] + [quo2.components.avatars.user-avatar :as user-avatar] + [quo2.components.markdown.text :as quo2.text])) + +(def params {32 {:border-radius {:circular 16 :rounded 10} + :hole-radius {:circular 18 :rounded 12} + :margin-left -8 + :hole-size 36 + :hole-x 22 + :hole-y -2} + 24 {:border-radius {:circular 12 :rounded 8} + :hole-radius {:circular 13 :rounded 9} + :margin-left -4 + :hole-size 26 + :hole-x 19 + :hole-y -1} + 16 {:border-radius {:circular 8 :rounded 8} + :hole-radius {:circular 9 :rounded 9} + :margin-left -4 + :hole-size 18 + :hole-x 11 + :hole-y -1}}) + +;; TODO - Add avatar components for other types once implemented +(defn avatar [item type size] + (case type + :user [user-avatar/user-avatar + (merge {:ring? false + :status-indicator? false + :size (case size 32 :small 24 :xs 16 :xxxs)} + item)])) + +(defn list-item [index type size item list-size margin-left + hole-size hole-radius hole-x hole-y] + (let [last-item? (= index (- list-size 1))] + [rn/hole-view {:style {:margin-left (if (= index 0) 0 margin-left)} + :holes (if last-item? [] + [{:x hole-x + :y hole-y + :width hole-size + :height hole-size + :borderRadius hole-radius}])} + [avatar item type size]])) + +(defn get-overflow-color [transparent? transparent-color light-color dark-color] + (if transparent? + transparent-color + (colors/theme-colors light-color dark-color))) + +(defn overflow-label [label size transparent? border-radius margin-left] + [rn/view {:style {:width size + :height size + :margin-left margin-left + :border-radius border-radius + :justify-content :center + :align-items :center + :background-color (get-overflow-color + transparent? + colors/white-opa-10 + colors/neutral-20 + colors/neutral-70)}} + (if (= size 16) + [quo2.icons/icon :main-icons2/more {:size 12 + :color (get-overflow-color + transparent? + colors/white-opa-70 + colors/neutral-50 + colors/neutral-40)}] + [quo2.text/text {:size (if (= size 32) :paragraph-2 :label) + :weight :medium + :style {:color (get-overflow-color + transparent? + colors/white-opa-70 + colors/neutral-60 + colors/neutral-40) + :margin-left -2}} + ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+ + (if (< label 100) + (str "+" label) + (i18n/label :counter-99-plus))])]) + +(defn border-type [type] + (case type + (:account :collectible) :rounded + :circular)) + +(defn preview-list + "[preview-list opts items] + opts + {:type :user/:community/:account/:token/:collectible/:dapp + :size 32/24/16 + :list-size override items count in overflow label (optional) + :transparent? overflow-label transparent?} + items preview list items (only 4 items is required for preview) + " + [{:keys [type size list-size transparent?]} items] + (let [items-arr (into [] items) + list-size (or list-size (count items)) + margin-left (get-in params [size :margin-left]) + hole-size (get-in params [size :hole-size]) + border-radius (get-in params [size :border-radius (border-type type)]) + hole-radius (get-in params [size :hole-radius (border-type type)]) + hole-x (get-in params [size :hole-x]) + hole-y (get-in params [size :hole-y])] + [rn/view {:style {:flex-direction :row}} + (for [index (range (if (> list-size 4) 3 list-size))] + ^{:key (str index list-size)} + [list-item index type size (get items-arr index) list-size + margin-left hole-size hole-radius hole-x hole-y]) + (when (> list-size 4) + [overflow-label (- list-size 3) size transparent? border-radius margin-left])])) diff --git a/src/quo2/screens/list_items/preview_lists.cljs b/src/quo2/screens/list_items/preview_lists.cljs new file mode 100644 index 0000000000..23e2f78410 --- /dev/null +++ b/src/quo2/screens/list_items/preview_lists.cljs @@ -0,0 +1,50 @@ +(ns quo2.screens.list-items.preview-lists + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [quo.previews.preview :as preview] + [quo2.foundations.colors :as colors] + [quo2.components.list-items.preview-list :as quo2])) + +(def descriptor [{:label "Size:" + :key :size + :type :select + :options [{:key 32 + :value "32"} + {:key 24 + :value "24"} + {:key 16 + :value "16"}]} + {:label "List Size" + :key :list-size + :default 10 + :type :text}]) + +(def user-list-mock + [{:full-name "ABC DEF"} + {:full-name "GHI JKL"} + {:full-name "MNO PQR"} + {:full-name "STU VWX"}]) + +(defn cool-preview [] + (let [state (reagent/atom {:type :user + :size 32 + :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 + ;; Mocked list items + (case @type + :user user-list-mock)]]]))) + +(defn preview-preview-lists [] + [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 4a93d7d21d..521b65682f 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -27,6 +27,7 @@ [quo2.screens.tags.status-tags :as status-tags] [quo2.screens.tags.token-tag :as token-tag] [quo2.screens.wallet.token-overview :as token-overview] + [quo2.screens.list-items.preview-lists :as preview-lists] [re-frame.core :as re-frame])) (def screens-categories @@ -92,7 +93,10 @@ :component token-tag/preview-token-tag}] :wallet [{:name :token-overview :insets {:top false} - :component token-overview/preview-token-overview}]}) + :component token-overview/preview-token-overview}] + :list-items [{:name :preview-lists + :insets {:top false} + :component preview-lists/preview-preview-lists}]}) (def screens (flatten (map val screens-categories)))