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 chat/topic validation 

Remove empty line

Fix formatting

Add custom use-valid-contact-code text for desktop

Add red border when validation failed

Add border-width

Signed-off-by: Vitaliy Vlasov <siphiuel@gmail.com>
This commit is contained in:
Vitaliy Vlasov 2018-09-26 01:24:08 +03:00
parent 1ceebe703a
commit 7e62ebe96b
No known key found for this signature in database
GPG Key ID: A7D57C347F2B2964
4 changed files with 92 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/status_im/ui/screens/add_new/new_chat/db.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.ui.screens.add-new.new-chat.db
(:require [status-im.utils.hex :as hex]
[status-im.utils.platform :as platform]
[status-im.i18n :as i18n]
[cljs.spec.alpha :as spec]
[clojure.string :as string]))
@ -11,7 +12,8 @@
(defn validate-pub-key [db whisper-identity]
(cond
(not (spec/valid? :global/public-key whisper-identity))
(i18n/label :t/use-valid-contact-code)
(i18n/label (if platform/desktop?
:t/use-valid-contact-code-desktop
:t/use-valid-contact-code))
(own-whisper-identity? db whisper-identity)
(i18n/label :t/can-not-add-yourself)))

42
src/status_im/ui/screens/desktop/main/add_new/styles.cljs
View File

@ -31,14 +31,17 @@
:flex-direction :row
:margin-top 16})
(def add-contact-input
{:font-size 14
:background-color colors/gray-lighter
:margin-right 12
:border-radius 8})
(defn add-contact-input [error?]
(cond-> {:font-size 14
:background-color colors/gray-lighter
:margin-right 12
:border-radius 8}
error?
(assoc :border-color colors/red
:border-width 1)))
(def add-pub-chat-input
(assoc add-contact-input :padding-left 10))
(defn add-pub-chat-input [error?]
(assoc (add-contact-input error?) :padding-left 10))
(defn add-contact-button [error?]
{:width 140
@ -84,3 +87,28 @@
:width 5
:height 16
:margin-bottom -16})
(def tooltip-container
{:position :absolute
:align-items :center
:align-self :center
:top -34})
(def tooltip-icon-text
{:justify-content :center
:align-items :center
:flex 1
:height 24
:border-radius 8
:padding-left 10
:padding-right 10
:background-color colors/red-light})
(def tooltip-triangle
{:width 0
:height 0
:border-top-width 9.1
:border-left-width 9.1
:border-right-width 9.1
:border-left-color :transparent
:border-right-color :transparent
:border-top-color colors/red-light})

84
src/status_im/ui/screens/desktop/main/add_new/views.cljs
View File

