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

Update contact screen to new design (#15526)

This commit is contained in:
erikseppanen 2023-04-18 13:28:12 -04:00 committed by GitHub
parent 8bf5abdf3d
commit 5d0b739cc0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 58 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/status_im2/contexts/add_new_contact/style.cljs
View File

@ -3,18 +3,6 @@
[react-native.platform :as platform] [react-native.platform :as platform]
[quo2.foundations.typography :as typography])) [quo2.foundations.typography :as typography]))
(defn container-kbd
[]
{:style {:flex 1}
:keyboardVerticalOffset 60})
(def container-image
{:style {:flex 1
:flex-direction :row}})
(def image
{:flex 1})
(defn container-outer (defn container-outer
[] []
{:style {:flex (if platform/ios? 4.5 5) {:style {:flex (if platform/ios? 4.5 5)
@ -41,7 +29,8 @@
[] []
{:size :heading-1 {:size :heading-1
:weight :semi-bold :weight :semi-bold
:style {:margin-bottom 6 :style {:margin-top 32
:margin-bottom 6
:color (colors/theme-colors :color (colors/theme-colors
colors/neutral-100 colors/neutral-100
colors/white)}}) colors/white)}})
@ -127,11 +116,8 @@
:accessibility-label :new-contact-close-button :accessibility-label :new-contact-close-button
:size 32 :size 32
:override-background-color (colors/theme-colors :override-background-color (colors/theme-colors
colors/white-opa-60 colors/neutral-10
colors/neutral-80-opa-60) colors/neutral-90)})
:style {:position :absolute
:left 20
:top 20}})
(def button-qr (def button-qr
{:type :outline {:type :outline

111
src/status_im2/contexts/add_new_contact/views.cljs
View File

@ -5,7 +5,6 @@
[react-native.core :as rn] [react-native.core :as rn]
[react-native.clipboard :as clipboard] [react-native.clipboard :as clipboard]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.common.resources :as resources]
[status-im.qr-scanner.core :as qr-scanner] [status-im.qr-scanner.core :as qr-scanner]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[status-im2.contexts.add-new-contact.style :as style] [status-im2.contexts.add-new-contact.style :as style]
@ -55,11 +54,9 @@
show-paste-button? (and (not (string/blank? @clipboard)) show-paste-button? (and (not (string/blank? @clipboard))
(string/blank? @default-value) (string/blank? @default-value)
(string/blank? input))] (string/blank? input))]
[rn/keyboard-avoiding-view (style/container-kbd)
[rn/view style/container-image [rn/view (style/container-outer)
[rn/image [rn/view style/container-inner
{:source (resources/get-image :add-new-contact)
:style style/image}]
[quo/button [quo/button
(merge (style/button-close) (merge (style/button-close)
{:on-press {:on-press
@ -67,56 +64,54 @@
(reset! clipboard nil) (reset! clipboard nil)
(reset! default-value nil) (reset! default-value nil)
(rf/dispatch [:contacts/clear-new-identity]) (rf/dispatch [:contacts/clear-new-identity])
(rf/dispatch [:navigate-back]))}) :i/close]] (rf/dispatch [:navigate-back]))}) :i/close]
[rn/view (style/container-outer) [quo/text (style/text-title)
[rn/view style/container-inner (i18n/label :t/add-a-contact)]
[quo/text (style/text-title) [quo/text (style/text-subtitle)
(i18n/label :t/add-a-contact)] (i18n/label :t/find-your-friends)]
[quo/text (style/text-subtitle) [quo/text (style/text-description)
(i18n/label :t/find-your-friends)] (i18n/label :t/ens-or-chat-key)]
[quo/text (style/text-description) [rn/view style/container-text-input
(i18n/label :t/ens-or-chat-key)] [rn/view (style/text-input-container invalid?)
[rn/view style/container-text-input [rn/text-input
[rn/view (style/text-input-container invalid?) (merge (style/text-input)
[rn/text-input {:default-value (or scanned @default-value input)
(merge (style/text-input) :placeholder (i18n/label :t/type-some-chat-key)
{:default-value (or scanned @default-value input) :on-change-text (fn [v]
:placeholder (i18n/label :t/type-some-chat-key) (reset! default-value v)
:on-change-text (fn [v] (debounce/debounce-and-dispatch
(reset! default-value v) [:contacts/set-new-identity v nil]
(debounce/debounce-and-dispatch 600))})]
[:contacts/set-new-identity v nil] (when show-paste-button?
600))})] [quo/button
(when show-paste-button? (merge style/button-paste
[quo/button {:on-press
(merge style/button-paste (fn []
{:on-press (reset! default-value @clipboard)
(fn [] (rf/dispatch
(reset! default-value @clipboard) [:contacts/set-new-identity @clipboard nil]))})
(rf/dispatch (i18n/label :t/paste)])]
[:contacts/set-new-identity @clipboard nil]))})
(i18n/label :t/paste)])]
[quo/button
(merge style/button-qr
{:on-press #(rf/dispatch
[::qr-scanner/scan-code
{:handler :contacts/qr-code-scanned}])})
:i/scan]]
(when invalid?
[rn/view style/container-invalid
[quo/icon :i/alert style/icon-invalid]
[quo/text style/text-invalid
(i18n/label (or msg :t/invalid-ens-or-key))]])
(when (= state :valid)
[found-contact public-key])]
[rn/view
[quo/button [quo/button
(merge (style/button-view-profile state) (merge style/button-qr
{:on-press {:on-press #(rf/dispatch
(fn [] [::qr-scanner/scan-code
(reset! clipboard nil) {:handler :contacts/qr-code-scanned}])})
(reset! default-value nil) :i/scan]]
(rf/dispatch [:contacts/clear-new-identity]) (when invalid?
(rf/dispatch [:navigate-back]) [rn/view style/container-invalid
(rf/dispatch [:chat.ui/show-profile public-key ens]))}) [quo/icon :i/alert style/icon-invalid]
(i18n/label :t/view-profile)]]]])))) [quo/text style/text-invalid
(i18n/label (or msg :t/invalid-ens-or-key))]])
(when (= state :valid)
[found-contact public-key])]
[rn/view
[quo/button
(merge (style/button-view-profile state)
{:on-press
(fn []
(reset! clipboard nil)
(reset! default-value nil)
(rf/dispatch [:contacts/clear-new-identity])
(rf/dispatch [:navigate-back])
(rf/dispatch [:chat.ui/show-profile public-key ens]))})
(i18n/label :t/view-profile)]]]))))

1
src/status_im2/navigation/screens.cljs
View File

@ -71,6 +71,7 @@
:component album-selector/album-selector} :component album-selector/album-selector}
{:name :new-contact {:name :new-contact
:options {:sheet? true}
:component add-new-contact/new-contact} :component add-new-contact/new-contact}
{:name :discover-communities {:name :discover-communities