Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[8556] fix - Last message jumps up after chat is opened #8589

Merged
merged 1 commit into from
Jul 25, 2019
Merged

[8556] fix - Last message jumps up after chat is opened #8589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/status_im/chat/models.cljs
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading