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

[fix] make unread message badge touchable 

Unread message badge is not touchable which reduces the surface area
that can be used to go back from a chat when user has unread messages

This gives user the impression that he needs to tap many times to go
back and that the UI lags because a smaller area is touchable when
users have unread messages

Signed-off-by: Eric Dvorsak <eric@dvorsak.fr>
This commit is contained in:
Eric Dvorsak 2018-05-13 18:39:52 +02:00
parent d107f18f78
commit f4ec87d36b
No known key found for this signature in database
GPG Key ID: 932AC1CE5F05DE0C
4 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/ui/components/chat_icon/screen.cljs
View File

@ -149,7 +149,7 @@
(defn dapp-icon-browser [contact size] (defn dapp-icon-browser [contact size]
[contact-icon-view contact [contact-icon-view contact
{:container {:width size :height size} {:container {:width size :height size :top 3 :margin-left 2}
:online-view-wrapper styles/online-view-wrapper :online-view-wrapper styles/online-view-wrapper
:online-view styles/online-view :online-view styles/online-view
:online-dot-left styles/online-dot-left :online-dot-left styles/online-dot-left

10
src/status_im/ui/components/toolbar/styles.cljs
View File

@ -59,9 +59,9 @@
{:width 24 {:width 24
:height 24}) :height 24})
(def nav-item-button (defn nav-item-button [unread-messages?]
{:padding-vertical 16 {:margin-left 13
:padding-horizontal 13}) :margin-right (if unread-messages? -5 13)})
(defstyle item (defstyle item
{:ios {:padding-horizontal 12 {:ios {:padding-horizontal 12
@ -88,6 +88,4 @@
(def ios-content-item {:position :absolute :right 40 :left 40}) (def ios-content-item {:position :absolute :right 40 :left 40})
(def counter-container (def counter-container
{:position :absolute {:top 3})
:top 19
:right 0})

15
src/status_im/ui/components/toolbar/view.cljs
View File

@ -24,17 +24,18 @@
item]]) item]])
(defn nav-button (defn nav-button
[{:keys [icon icon-opts] :as props}] [{:keys [icon icon-opts unread-messages?] :as props}]
[nav-item (merge {:style styles/nav-item-button} props) [nav-item (merge {:style (styles/nav-item-button unread-messages?)} props)
[vector-icons/icon icon icon-opts]]) [vector-icons/icon icon icon-opts]])
(defview nav-button-with-count [props] (defview nav-button-with-count [props]
(letsubs [unread-messages-number [:get-chats-unread-messages-number]] (letsubs [unread-messages-number [:get-chats-unread-messages-number]]
[react/view (let [unread-messages? (pos? unread-messages-number)]
[nav-button props] [react/view {:flex-direction :row}
(when (pos? unread-messages-number) [nav-button (assoc props :unread-messages? unread-messages?)]
[react/view styles/counter-container (when unread-messages?
[components.common/counter unread-messages-number]])])) [nav-item (merge {:style styles/counter-container} props)
[components.common/counter unread-messages-number]])])))
(defn nav-text (defn nav-text
([text] (nav-text nil text)) ([text] (nav-text nil text))

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

@ -82,15 +82,14 @@
{:keys [can-go-back? can-go-forward?]} [:get :browser/options] {:keys [can-go-back? can-go-forward?]} [:get :browser/options]
extra-js [:web-view-extra-js] extra-js [:web-view-extra-js]
rpc-url [:get :rpc-url] rpc-url [:get :rpc-url]
unread-messages-number [:get-chats-unread-messages-number]
network-id [:get-network-id]] network-id [:get-network-id]]
[react/keyboard-avoiding-view styles/browser [react/keyboard-avoiding-view styles/browser
[status-bar/status-bar] [status-bar/status-bar]
[toolbar.view/toolbar {} [toolbar.view/toolbar {}
(toolbar.view/nav-back-count) (toolbar.view/nav-back-count)
(if dapp? (if dapp?
[toolbar-content-dapp contact unread-messages-number] [toolbar-content-dapp contact]
[toolbar-content browser unread-messages-number])] [toolbar-content browser])]
(if url (if url
[components.webview-bridge/webview-bridge [components.webview-bridge/webview-bridge
{:ref #(reset! webview %) {:ref #(reset! webview %)