Skip to content

Commit

Permalink
fix: connectivity banner height
Browse files Browse the repository at this point in the history 
## Summary
Fixes #9803 --the height of the banner was cutting off banner messages spanning multiple lines

## Fixes
Due to the animation of the view surrounding the banner text, calculate the banner height, then re-render the banner with the updated height.

## Details
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.

## Notes
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>
  • Loading branch information
3 people committed Apr 20, 2020
1 parent fee6864 commit f168515
Showing 1 changed file with 130 additions and 116 deletions.
246 changes: 130 additions & 116 deletions src/status_im/ui/components/connectivity/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
[status-im.utils.platform :as platform]
[taoensso.timbre :as log]))

(def connectivity-bar-height 36)
(def neg-connectivity-bar-height (- connectivity-bar-height))
;; (def connectivity-bar-height 36)
;; (def neg-connectivity-bar-height (- connectivity-bar-height))

;; ui-connectivity-status delays
(def standard-delay 1000)
Expand All @@ -34,34 +34,32 @@
(defn animated-bar-style [margin-value width color]
{:position :absolute
:width width
:transform [{:translateX
(animation/interpolate
margin-value
{:inputRange [0 1]
:outputRange [0 width]})}]
:transform [{:translateX (animation/interpolate
margin-value
{:inputRange [0 1]
:outputRange [0 width]})}]
:height 3
:background-color color})

