fix: connectivity banner height
Fixes #9803 --the height of the banner was cutting off banner messages spanning multiple lines Due to the animation of the view surrounding the banner text, calculate the banner height, then re-render the banner with the updated height. Render a view that wraps not only the message banner itself, but also a hidden (0-opacity and absolutely positioned) view with the banner text that calculates the height of the banner during the `on-layout` event. The banner height calculation causes the reagent atom value change to re-render the banner view with the udpated height. 1. There is an animation on the message banner. The "out" animation (ie when the banner is in the process of disappearing) seems to work correctly. However, there did not seem to be an "in" animation. I'm fairly confident these changes did not break any existing animations, however it's worth noting this so that others who are more familiar with the existing codebase may be in a better place to say otherwise. 2. Testing during changes was done by dispatching the `network-info-changed` event like so: ``` (re-frame/dispatch [::network-info-changed {:isConnected false}]) ``` Co-authored-by: Pascal Precht <pascal@status.im> Co-authored-by: Eric Dvorsak <eric@status.im> Signed-off-by: andrey <motor4ik@gmail.com>
This commit is contained in:
emizzle
andrey
parent
00ec6efcec
commit
27ed124e01
|
|
@ -13,9 +13,6 @@
|
|||
(:require-macros
|
||||
[status-im.utils.views :as views :refer [defview letsubs]]))
|
||||
|
||||
(def connectivity-bar-height 36)
|
||||
(def neg-connectivity-bar-height (- connectivity-bar-height))
|
||||
|
||||
;; ui-connectivity-status delays
|
||||
(def standard-delay 1000)
|
||||
(def long-delay 5000)
|
||||
|
|
@ -81,65 +78,66 @@
|
|||
|
||||
(defn manage-visibility
|
||||
"status-hidden is a per-view state, while to-hide? is a global state common to
|
||||
all connectivity views (we have at least one view in home and one in chat)"
|
||||
[connected? animate? anim-opacity anim-y status-hidden]
|
||||
|
||||
(if connected?
|
||||
(if animate?
|
||||
(when (and @to-hide? (not @status-hidden))
|
||||
(animation/start
|
||||
(animation/parallel
|
||||
[(animation/timing anim-opacity
|
||||
{:toValue 0
|
||||
:delay 800
|
||||
:duration 150
|
||||
:easing (.-ease ^js animation/easing)
|
||||
:useNativeDriver true})
|
||||
(animation/timing anim-y
|
||||
{:toValue (if platform/desktop? 0 neg-connectivity-bar-height)
|
||||
:delay 800
|
||||
:duration 150
|
||||
:easing (.-ease ^js animation/easing)
|
||||
:useNativeDriver true})])
|
||||
;; second param of start() - a callback that fires when animation stops
|
||||
#(do (reset! to-hide? false) (reset! status-hidden true))))
|
||||
(do
|
||||
(animation/set-value anim-opacity 0)
|
||||
(animation/set-value anim-y (if platform/desktop? 0 neg-connectivity-bar-height))
|
||||
(reset! to-hide? false)
|
||||
(reset! status-hidden true)))
|
||||
;; else
|
||||
(if animate?
|
||||
(when (and (not @to-hide?) @status-hidden)
|
||||
(animation/start
|
||||
(animation/parallel
|
||||
[(animation/timing anim-opacity
|
||||
{:toValue 1
|
||||
:duration 150
|
||||
:easing (.-ease ^js animation/easing)
|
||||
:useNativeDriver true})
|
||||
(animation/timing anim-y
|
||||
{:toValue (if platform/desktop? connectivity-bar-height 0)
|
||||
:duration 150
|
||||
:easing (.-ease ^js animation/easing)
|
||||
:useNativeDriver true})])
|
||||
;; second param of start() - a callback that fires when animation stops
|
||||
#(do (reset! to-hide? true) (reset! status-hidden false))))
|
||||
(do
|
||||
(animation/set-value anim-opacity 1)
|
||||
(animation/set-value anim-y (if platform/desktop? connectivity-bar-height 0))
|
||||
(reset! to-hide? true)
|
||||
(reset! status-hidden false)))))
|
||||
all connectivity views (we have at least one view in home and one in chat)"
|
||||
[connected? animate? anim-opacity anim-y status-hidden connectivity-bar-height]
|
||||
(let [neg-connectivity-bar-height (- @connectivity-bar-height)]
|
||||
(if connected?
|
||||
(if animate?
|
||||
(when (and @to-hide? (not @status-hidden))
|
||||
(animation/start
|
||||
(animation/parallel
|
||||
[(animation/timing anim-opacity
|
||||
{:toValue 0
|
||||
:delay 800
|
||||
:duration 150
|
||||
:easing (.-ease ^js animation/easing)
|
||||
:useNativeDriver true})
|
||||
(animation/timing anim-y
|
||||
{:toValue (if platform/desktop? 0 neg-connectivity-bar-height)
|
||||
:delay 800
|
||||
:duration 150
|
||||
:easing (.-ease ^js animation/easing)
|
||||
:useNativeDriver true})])
|
||||
;; second param of start() - a callback that fires when animation stops
|
||||
#(do (reset! to-hide? false) (reset! status-hidden true))))
|
||||
(do
|
||||
(animation/set-value anim-opacity 0)
|
||||
(animation/set-value anim-y (if platform/desktop? 0 neg-connectivity-bar-height))
|
||||
(reset! to-hide? false)
|
||||
(reset! status-hidden true)))
|
||||
;; else
|
||||
(if animate?
|
||||
(when (and (not @to-hide?) @status-hidden)
|
||||
(animation/start
|
||||
(animation/parallel
|
||||
[(animation/timing anim-opacity
|
||||
{:toValue 1
|
||||
:duration 150
|
||||
:easing (.-ease ^js animation/easing)
|
||||
:useNativeDriver true})
|
||||
(animation/timing anim-y
|
||||
{:toValue (if platform/desktop? connectivity-bar-height 0)
|
||||
:duration 150
|
||||
:easing (.-ease ^js animation/easing)
|
||||
:useNativeDriver true})])
|
||||
;; second param of start() - a callback that fires when animation stops
|
||||
#(do (reset! to-hide? true) (reset! status-hidden false))))
|
||||
(do
|
||||
(animation/set-value anim-opacity 1)
|
||||
(animation/set-value anim-y (if platform/desktop? connectivity-bar-height 0))
|
||||
(reset! to-hide? true)
|
||||
(reset! status-hidden false))))))
|
||||
|
||||
(defn connectivity-status
|
||||
[{:keys [connected?]} status-hidden]
|
||||
(let [anim-translate-y (animation/create-value neg-connectivity-bar-height)
|
||||
anim-opacity (animation/create-value 0)]
|
||||
[{:keys [connected?]} status-hidden height]
|
||||
(let [neg-connectivity-bar-height (- @height)
|
||||
anim-translate-y (animation/create-value neg-connectivity-bar-height)
|
||||
anim-opacity (animation/create-value 0)]
|
||||
(reagent/create-class
|
||||
{:component-did-mount
|
||||
(fn []
|
||||
(manage-visibility connected? false
|
||||
anim-opacity anim-translate-y status-hidden))
|
||||
anim-opacity anim-translate-y status-hidden height))
|
||||
:should-component-update
|
||||
;; ignore :loading-indicator?
|
||||
(fn [_ [_ old_p] [_ new_p]]
|
||||
|
|
@ -148,13 +146,13 @@
|
|||
:component-did-update
|
||||
(fn [comp]
|
||||
(manage-visibility (:connected? (reagent/props comp)) true
|
||||
anim-opacity anim-translate-y status-hidden))
|
||||
anim-opacity anim-translate-y status-hidden height))
|
||||
:reagent-render
|
||||
(fn [{:keys [message on-press-event connected? connecting?] :as opts}]
|
||||
(when-not @status-hidden
|
||||
[react/animated-view {:style (styles/text-wrapper
|
||||
(assoc opts
|
||||
:height connectivity-bar-height
|
||||
:height @height
|
||||
:background-color (if connected?
|
||||
colors/green
|
||||
colors/gray)
|
||||
|
|
@ -174,6 +172,20 @@
|
|||
:on-press (when on-press-event #(re-frame/dispatch [on-press-event]))}
|
||||
(i18n/label message)]))]))})))
|
||||
|
||||
(defn connectivity-status-comp
|
||||
[_ _]
|
||||
(let [height (reagent/atom 36)]
|
||||
(fn [props status-hidden]
|
||||
[react/view {}
|
||||
(when-not @status-hidden
|
||||
[react/text {:style (merge styles/text {:position :absolute
|
||||
:opacity 0})
|
||||
:on-layout (fn [e]
|
||||
(let [h (-> e .-nativeEvent .-layout .-height)]
|
||||
(reset! height (+ h (* (:top styles/text) 2)))))}
|
||||
(i18n/label (:message props))])
|
||||
[connectivity-status props status-hidden height]])))
|
||||
|
||||
;; timer updating the enqueued status
|
||||
(def timer (atom nil))
|
||||
|
||||
|
|
@ -243,7 +255,7 @@
|
|||
[react/view
|
||||
(when (and loading-indicator? @status-hidden)
|
||||
[loading-indicator @window-width])]]
|
||||
[connectivity-status
|
||||
[connectivity-status-comp
|
||||
(merge (or ui-status-properties
|
||||
{:connected? true :message :t/connected})
|
||||
{:window-width @window-width})
|
||||
|
|
|
|||
Loading…
Reference in New Issue