fix: removed bounce from lightbox text-sheet (#17664)
fix: improving UI and gestures fix: expanding on press now works reliably fix: center text and disable gestures for short messages feat: added styling for one-lined messages fix: small opacity fix ref: small condition change fix: horizontal swiping being unreliable with vertical scrolling ref: reusing shared value from lightbox animations fix: text-sheet bottom gradient not visible on android fix: addressed qa issues 1,2,4 fix: zoomable-image stuck if moved vertically when full screen clean: removed unused var chore: removed unused require fix: don't allow returning text-sheet down and up in one move fix: text-sheet bar styling was wrong fix: adjusted gradient animation with designs fix: text-sheet bar opacity
This commit is contained in:
Lungu Cristian
GitHub
parent
233d1b3261
commit
716007dc3c
|
|
@ -6,10 +6,3 @@ export function infoLayout(input, isTop) {
|
||||||
return isTop ? input.value : -input.value;
|
return isTop ? input.value : -input.value;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function textSheet(input, isHeight) {
|
|
||||||
return useDerivedValue(function () {
|
|
||||||
'worklet';
|
|
||||||
return isHeight ? input.value : -input.value;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -49,15 +49,15 @@
|
||||||
[item index _ render-data]
|
[item index _ render-data]
|
||||||
[:f> f-small-image item index _ render-data])
|
[:f> f-small-image item index _ render-data])
|
||||||
|
|
||||||
|
|
||||||
(defn bottom-view
|
(defn bottom-view
|
||||||
[messages index scroll-index insets animations derived item-width props state]
|
[messages index scroll-index insets animations derived item-width props state transparent?]
|
||||||
(let [padding-horizontal (- (/ item-width 2) (/ c/focused-image-size 2))]
|
(let [padding-horizontal (- (/ item-width 2) (/ c/focused-image-size 2))]
|
||||||
[reanimated/linear-gradient
|
[reanimated/linear-gradient
|
||||||
{:colors [colors/neutral-100-opa-100 colors/neutral-100-opa-50]
|
{:colors [colors/neutral-100-opa-100 colors/neutral-100-opa-80 colors/neutral-100-opa-0]
|
||||||
:start {:x 0 :y 1}
|
:location [0.2 0.9]
|
||||||
:end {:x 0 :y 0}
|
:start {:x 0 :y 1}
|
||||||
:style (style/gradient-container insets animations derived)}
|
:end {:x 0 :y 0}
|
||||||
|
:style (style/gradient-container insets animations derived transparent?)}
|
||||||
[text-sheet/view messages animations state props]
|
[text-sheet/view messages animations state props]
|
||||||
[rn/flat-list
|
[rn/flat-list
|
||||||
{:ref #(reset! (:small-list-ref props) %)
|
{:ref #(reset! (:small-list-ref props) %)
|
||||||
|
|
|
||||||
|
|
@ -62,14 +62,16 @@
|
||||||
|
|
||||||
;;;; BOTTOM-VIEW
|
;;;; BOTTOM-VIEW
|
||||||
(defn gradient-container
|
(defn gradient-container
|
||||||
[insets {:keys [opacity]} {:keys [bottom-layout]}]
|
[insets {:keys [opacity]} {:keys [bottom-layout]} transparent?]
|
||||||
(reanimated/apply-animations-to-style
|
(reanimated/apply-animations-to-style
|
||||||
{:transform [{:translateY bottom-layout}]
|
{:transform [{:translateY bottom-layout}]
|
||||||
:opacity opacity}
|
:opacity opacity}
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:overflow :visible
|
:overflow :visible
|
||||||
|
:display (if @transparent? :none :flex)
|
||||||
:bottom 0
|
:bottom 0
|
||||||
:padding-bottom (:bottom insets)
|
:padding-bottom (:bottom insets)
|
||||||
|
:padding-top c/text-min-height
|
||||||
:z-index 3}))
|
:z-index 3}))
|
||||||
|
|
||||||
(defn content-container
|
(defn content-container
|
||||||
|
|
@ -80,17 +82,27 @@
|
||||||
:justify-content :center})
|
:justify-content :center})
|
||||||
|
|
||||||
|
|
||||||
(defn background
|
(defn background-bottom-gradient
|
||||||
[{:keys [overlay-opacity]} z-index]
|
[{:keys [overlay-opacity]} z-index]
|
||||||
(reanimated/apply-animations-to-style
|
(reanimated/apply-animations-to-style
|
||||||
{:opacity overlay-opacity}
|
{:opacity (reanimated/interpolate overlay-opacity [0 0.1 0.4 1] [0 0.1 1 1])}
|
||||||
{:background-color colors/neutral-100-opa-70
|
{:position :absolute
|
||||||
:position :absolute
|
:top 0
|
||||||
:top 0
|
:bottom 0
|
||||||
:bottom 0
|
:z-index z-index
|
||||||
:z-index z-index
|
:left 0
|
||||||
:left 0
|
:right 0}))
|
||||||
:right 0}))
|
|
||||||
|
(defn background-top-gradient
|
||||||
|
[{:keys [overlay-opacity]} z-index]
|
||||||
|
(reanimated/apply-animations-to-style
|
||||||
|
{:opacity (reanimated/interpolate overlay-opacity [0.3 1] [0 1])}
|
||||||
|
{:position :absolute
|
||||||
|
:top 0
|
||||||
|
:bottom 0
|
||||||
|
:z-index z-index
|
||||||
|
:left 0
|
||||||
|
:right 0}))
|
||||||
|
|
||||||
(defn bottom-inset-cover-up
|
(defn bottom-inset-cover-up
|
||||||
[insets]
|
[insets]
|
||||||
|
|
|
||||||
|
|
@ -13,10 +13,11 @@
|
||||||
:left 0
|
:left 0
|
||||||
:right 0}))
|
:right 0}))
|
||||||
|
|
||||||
(def text-style
|
(defn text-style
|
||||||
|
[expanding-message?]
|
||||||
{:color colors/white
|
{:color colors/white
|
||||||
:margin-horizontal 20
|
:margin-horizontal 20
|
||||||
:margin-bottom constants/text-margin
|
:align-items (when-not expanding-message? :center)
|
||||||
:flex-grow 1})
|
:flex-grow 1})
|
||||||
|
|
||||||
(def bar-container
|
(def bar-container
|
||||||
|
|
@ -31,30 +32,37 @@
|
||||||
{:width 32
|
{:width 32
|
||||||
:height 4
|
:height 4
|
||||||
:border-radius 100
|
:border-radius 100
|
||||||
:background-color colors/white-opa-40
|
:background-color colors/white-opa-10})
|
||||||
:border-width 0.5
|
|
||||||
:border-color colors/neutral-100})
|
|
||||||
|
|
||||||
(defn top-gradient
|
(defn top-gradient
|
||||||
[{:keys [gradient-opacity]} insets]
|
[{:keys [derived-value]} {:keys [top]} insets max-height]
|
||||||
(reanimated/apply-animations-to-style
|
(let [initial-top (- (+ (:top insets)
|
||||||
{:opacity gradient-opacity}
|
constants/top-view-height))
|
||||||
{:position :absolute
|
height (+ (:top insets)
|
||||||
:left 0
|
constants/top-view-height
|
||||||
:right 0
|
(* constants/line-height 2))]
|
||||||
:top (- (+ (:top insets)
|
(reanimated/apply-animations-to-style
|
||||||
constants/top-view-height))
|
{:opacity (reanimated/interpolate derived-value
|
||||||
:height (+ (:top insets)
|
[max-height (+ max-height constants/line-height)]
|
||||||
constants/top-view-height
|
[0 1])
|
||||||
constants/bar-container-height
|
:top (reanimated/interpolate top
|
||||||
constants/text-margin
|
[0 (- max-height)]
|
||||||
(* constants/line-height 2))
|
[initial-top (- initial-top max-height)]
|
||||||
:z-index 1}))
|
{:extrapolateLeft "clamp"
|
||||||
|
:extrapolateRight "clamp"})}
|
||||||
|
{:position :absolute
|
||||||
|
:left 0
|
||||||
|
:height height
|
||||||
|
:right 0
|
||||||
|
:z-index 1})))
|
||||||
|
|
||||||
(def bottom-gradient
|
(defn bottom-gradient
|
||||||
{:position :absolute
|
[bottom-inset]
|
||||||
:left 0
|
(let [gradient-distance (+ constants/small-list-height bottom-inset)]
|
||||||
:right 0
|
{:position :absolute
|
||||||
:height 28
|
:left 0
|
||||||
:bottom 0
|
:right 0
|
||||||
:z-index 1})
|
:height (+ gradient-distance (* 2 constants/line-height))
|
||||||
|
:bottom (- gradient-distance)
|
||||||
|
:opacity 0.8
|
||||||
|
:z-index 1}))
|
||||||
|
|
|
||||||
|
|
@ -3,41 +3,69 @@
|
||||||
[oops.core :as oops]
|
[oops.core :as oops]
|
||||||
[react-native.gesture :as gesture]
|
[react-native.gesture :as gesture]
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.reanimated :as reanimated]
|
||||||
[status-im2.contexts.chat.lightbox.constants :as constants]
|
[reagent.core :as r]
|
||||||
[utils.worklets.lightbox :as worklet]))
|
[status-im2.contexts.chat.lightbox.constants :as constants]))
|
||||||
|
|
||||||
|
(defn- collapse-sheet
|
||||||
|
[{:keys [derived-value overlay-opacity saved-top expanded? overlay-z-index]}]
|
||||||
|
(reanimated/animate derived-value constants/text-min-height)
|
||||||
|
(reanimated/animate overlay-opacity 0)
|
||||||
|
(reanimated/set-shared-value saved-top (- constants/text-min-height))
|
||||||
|
(reset! expanded? false)
|
||||||
|
(js/setTimeout #(reset! overlay-z-index 0) 300))
|
||||||
|
|
||||||
(defn sheet-gesture
|
(defn sheet-gesture
|
||||||
[{:keys [derived-value saved-top overlay-opacity gradient-opacity]}
|
[{:keys [derived-value saved-top overlay-opacity gradient-opacity]}
|
||||||
expanded-height max-height overlay-z-index expanded? dragging?]
|
expanded-height max-height full-height overlay-z-index expanded? dragging? expanding-message?]
|
||||||
(-> (gesture/gesture-pan)
|
(let [disable-gesture-update (r/atom false)]
|
||||||
(gesture/on-start (fn []
|
(-> (gesture/gesture-pan)
|
||||||
(reset! overlay-z-index 1)
|
(gesture/enabled expanding-message?)
|
||||||
(reset! dragging? true)
|
(gesture/on-start (fn []
|
||||||
(reanimated/animate gradient-opacity 0)))
|
(reset! overlay-z-index 1)
|
||||||
(gesture/on-update
|
(reset! dragging? true)
|
||||||
(fn [e]
|
(reset! disable-gesture-update false)
|
||||||
(let [new-value (+ (reanimated/get-shared-value saved-top) (oops/oget e "translationY"))
|
(when (not expanded?)
|
||||||
bounded-value (max (min (- new-value) expanded-height) constants/text-min-height)
|
(reanimated/animate gradient-opacity 0))))
|
||||||
progress (/ (- new-value) max-height)]
|
(gesture/on-update
|
||||||
(reanimated/set-shared-value overlay-opacity progress)
|
(fn [e]
|
||||||
(reanimated/set-shared-value derived-value bounded-value))))
|
(when-not @disable-gesture-update
|
||||||
(gesture/on-end
|
(let [event-value (oops/oget e :translationY)
|
||||||
(fn []
|
old-value (reanimated/get-shared-value saved-top)
|
||||||
(if (or (> (- (reanimated/get-shared-value derived-value))
|
new-value (+ old-value event-value)
|
||||||
(reanimated/get-shared-value saved-top))
|
progress (/ (- new-value) max-height)
|
||||||
(= (reanimated/get-shared-value derived-value)
|
reached-expanded? (< new-value (- max-height))
|
||||||
constants/text-min-height))
|
upper-boundary? (< new-value (- full-height))
|
||||||
(do ; minimize
|
lower-boundary? (and (> new-value (- constants/text-min-height))
|
||||||
(reanimated/animate derived-value constants/text-min-height)
|
(pos? event-value))]
|
||||||
(reanimated/animate overlay-opacity 0)
|
(when (and (not upper-boundary?) (not lower-boundary?))
|
||||||
(reanimated/set-shared-value saved-top (- constants/text-min-height))
|
(reset! expanded? false)
|
||||||
(reset! expanded? false)
|
(reanimated/set-shared-value overlay-opacity progress)
|
||||||
(js/setTimeout #(reset! overlay-z-index 0) 300))
|
(reanimated/set-shared-value derived-value (- new-value)))
|
||||||
(reanimated/set-shared-value saved-top
|
(when reached-expanded? (reset! expanded? true))
|
||||||
(- (reanimated/get-shared-value derived-value))))
|
(when lower-boundary?
|
||||||
(when (= (reanimated/get-shared-value derived-value) expanded-height)
|
(reset! disable-gesture-update true)
|
||||||
(reset! expanded? true))
|
(collapse-sheet {:derived-value derived-value
|
||||||
(reset! dragging? false)))))
|
:overlay-opacity overlay-opacity
|
||||||
|
:saved-top saved-top
|
||||||
|
:expanded? expanded?
|
||||||
|
:overlay-z-index overlay-z-index}))))))
|
||||||
|
(gesture/on-end
|
||||||
|
(fn []
|
||||||
|
(let [shared-derived-value (reanimated/get-shared-value derived-value)
|
||||||
|
below-max-height? (< shared-derived-value max-height)
|
||||||
|
below-saved-top? (> (- shared-derived-value)
|
||||||
|
(reanimated/get-shared-value saved-top))]
|
||||||
|
(if (and below-max-height? below-saved-top?)
|
||||||
|
(collapse-sheet {:derived-value derived-value
|
||||||
|
:overlay-opacity overlay-opacity
|
||||||
|
:saved-top saved-top
|
||||||
|
:expanded? expanded?
|
||||||
|
:overlay-z-index overlay-z-index})
|
||||||
|
(reanimated/set-shared-value saved-top
|
||||||
|
(- shared-derived-value)))
|
||||||
|
(when (= shared-derived-value expanded-height)
|
||||||
|
(reset! expanded? true))
|
||||||
|
(reset! dragging? false)))))))
|
||||||
|
|
||||||
(defn expand-sheet
|
(defn expand-sheet
|
||||||
[{:keys [derived-value overlay-opacity saved-top]}
|
[{:keys [derived-value overlay-opacity saved-top]}
|
||||||
|
|
@ -49,12 +77,6 @@
|
||||||
(reset! overlay-z-index 1)
|
(reset! overlay-z-index 1)
|
||||||
(reset! expanded? true)))
|
(reset! expanded? true)))
|
||||||
|
|
||||||
(defn on-scroll
|
|
||||||
[e expanded? dragging? {:keys [gradient-opacity]}]
|
|
||||||
(if (and (> (oops/oget e "nativeEvent.contentOffset.y") 0) expanded? (not dragging?))
|
|
||||||
(reanimated/animate gradient-opacity 1)
|
|
||||||
(reanimated/animate gradient-opacity 0)))
|
|
||||||
|
|
||||||
(defn on-layout
|
(defn on-layout
|
||||||
[e text-height]
|
[e text-height]
|
||||||
(reset! text-height (oops/oget e "nativeEvent.layout.height")))
|
(reset! text-height (oops/oget e "nativeEvent.layout.height")))
|
||||||
|
|
@ -68,5 +90,5 @@
|
||||||
|
|
||||||
(defn init-derived-animations
|
(defn init-derived-animations
|
||||||
[{:keys [derived-value]}]
|
[{:keys [derived-value]}]
|
||||||
{:height (worklet/text-sheet derived-value true)
|
{:height derived-value
|
||||||
:top (worklet/text-sheet derived-value false)})
|
:top (reanimated/interpolate derived-value [0 1] [0 -1])})
|
||||||
|
|
|
||||||
|
|
@ -13,13 +13,7 @@
|
||||||
[status-im2.contexts.chat.lightbox.text-sheet.utils :as utils]
|
[status-im2.contexts.chat.lightbox.text-sheet.utils :as utils]
|
||||||
[status-im2.contexts.chat.messages.content.text.view :as message-view]))
|
[status-im2.contexts.chat.messages.content.text.view :as message-view]))
|
||||||
|
|
||||||
(defn bar
|
(defn- text-sheet
|
||||||
[text-height]
|
|
||||||
(when (> text-height (* constants/line-height 2))
|
|
||||||
[rn/view {:style style/bar-container}
|
|
||||||
[rn/view {:style style/bar}]]))
|
|
||||||
|
|
||||||
(defn text-sheet
|
|
||||||
[messages overlay-opacity overlay-z-index text-sheet-lock?]
|
[messages overlay-opacity overlay-z-index text-sheet-lock?]
|
||||||
(let [text-height (reagent/atom 0)
|
(let [text-height (reagent/atom 0)
|
||||||
expanded? (reagent/atom false)
|
expanded? (reagent/atom false)
|
||||||
|
|
@ -33,50 +27,63 @@
|
||||||
constants/top-view-height
|
constants/top-view-height
|
||||||
(:bottom insets)
|
(:bottom insets)
|
||||||
(when platform/ios? (:top insets)))
|
(when platform/ios? (:top insets)))
|
||||||
expanded-height (min max-height
|
full-height (+ constants/bar-container-height
|
||||||
(+ constants/bar-container-height
|
constants/text-margin
|
||||||
@text-height
|
constants/line-height
|
||||||
constants/text-margin))
|
@text-height)
|
||||||
|
expanded-height (min max-height full-height)
|
||||||
animations (utils/init-animations overlay-opacity)
|
animations (utils/init-animations overlay-opacity)
|
||||||
derived (utils/init-derived-animations animations)]
|
derived (utils/init-derived-animations animations)
|
||||||
[gesture/gesture-detector
|
expanding-message? (> @text-height (* constants/line-height 2))]
|
||||||
{:gesture (utils/sheet-gesture animations
|
[rn/view
|
||||||
expanded-height
|
[reanimated/linear-gradient
|
||||||
max-height
|
{:colors [colors/neutral-100-opa-0 colors/neutral-100]
|
||||||
overlay-z-index
|
:pointer-events :none
|
||||||
expanded?
|
:locations [0 0.3]
|
||||||
dragging?)}
|
:start {:x 0 :y 1}
|
||||||
[reanimated/touchable-opacity
|
:end {:x 0 :y 0}
|
||||||
{:active-opacity 1
|
:style (style/top-gradient animations derived insets max-height)}]
|
||||||
:on-press
|
[gesture/gesture-detector
|
||||||
#(utils/expand-sheet animations
|
{:gesture (utils/sheet-gesture animations
|
||||||
expanded-height
|
expanded-height
|
||||||
max-height
|
max-height
|
||||||
overlay-z-index
|
full-height
|
||||||
expanded?
|
overlay-z-index
|
||||||
text-sheet-lock?)
|
expanded?
|
||||||
:style (style/sheet-container derived)}
|
dragging?
|
||||||
[bar @text-height]
|
expanding-message?)}
|
||||||
[reanimated/linear-gradient
|
[gesture/gesture-detector
|
||||||
{:colors [colors/neutral-100-opa-0 colors/neutral-100]
|
{:gesture (-> (gesture/gesture-tap)
|
||||||
:start {:x 0 :y 1}
|
(gesture/enabled (and expanding-message? (not @expanded?)))
|
||||||
:end {:x 0 :y 0}
|
(gesture/on-start (fn []
|
||||||
:style (style/top-gradient animations insets)}]
|
(utils/expand-sheet animations
|
||||||
[linear-gradient/linear-gradient
|
expanded-height
|
||||||
{:colors [colors/neutral-100-opa-50 colors/neutral-100-opa-0]
|
max-height
|
||||||
:start {:x 0 :y 1}
|
overlay-z-index
|
||||||
:end {:x 0 :y 0}
|
expanded?
|
||||||
:style style/bottom-gradient}]
|
text-sheet-lock?))))}
|
||||||
[gesture/scroll-view
|
[reanimated/view {:style (style/sheet-container derived)}
|
||||||
{:scroll-enabled @expanded?
|
(when expanding-message?
|
||||||
:scroll-event-throttle 16
|
[rn/view {:style style/bar-container}
|
||||||
:on-scroll #(utils/on-scroll % @expanded? @dragging? animations)
|
[rn/view {:style style/bar}]])
|
||||||
:style {:height (- max-height constants/bar-container-height)}}
|
[linear-gradient/linear-gradient
|
||||||
[message-view/render-parsed-text
|
{:colors [colors/neutral-100-opa-100 colors/neutral-100-opa-70 colors/neutral-100-opa-0]
|
||||||
{:content content
|
:start {:x 0 :y 1}
|
||||||
:chat-id chat-id
|
:end {:x 0 :y 0}
|
||||||
:style-override style/text-style
|
:locations [0.7 0.8 1]
|
||||||
:on-layout #(utils/on-layout % text-height)}]]]]))))
|
:style (style/bottom-gradient (:bottom insets))}]
|
||||||
|
[gesture/scroll-view
|
||||||
|
{:scroll-enabled false
|
||||||
|
:scroll-event-throttle 16
|
||||||
|
:bounces false
|
||||||
|
:style {:height (- max-height constants/bar-container-height)}
|
||||||
|
:content-container-style {:padding-top (when (not expanding-message?)
|
||||||
|
constants/bar-container-height)}}
|
||||||
|
[message-view/render-parsed-text
|
||||||
|
{:content content
|
||||||
|
:chat-id chat-id
|
||||||
|
:style-override (style/text-style expanding-message?)
|
||||||
|
:on-layout #(utils/on-layout % text-height)}]]]]]]))))
|
||||||
|
|
||||||
(defn view
|
(defn view
|
||||||
[messages {:keys [overlay-opacity]} {:keys [overlay-z-index]} {:keys [text-sheet-lock?]}]
|
[messages {:keys [overlay-opacity]} {:keys [overlay-z-index]} {:keys [text-sheet-lock?]}]
|
||||||
|
|
|
||||||
|
|
@ -75,7 +75,16 @@
|
||||||
{:transform [{:translateY (:pan-y animations)}
|
{:transform [{:translateY (:pan-y animations)}
|
||||||
{:translateX (:pan-x animations)}]}
|
{:translateX (:pan-x animations)}]}
|
||||||
{})}
|
{})}
|
||||||
[reanimated/view {:style (style/background animations @(:overlay-z-index state))}]
|
[reanimated/linear-gradient
|
||||||
|
{:colors [colors/neutral-100-opa-0 colors/neutral-100-opa-0 colors/neutral-100-opa-100
|
||||||
|
colors/neutral-100]
|
||||||
|
:locations [0.3 0.4 0.6 1]
|
||||||
|
:pointer-events :none
|
||||||
|
:style (style/background-bottom-gradient animations @(:overlay-z-index state))}]
|
||||||
|
[reanimated/linear-gradient
|
||||||
|
{:colors [colors/neutral-100-opa-50 colors/neutral-100]
|
||||||
|
:pointer-events :none
|
||||||
|
:style (style/background-top-gradient animations @(:overlay-z-index state))}]
|
||||||
[gesture/flat-list
|
[gesture/flat-list
|
||||||
{:ref #(reset! (:flat-list-ref props) %)
|
{:ref #(reset! (:flat-list-ref props) %)
|
||||||
:key-fn :message-id
|
:key-fn :message-id
|
||||||
|
|
@ -85,6 +94,7 @@
|
||||||
:data @data
|
:data @data
|
||||||
:render-fn image
|
:render-fn image
|
||||||
:render-data {:opacity-value (:opacity animations)
|
:render-data {:opacity-value (:opacity animations)
|
||||||
|
:overlay-opacity (:overlay-opacity animations)
|
||||||
:border-value (:border animations)
|
:border-value (:border animations)
|
||||||
:full-screen-scale (:full-screen-scale animations)
|
:full-screen-scale (:full-screen-scale animations)
|
||||||
:images-opacity (:images-opacity animations)
|
:images-opacity (:images-opacity animations)
|
||||||
|
|
@ -105,9 +115,12 @@
|
||||||
:shows-vertical-scroll-indicator false
|
:shows-vertical-scroll-indicator false
|
||||||
:shows-horizontal-scroll-indicator false
|
:shows-horizontal-scroll-indicator false
|
||||||
:on-viewable-items-changed handle-items-changed}]]]
|
:on-viewable-items-changed handle-items-changed}]]]
|
||||||
(when (and (not @transparent?) (not landscape?))
|
;; NOTE: not un-mounting bottom-view based on `transparent?` (like we do with the top-view
|
||||||
|
;; above), since we need to save the state of the text-sheet position. Instead, we use
|
||||||
|
;; the `:display` style property to hide the bottom-sheet.
|
||||||
|
(when (not landscape?)
|
||||||
[:f> bottom-view/bottom-view messages index scroll-index insets animations derived
|
[:f> bottom-view/bottom-view messages index scroll-index insets animations derived
|
||||||
item-width props state])]))
|
item-width props state transparent?])]))
|
||||||
|
|
||||||
(defn- f-lightbox
|
(defn- f-lightbox
|
||||||
[]
|
[]
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
[react-native.navigation :as navigation]
|
[react-native.navigation :as navigation]
|
||||||
[react-native.orientation :as orientation]
|
[react-native.orientation :as orientation]
|
||||||
[react-native.platform :as platform]
|
[react-native.platform :as platform]
|
||||||
[react-native.reanimated :as reanimated]
|
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im2.contexts.chat.lightbox.animations :as anim]
|
[status-im2.contexts.chat.lightbox.animations :as anim]
|
||||||
[status-im2.contexts.chat.lightbox.zoomable-image.constants :as constants]
|
[status-im2.contexts.chat.lightbox.zoomable-image.constants :as constants]
|
||||||
|
|
@ -107,12 +106,36 @@
|
||||||
(rescale constants/min-scale true)))
|
(rescale constants/min-scale true)))
|
||||||
|
|
||||||
(defn toggle-opacity
|
(defn toggle-opacity
|
||||||
[index {:keys [opacity-value border-value full-screen-scale transparent? props]} portrait?]
|
[index
|
||||||
|
{:keys [opacity-value overlay-opacity border-value full-screen-scale transparent?
|
||||||
|
props]}
|
||||||
|
portrait? last-overlay-opacity]
|
||||||
(let [{:keys [small-list-ref timers text-sheet-lock?]} props
|
(let [{:keys [small-list-ref timers text-sheet-lock?]} props
|
||||||
opacity (reanimated/get-shared-value opacity-value)
|
|
||||||
scale-value (inc (/ constants/margin
|
scale-value (inc (/ constants/margin
|
||||||
(:width (rn/get-window))))]
|
(:width (rn/get-window))))]
|
||||||
(if (= opacity 1)
|
(if @transparent?
|
||||||
|
(do
|
||||||
|
(js/clearTimeout (:hide-0 @timers))
|
||||||
|
(js/clearTimeout (:hide-1 @timers))
|
||||||
|
(reset! transparent? (not @transparent?))
|
||||||
|
(swap! timers assoc
|
||||||
|
:show-0
|
||||||
|
(js/setTimeout #((anim/animate opacity-value 1)
|
||||||
|
(anim/animate overlay-opacity @last-overlay-opacity)
|
||||||
|
(reset! last-overlay-opacity 0))
|
||||||
|
50))
|
||||||
|
(swap! timers assoc
|
||||||
|
:show-1
|
||||||
|
(js/setTimeout #(when @small-list-ref
|
||||||
|
(.scrollToIndex ^js @small-list-ref #js {:animated false :index index}))
|
||||||
|
100))
|
||||||
|
(anim/animate border-value 16)
|
||||||
|
(anim/animate full-screen-scale 1)
|
||||||
|
(when portrait?
|
||||||
|
(swap! timers assoc
|
||||||
|
:show-2
|
||||||
|
(js/setTimeout #(navigation/merge-options "lightbox" {:statusBar {:visible true}})
|
||||||
|
(if platform/ios? 150 50)))))
|
||||||
(do
|
(do
|
||||||
(js/clearTimeout (:show-0 @timers))
|
(js/clearTimeout (:show-0 @timers))
|
||||||
(js/clearTimeout (:show-1 @timers))
|
(js/clearTimeout (:show-1 @timers))
|
||||||
|
|
@ -122,26 +145,13 @@
|
||||||
(js/setTimeout #(navigation/merge-options "lightbox" {:statusBar {:visible false}})
|
(js/setTimeout #(navigation/merge-options "lightbox" {:statusBar {:visible false}})
|
||||||
(if platform/ios? 75 0)))
|
(if platform/ios? 75 0)))
|
||||||
(anim/animate opacity-value 0)
|
(anim/animate opacity-value 0)
|
||||||
|
(reset! last-overlay-opacity (anim/get-val overlay-opacity))
|
||||||
|
(anim/animate overlay-opacity 0)
|
||||||
|
(anim/animate border-value 0)
|
||||||
|
(anim/animate full-screen-scale scale-value)
|
||||||
(swap! timers assoc :hide-1 (js/setTimeout #(reset! transparent? (not @transparent?)) 400))
|
(swap! timers assoc :hide-1 (js/setTimeout #(reset! transparent? (not @transparent?)) 400))
|
||||||
(reset! text-sheet-lock? true)
|
(reset! text-sheet-lock? true)
|
||||||
(js/setTimeout #(reset! text-sheet-lock? false) 300))
|
(js/setTimeout #(reset! text-sheet-lock? false) 300)))))
|
||||||
(do
|
|
||||||
(js/clearTimeout (:hide-0 @timers))
|
|
||||||
(js/clearTimeout (:hide-1 @timers))
|
|
||||||
(reset! transparent? (not @transparent?))
|
|
||||||
(swap! timers assoc :show-0 (js/setTimeout #(anim/animate opacity-value 1) 50))
|
|
||||||
(swap! timers assoc
|
|
||||||
:show-1
|
|
||||||
(js/setTimeout #(when @small-list-ref
|
|
||||||
(.scrollToIndex ^js @small-list-ref #js {:animated false :index index}))
|
|
||||||
100))
|
|
||||||
(when portrait?
|
|
||||||
(swap! timers assoc
|
|
||||||
:show-2
|
|
||||||
(js/setTimeout #(navigation/merge-options "lightbox" {:statusBar {:visible true}})
|
|
||||||
(if platform/ios? 150 50))))))
|
|
||||||
(anim/animate border-value (if (= opacity 1) 0 16))
|
|
||||||
(anim/animate full-screen-scale (if (= opacity 1) scale-value 1))))
|
|
||||||
|
|
||||||
;;; Dimensions
|
;;; Dimensions
|
||||||
(defn get-dimensions
|
(defn get-dimensions
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
[react-native.orientation :as orientation]
|
[react-native.orientation :as orientation]
|
||||||
[react-native.platform :as platform]
|
[react-native.platform :as platform]
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.reanimated :as reanimated]
|
||||||
|
[reagent.core :as r]
|
||||||
[status-im2.contexts.chat.lightbox.animations :as anim]
|
[status-im2.contexts.chat.lightbox.animations :as anim]
|
||||||
[status-im2.contexts.chat.lightbox.zoomable-image.constants :as c]
|
[status-im2.contexts.chat.lightbox.zoomable-image.constants :as c]
|
||||||
[status-im2.contexts.chat.lightbox.zoomable-image.style :as style]
|
[status-im2.contexts.chat.lightbox.zoomable-image.style :as style]
|
||||||
|
|
@ -209,7 +210,8 @@
|
||||||
image-dimensions-nil?]
|
image-dimensions-nil?]
|
||||||
(let [{:keys [transparent? set-full-height?]} render-data
|
(let [{:keys [transparent? set-full-height?]} render-data
|
||||||
portrait? (= curr-orientation orientation/portrait)
|
portrait? (= curr-orientation orientation/portrait)
|
||||||
on-tap #(utils/toggle-opacity index render-data portrait?)
|
last-overlay-opacity (r/atom 0)
|
||||||
|
on-tap #(utils/toggle-opacity index render-data portrait? last-overlay-opacity)
|
||||||
tap (tap-gesture on-tap)
|
tap (tap-gesture on-tap)
|
||||||
double-tap (double-tap-gesture dimensions animations rescale transparent? on-tap)
|
double-tap (double-tap-gesture dimensions animations rescale transparent? on-tap)
|
||||||
pinch (pinch-gesture dimensions animations state rescale transparent? on-tap)
|
pinch (pinch-gesture dimensions animations state rescale transparent? on-tap)
|
||||||
|
|
@ -242,8 +244,8 @@
|
||||||
zoom-out-signal (rf/sub [:lightbox/zoom-out-signal])
|
zoom-out-signal (rf/sub [:lightbox/zoom-out-signal])
|
||||||
{:keys [set-full-height? curr-orientation]} render-data
|
{:keys [set-full-height? curr-orientation]} render-data
|
||||||
focused? (= shared-element-id message-id)
|
focused? (= shared-element-id message-id)
|
||||||
;; TODO - remove `image-dimensions` check,
|
;; TODO - remove `image-dimensions` check, once
|
||||||
;; once https://github.com/status-im/status-desktop/issues/10944 is fixed
|
;; https://github.com/status-im/status-desktop/issues/10944 is fixed
|
||||||
image-dimensions-nil? (not (and image-width image-height))
|
image-dimensions-nil? (not (and image-width image-height))
|
||||||
dimensions (utils/get-dimensions
|
dimensions (utils/get-dimensions
|
||||||
(or image-width (:screen-width render-data))
|
(or image-width (:screen-width render-data))
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,3 @@
|
||||||
(defn info-layout
|
(defn info-layout
|
||||||
[input top?]
|
[input top?]
|
||||||
(.infoLayout ^js layout-worklets input top?))
|
(.infoLayout ^js layout-worklets input top?))
|
||||||
|
|
||||||
(defn text-sheet
|
|
||||||
[input height?]
|
|
||||||
(.textSheet ^js layout-worklets input height?))
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue