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

[#9509] Chat onboarding tooltip needs fixes to scroll behaviour 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2019-11-26 14:16:21 +01:00
parent 68508a1500
commit b7c558f310
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
3 changed files with 85 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/status_im/ui/screens/home/styles.cljs
View File

@ -90,23 +90,20 @@
{:flex 1 {:flex 1
:padding-top 16 :padding-top 16
:padding-horizontal 16 :padding-horizontal 16
:background-color :white :background-color :white})
:transform [{:translateY (- search-input-height)}]})
(def no-chats-wrapper (def chat-tooltip
{:width "100%" {:align-items :center
:align-items :center
:border-color colors/gray-lighter :border-color colors/gray-lighter
:border-width 1 :border-width 1
:border-radius 16}) :border-radius 16
:margin 16})
(def no-chats-text (def no-chats-text
{:font-size 15 {:margin-top 50
:width 270 :margin-horizontal 16
:margin-top 12 :line-height 22
:line-height 22 :text-align :center})
:text-align :center
:color colors/black})
(def welcome-view (def welcome-view
{:flex 1 {:flex 1
@ -156,8 +153,7 @@
:elevation 2}) :elevation 2})
(def empty-chats-header-container (def empty-chats-header-container
{:flex-direction :row {:align-items :center
:align-items :center
:justify-content :center}) :justify-content :center})
(def hr-wrapper (def hr-wrapper
@ -176,14 +172,8 @@
:color colors/gray}) :color colors/gray})
(def tags-wrapper (def tags-wrapper
{:width 300 {:margin-top 10
:margin-top 10 :margin-bottom 18})
:margin-bottom 18
:flex-direction :row
:flex-wrap :wrap
:align-items :center
:text-align :center
:justify-content :center})
(def tag-text (def tag-text
{:font-size 13 {:font-size 13
@ -196,10 +186,8 @@
:color colors/blue}) :color colors/blue})
(def close-icon-container (def close-icon-container
{:width 19 {:width 24
:height 19 :height 24
:margin-top 3
:margin-right 8
:border-radius 12 :border-radius 12
:background-color colors/gray :background-color colors/gray
:align-items :center :align-items :center

142
src/status_im/ui/screens/home/views.cljs
View File

@ -7,7 +7,6 @@
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.home.styles :as styles] [status-im.ui.screens.home.styles :as styles]
[status-im.ui.screens.home.filter.views :as filter.views] [status-im.ui.screens.home.filter.views :as filter.views]
@ -19,15 +18,10 @@
[status-im.ui.components.animation :as animation] [status-im.ui.components.animation :as animation]
[status-im.constants :as constants] [status-im.constants :as constants]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.utils.fx :as fx] [status-im.ui.screens.add-new.new-public-chat.view :as new-public-chat]
[status-im.ui.screens.add-new.new-public-chat.view :as new-public-chat]) [status-im.ui.components.button :as button])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
(defn welcome-blank-page [blank?]
(when blank?
[react/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :center}}
[react/i18n-text {:style styles/welcome-blank-text :key :welcome-blank-message}]]))
(defn welcome-image-wrapper [] (defn welcome-image-wrapper []
(let [dimensions (reagent/atom {})] (let [dimensions (reagent/atom {})]
(fn [] (fn []
@ -43,53 +37,51 @@
:style {:width image-size :height image-size}}])]))) :style {:width image-size :height image-size}}])])))
(defn welcome [] (defn welcome []
[react/view {:style {:flex 1}} [react/view {:style styles/welcome-view}
[react/view {:style styles/welcome-view} [welcome-image-wrapper]
[welcome-image-wrapper] [react/i18n-text {:style styles/welcome-text :key :welcome-to-status}]
[react/i18n-text {:style styles/welcome-text :key :welcome-to-status}] [react/view
[react/view [react/i18n-text {:style styles/welcome-text-description
[react/i18n-text {:style styles/welcome-text-description :key :welcome-to-status-description}]]
:key :welcome-to-status-description}]] [react/view {:align-items :center :margin-bottom 50}
[react/view {:align-items :center :margin-bottom 50} [components.common/button {:on-press #(re-frame/dispatch [:navigate-back])
[components.common/button {:on-press #(re-frame/dispatch [:navigate-back]) :accessibility-label :lets-go-button
:accessibility-label :lets-go-button :label (i18n/label :t/lets-go)}]]])
:label (i18n/label :t/lets-go)}]]]])
(defn chat-tags-view [] (defn home-tooltip-view []
[react/view {:align-items :center :margin-top 16} [react/view styles/chat-tooltip
[react/i18n-text {:style styles/no-chats-text :key :follow-your-interests}] [react/view {:style {:flex-direction :row}}
[react/view {:style styles/tags-wrapper} [react/view {:flex 1}
[react/view {:flex-direction :row :flex-wrap :wrap :justify-content :center} [react/view {:style styles/empty-chats-header-container}
(for [chat new-public-chat/default-public-chats] [react/image {:source (resources/get-image :empty-chats-header)
(new-public-chat/render-topic chat))]]]) :style {:width 60 :height 50 :position :absolute :top -6}}]]
[react/touchable-highlight
{:style {:position :absolute :right 0 :top 0
:width 44 :height 44 :align-items :center :justify-content :center}
:on-press #(re-frame/dispatch [:multiaccounts.ui/hide-home-tooltip])
:accessibility-label :hide-home-button}
[react/view {:style styles/close-icon-container}
[icons/icon :main-icons/close {:color colors/white}]]]]]
[react/i18n-text {:style styles/no-chats-text :key :chat-and-transact}]
[react/view {:align-items :center :margin-top 16}
[button/button {:label :t/invite-friends
:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)})
:accessibility-label :invite-friends-button}]]
[react/view {:align-items :center :margin-top 16}
[react/view {:style styles/hr-wrapper}]
[react/i18n-text {:style styles/or-text :key :or}]]
[react/view {:margin-top 16}
[react/i18n-text {:style {:margin-horizontal 16
:text-align :center}
:key :follow-your-interests}]
[react/view {:style styles/tags-wrapper}
[react/view {:flex-direction :row :flex-wrap :wrap :justify-content :center}
(for [chat new-public-chat/default-public-chats]
(new-public-chat/render-topic chat))]]]])
(defn home-tooltip-view [blank? hide-home-tooltip?] (defn welcome-blank-page []
(filter.views/reset-height) [react/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :center}}
[react/view styles/no-chats [react/i18n-text {:style styles/welcome-blank-text :key :welcome-blank-message}]])
(if-not hide-home-tooltip?
[react/view styles/no-chats-wrapper
[react/view {:style {:flex-direction :row}}
[react/view {:flex 1}
[react/view {:style styles/empty-chats-header-container}
[components.common/image-contain
{:container-style {:width 60 :height 60 :margin-top -20}}
{:image (resources/get-image :empty-chats-header) :width 60 :height 60}]]
[react/view {:style {:position :absolute :right 0 :top 5}}
[react/touchable-highlight {:on-press (when-not hide-home-tooltip?
#(re-frame/dispatch [:multiaccounts.ui/hide-home-tooltip]))
:accessibility-label :hide-home-button}
[react/view {:style styles/close-icon-container}
[icons/icon :main-icons/close {:color colors/white :width 19 :height 19}]]]]]]
[react/i18n-text {:style styles/no-chats-text :key :chat-and-transact}]
[react/view {:align-items :center :margin-top 16}
[components.common/button {:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)})
:accessibility-label :invite-friends-button
:label (i18n/label :t/invite-friends)}]]
[react/view {:align-items :center :margin-top 16}
[react/view {:style styles/hr-wrapper}]
[react/i18n-text {:style styles/or-text :key :or}]]
[chat-tags-view]]
[welcome-blank-page blank?])])
(defn home-items-view [_ _ _ _ search-input-state] (defn home-items-view [_ _ _ _ search-input-state]
(let [previous-touch (reagent/atom nil) (let [previous-touch (reagent/atom nil)
@ -123,18 +115,23 @@
previous-position))) previous-position)))
(filter.views/show-search!))) (filter.views/show-search!)))
false)})) false)}))
[list/flat-list {:data all-home-items (if (or (seq all-home-items) (not hide-home-tooltip?))
:key-fn first [list/flat-list (merge {:data all-home-items
:header [react/view {:height 4 :flex 1}] :key-fn first
:footer [react/view {:height 380 :margin-top 70} [home-tooltip-view false hide-home-tooltip?]] :header [react/view {:height 4 :flex 1}]
:on-scroll-begin-drag :footer [react/view
(fn [e] (when-not hide-home-tooltip?
(reset! scrolling-from-top? [home-tooltip-view])
;; check if scrolling up from top of list [react/view {:height 68 :flex 1}]]
(zero? (.-y (.-contentOffset (.-nativeEvent e)))))) :on-scroll-begin-drag
:render-fn (fn [e]
(fn [home-item _] (reset! scrolling-from-top?
[inner-item/home-list-item home-item])}] ;; check if scrolling up from top of list
(zero? (.-y (.-contentOffset (.-nativeEvent e))))))
:render-fn
(fn [home-item _]
[inner-item/home-list-item home-item])})]
[welcome-blank-page])
(when (:to-hide? @search-input-state) (when (:to-hide? @search-input-state)
[react/view {:width 1 [react/view {:width 1
:height styles/search-input-height}])])))) :height styles/search-input-height}])]))))
@ -187,15 +184,12 @@
:animating true}] :animating true}]
[react/view {:flex 1} [react/view {:flex 1}
[filter.views/search-input-wrapper search-filter] [filter.views/search-input-wrapper search-filter]
(if (and (not search-filter) [home-items-view
(empty? all-home-items)) search-filter
[home-tooltip-view true hide-home-tooltip?] chats
[home-items-view all-home-items
search-filter hide-home-tooltip?
chats filter.views/search-input-state]])]
all-home-items
hide-home-tooltip?
filter.views/search-input-state])])]
[home-action-button home-width]]]))) [home-action-button home-width]]])))
(views/defview home-wrapper [] (views/defview home-wrapper []

5
src/status_im/ui/screens/multiaccounts/views.cljs
View File

@ -26,8 +26,9 @@
:ellipsize-mode :middle :ellipsize-mode :middle
:numberOfLines 1} :numberOfLines 1}
name]] name]]
[react/text {:style styles/multiaccount-badge-pub-key-text} ;;TODO we don't have public key in multiaccounts
(utils/get-shortened-address public-key)]] #_[react/text {:style styles/multiaccount-badge-pub-key-text}
(utils/get-shortened-address public-key)]]
[react/view {:flex 1}] [react/view {:flex 1}]
(when keycard-pairing (when keycard-pairing
[react/view {:justify-content :center [react/view {:justify-content :center