Skip to content

Commit

Permalink
[8556] fix - Last message jumps up after chat is opened
Browse files Browse the repository at this point in the history 
Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
  • Loading branch information
@bitsikka @flexsurfer
bitsikka authored and flexsurfer committed Jul 25, 2019
1 parent cb57680 commit 07dfc95
Show file tree
Hide file tree
Showing 9 changed files with 204 additions and 206 deletions.
6 changes: 4 additions & 2 deletions src/status_im/chat/models.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,8 @@
:on-error
(fn [error]
(log/error "can't remove a chat:" error))}]}
(navigation/navigate-to-cofx :home {}))
(when (not (= (:view-id db) :home))
(navigation/navigate-to-cofx :home {})))
(fx/merge cofx
(mailserver/remove-gaps chat-id)
(mailserver/remove-range chat-id)
Expand All @@ -176,7 +177,8 @@
;; TODO: this is not accurate, if there's a pending contact
;; request it will not be sent anymore
(transport.protocol/remove-chat chat-id)
(navigation/navigate-to-cofx :home {}))))
(when (not (= (:view-id db) :home))
(navigation/navigate-to-cofx :home {})))))

(defn- unread-messages-number [chats]
(apply + (map :unviewed-messages-count chats)))
Expand Down
3 changes: 2 additions & 1 deletion src/status_im/ui/components/connectivity/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
[status-im.utils.platform :as platform]))

(defnstyle text-wrapper
[{:keys [window-width height background-color opacity]}]
[{:keys [window-width height background-color opacity transform]}]
(cond-> {:flex-direction :row
:justify-content :center
:transform [{:translateY transform}]
:opacity opacity
:background-color (or background-color colors/gray)
:height height}
Expand Down
137 changes: 87 additions & 50 deletions src/status_im/ui/components/connectivity/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
[status-im.utils.utils :as utils]
[status-im.utils.platform :as platform]))

(def connectivity-bar-height 35)
(def neg-connectivity-bar-height (- connectivity-bar-height))

(defn easing [direction n]
{:toValue n
:easing ((if (= :in direction)
Expand Down Expand Up @@ -52,6 +55,7 @@
[react/view {:style {:width parent-width
:position :absolute
:top -3
:z-index 3
:height 3
:background-color colors/white}}
[react/animated-view {:style (animated-bar-style blue-bar-left-margin
Expand All @@ -62,40 +66,42 @@
colors/white)
:left (* 0.15 parent-width))}]]))

(defonce show-connected? (reagent/atom true))
(def to-hide? (reagent/atom false))

(defn manage-visibility [connected? anim-opacity anim-height]
(defn manage-visibility [connected? anim-opacity anim-y]
(if connected?
(do (animation/start
(animation/parallel
[(animation/timing anim-opacity
{:toValue 0
:delay 800
:duration 150
:easing (.-ease (animation/easing))
:useNativeDriver true})
(animation/timing anim-height
{:toValue (if platform/desktop? 0 -35)
:delay 800
:duration 150
:easing (.-ease (animation/easing))
:useNativeDriver true})]))
(utils/set-timeout
#(reset! show-connected? false)
2000))
(do (reset! show-connected? true)
(animation/start
(animation/parallel
[(animation/timing anim-opacity
{:toValue 1
:duration 150
:easing (.-ease (animation/easing))
:useNativeDriver true})
(animation/timing anim-height
{:toValue (if platform/desktop? 35 0)
:duration 150
:easing (.-ease (animation/easing))
:useNativeDriver true})])))))
(when @to-hide?
(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
#(reset! to-hide? false)))
;; else
(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
#(reset! to-hide? true))))

(defn connectivity-status
[{:keys [connected?]} anim-translate-y]
Expand All @@ -109,23 +115,22 @@
(manage-visibility (:connected? (reagent/props comp))
anim-opacity anim-translate-y))
:reagent-render
(fn [{:keys [view-id message on-press-fn
connected? connecting?] :as opts}]
(fn [{:keys [view-id message on-press-fn connected? connecting?] :as opts}]
[react/animated-view {:style (styles/text-wrapper
(assoc opts
:height (if platform/desktop?
anim-translate-y
35)
connectivity-bar-height)
:background-color (if connected?
colors/green
colors/gray)
;;TODO how does this affect desktop?
:transform anim-translate-y
:opacity anim-opacity
:modal? (= view-id :chat-modal)))
:accessibility-label :connection-status-text}
(when connecting?
[react/activity-indicator {:animated true
:color colors/white
:margin-right 6}])
[react/activity-indicator {:color colors/white :margin-right 6}])
(if (= message :mobile-network)
[react/nested-text {:style styles/text
:on-press on-press-fn}
Expand All @@ -136,28 +141,60 @@
:on-press on-press-fn}
(i18n/label message)])])})))

