Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Omar Basem
|
502718440c | ||
|
Omar Basem
|
f0cbfd7155 | ||
|
Omar Basem
|
9c49991bae | ||
|
Omar Basem
|
1b4c65ea97 | ||
|
Omar Basem
|
41547a70a5 | ||
|
Omar Basem
|
a030046401 | ||
|
Omar Basem
|
7557e885d0 | ||
|
Omar Basem
|
06fa981954 | ||
|
Omar Basem
|
38522e5180 | ||
|
Omar Basem
|
ecba5ade66 | ||
|
Omar Basem
|
c94508e559 |
@@ -13,7 +13,8 @@
|
||||
[status-im2.contexts.contacts.events :as contacts-store]
|
||||
[status-im.multiaccounts.model :as multiaccounts.model]
|
||||
[status-im.utils.clocks :as utils.clocks]
|
||||
[status-im.utils.types :as types]))
|
||||
[status-im.utils.types :as types]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn- get-chat
|
||||
[cofx chat-id]
|
||||
@@ -338,6 +339,13 @@
|
||||
[{:keys [db]} shared-element-id]
|
||||
{:db (assoc db :shared-element-id shared-element-id)})
|
||||
|
||||
(rf/defn navigate-to-lightbox
|
||||
{:events [:chat.ui/navigate-to-lightbox]}
|
||||
[{:keys [db]} shared-element-id screen-params]
|
||||
(let [updated-db (assoc db :shared-element-id shared-element-id)]
|
||||
(reagent/next-tick #(rf/dispatch [:navigate-to :lightbox screen-params]))
|
||||
{:db updated-db}))
|
||||
|
||||
(rf/defn exit-lightbox-signal
|
||||
{:events [:chat.ui/exit-lightbox-signal]}
|
||||
[{:keys [db]} value]
|
||||
@@ -357,4 +365,3 @@
|
||||
{:events [:chat.ui/lightbox-scale]}
|
||||
[{:keys [db]} value]
|
||||
{:db (assoc db :lightbox/scale value)})
|
||||
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
(anim/animate background-color :transparent)
|
||||
(anim/animate opacity 0)
|
||||
(rf/dispatch (if platform/ios?
|
||||
[:chat.ui/exit-lightbox-signal @index]
|
||||
[:navigate-back]
|
||||
[:navigate-back])))
|
||||
:style style/close-container}
|
||||
[quo/icon :close {:size 20 :color colors/white}]]
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
[clojure.string :as string]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
[react-native.navigation :as navigation]
|
||||
[react-native.orientation :as orientation]
|
||||
[react-native.platform :as platform]
|
||||
@@ -189,6 +190,7 @@
|
||||
(rf/dispatch [:chat.ui/zoom-out-signal nil])
|
||||
(when platform/android?
|
||||
(rf/dispatch [:chat.ui/lightbox-scale 1])))))
|
||||
|
||||
[:f>
|
||||
(fn []
|
||||
(let [curr-orientation (or (rf/sub [:lightbox/orientation]) orientation/portrait)
|
||||
@@ -202,13 +204,18 @@
|
||||
window-height
|
||||
window-width)
|
||||
item-width (if (and landscape? platform/ios?) screen-height screen-width)]
|
||||
;[gesture/flat-list
|
||||
; {:data [1]
|
||||
; :horizontal true
|
||||
; :render-fn (fn [] [rn/view {:style {:width 300 :height 300 :background-color :red}
|
||||
; :native-ID :shared-element}])}]
|
||||
[reanimated/view
|
||||
{:style (reanimated/apply-animations-to-style {:background-color (:background-color
|
||||
animations)}
|
||||
{:height screen-height})}
|
||||
(when-not @transparent?
|
||||
[top-view/top-view (first messages) insets scroll-index animations derived landscape?
|
||||
screen-width])
|
||||
;(when-not @transparent?
|
||||
; [top-view/top-view (first messages) insets scroll-index animations derived landscape?
|
||||
; screen-width])
|
||||
[gesture/gesture-detector
|
||||
{:gesture (drag-gesture animations (and landscape? platform/ios?) set-full-height?)}
|
||||
[reanimated/view
|
||||
@@ -221,7 +228,8 @@
|
||||
:key-fn :message-id
|
||||
:style {:width (+ screen-width seperator-width)}
|
||||
:data @data
|
||||
:render-fn image
|
||||
:render-fn (fn [] [rn/view {:style {:width 300 :height 300 :background-color :red}
|
||||
:native-ID :shared-element}])
|
||||
:render-data {:opacity-value (:opacity animations)
|
||||
:border-value (:border animations)
|
||||
:transparent? transparent?
|
||||
@@ -240,6 +248,9 @@
|
||||
:shows-vertical-scroll-indicator false
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:on-viewable-items-changed callback}]]]
|
||||
(when (and (not @transparent?) (not landscape?))
|
||||
[bottom-view/bottom-view messages index scroll-index insets animations derived
|
||||
item-width atoms])]))]))])
|
||||
;(when (and (not @transparent?) (not landscape?))
|
||||
; [bottom-view/bottom-view messages index scroll-index insets animations derived
|
||||
; item-width atoms])
|
||||
]
|
||||
))]
|
||||
))])
|
||||
|
||||
@@ -272,7 +272,12 @@
|
||||
animations
|
||||
@set-full-height?
|
||||
(= curr-orientation orientation/portrait))}
|
||||
[reanimated/fast-image
|
||||
{:source {:uri (:image content)}
|
||||
:native-ID (when focused? :shared-element)
|
||||
:style (style/image dimensions animations (:border-value args))}]]]))]))])
|
||||
[rn/view {:style {:width 300 :height 300 :background-color :red}
|
||||
:native-ID :shared-element}]
|
||||
;[reanimated/fast-image
|
||||
; {:source {:uri (:image content)}
|
||||
; ;:native-ID (when focused? :shared-element)
|
||||
; :native-ID :shared-element
|
||||
; :style (style/image dimensions animations (:border-value args))}]
|
||||
]]
|
||||
))]))])
|
||||
|
||||
@@ -52,19 +52,19 @@
|
||||
{:key (:message-id item)
|
||||
:active-opacity 1
|
||||
:on-long-press #(on-long-press message context)
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:chat.ui/update-shared-element-id (:message-id item)])
|
||||
(js/setTimeout #(rf/dispatch [:navigate-to :lightbox
|
||||
{:messages (:album message)
|
||||
:index index
|
||||
:insets insets}])
|
||||
100))}
|
||||
:on-press #(rf/dispatch [:chat.ui/navigate-to-lightbox
|
||||
(:message-id item)
|
||||
{:messages (:album message)
|
||||
:index index
|
||||
:insets insets}])}
|
||||
[fast-image/fast-image
|
||||
{:style (style/image dimensions index portrait? images-count)
|
||||
:source {:uri (:image (:content item))}
|
||||
:native-ID (when (and (= shared-element-id (:message-id item))
|
||||
(< index constants/max-album-photos))
|
||||
:shared-element)}]
|
||||
:native-ID :source-image
|
||||
;:native-ID (when (and (= shared-element-id (:message-id item))
|
||||
; (< index constants/max-album-photos))
|
||||
; :shared-element)
|
||||
}]
|
||||
(when (and (> images-count constants/max-album-photos)
|
||||
(= index (- constants/max-album-photos 1)))
|
||||
[rn/view
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
(:require
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[status-im2.constants :as constants]
|
||||
[utils.re-frame :as rf]
|
||||
@@ -24,19 +25,23 @@
|
||||
(let [shared-element-id (rf/sub [:shared-element-id])]
|
||||
[rn/touchable-opacity
|
||||
{:active-opacity 1
|
||||
;:native-ID :source-image
|
||||
:key message-id
|
||||
:style {:margin-top (when (pos? index) 10)}
|
||||
:on-long-press on-long-press
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:chat.ui/update-shared-element-id message-id])
|
||||
(js/setTimeout #(rf/dispatch [:navigate-to :lightbox
|
||||
{:messages [message]
|
||||
:index 0
|
||||
:insets insets}])
|
||||
100))}
|
||||
:on-press #(rf/dispatch [:chat.ui/navigate-to-lightbox
|
||||
message-id
|
||||
{:messages [message]
|
||||
:index 0
|
||||
:insets insets}])}
|
||||
(when (and (not= text "placeholder") (= index 0))
|
||||
[rn/view {:style {:margin-bottom 10}} [text/text-content message context]])
|
||||
[fast-image/fast-image
|
||||
{:source {:uri (:image content)}
|
||||
:style (merge dimensions {:border-radius 12})
|
||||
:native-ID (when (= shared-element-id message-id) :shared-element)}]]))))])
|
||||
[rn/view {:style {:width 300 :height 300 :background-color :red}
|
||||
:native-ID :shared-element}]
|
||||
;[fast-image/fast-image
|
||||
; {:source {:uri (:image content)}
|
||||
; :style (merge dimensions {:border-radius 12})
|
||||
; :native-ID :shared-element
|
||||
; ;:native-ID (when (= shared-element-id message-id) :shared-element)
|
||||
; }]
|
||||
]))))])
|
||||
|
||||
@@ -64,7 +64,8 @@
|
||||
|
||||
{:name :lightbox
|
||||
:insets {:top false :bottom false}
|
||||
:options {:topBar {:visible false}
|
||||
:options {
|
||||
:topBar {:visible false}
|
||||
:statusBar {:backgroundColor :transparent
|
||||
:style :light
|
||||
:animate true
|
||||
@@ -75,13 +76,15 @@
|
||||
:backgroundColor :transparent}
|
||||
:animations {:push {:sharedElementTransitions [{:fromId :shared-element
|
||||
:toId :shared-element
|
||||
:interpolation {:type :decelerate
|
||||
:interpolation {:type
|
||||
:decelerate
|
||||
:factor 1.5}}]}
|
||||
:pop {:sharedElementTransitions [{:fromId :shared-element
|
||||
:toId :shared-element
|
||||
:interpolation {:type
|
||||
:decelerate
|
||||
:factor 1.5}}]}}}
|
||||
:factor 1.5}}]}
|
||||
}}
|
||||
:component lightbox/lightbox}
|
||||
{:name :photo-selector
|
||||
:options {:topBar {:visible false}}
|
||||
|
||||
Reference in New Issue
Block a user