improved new chat UI

This commit is contained in:
Andrey Shovkoplyas 2018-05-31 11:19:47 +03:00 committed by Roman Volosovskyi
parent 0d0c37e4a9
commit 2eccca9898
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
3 changed files with 36 additions and 12 deletions

View File

@ -24,25 +24,27 @@
[react/keyboard-avoiding-view open-dapp.styles/main-container
[status-bar/status-bar]
[toolbar.view/simple-toolbar (i18n/label :t/new-chat)]
[react/view add-new.styles/input-container
[react/view add-new.styles/new-chat-container
[react/view add-new.styles/new-chat-input-container
[react/text-input {:on-change-text #(re-frame/dispatch [:set :contacts/new-identity %])
:on-submit-editing #(when-not error-message
(re-frame/dispatch [:add-contact-handler]))
:placeholder (i18n/label :t/enter-contact-code)
:style add-new.styles/input
:accessibility-label :enter-contact-code-input
:return-key-type :go}]
:return-key-type :go}]]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:scan-qr-code
{:toolbar-title (i18n/label :t/new-contact)}
:set-contact-identity-from-qr])
:style {:margin-right 14}
:style add-new.styles/button-container
:accessibility-label :scan-contact-code-button}
[react/view
[vector-icons/icon :icons/qr {:color colors/blue}]]]]
[react/text {:style styles/error-message}
error-message]
(when (seq contacts)
[react/text {:style open-dapp.styles/list-title}
(i18n/label :t/contacts)]
(i18n/label :t/contacts)])
[list/flat-list {:data contacts
:key-fn :address
:render-fn render-row

View File

@ -42,7 +42,8 @@
:color colors/white})
(def input-container
{:padding-left 0
{:padding 0
:padding-right 16
:background-color nil})
(def tooltip

View File

@ -3,6 +3,10 @@
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as styles]))
(def new-chat-container
{:flex-direction :row
:align-items :center})
(def input-container
{:flex-direction :row
:align-items :center
@ -12,6 +16,23 @@
:margin-horizontal 14
:margin-top 24})
(def new-chat-input-container
(merge
input-container
{:flex 1
:margin-horizontal 0
:margin-left 14}))
(def button-container
{:justify-content :center
:border-radius styles/border-radius
:height 52
:background-color colors/gray-lighter
:padding-horizontal 15
:margin-right 14
:margin-left 3
:margin-top 24})
(defstyle input
{:flex 1
:font-size 15