diff --git a/src/status_im/ui/components/connectivity/view.cljs b/src/status_im/ui/components/connectivity/view.cljs index 53bfad3c4567..52cce3a1866c 100644 --- a/src/status_im/ui/components/connectivity/view.cljs +++ b/src/status_im/ui/components/connectivity/view.cljs @@ -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) @@ -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 @@ -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 @@ -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] @@ -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