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