Move photo selector to status-im2 (#14661)
* Move photo selector to status-im2
This commit is contained in:
parent
0a0b70c633
commit
8d08de3d4b
|
@ -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}}
|
||||
|
|
|
@ -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]]
|
||||
|
|
|
@ -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})
|
||||
|
|
@ -1,47 +1,57 @@
|
|||
(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
|
||||
[quo/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]))}
|
||||
: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)]]))
|
||||
: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]}]
|
||||
|
@ -49,21 +59,24 @@
|
|||
{:active-opacity 1
|
||||
:on-press (fn []
|
||||
(if (some #{item} @selected)
|
||||
(reset! selected (vec (remove #(= % item) @selected)))
|
||||
(swap! selected conj item)))}
|
||||
(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]]))]))
|
||||
|
||||
|
|
@ -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]
|
||||
|
|
Loading…
Reference in New Issue