@ -33,6 +33,12 @@
(defn on-topic-change [e]
(let [text (.. e -nativeEvent -text)]
(re-frame/dispatch [:set :public-group-topic text])))
(views/defview error-tooltip [text]
[react/view {:style styles/tooltip-container}
[react/view {:style styles/tooltip-icon-text}
[react/text {:style {:font-size 14 :color colors/red}}
text]]
[react/view {:style styles/tooltip-triangle}]])
(views/defview new-contact []
(views/letsubs [new-contact-identity [:get :contacts/new-identity]
@ -40,6 +46,7 @@
chat-error [:new-identity-error]
topic [:get :public-group-topic]
topic-error [:new-topic-error-message]]
{:component-will-unmount #(re-frame/dispatch [:new-chat/set-new-identity nil])}
[react/scroll-view
[react/view {:style styles/new-contact-view}
^{:key "newcontact"}
@ -49,22 +56,29 @@
(i18n/label :new-chat)]]
[react/text {:style styles/new-contact-subtitle} (i18n/label :contact-code)]
[react/view {:style styles/new-contact-separator}]
[react/view {:style styles/add-contact-edit-view}
[react/text-input {:placeholder "0x..."
:flex 1
:style styles/add-contact-input
:selection-color colors/hawkes-blue
:font :default
:on-change (fn [e]
(let [native-event (.-nativeEvent e)
text (.-text native-event)]
(re-frame/dispatch [:set :contacts/new-identity text])))}]
[react/touchable-highlight {:disabled chat-error :on-press #(when-not chat-error (re-frame/dispatch [:add-contact-handler new-contact-identity]))}
[react/view
{:style (styles/add-contact-button chat-error)}
[react/text
{:style (styles/add-contact-button-text chat-error)}
(i18n/label :start-chat)]]]]
(let [disable? (or (not (string/blank? chat-error))
(string/blank? new-contact-identity))
show-error-tooltip? (and chat-error
(not (string/blank? new-contact-identity)))]
[react/view {:style styles/add-contact-edit-view}
[react/view {:flex 1
:style (styles/add-contact-input show-error-tooltip?)}
(when show-error-tooltip?
[error-tooltip chat-error])
[react/text-input {:placeholder "0x..."
:flex 1
:selection-color colors/hawkes-blue
:font :default
:on-change (fn [e]
(let [native-event (.-nativeEvent e)
text (.-text native-event)]
(re-frame/dispatch [:new-chat/set-new-identity text])))}]]
[react/touchable-highlight {:disabled disable? :on-press #(re-frame/dispatch [:add-contact-handler new-contact-identity])}
[react/view
{:style (styles/add-contact-button disable?)}
[react/text
{:style (styles/add-contact-button-text disable?)}
(i18n/label :start-chat)]]]])
^{:key "choosecontact"}
[react/view
(when (seq contacts) [react/text {:style styles/new-contact-subtitle} (i18n/label :or-choose-a-contact)])
@ -87,22 +101,28 @@
(i18n/label :new-public-group-chat)]]
[react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)]
[react/view {:style styles/new-contact-separator}]
[react/view {:style styles/add-contact-edit-view}
[react/view {:flex 1
:style styles/add-pub-chat-input}
[react/text-input {:flex 1
:font :default
:selection-color colors/hawkes-blue
:placeholder ""
:on-change on-topic-change}]]
[react/touchable-highlight {:disabled topic-error
:on-press #(when-not topic-error
(do
(re-frame/dispatch [:set :public-group-topic nil])
(re-frame/dispatch [:create-new-public-chat topic])))}
[react/view {:style (styles/add-contact-button topic-error)}
[react/text {:style (styles/add-contact-button-text topic-error)}
(i18n/label :new-public-group-chat)]]]]
(let [disable? (or (not (string/blank? topic-error))
(string/blank? topic))
show-error-tooltip? (and topic-error (not (string/blank? topic)))]
[react/view {:style styles/add-contact-edit-view}
[react/view {:flex 1
:style (styles/add-pub-chat-input show-error-tooltip?)}
(when show-error-tooltip?
[error-tooltip topic-error])
[react/text-input {:flex 1
:font :default
:selection-color colors/hawkes-blue
:placeholder ""
:on-change on-topic-change}]]
[react/touchable-highlight {:disabled disable?
:on-press #(when-not topic-error
(do
(re-frame/dispatch [:set :public-group-topic nil])
(re-frame/dispatch [:create-new-public-chat topic])))}
[react/view {:style (styles/add-contact-button disable?)}
[react/text {:style (styles/add-contact-button-text disable?)}
(i18n/label :new-public-group-chat)]]]])
[topic-input-placeholder]
[react/text {:style styles/new-contact-subtitle} (i18n/label :selected-for-you)]
[react/view {:style styles/suggested-contacts}

1
translations/en.json
View File

@ -377,6 +377,7 @@
"send-transaction-request": "Send a transaction request",
"share-contact-code": "Share my contact code",
"use-valid-contact-code": "Please enter or scan a valid contact code or username",
"use-valid-contact-code-desktop": "Please enter a valid contact code or username",
"no-hashtags-discovered-title": "No #hashtags discovered",
"enter-dapp-url": "Enter a ÐApp URL",
"wallet-transaction-total-fee": "Total Fee",