(defn connectivity-animation-wrapper [style anim-value & content]
(vec (concat
(if platform/desktop?
[react/view {:style {:flex 1}}]
[react/animated-view
{:style
(merge {:flex 1
:transform [{:translateY anim-value}]}
style)}])
content)))

(defview connectivity-view [anim-translate-y]
(letsubs [status-properties [:connectivity/status-properties]
view-id [:view-id]
window-width (reagent/atom 0)]
{:component-will-mount
(fn []
(if (:connected? status-properties)
(animation/set-value anim-translate-y neg-connectivity-bar-height)
(animation/set-value anim-translate-y 0)))}
(let [{:keys [loading-indicator?]} status-properties]
[react/view {:style {:align-items :stretch}
[react/view {:style {:align-items :stretch
:z-index 1}
:on-layout #(reset! window-width (-> % .-nativeEvent .-layout .-width))}
(when loading-indicator?
[loading-indicator @window-width])
;; This view below exists only to hide the connectivity-status bar when "connected".
;; Ideally connectivity-status bar would be hidden under "toolbar/toolbar",
;; but that has to be transparent(enven though it sits above the bar)
;; to show through the "loading-indicator"
;; TODO consider making the height the same height as the "toolbar/toolbar"
[react/view {:position :absolute
:top neg-connectivity-bar-height
:width @window-width
:z-index 2
:height connectivity-bar-height
:background-color colors/white}]
[connectivity-status
(merge status-properties
{:view-id view-id
:window-width @window-width})
anim-translate-y]])))

;; "push?" determines whether "content" gets pushed down when disconnected
;; like in :home view, or stays put like in :chat view
;; TODO determine-how-this-affects/fix desktop
(defn connectivity-animation-wrapper [style anim-value push? & content]
(vec (concat
(if platform/desktop?
[react/view {:style {:flex 1}}]
[react/animated-view
{:style (merge {:flex 1
:margin-bottom neg-connectivity-bar-height}
;; A translated view (connectivity-view in this case)
;; prevents touch interaction to component below
;; them. If we don't bring this view on the same level
;; or above as the translated view, the top
;; portion(same height as connectivity-view) of
;; "content" (which now occupies translated view's
;; natural[untranslated] position) becomes
;; unresponsive to touch
(when-not @to-hide?
{:z-index 1})
(if push?
{:transform [{:translateY anim-value}]}
{:transform [{:translateY neg-connectivity-bar-height}]})
style)}])
content)))
25 changes: 1 addition & 24 deletions src/status_im/ui/screens/chat/styles/main.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
(:require [status-im.ui.components.colors :as colors]))

(def chat-view
{:flex 1
:background-color colors/white})
{:flex 1})

(def toolbar-container
{:flex 1
Expand Down Expand Up @@ -177,12 +176,6 @@
(def add-contact-close-icon
{:margin-right 12})

(def message-view-preview
{:flex 1
:align-items :center
:justify-content :center
:background-color :white})

(defn message-view-animated [opacity]
{:opacity opacity
:flex 1
Expand All @@ -195,22 +188,6 @@
:padding-vertical 50
:margin-right 6})

#_(defn intro-header-container
[height status no-messages]
(let [adjusted-height (if (< height 280) 324 height)]
(if (or no-messages (= status (or :loading :empty)))
{:flex 1
:flex-direction :column
:justify-content :center
:align-items :center
:height adjusted-height
:padding-horizontal 32}
{:flex 1
:flex-direction :column
:justify-content :center
:align-items :center
:padding-horizontal 32})))

(defn intro-header-container
[height status no-messages]
(let [adjusted-height (if (< height 280) 324 height)]
Expand Down

0 comments on commit 07dfc95

Please sign in to comment.