(views/defview loading-indicator [parent-width]
(views/letsubs [blue-bar-left-margin (animation/create-value 0)
white-bar-left-margin (animation/create-value 0)]
{:component-did-mount
(fn [_]
(animation/start
(animation/anim-loop
(animation/anim-sequence
[(animation/parallel
[(animation/timing blue-bar-left-margin (easing :in 0.19))
(animation/timing white-bar-left-margin (easing :in 0.65))])
(animation/parallel
[(animation/timing blue-bar-left-margin (easing :out 0.85))
(animation/timing white-bar-left-margin (easing :out 0.85))])
(animation/parallel
[(animation/timing blue-bar-left-margin (easing :in 0.19))
(animation/timing white-bar-left-margin (easing :in 0.65))])
(animation/parallel
[(animation/timing blue-bar-left-margin (easing :out 0))
(animation/timing white-bar-left-margin (easing :out 0))])]))))}
{:component-did-mount (fn [_]
(animation/start
(animation/anim-loop
(animation/anim-sequence
[(animation/parallel
[(animation/timing blue-bar-left-margin (easing :in 0.19))
(animation/timing white-bar-left-margin (easing :in 0.65))])
(animation/parallel
[(animation/timing blue-bar-left-margin (easing :out 0.85))
(animation/timing white-bar-left-margin (easing :out 0.85))])
(animation/parallel
[(animation/timing blue-bar-left-margin (easing :in 0.19))
(animation/timing white-bar-left-margin (easing :in 0.65))])
(animation/parallel
[(animation/timing blue-bar-left-margin (easing :out 0))
(animation/timing white-bar-left-margin (easing :out 0))])]))))}
[react/view {:style {:width parent-width
:position :absolute
:top -3
Expand All @@ -78,100 +76,117 @@

(def to-hide? (reagent/atom false))

(defn manage-visibility [connected? animate? anim-opacity anim-y status-hidden]
(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)"
(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 (animation/easing))
:useNativeDriver true})
(animation/timing anim-y
{:toValue (if platform/desktop? 0 neg-connectivity-bar-height)
:delay 800
:duration 150
:easing (.-ease (animation/easing))
:useNativeDriver true})])
[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 (animation/easing))
:useNativeDriver true})
(animation/timing anim-y
{:toValue (if platform/desktop? 0 neg-connectivity-bar-height)
:delay 800
:duration 150
:easing (.-ease (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)))
#(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 (animation/easing))
:useNativeDriver true})
(animation/timing anim-y
{:toValue (if platform/desktop? connectivity-bar-height 0)
:duration 150
:easing (.-ease (animation/easing))
:useNativeDriver true})])
(if animate?
(when (and (not @to-hide?) @status-hidden)
(animation/start
(animation/parallel
[(animation/timing anim-opacity
{:toValue 1
:duration 150
:easing (.-ease (animation/easing))
:useNativeDriver true})
(animation/timing anim-y
{:toValue (if platform/desktop? connectivity-bar-height 0)
:duration 150
:easing (.-ease (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)))))
#(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);(- (or connectivity-bar-height-message connectivity-bar-height)));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))
:should-component-update
;; ignore :loading-indicator?
{:component-did-mount (fn []
(manage-visibility connected? false
anim-opacity anim-translate-y status-hidden height))
:should-component-update ;; ignore :loading-indicator?
(fn [_ [_ old_p] [_ new_p]]
(not= (dissoc old_p :loading-indicator?)
(dissoc new_p :loading-indicator?)))
:component-did-update
(fn [comp]
(manage-visibility (:connected? (reagent/props comp)) true
anim-opacity anim-translate-y status-hidden))
: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
:background-color (if connected?
colors/green
colors/gray)
:transform anim-translate-y
:opacity anim-opacity))
:accessibility-label :connection-status-text}
(when connecting?
[react/activity-indicator {:color colors/white :margin-right 6}])
(if (= message :mobile-network)
[react/nested-text {:style styles/text
:on-press (when on-press-event #(re-frame/dispatch [on-press-event]))}
(i18n/label :t/waiting-for-wifi) " "
[{:style {:text-decoration-line :underline}}
(i18n/label :t/waiting-for-wifi-change)]]
(when message
[react/text {:style styles/text
:on-press (when on-press-event #(re-frame/dispatch [on-press-event]))}
(i18n/label message)]))]))})))
:component-did-update (fn [comp]
(manage-visibility (:connected? (reagent/props comp)) true
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 @height
:background-color (if connected?
colors/green
colors/gray)
:transform anim-translate-y
:opacity anim-opacity))
:accessibility-label :connection-status-text}
(when connecting?
[react/activity-indicator {:color colors/white
:margin-right 6}])
(if (= message :mobile-network)
[react/nested-text {:style styles/text
:on-press (when on-press-event #(re-frame/dispatch [on-press-event]))}
(i18n/label :t/waiting-for-wifi) " "
[{:style {:text-decoration-line :underline}}
(i18n/label :t/waiting-for-wifi-change)]]
(when message
[react/text {:style styles/text
: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))

;; connectivity status change going to be persisted to :connectivity/ui-status-properties
Expand Down Expand Up @@ -216,14 +231,11 @@ all connectivity views (we have at least one view in home and one in chat)"
"this empty view is needed to react propagate status-properties to ui-status-properties"
[props]
(reagent/create-class
{:component-did-mount
#(propagate-status props)
:should-component-update
(fn [_ _ [_ props]]
(propagate-status props)
false)
:reagent-render
#()}))
{:component-did-mount #(propagate-status props)
:should-component-update (fn [_ _ [_ props]]
(propagate-status props)
false)
:reagent-render #()}))

(defview connectivity [header footer]
(letsubs [status-properties [:connectivity/status-properties]
Expand All @@ -235,14 +247,16 @@ all connectivity views (we have at least one view in home and one in chat)"
(let [loading-indicator? (:loading-indicator? ui-status-properties)]
[react/view {:style {:flex 1}
:on-layout #(reset! window-width (-> % .-nativeEvent .-layout .-width))}
[react/view {:style {:z-index 2 :background-color colors/white}}
[react/view {:style {:z-index 2
:background-color colors/white}}
header
[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})
{:connected? true
:message :t/connected})
{:window-width @window-width})
status-hidden]
;;TODO this is something weird, rework
Expand Down

0 comments on commit f168515

Please sign in to comment.