status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 2020-04-17 14:14:36 +10:00 committed by andrey
parent 00ec6efcec
commit 27ed124e01
No known key found for this signature in database
GPG Key ID: 89B67245FD2F0272
1 changed files with 71 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/status_im/ui/components/connectivity/view.cljs
View File

@ -13,9 +13,6 @@
(:require-macros (:require-macros
[status-im.utils.views :as views :refer [defview letsubs]])) [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 ;; ui-connectivity-status delays
(def standard-delay 1000) (def standard-delay 1000)
(def long-delay 5000) (def long-delay 5000)
@ -81,65 +78,66 @@
(defn manage-visibility (defn manage-visibility
"status-hidden is a per-view state, while to-hide? is a global state common to "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)" all connectivity views (we have at least one view in home and one in chat)"
[connected? animate? anim-opacity anim-y status-hidden] [connected? animate? anim-opacity anim-y status-hidden connectivity-bar-height]
(let [neg-connectivity-bar-height (- @connectivity-bar-height)]
(if connected? (if connected?
(if animate? (if animate?
(when (and @to-hide? (not @status-hidden)) (when (and @to-hide? (not @status-hidden))
(animation/start (animation/start
(animation/parallel (animation/parallel
[(animation/timing anim-opacity [(animation/timing anim-opacity
{:toValue 0 {:toValue 0
:delay 800 :delay 800
:duration 150 :duration 150
:easing (.-ease ^js animation/easing) :easing (.-ease ^js animation/easing)
:useNativeDriver true}) :useNativeDriver true})
(animation/timing anim-y (animation/timing anim-y
{:toValue (if platform/desktop? 0 neg-connectivity-bar-height) {:toValue (if platform/desktop? 0 neg-connectivity-bar-height)
:delay 800 :delay 800
:duration 150 :duration 150
:easing (.-ease ^js animation/easing) :easing (.-ease ^js animation/easing)
:useNativeDriver true})]) :useNativeDriver true})])
;; second param of start() - a callback that fires when animation stops ;; second param of start() - a callback that fires when animation stops
#(do (reset! to-hide? false) (reset! status-hidden true)))) #(do (reset! to-hide? false) (reset! status-hidden true))))
(do (do
(animation/set-value anim-opacity 0) (animation/set-value anim-opacity 0)
(animation/set-value anim-y (if platform/desktop? 0 neg-connectivity-bar-height)) (animation/set-value anim-y (if platform/desktop? 0 neg-connectivity-bar-height))
(reset! to-hide? false) (reset! to-hide? false)
(reset! status-hidden true))) (reset! status-hidden true)))
;; else ;; else
(if animate? (if animate?
(when (and (not @to-hide?) @status-hidden) (when (and (not @to-hide?) @status-hidden)
(animation/start (animation/start
(animation/parallel (animation/parallel
[(animation/timing anim-opacity [(animation/timing anim-opacity
{:toValue 1 {:toValue 1
:duration 150 :duration 150
:easing (.-ease ^js animation/easing) :easing (.-ease ^js animation/easing)
:useNativeDriver true}) :useNativeDriver true})
(animation/timing anim-y (animation/timing anim-y
{:toValue (if platform/desktop? connectivity-bar-height 0) {:toValue (if platform/desktop? connectivity-bar-height 0)
:duration 150 :duration 150
:easing (.-ease ^js animation/easing) :easing (.-ease ^js animation/easing)
:useNativeDriver true})]) :useNativeDriver true})])
;; second param of start() - a callback that fires when animation stops ;; second param of start() - a callback that fires when animation stops
#(do (reset! to-hide? true) (reset! status-hidden false)))) #(do (reset! to-hide? true) (reset! status-hidden false))))
(do (do
(animation/set-value anim-opacity 1) (animation/set-value anim-opacity 1)
(animation/set-value anim-y (if platform/desktop? connectivity-bar-height 0)) (animation/set-value anim-y (if platform/desktop? connectivity-bar-height 0))
(reset! to-hide? true) (reset! to-hide? true)
(reset! status-hidden false))))) (reset! status-hidden false))))))
(defn connectivity-status (defn connectivity-status
[{:keys [connected?]} status-hidden] [{:keys [connected?]} status-hidden height]
(let [anim-translate-y (animation/create-value neg-connectivity-bar-height) (let [neg-connectivity-bar-height (- @height)
anim-opacity (animation/create-value 0)] anim-translate-y (animation/create-value neg-connectivity-bar-height)
anim-opacity (animation/create-value 0)]
(reagent/create-class (reagent/create-class
{:component-did-mount {:component-did-mount
(fn [] (fn []
(manage-visibility connected? false (manage-visibility connected? false
anim-opacity anim-translate-y status-hidden)) anim-opacity anim-translate-y status-hidden height))
:should-component-update :should-component-update
;; ignore :loading-indicator? ;; ignore :loading-indicator?
(fn [_ [_ old_p] [_ new_p]] (fn [_ [_ old_p] [_ new_p]]
@ -148,13 +146,13 @@
:component-did-update :component-did-update
(fn [comp] (fn [comp]
(manage-visibility (:connected? (reagent/props comp)) true (manage-visibility (:connected? (reagent/props comp)) true
anim-opacity anim-translate-y status-hidden)) anim-opacity anim-translate-y status-hidden height))
:reagent-render :reagent-render
(fn [{:keys [message on-press-event connected? connecting?] :as opts}] (fn [{:keys [message on-press-event connected? connecting?] :as opts}]
(when-not @status-hidden (when-not @status-hidden
[react/animated-view {:style (styles/text-wrapper [react/animated-view {:style (styles/text-wrapper
(assoc opts (assoc opts
:height connectivity-bar-height :height @height
:background-color (if connected? :background-color (if connected?
colors/green colors/green
colors/gray) colors/gray)
@ -174,6 +172,20 @@
:on-press (when on-press-event #(re-frame/dispatch [on-press-event]))} :on-press (when on-press-event #(re-frame/dispatch [on-press-event]))}
(i18n/label message)]))]))}))) (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 ;; timer updating the enqueued status
(def timer (atom nil)) (def timer (atom nil))
@ -243,7 +255,7 @@
[react/view [react/view
(when (and loading-indicator? @status-hidden) (when (and loading-indicator? @status-hidden)
[loading-indicator @window-width])]] [loading-indicator @window-width])]]
[connectivity-status [connectivity-status-comp
(merge (or ui-status-properties (merge (or ui-status-properties
{:connected? true :message :t/connected}) {:connected? true :message :t/connected})
{:window-width @window-width}) {:window-width @window-width})