diff --git a/src/status_im2/contexts/chat/photo_selector/view.cljs b/src/status_im2/contexts/chat/photo_selector/view.cljs index 6d03959305..cd425571f7 100644 --- a/src/status_im2/contexts/chat/photo_selector/view.cljs +++ b/src/status_im2/contexts/chat/photo_selector/view.cljs @@ -1,6 +1,8 @@ (ns status-im2.contexts.chat.photo-selector.view (:require + [react-native.navigation :as navigation] [react-native.platform :as platform] + [react-native.reanimated :as reanimated] [status-im2.constants :as constants] [utils.i18n :as i18n] [react-native.safe-area :as safe-area] @@ -108,43 +110,61 @@ (fn [] (let [selected (reagent/atom []) ; currently selected selected-images (rf/sub [:chats/sending-image]) ; already selected and dispatched - selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent))] + selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent)) + bg-color (reanimated/use-shared-value "rgba(0,0,0,0)")] (rn/use-effect - (fn [] - (rf/dispatch [:chat.ui/camera-roll-get-photos 20 nil selected-album]) - (if (seq selected-images) - (reset! selected (vec (vals selected-images))) - (reset! selected @temporary-selected))) - [selected-album]) - [safe-area/consumer - (fn [insets] - (let [window-width (:width (rn/get-window)) + (fn [] + (reanimated/animate-shared-value-with-delay-default-easing bg-color "rgba(9, 16, 28, 0.7)" 300 300) + (rf/dispatch [:chat.ui/camera-roll-get-photos 20 nil selected-album]) + (if (seq selected-images) + (reset! selected (vec (vals selected-images))) + (reset! selected @temporary-selected))) + [selected-album]) + ;[safe-area/consumer + ; (fn [insets] + (let [insets {:top 20 :bottom 20} + window-width (:width (rn/get-window)) camera-roll-photos (rf/sub [:camera-roll/photos]) end-cursor (rf/sub [:camera-roll/end-cursor]) loading? (rf/sub [:camera-roll/loading-more]) has-next-page? (rf/sub [:camera-roll/has-next-page])] - [rn/view {:style {:flex 1}} - [rn/view - {:style style/buttons-container} - (when platform/android? - [rn/touchable-opacity - {:active-opacity 1 - :on-press #(rf/dispatch [:navigate-back]) - :style (style/close-button-container)} - [quo/icon :i/close - {:size 20 :color (colors/theme-colors colors/black colors/white)}]]) - [album-title true selected-album selected temporary-selected] - [clear-button selected]] - [rn/flat-list - {:key-fn identity - :render-fn image - :render-data {:window-width window-width :selected selected} - :data camera-roll-photos - :num-columns 3 - :content-container-style {:width "100%" - :padding-bottom (+ (:bottom insets) 100) - :padding-top 80} - :on-end-reached #(rf/dispatch [:camera-roll/on-end-reached end-cursor - selected-album loading? - has-next-page?])}] - [bottom-gradient selected-images insets selected]]))])))]) + [rn/view {:style {:flex 1 + :padding-top (if platform/ios? (navigation/status-bar-height) (+ (navigation/status-bar-height) 30))}} + [reanimated/view {:style (reanimated/apply-animations-to-style {:background-color bg-color} + {:position :absolute + :top 0 + :bottom 0 + :left 0 + :right 0})}] + [rn/view {:style {:margin-top 0 :background-color :white + :border-top-left-radius 20 + :border-top-right-radius 20}} + [rn/view + {:style style/buttons-container} + (when true + [rn/touchable-opacity + {:active-opacity 1 + :on-press (fn [] + (reanimated/set-shared-value bg-color (reanimated/with-timing "transparent")) + (rf/dispatch [:navigate-back])) + :style (style/close-button-container)} + [quo/icon :i/close + {:size 20 :color (colors/theme-colors colors/black colors/white)}]]) + [album-title true selected-album selected temporary-selected] + [clear-button selected]] + [rn/flat-list + {:key-fn identity + :render-fn image + :render-data {:window-width window-width :selected selected} + :data camera-roll-photos + :num-columns 3 + :content-container-style {:width "100%" + :padding-bottom (+ (:bottom insets) 100) + :padding-top 80} + :on-end-reached #(rf/dispatch [:camera-roll/on-end-reached end-cursor + selected-album loading? + has-next-page?])}] + [bottom-gradient selected-images insets selected] + ]]) + ;)] + )))]) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index f82c0cfc2b..490b378648 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -24,102 +24,106 @@ (def transparent-screen-options (merge - {:topBar {:visible false} - :modalPresentationStyle :overCurrentContext - :layout {:componentBackgroundColor :transparent - :orientation :portrait - :backgroundColor :transparent}} - (if platform/android? - {:navigationBar {:backgroundColor colors/neutral-100} - :statusBar {:backgroundColor :transparent - :style :light - :drawBehind true}} - {:statusBar {:style :light}}))) + {:topBar {:visible false} + :modalPresentationStyle :overCurrentContext + :layout {:componentBackgroundColor :transparent + :orientation :portrait + :backgroundColor :transparent}} + (if platform/android? + {:navigationBar {:backgroundColor colors/neutral-100} + :statusBar {:backgroundColor :transparent + :style :light + :drawBehind true}} + {:statusBar {:style :light}}))) (defn screens [] (concat - (old-screens/screens) - [{:name :intro - :options {:topBar {:visible false}} - :insets {:top false} - :component intro/view} + (old-screens/screens) + [{:name :intro + :options {:topBar {:visible false}} + :insets {:top false} + :component intro/view} - {:name :activity-center - :insets {:top false} - :options transparent-screen-options - :component activity-center/view} + {:name :activity-center + :insets {:top false} + :options transparent-screen-options + :component activity-center/view} - {:name :shell-stack - :insets {:top false} - :component shell/shell-stack} + {:name :shell-stack + :insets {:top false} + :component shell/shell-stack} - {:name :chat - :options {:topBar {:visible false}} - :component chat/chat} + {:name :chat + :options {:topBar {:visible false}} + :component chat/chat} - {:name :lightbox - :insets {:top false :bottom false} - :options {:topBar {:visible false} - :statusBar {:backgroundColor :transparent - :style :light - :animate true - :drawBehind true - :translucent true} - :navigationBar {:backgroundColor colors/black} - :layout {:componentBackgroundColor :transparent - :backgroundColor :transparent} - :animations {:push {:sharedElementTransitions [{:fromId :shared-element - :toId :shared-element - :interpolation {:type :decelerate - :factor 1.5}}]} - :pop {:sharedElementTransitions [{:fromId :shared-element - :toId :shared-element - :interpolation {:type - :decelerate - :factor 1.5}}]}}} - :component lightbox/lightbox} - {:name :photo-selector - :options {:topBar {:visible false}} - :component photo-selector/photo-selector} + {:name :lightbox + :insets {:top false :bottom false} + :options {:topBar {:visible false} + :statusBar {:backgroundColor :transparent + :style :light + :animate true + :drawBehind true + :translucent true} + :navigationBar {:backgroundColor colors/black} + :layout {:componentBackgroundColor :transparent + :backgroundColor :transparent} + :animations {:push {:sharedElementTransitions [{:fromId :shared-element + :toId :shared-element + :interpolation {:type :decelerate + :factor 1.5}}]} + :pop {:sharedElementTransitions [{:fromId :shared-element + :toId :shared-element + :interpolation {:type + :decelerate + :factor 1.5}}]}}} + :component lightbox/lightbox} + {:name :photo-selector + :insets {:top false} + :options {:topBar {:visible false} + :layout {:componentBackgroundColor :transparent + :backgroundColor :transparent} + :modalPresentationStyle :overCurrentContext} + :component photo-selector/photo-selector} - {:name :album-selector - :options {:topBar {:visible false} - :modalPresentationStyle (if platform/ios? :overCurrentContext :none)} - :component album-selector/album-selector} + {:name :album-selector + :options {:topBar {:visible false} + :modalPresentationStyle (if platform/ios? :overCurrentContext :none)} + :component album-selector/album-selector} - {:name :new-contact - :options {:topBar {:visible false}} - :component add-new-contact/new-contact} + {:name :new-contact + :options {:topBar {:visible false}} + :component add-new-contact/new-contact} - {:name :discover-communities - :options {:topBar {:visible false}} - :component communities.discover/discover} + {:name :discover-communities + :options {:topBar {:visible false}} + :component communities.discover/discover} - {:name :community-overview - :options {:topBar {:visible false}} - :component communities.overview/overview} + {:name :community-overview + :options {:topBar {:visible false}} + :component communities.overview/overview} - {:name :settings-syncing - :insets {:bottom true} - :options {:topBar {:title {:text (i18n/label :t/syncing)}}} - :component settings-syncing/views} + {:name :settings-syncing + :insets {:bottom true} + :options {:topBar {:title {:text (i18n/label :t/syncing)}}} + :component settings-syncing/views} - ;; Onboarding - {:name :profiles - :insets {:top false} - :component profiles/views} + ;; Onboarding + {:name :profiles + :insets {:top false} + :component profiles/views} - ;; Onboarding - new to Status - {:name :new-to-status - :options {:statusBar {:style :light} - :topBar {:visible false} - :navigationBar {:backgroundColor colors/black}} - :insets {:top false} - :component new-to-status/new-to-status}] + ;; Onboarding - new to Status + {:name :new-to-status + :options {:statusBar {:style :light} + :topBar {:visible false} + :navigationBar {:backgroundColor colors/black}} + :insets {:top false} + :component new-to-status/new-to-status}] - (when config/quo-preview-enabled? - quo.preview/screens) + (when config/quo-preview-enabled? + quo.preview/screens) - (when config/quo-preview-enabled? - quo.preview/main-screens))) + (when config/quo-preview-enabled? + quo.preview/main-screens)))