Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Omar Basem
|
5f3c12d39c | ||
|
Omar Basem
|
bc3e3d30bd | ||
|
Omar Basem
|
9f9124aa0b | ||
|
Omar Basem
|
33674861d0 | ||
|
Omar Basem
|
32d8a52acf | ||
|
Omar Basem
|
d3635b7c91 |
@@ -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,63 @@
|
||||
(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 100)
|
||||
;(js/setTimeout #(reanimated/set-shared-value bg-color (reanimated/with-timing "rgba(9, 16, 28, 0.7)")) 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
|
||||
:overflow :hidden}}
|
||||
[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" (clj->js {:duration 100})))
|
||||
(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]
|
||||
]])
|
||||
;)]
|
||||
)))])
|
||||
|
||||
@@ -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)))
|
||||
|
||||
Reference in New Issue
Block a user