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

Add validation tooltip to mailserver/bootnode address input

This commit is contained in:
Roman Volosovskyi 2019-03-20 17:00:19 +02:00
parent 52295502d0
commit 8f40f796f5
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
6 changed files with 70 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/status_im/mailserver/subs.cljs
View File

@ -79,7 +79,10 @@
current-mailserver-id)))
(re-frame/reg-sub
:mailserver.edit/valid?
:mailserver.edit/validation-errors
:<- [:mailserver.edit/mailserver]
(fn [mailserver]
(not-any? :error (vals mailserver))))
(set (keep
(fn [[k {:keys [error]}]]
(when error k))
mailserver))))

5
src/status_im/ui/components/tooltip/views.cljs
View File

@ -8,11 +8,12 @@
[status-im.ui.components.colors :as colors]
[reagent.core :as reagent]))
(views/defview tooltip [label & [{:keys [bottom-value color font-size] :or {bottom-value -30 color :white font-size 15}}]]
(views/defview tooltip [label & [{:keys [bottom-value color font-size container-style]
:or {bottom-value -30 color :white font-size 15}}]]
(views/letsubs [bottom-anim-value (animation/create-value bottom-value)
opacity-value (animation/create-value 0)]
{:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value 10)}
[react/view styles/tooltip-container
[react/view (merge styles/tooltip-container container-style)
[react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)}
[react/view (styles/tooltip-text-container color)
[react/text {:style (styles/tooltip-text font-size)} label]]

7
src/status_im/ui/screens/bootnodes_settings/edit_bootnode/subs.cljs
View File

@ -8,7 +8,10 @@
manage))
(reg-sub
:manage-bootnode-valid?
:manage-bootnode-validation-errors
:<- [:get-manage-bootnode]
(fn [manage]
(not-any? :error (vals manage))))
(set (keep
(fn [[k {:keys [error]}]]
(when error k))
manage))))

40
src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs
View File

@ -12,7 +12,9 @@
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.screens.bootnodes-settings.edit-bootnode.styles :as styles]))
[status-im.ui.screens.bootnodes-settings.edit-bootnode.styles :as styles]
[status-im.ui.components.tooltip.views :as tooltip]
[clojure.string :as string]))
(defn delete-button [id]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:bootnodes.ui/delete-pressed id])}
@ -31,11 +33,13 @@
[vector-icons/icon :main-icons/qr {:color colors/blue}]]])
(views/defview edit-bootnode []
(views/letsubs [manage-bootnode [:get-manage-bootnode]
is-valid? [:manage-bootnode-valid?]]
(let [url (get-in manage-bootnode [:url :value])
id (get-in manage-bootnode [:id :value])
name (get-in manage-bootnode [:name :value])]
(views/letsubs [manage-bootnode [:get-manage-bootnode]
validation-errors [:manage-bootnode-validation-errors]]
(let [url (get-in manage-bootnode [:url :value])
id (get-in manage-bootnode [:id :value])
name (get-in manage-bootnode [:name :value])
is-valid? (empty? validation-errors)
invalid-url? (contains? validation-errors :url)]
[react/view styles/container
[status-bar/status-bar]
[react/keyboard-avoiding-view components.styles/flex
@ -50,14 +54,22 @@
:default-value name
:on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %])
:auto-focus true}]
[text-input/text-input-with-label
{:label (i18n/label :t/bootnode-address)
:placeholder (i18n/label :t/specify-bootnode-address)
:content qr-code
:style styles/input
:container styles/input-container
:default-value url
:on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])}]
[react/view
{:flex 1}
[text-input/text-input-with-label
{:label (i18n/label :t/bootnode-address)
:placeholder (i18n/label :t/bootnode-format)
:content qr-code
:style styles/input
:container styles/input-container
:default-value url
:on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])}]
(when (and (not (string/blank? url)) invalid-url?)
[tooltip/tooltip (i18n/label :t/invalid-format
{:format (i18n/label :t/bootnode-format)})
{:color colors/red-light
:font-size 12
:bottom-value -25}])]
(when id
[delete-button id])]]
[react/view styles/bottom-container

41
src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs
View File

@ -13,7 +13,9 @@
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles]))
[status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles]
[status-im.ui.components.tooltip.views :as tooltip]
[clojure.string :as string]))
(defn connect-button [id]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:mailserver.ui/connect-pressed id])}
@ -41,11 +43,13 @@
(views/defview edit-mailserver []
(views/letsubs [mailserver [:mailserver.edit/mailserver]
connected? [:mailserver.edit/connected?]
is-valid? [:mailserver.edit/valid?]]
(let [url (get-in mailserver [:url :value])
id (get-in mailserver [:id :value])
name (get-in mailserver [:name :value])]
connected? [:mailserver.edit/connected?]
validation-errors [:mailserver.edit/validation-errors]]
(let [url (get-in mailserver [:url :value])
id (get-in mailserver [:id :value])
name (get-in mailserver [:name :value])
is-valid? (empty? validation-errors)
invalid-url? (contains? validation-errors :url)]
[react/view components.styles/flex
[status-bar/status-bar]
[react/keyboard-avoiding-view components.styles/flex
@ -60,14 +64,23 @@
:default-value name
:on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %])
:auto-focus true}]
[text-input/text-input-with-label
{:label (i18n/label :t/mailserver-address)
:placeholder (i18n/label :t/specify-mailserver-address)
:content qr-code
:style styles/input
:container styles/input-container
:default-value url
:on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}]
[react/view
{:flex 1}
[text-input/text-input-with-label
{:label (i18n/label :t/mailserver-address)
:placeholder (i18n/label :t/mailserver-format)
:content qr-code
:style styles/input
:container styles/input-container
:default-value url
:on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}]
(when (and (not (string/blank? url))
invalid-url?)
[tooltip/tooltip (i18n/label :t/invalid-format
{:format (i18n/label :t/mailserver-format)})
{:color colors/red-light
:font-size 12
:bottom-value -25}])]
(when (and id
(not connected?))
[react/view

5
translations/en.json
View File

@ -984,5 +984,8 @@
"extension-install-alert": "Development mode is required to install an extension. Do you want to enable and continue installing?",
"see-details": "See details",
"chaos-unicorn-day": "Chaos Unicorn Day",
"chaos-unicorn-day-details": "\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83D\uDE80!"
"chaos-unicorn-day-details": "\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83D\uDE80!",
"invalid-format": "Invalid format\nMust be {{format}}",
"mailserver-format": "enode://{enode-id}:{password}@{ip-address}:{port}",
"bootnode-format": "enode://{enode-id}@{ip-address}:{port}"
}