diff --git a/src/quo2/components/notifications/activity_logs_photos/style.cljs b/src/quo2/components/notifications/activity_logs_photos/style.cljs new file mode 100644 index 0000000000..94bd7cc5bc --- /dev/null +++ b/src/quo2/components/notifications/activity_logs_photos/style.cljs @@ -0,0 +1,13 @@ +(ns quo2.components.notifications.activity-logs-photos.style) + +(def photos-container + {:flex 1 + :height 40 + :flex-direction :row}) + +(defn photo + [index] + {:width 40 + :height 40 + :border-radius 10 + :margin-left (if (= index 0) 0 8)}) diff --git a/src/quo2/components/notifications/activity_logs_photos/view.cljs b/src/quo2/components/notifications/activity_logs_photos/view.cljs new file mode 100644 index 0000000000..e74a1ececd --- /dev/null +++ b/src/quo2/components/notifications/activity_logs_photos/view.cljs @@ -0,0 +1,14 @@ +(ns quo2.components.notifications.activity-logs-photos.view + (:require [react-native.core :as rn] + [quo2.components.notifications.activity-logs-photos.style :as style])) + +(defn view + [{:keys [photos]}] + [rn/view {:style style/photos-container} + (map-indexed + (fn [index photo] + ^{:key index} + [rn/image + {:source photo + :style (style/photo index)}]) + photos)]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index a140906ee7..e7bfc4291e 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -63,6 +63,7 @@ quo2.components.navigation.floating-shell-button quo2.components.navigation.page-nav quo2.components.notifications.activity-log.view + quo2.components.notifications.activity-logs-photos.view quo2.components.notifications.count-down-circle quo2.components.notifications.info-count quo2.components.notifications.notification-dot @@ -214,6 +215,7 @@ ;;;; NOTIFICATIONS (def activity-log quo2.components.notifications.activity-log.view/view) +(def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view) (def info-count quo2.components.notifications.info-count/info-count) (def notification-dot quo2.components.notifications.notification-dot/notification-dot) (def count-down-circle quo2.components.notifications.count-down-circle/circle-timer) diff --git a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs index f6da78ad29..9e8ed7ce6c 100644 --- a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs @@ -40,9 +40,9 @@ [{:source (resources/get-mock-image :photo1)} {:source (resources/get-mock-image :photo2)} {:source (resources/get-mock-image :photo3)} - {:source (resources/get-mock-image :photo4)} - {:source (resources/get-mock-image :photo5)} - {:source (resources/get-mock-image :photo6)}]) + {:source (resources/get-mock-image :photo1)} + {:source (resources/get-mock-image :photo2)} + {:source (resources/get-mock-image :photo3)}]) (defn cool-preview [] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 1a7bf06cd6..baf3d2bb5b 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -63,6 +63,7 @@ [status-im2.contexts.quo-preview.navigation.page-nav :as page-nav] [status-im2.contexts.quo-preview.navigation.top-nav :as top-nav] [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs] + [status-im2.contexts.quo-preview.notifications.activity-logs-photos :as activity-logs-photos] [status-im2.contexts.quo-preview.notifications.notification :as notification] [status-im2.contexts.quo-preview.notifications.toast :as toast] [status-im2.contexts.quo-preview.onboarding.small-option-card :as small-option-card] @@ -282,6 +283,9 @@ :notifications [{:name :activity-logs :options {:topBar {:visible true}} :component activity-logs/preview-activity-logs} + {:name :activity-logs-photos + :options {:topBar {:visible true}} + :component activity-logs-photos/preview-activity-logs-photos} {:name :toast :options {:topBar {:visible true}} :component toast/preview-toasts} diff --git a/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs b/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs new file mode 100644 index 0000000000..615d342b17 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs @@ -0,0 +1,53 @@ +(ns status-im2.contexts.quo-preview.notifications.activity-logs-photos + (:require [quo2.core :as quo] + [react-native.core :as rn] + [reagent.core :as reagent] + [quo2.foundations.colors :as colors] + [status-im2.common.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "Photos Count:" + :key :count + :type :select + :options [{:key 1 + :value "1"} + {:key 2 + :value "2"} + {:key 3 + :value "3"} + {:key 4 + :value "4"} + {:key 5 + :value "5"} + {:key 6 + :value "6"}]}]) + +(def mock-photos + [(resources/get-mock-image :photo1) + (resources/get-mock-image :photo2) + (resources/get-mock-image :photo3) + (resources/get-mock-image :photo1) + (resources/get-mock-image :photo2) + (resources/get-mock-image :photo3)]) + +(defn cool-preview + [] + (let [state (reagent/atom {:count 1})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [preview/customizer state descriptor] + [rn/view + [quo/activity-logs-photos {:photos (take (:count @state) mock-photos)}]]]]))) + +(defn preview-activity-logs-photos + [] + [rn/view + {:background-color (colors/theme-colors colors/white colors/neutral-95) + :flex 1} + [rn/flat-list + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs index cea27ed9d3..2fe27bb786 100644 --- a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs +++ b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs @@ -93,9 +93,9 @@ [{:source (resources/get-mock-image :photo1)} {:source (resources/get-mock-image :photo2)} {:source (resources/get-mock-image :photo3)} - {:source (resources/get-mock-image :photo4)} - {:source (resources/get-mock-image :photo5)} - {:source (resources/get-mock-image :photo6)}]) + {:source (resources/get-mock-image :photo1)} + {:source (resources/get-mock-image :photo2)} + {:source (resources/get-mock-image :photo3)}]) (defn get-mock-content [data]