From 8d08de3d4b736cbd1948ca4add07bc927aba8378 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Mon, 2 Jan 2023 08:04:03 +0400 Subject: [PATCH] Move photo selector to status-im2 (#14661) * Move photo selector to status-im2 --- src/status_im/ui/screens/screens.cljs | 5 -- .../ui2/screens/chat/composer/view.cljs | 2 +- .../contexts}/chat/photo_selector/style.cljs | 8 +- .../contexts}/chat/photo_selector/view.cljs | 74 +++++++++++-------- src/status_im2/subs/chat/chats.cljs | 7 ++ 5 files changed, 58 insertions(+), 38 deletions(-) rename src/{status_im/ui2/screens => status_im2/contexts}/chat/photo_selector/style.cljs (92%) rename src/{status_im/ui2/screens => status_im2/contexts}/chat/photo_selector/view.cljs (61%) diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index 64cd272faf..d69add1aa2 100644 --- a/src/status_im/ui/screens/screens.cljs +++ b/src/status_im/ui/screens/screens.cljs @@ -108,7 +108,6 @@ [status-im.ui.screens.wallet.swap.views :as wallet.swap] [status-im.ui.screens.wallet.transactions.views :as wallet-transactions] [status-im2.contexts.chat.group-details.view :as group-details] - [status-im.ui2.screens.chat.photo-selector.view :as photo-selector] [status-im.ui2.screens.chat.components.new-chat.view :as new-chat-aio])) (defn right-button-options @@ -207,10 +206,6 @@ :options {:topBar {:visible false}} :component pin-messages/pinned-messages} - {:name :photo-selector - :options {:topBar {:visible false}} - :component photo-selector/photo-selector} - {:name :group-chat-profile ;;TODO animated-header :options {:topBar {:visible false}} diff --git a/src/status_im/ui2/screens/chat/composer/view.cljs b/src/status_im/ui2/screens/chat/composer/view.cljs index 56c2726556..fe033e925c 100644 --- a/src/status_im/ui2/screens/chat/composer/view.cljs +++ b/src/status_im/ui2/screens/chat/composer/view.cljs @@ -15,7 +15,7 @@ [status-im.ui2.screens.chat.composer.mentions :as mentions] [status-im.ui2.screens.chat.composer.reply :as reply] [status-im.ui2.screens.chat.composer.style :as style] - [status-im.ui2.screens.chat.photo-selector.view :as photo-selector] + [status-im2.contexts.chat.photo-selector.view :as photo-selector] [utils.re-frame :as rf] [status-im.utils.utils :as utils] [status-im2.contexts.chat.messages.list.view :refer [scroll-to-bottom]] diff --git a/src/status_im/ui2/screens/chat/photo_selector/style.cljs b/src/status_im2/contexts/chat/photo_selector/style.cljs similarity index 92% rename from src/status_im/ui2/screens/chat/photo_selector/style.cljs rename to src/status_im2/contexts/chat/photo_selector/style.cljs index e84a37c1c2..61639d7084 100644 --- a/src/status_im/ui2/screens/chat/photo_selector/style.cljs +++ b/src/status_im2/contexts/chat/photo_selector/style.cljs @@ -1,4 +1,4 @@ -(ns status-im.ui2.screens.chat.photo-selector.style +(ns status-im2.contexts.chat.photo-selector.style (:require [quo2.foundations.colors :as colors] [react-native.platform :as platform])) @@ -37,6 +37,11 @@ :margin-left 20 :margin-bottom 24}) +(def title-container + {:flex-direction :row + :position :absolute + :align-self :center}) + (defn chevron-container [] {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) @@ -68,3 +73,4 @@ :border-radius 8 :top 8 :right 8}) + diff --git a/src/status_im/ui2/screens/chat/photo_selector/view.cljs b/src/status_im2/contexts/chat/photo_selector/view.cljs similarity index 61% rename from src/status_im/ui2/screens/chat/photo_selector/view.cljs rename to src/status_im2/contexts/chat/photo_selector/view.cljs index 4a9eb1a6d3..068ce55386 100644 --- a/src/status_im/ui2/screens/chat/photo_selector/view.cljs +++ b/src/status_im2/contexts/chat/photo_selector/view.cljs @@ -1,69 +1,82 @@ -(ns status-im.ui2.screens.chat.photo-selector.view +(ns status-im2.contexts.chat.photo-selector.view (:require [i18n.i18n :as i18n] [quo.components.safe-area :as safe-area] [quo2.components.notifications.info-count :as info-count] - [quo2.core :as quo2] + [quo2.core :as quo] [quo2.foundations.colors :as colors] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient] [reagent.core :as reagent] - [status-im.ui2.screens.chat.photo-selector.style :as style] + [status-im2.contexts.chat.photo-selector.style :as style] [status-im.utils.core :as utils] + [quo.react] [utils.re-frame :as rf])) (def selected (reagent/atom [])) +(defn on-press-confirm-selection + [chat-id] + (rf/dispatch [:chat.ui/clear-sending-images chat-id]) + (doseq [item @selected] + (rf/dispatch [:chat.ui/camera-roll-pick item])) + (reset! selected []) + (rf/dispatch [:bottom-sheet/hide])) + (defn bottom-gradient [chat-id selected-images] [:f> (fn [] (let [safe-area (safe-area/use-safe-area)] - (when (or (pos? (count @selected)) selected-images) + (when (or (seq @selected) selected-images) [linear-gradient/linear-gradient {:colors [:black :transparent] :start {:x 0 :y 1} :end {:x 0 :y 0} :style (style/gradient-container safe-area)} - [quo2/button - {:style {:align-self :stretch - :margin-horizontal 20} - :on-press #(do - (rf/dispatch [:chat.ui/clear-sending-images chat-id]) - (doseq [item @selected] - (rf/dispatch [:chat.ui/camera-roll-pick item])) - (reset! selected []) - (rf/dispatch [:bottom-sheet/hide]))} + [quo/button + {:style {:align-self :stretch + :margin-horizontal 20} + :on-press #(on-press-confirm-selection chat-id) + :accessibility-label :confirm-selection} (i18n/label :t/confirm-selection)]])))]) (defn clear-button [] - (when (pos? (count @selected)) + (when (seq @selected) [rn/touchable-opacity - {:on-press #(reset! selected []) - :style (style/clear-container)} - [quo2/text {:weight :medium} (i18n/label :t/clear)]])) + {:on-press #(reset! selected []) + :style (style/clear-container) + :accessibility-label :clear} + [quo/text {:weight :medium} (i18n/label :t/clear)]])) + +(defn remove-selected + [coll item] + (vec (remove #(= % item) coll))) (defn image [item index _ {:keys [window-width]}] [rn/touchable-opacity - {:active-opacity 1 - :on-press (fn [] - (if (some #{item} @selected) - (reset! selected (vec (remove #(= % item) @selected))) - (swap! selected conj item)))} + {:active-opacity 1 + :on-press (fn [] + (if (some #{item} @selected) + (swap! selected remove-selected item) + (swap! selected conj item))) + :accessibility-label (str "image-" index)} [rn/image {:source {:uri item} :style (style/image window-width index)}] (when (some #{item} @selected) [rn/view {:style (style/overlay window-width)}]) (when (some #{item} @selected) - [info-count/info-count {:style style/image-count} + [info-count/info-count + {:style style/image-count + :accessibility-label (str "count-" index)} (inc (utils/first-index #(= item %) @selected))])]) (defn photo-selector [chat-id] (rf/dispatch [:chat.ui/camera-roll-get-photos 20]) - (let [selected-images (keys (get-in (rf/sub [:chat/inputs]) [chat-id :metadata :sending-image]))] + (let [selected-images (keys (rf/sub [:chats/sending-image]))] (when selected-images (reset! selected (vec selected-images))) [:f> @@ -78,17 +91,15 @@ [rn/touchable-opacity {:on-press #(js/alert "Camera: not implemented") :style (style/camera-button-container)} - [quo2/icon :i/camera {:color (colors/theme-colors colors/neutral-100 colors/white)}]] + [quo/icon :i/camera {:color (colors/theme-colors colors/neutral-100 colors/white)}]] [rn/view - {:style {:flex-direction :row - :position :absolute - :align-self :center}} - [quo2/text {:weight :medium} (i18n/label :t/recent)] + {:style style/title-container} + [quo/text {:weight :medium} (i18n/label :t/recent)] [rn/view {:style (style/chevron-container)} - [quo2/icon :i/chevron-down {:color (colors/theme-colors colors/neutral-100 colors/white)}]]] + [quo/icon :i/chevron-down {:color (colors/theme-colors colors/neutral-100 colors/white)}]]] [clear-button] [rn/flat-list - {:key-fn (fn [item] item) + {:key-fn identity :render-fn image :render-data {:window-width window-width} :data camera-roll-photos @@ -100,3 +111,4 @@ has-next-page?])}] [bottom-gradient chat-id selected-images]]))])) + diff --git a/src/status_im2/subs/chat/chats.cljs b/src/status_im2/subs/chat/chats.cljs index 70ec768768..74287f8c1e 100644 --- a/src/status_im2/subs/chat/chats.cljs +++ b/src/status_im2/subs/chat/chats.cljs @@ -145,6 +145,13 @@ (fn [[inputs public-key]] (get inputs (chat.models/profile-chat-topic public-key)))) +(re-frame/reg-sub + :chats/sending-image + :<- [:chats/current-chat-id] + :<- [:chat/inputs] + (fn [[chat-id inputs]] + (get-in inputs [chat-id :metadata :sending-image]))) + (re-frame/reg-sub :chats/timeline-chat-input-text :<- [:chats/timeline-chat-input]