status-im
/
status-react
mirror of https://github.com/status-im/status-react.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
:padding-top 16
:padding-horizontal 16
:background-color :white
:transform [{:translateY (- search-input-height)}]})
:background-color :white})
(def no-chats-wrapper
{:width "100%"
:align-items :center
(def chat-tooltip
{:align-items :center
:border-color colors/gray-lighter
:border-width 1
:border-radius 16})
:border-radius 16
:margin 16})
(def no-chats-text
{:font-size 15
:width 270
:margin-top 12
:line-height 22
:text-align :center
:color colors/black})
{:margin-top 50
:margin-horizontal 16
:line-height 22
:text-align :center})
(def welcome-view
{:flex 1
@ -156,8 +153,7 @@
:elevation 2})
(def empty-chats-header-container
{:flex-direction :row
:align-items :center
{:align-items :center
:justify-content :center})
(def hr-wrapper
@ -176,14 +172,8 @@
:color colors/gray})
(def tags-wrapper
{:width 300
:margin-top 10
:margin-bottom 18
:flex-direction :row
:flex-wrap :wrap
:align-items :center
:text-align :center
:justify-content :center})
{:margin-top 10
:margin-bottom 18})
(def tag-text
{:font-size 13
@ -196,10 +186,8 @@
:color colors/blue})
(def close-icon-container
{:width 19
:height 19
:margin-top 3
:margin-right 8
{:width 24
:height 24
:border-radius 12
:background-color colors/gray
: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.list.views :as list]
[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.screens.home.styles :as styles]
[status-im.ui.screens.home.filter.views :as filter.views]
@ -19,15 +18,10 @@
[status-im.ui.components.animation :as animation]
[status-im.constants :as constants]
[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]))
(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 []
(let [dimensions (reagent/atom {})]
(fn []
@ -43,53 +37,51 @@
:style {:width image-size :height image-size}}])])))
(defn welcome []
[react/view {:style {:flex 1}}
[react/view {:style styles/welcome-view}
[welcome-image-wrapper]
[react/i18n-text {:style styles/welcome-text :key :welcome-to-status}]
[react/view
[react/i18n-text {:style styles/welcome-text-description
:key :welcome-to-status-description}]]
[react/view {:align-items :center :margin-bottom 50}
[components.common/button {:on-press #(re-frame/dispatch [:navigate-back])
:accessibility-label :lets-go-button
:label (i18n/label :t/lets-go)}]]]])
[react/view {:style styles/welcome-view}
[welcome-image-wrapper]
[react/i18n-text {:style styles/welcome-text :key :welcome-to-status}]
[react/view
[react/i18n-text {:style styles/welcome-text-description
:key :welcome-to-status-description}]]
[react/view {:align-items :center :margin-bottom 50}
[components.common/button {:on-press #(re-frame/dispatch [:navigate-back])
:accessibility-label :lets-go-button
:label (i18n/label :t/lets-go)}]]])
(defn chat-tags-view []
[react/view {:align-items :center :margin-top 16}
[react/i18n-text {:style styles/no-chats-text :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 []
[react/view styles/chat-tooltip
[react/view {:style {:flex-direction :row}}
[react/view {:flex 1}
[react/view {:style styles/empty-chats-header-container}
[react/image {:source (resources/get-image :empty-chats-header)
: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?]
(filter.views/reset-height)
[react/view styles/no-chats
(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 welcome-blank-page []
[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 home-items-view [_ _ _ _ search-input-state]
(let [previous-touch (reagent/atom nil)
@ -123,18 +115,23 @@
previous-position)))
(filter.views/show-search!)))
false)}))
[list/flat-list {:data all-home-items
:key-fn first
:header [react/view {:height 4 :flex 1}]
:footer [react/view {:height 380 :margin-top 70} [home-tooltip-view false hide-home-tooltip?]]
:on-scroll-begin-drag
(fn [e]
(reset! scrolling-from-top?
;; 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])}]
(if (or (seq all-home-items) (not hide-home-tooltip?))
[list/flat-list (merge {:data all-home-items
:key-fn first
:header [react/view {:height 4 :flex 1}]
:footer [react/view
(when-not hide-home-tooltip?
[home-tooltip-view])
[react/view {:height 68 :flex 1}]]
:on-scroll-begin-drag
(fn [e]
(reset! scrolling-from-top?
;; 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)
[react/view {:width 1
:height styles/search-input-height}])]))))
@ -187,15 +184,12 @@
:animating true}]
[react/view {:flex 1}
[filter.views/search-input-wrapper search-filter]
(if (and (not search-filter)
(empty? all-home-items))
[home-tooltip-view true hide-home-tooltip?]
[home-items-view
search-filter
chats
all-home-items
hide-home-tooltip?
filter.views/search-input-state])])]
[home-items-view
search-filter
chats
all-home-items
hide-home-tooltip?
filter.views/search-input-state]])]
[home-action-button home-width]]])))
(views/defview home-wrapper []

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

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