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

Replace all text-inputs with quo component 

Replace all text-inputs with label

Fix tooltip

Replace search input

Replace white bg text inputs with Quo

Add placeholders

Clear quo text inputs on blur

 Change seed phrase word count style

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-06-08 14:57:45 +03:00
parent c40529faee
commit 379384211f
No known key found for this signature in database
GPG Key ID: C9A094959935A952
43 changed files with 579 additions and 832 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/mocks/js_dependencies.cljs
View File

@ -153,8 +153,8 @@
:Text #js {} :Text #js {}
:Extrapolate #js {:CLAMP nil} :Extrapolate #js {:CLAMP nil}
:Code #js {}} :Code #js {}}
:Easing #js {:bezier nil :Easing #js {:bezier identity
:linear nil} :linear identity}
:clockRunning nil}) :clockRunning nil})
(def react-native-gesture-handler #js {:default #js {} (def react-native-gesture-handler #js {:default #js {}
:State #js {:BEGAN nil :State #js {:BEGAN nil
@ -203,6 +203,5 @@
"react-native-mail" react-native-mail "react-native-mail" react-native-mail
"react-native-image-resizer" image-resizer "react-native-image-resizer" image-resizer
"react-native-haptic-feedback" react-native-haptic-feedback "react-native-haptic-feedback" react-native-haptic-feedback
"reanimated-bottom-sheet" reanimated-bottom-sheet
"./fleets.js" default-fleets "./fleets.js" default-fleets
nil)) nil))

11
src/quo/components/text.cljs
View File

@ -5,15 +5,18 @@
[quo.react-native :as rn] [quo.react-native :as rn]
[reagent.core :as reagent])) [reagent.core :as reagent]))
(defn text-style [{:keys [size align weight color style]}] (defn text-style [{:keys [size align weight monospace color style]}]
;; NOTE(Ferossgo): or in destructoring will keep nil as a value ;; NOTE(Ferossgo): or in destructoring will keep nil as a value
(merge (case (or weight :regular) (merge (if monospace
;; TODO(Ferossgp): Add all weights for monospace
typography/monospace
(case (or weight :regular)
:regular typography/font-regular :regular typography/font-regular
:medium typography/font-medium :medium typography/font-medium
:semi-bold typography/font-semi-bold :semi-bold typography/font-semi-bold
:bold typography/font-bold :bold typography/font-bold
:monospace typography/monospace :monospace typography/monospace ; DEPRECATED
:inherit nil) :inherit nil))
(case (or color :main) (case (or color :main)
:main {:color (:text-01 @colors/theme)} :main {:color (:text-01 @colors/theme)}
:secondary {:color (:text-02 @colors/theme)} :secondary {:color (:text-02 @colors/theme)}

101
src/quo/components/text_input.cljs
View File

@ -5,30 +5,36 @@
[quo.react-native :as rn] [quo.react-native :as rn]
;; TODO(Ferossgp): Move icon component to lib ;; TODO(Ferossgp): Move icon component to lib
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
;; TODO(Ferossgp): Move tooltip into lib
[quo.components.tooltip :as tooltip] [quo.components.tooltip :as tooltip]
[quo.react :as react]
[quo.platform :as platform] [quo.platform :as platform]
[quo.design-system.typography :as typography] [quo.design-system.typography :as typography]
[quo.design-system.spacing :as spacing] [quo.design-system.spacing :as spacing]
[quo.design-system.colors :as colors] [quo.design-system.colors :as colors]
[quo.components.text :as text])) [quo.components.text :as text]))
;; NOTE(Ferossgp): Refactor with hooks when available
;; We track all currently mounted text input refs
;; in a ref-to-defaultValue map
;; so that we can clear them (restore their default values)
;; when global react-navigation's onWillBlur event is invoked
(defonce text-input-refs (atom {}))
(s/def ::multiline boolean?) (s/def ::multiline boolean?)
(s/def ::secure-text-entry boolean?) (s/def ::secure-text-entry boolean?)
(s/def ::show-cancel boolean?) (s/def ::show-cancel boolean?)
(s/def ::label (s/nilable string?)) (s/def ::label (s/nilable (s/or :string string? :component vector?)))
(s/def ::cancel-label (s/nilable string?)) (s/def ::cancel-label (s/nilable string?))
(s/def ::default-value (s/nilable string?)) (s/def ::default-value (s/nilable string?))
(s/def ::placeholder (s/nilable string?)) (s/def ::placeholder (s/nilable string?))
(s/def ::keyboard-type #{}) (s/def ::keyboard-type (s/nilable (s/or :string string? :keyword keyword?))) ; TODO: make set
(s/def ::accessibility-label (s/nilable (s/or :string string? :keyword keyword?))) (s/def ::accessibility-label (s/nilable (s/or :string string? :keyword keyword?)))
(s/def ::on-focus fn?) (s/def ::on-focus fn?)
(s/def ::on-blur fn?) (s/def ::on-blur fn?)
(s/def ::on-press fn?) (s/def ::on-press fn?)
(s/def ::accessory (s/keys :req-un [::icon] (s/def ::accessory (s/keys :opt-un [::on-press
:opt-un [::on-press])) ::icon
::component]))
(s/def ::after (s/nilable ::accessory)) (s/def ::after (s/nilable ::accessory))
(s/def ::before (s/nilable ::accessory)) (s/def ::before (s/nilable ::accessory))
@ -60,15 +66,13 @@
false))) false)))
;; TODO(Ferossgp): Check performance for android layout animations ;; TODO(Ferossgp): Check performance for android layout animations
(when (and platform/android? ;; (when (and platform/android?
(aget rn/ui-manager "setLayoutAnimationEnabledExperimental")) ;; (aget rn/ui-manager "setLayoutAnimationEnabledExperimental"))
(ocall rn/ui-manager "setLayoutAnimationEnabledExperimental" true)) ;; (ocall rn/ui-manager "setLayoutAnimationEnabledExperimental" true))
(def height 44) ; 22 line-height + 11*2 vertical padding (def height 44) ; 22 line-height + 11*2 vertical padding
(def multiline-height 88) ; 3 * 22 three line-height + 11* vertical padding (def multiline-height 88) ; 3 * 22 three line-height + 11* vertical padding
(defn container-style [])
(defn label-style [] (defn label-style []
{:margin-bottom (:tiny spacing/spacing)}) {:margin-bottom (:tiny spacing/spacing)})
@ -84,8 +88,10 @@
:background-color (:ui-01 @colors/theme)} :background-color (:ui-01 @colors/theme)}
style)) style))
(defn text-input-style [multiline input-style before after] (defn text-input-style [multiline input-style monospace before after]
(merge typography/font-regular (merge (if monospace
typography/monospace
typography/font-regular)
{:padding-top 11 {:padding-top 11
:padding-bottom 11 :padding-bottom 11
:font-size 15 :font-size 15
@ -115,7 +121,7 @@
{:flex 1 {:flex 1
:justify-content :center})) :justify-content :center}))
(defn accessory-element [{:keys [icon icon-opts style accessibility-label on-press]}] (defn accessory-element [{:keys [icon component icon-opts style accessibility-label on-press]}]
(let [el (if on-press (let [el (if on-press
rn/touchable-opacity rn/touchable-opacity
rn/view)] rn/view)]
@ -126,18 +132,26 @@
style)} style)}
(when accessibility-label (when accessibility-label
{:accessibility-label accessibility-label})) {:accessibility-label accessibility-label}))
(cond
icon
[icons/icon icon (merge {:color (:icon-01 @colors/theme)} [icons/icon icon (merge {:color (:icon-01 @colors/theme)}
icon-opts)]]])) icon-opts)]
component
component
(defn text-input [] :else
nil)]]))
(defn text-input-raw []
(let [focused (reagent/atom nil) (let [focused (reagent/atom nil)
visible (reagent/atom false) visible (reagent/atom false)
ref (react/create-ref) ref (atom nil)
on-cancel (fn [] blur (fn []
(some-> (react/current-ref ref) (ocall "blur")))] (some-> @ref (ocall "blur")))]
(fn [{:keys [label multiline error style input-style keyboard-type before after (fn [{:keys [label multiline error style input-style keyboard-type before after
cancel-label on-focus on-blur show-cancel accessibility-label cancel-label on-focus on-blur show-cancel accessibility-label
bottom-value secure-text-entry container-style] bottom-value secure-text-entry container-style get-ref on-cancel
monospace]
:or {cancel-label "Cancel" :or {cancel-label "Cancel"
show-cancel true} show-cancel true}
:as props}] :as props}]
@ -152,7 +166,11 @@
:on-press #(reset! visible true)} :on-press #(reset! visible true)}
:else after) :else after)
secure (and secure-text-entry (not @visible))] secure (and secure-text-entry (not @visible))
on-cancel (fn []
(when on-cancel
(on-cancel))
(blur))]
[rn/view {:style container-style} [rn/view {:style container-style}
(when label (when label
[text/text {:style (label-style)} [text/text {:style (label-style)}
@ -162,19 +180,23 @@
(when before (when before
[accessory-element before]) [accessory-element before])
[rn/text-input [rn/text-input
(merge {:style (text-input-style multiline input-style before after) (merge {:style (text-input-style multiline input-style monospace before after)
:ref ref :ref (fn [r]
(reset! ref r)
(when get-ref (get-ref r)))
:placeholder-text-color (:text-02 @colors/theme) :placeholder-text-color (:text-02 @colors/theme)
:underline-color-android :transparent :underline-color-android :transparent
:auto-capitalize :none :auto-capitalize :none
:secure-text-entry secure :secure-text-entry secure
:on-focus (fn [evt] :on-focus (fn [evt]
(when on-focus (on-focus evt)) (when on-focus (on-focus evt))
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)) (when (and platform/ios? show-cancel)
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)))
(reset! focused true)) (reset! focused true))
:on-blur (fn [evt] :on-blur (fn [evt]
(when on-blur (on-blur evt)) (when on-blur (on-blur evt))
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)) (when (and platform/ios? show-cancel)
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)))
(reset! focused false))} (reset! focused false))}
(when (and platform/ios? (not after)) (when (and platform/ios? (not after))
{:clear-button-mode :while-editing}) {:clear-button-mode :while-editing})
@ -183,7 +205,7 @@
{:keyboard-type keyboard-type}) {:keyboard-type keyboard-type})
(dissoc props (dissoc props
:style :keyboard-type :on-focus :on-blur :style :keyboard-type :on-focus :on-blur
:secure-text-entry :ref))] :secure-text-entry :ref :get-ref))]
(when after (when after
[accessory-element after])] [accessory-element after])]
(when (and platform/ios? (when (and platform/ios?
@ -192,7 +214,7 @@
@focused) @focused)
[rn/touchable-opacity {:style (cancel-style) [rn/touchable-opacity {:style (cancel-style)
:on-press on-cancel} :on-press on-cancel}
[text/text {:color :link} cancel-label]])] [text/text {:color :link} cancel-label]])
(when error (when error
[tooltip/tooltip (merge {:bottom-value (cond bottom-value bottom-value [tooltip/tooltip (merge {:bottom-value (cond bottom-value bottom-value
label 30 ; 22 line height 8 margin label 30 ; 22 line height 8 margin
@ -200,5 +222,28 @@
(when accessibility-label (when accessibility-label
{:accessibility-label (str (name accessibility-label) "-error")})) {:accessibility-label (str (name accessibility-label) "-error")}))
[text/text {:color :negative [text/text {:color :negative
:align :center
:size :small} :size :small}
error]])])))) error]])]]))))
;; TODO(Ferossgp): Refactor me when hooks available
(defn text-input [{:keys [preserve-input?]
:as props}]
(if preserve-input?
[text-input-raw props]
(let [ref (atom nil)]
(reagent/create-class
{:component-will-unmount
(fn []
(when @ref
(swap! text-input-refs dissoc @ref)))
:reagent-render
(fn [{:keys [get-ref default-value]
:as props}]
[text-input-raw (merge props
{:get-ref (fn [r]
;; Store input and its defaultValue
;; one we receive a non-nil ref
(when (and r (nil? @ref))
(swap! text-input-refs assoc r default-value))
(when get-ref (get-ref)))})])}))))

9
src/quo/components/tooltip.cljs
View File

@ -5,6 +5,7 @@
[quo.react-native :as rn] [quo.react-native :as rn]
[quo.design-system.colors :as colors] [quo.design-system.colors :as colors]
[quo.design-system.spacing :as spacing] [quo.design-system.spacing :as spacing]
[quo.platform :as platform]
[status-im.ui.components.icons.vector-icons :as vector-icons])) [status-im.ui.components.icons.vector-icons :as vector-icons]))
(def ^:private initial-height 22) (def ^:private initial-height 22)
@ -48,7 +49,8 @@
:height height})))] :height height})))]
(fn [{:keys [bottom-value]} & children] (fn [{:keys [bottom-value]} & children]
[:<> [:<>
[animated/code {:exec (animated/set animation-v 1)}] [animated/code {:exec (animated/cond* (animated/not* animation-v)
(animated/set animation-v 1))}]
[animated/view {:style (tooltip-style {:bottom-value (- (get @layout :height) [animated/view {:style (tooltip-style {:bottom-value (- (get @layout :height)
bottom-value) bottom-value)
:animation animation}) :animation animation})
@ -58,7 +60,10 @@
(into [rn/view {:style (content-style) (into [rn/view {:style (content-style)
:on-layout on-layout}] :on-layout on-layout}]
children) children)
(when platform/ios?
;; NOTE(Ferossgp): Android does not show elevation for tooltip making it lost on white bg
[vector-icons/icon :icons/tooltip-tip {:width 18 [vector-icons/icon :icons/tooltip-tip {:width 18
:height 8 :height 8
:container-style {:elevation 3} :container-style {:elevation 3}
:color (:ui-background @colors/theme)}]]]]))) :color (:ui-background @colors/theme)}])]]])))

7
src/status_im/network/ui/edit_network/styles.cljs
View File

@ -6,13 +6,6 @@
:margin-horizontal 16 :margin-horizontal 16
:margin-vertical 15}) :margin-vertical 15})
(def input-container
{:margin-bottom 15})
(def network-type
{:flex-direction :row
:align-items :center})
(def bottom-container (def bottom-container
{:flex-direction :row {:flex-direction :row
:margin-horizontal 12 :margin-horizontal 12

22
src/status_im/network/ui/edit_network/views.cljs
View File

@ -8,7 +8,7 @@
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.ui.components.topbar :as topbar]) [status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
@ -33,31 +33,31 @@
[topbar/topbar {:title :t/add-network}] [topbar/topbar {:title :t/add-network}]
[react/scroll-view [react/scroll-view
[react/view styles/edit-network-view [react/view styles/edit-network-view
[text-input/text-input-with-label [react/view {:padding-vertical 8}
[quo/text-input
{:label (i18n/label :t/name) {:label (i18n/label :t/name)
:placeholder (i18n/label :t/specify-name) :placeholder (i18n/label :t/specify-name)
:container styles/input-container
:default-value (get-in manage-network [:name :value]) :default-value (get-in manage-network [:name :value])
:on-change-text #(re-frame/dispatch [::network/input-changed :name %]) :on-change-text #(re-frame/dispatch [::network/input-changed :name %])
:auto-focus true}] :auto-focus true}]]
[text-input/text-input-with-label [react/view {:padding-vertical 8}
[quo/text-input
{:label (i18n/label :t/rpc-url) {:label (i18n/label :t/rpc-url)
:placeholder (i18n/label :t/specify-rpc-url) :placeholder (i18n/label :t/specify-rpc-url)
:container styles/input-container
:default-value (get-in manage-network [:url :value]) :default-value (get-in manage-network [:url :value])
:on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}] :on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}]]
[react/view {:padding-vertical 8}
[react/i18n-text {:key :network-chain}] [react/i18n-text {:key :network-chain}]
[react/view styles/network-type
[list/flat-list {:data [:mainnet :testnet :rinkeby :custom] [list/flat-list {:data [:mainnet :testnet :rinkeby :custom]
:key-fn (fn [_ i] (str i)) :key-fn (fn [_ i] (str i))
:separator list/base-separator :separator list/base-separator
:render-fn #(render-network-type manage-network %)}]] :render-fn #(render-network-type manage-network %)}]]
(when custom? (when custom?
[text-input/text-input-with-label [react/view {:padding-vertical 8}
[quo/text-input
{:label (i18n/label :t/network-id) {:label (i18n/label :t/network-id)
:container styles/input-container
:placeholder (i18n/label :t/specify-network-id) :placeholder (i18n/label :t/specify-network-id)
:on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}])]] :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])]]
[react/view styles/bottom-container [react/view styles/bottom-container
[react/view components.styles/flex] [react/view components.styles/flex]
[components.common/bottom-button [components.common/bottom-button

27
src/status_im/ui/components/search_input/styles.cljs
View File

@ -1,27 +0,0 @@
(ns status-im.ui.components.search-input.styles
(:require [status-im.ui.components.colors :as colors]
[status-im.utils.styles :as styles]))
(styles/def search-input
{:flex 1
:android {:margin 0
:padding 0}})
(def search-input-height 56)
(defn search-container []
{:height search-input-height
:flex-direction :row
:padding-horizontal 16
:background-color colors/white
:align-items :center
:justify-content :center})
(defn search-input-container []
{:background-color colors/gray-lighter
:flex 1
:flex-direction :row
:height 36
:align-items :center
:justify-content :center
:border-radius 8})

36
src/status_im/ui/components/search_input/view.cljs
View File

@ -1,46 +1,34 @@
(ns status-im.ui.components.search-input.view (ns status-im.ui.components.search-input.view
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors] [quo.core :as quo]
[status-im.ui.components.icons.vector-icons :as icons] [quo.design-system.colors :as colors]))
[status-im.ui.components.react :as react]
[status-im.ui.components.search-input.styles :as styles]))
(defn search-input [{:keys [search-active?]}] (defn search-input [{:keys [search-active?]}]
(let [input-ref (atom nil) (let [input-ref (atom nil)
search-active? (or search-active? (reagent/atom nil))] search-active? (or search-active? (reagent/atom nil))]
(fn [{:keys [on-cancel on-focus on-change (fn [{:keys [on-focus on-change on-cancel search-filter auto-focus]}]
search-container-style search-filter auto-focus]}] [quo/text-input {:placeholder (i18n/label :t/search)
[react/view {:style (or search-container-style (styles/search-container))}
[react/view {:style (styles/search-input-container)}
[icons/icon :main-icons/search {:color colors/gray
:container-style {:margin-left 6
:margin-right 2}}]
[react/text-input {:placeholder (i18n/label :t/search)
:blur-on-submit true :blur-on-submit true
:multiline false :multiline false
:ref #(reset! input-ref %) :ref #(reset! input-ref %)
:style styles/search-input
:default-value search-filter :default-value search-filter
:auto-focus auto-focus :auto-focus auto-focus
:on-cancel on-cancel
:auto-correct false :auto-correct false
:auto-capitalize :none :auto-capitalize :none
:input-style {:height 36}
:before {:icon :main-icons/search
:style {:padding-horizontal 8}
:on-press #(.focus ^js @input-ref)
:icon-opts {:color (:icon-02 @colors/theme)}}
:on-focus #(do :on-focus #(do
(when on-focus (when on-focus
(on-focus search-filter)) (on-focus search-filter))
(reset! search-active? true)) (reset! search-active? true))
:on-blur #(reset! search-active? false)
:on-change (fn [e] :on-change (fn [e]
(let [^js native-event (.-nativeEvent ^js e) (let [^js native-event (.-nativeEvent ^js e)
text (.-text native-event)] text (.-text native-event)]
(when on-change (when on-change
(on-change text))))}]] (on-change text))))}])))
(when @search-active?
[react/touchable-highlight
{:on-press (fn []
(.clear ^js @input-ref)
(.blur ^js @input-ref)
(when on-cancel (on-cancel))
(reset! search-active? false))
:style {:margin-left 16}}
[react/text {:style {:color colors/blue}}
(i18n/label :t/cancel)]])])))

39
src/status_im/ui/components/text_input/styles.cljs
View File

@ -1,39 +0,0 @@
(ns status-im.ui.components.text-input.styles
(:require [status-im.ui.components.colors :as colors]
[status-im.utils.styles :as styles]))
(defn label [editable label-style]
(merge
{:margin-vertical 10}
label-style
(when-not editable {:color colors/gray})))
(defn input-container [height editable]
(merge
{:justify-content :center
:height (or height 52)
:border-radius 8
:background-color (when editable colors/gray-lighter)}
(when-not editable
{:border-color colors/gray-lighter
:border-width 1})))
(styles/def input
{:padding 16
:border-radius 8
:font-size 15
:line-height 22
:flex 1
:text-align-vertical :center
:desktop {:height 52}})
(defn error [bottom-value]
{:bottom-value bottom-value
:container-style {:shadow-offset {:width 0 :height 1}
:shadow-radius 6
:shadow-opacity 1
:shadow-color (if (colors/dark?)
"rgba(0, 0, 0, 0.75)"
"rgba(0, 34, 51)")
:elevation 2}
:font-size 12})

49
src/status_im/ui/components/text_input/view.cljs
View File

@ -1,49 +0,0 @@
(ns status-im.ui.components.text-input.view
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.styles :as styles]
[status-im.ui.components.colors :as colors]
[status-im.utils.platform :as platform]
[status-im.ui.components.tooltip.views :as tooltip]))
(defn merge-container-styles
[height container editable]
(let [merged-styles (merge (styles/input-container height editable) container)]
;; `:background-color` can't be nil; in this case the app will crash.
;; Nevertheless, we need to be able to remove background if necessary.
(if (nil? (:background-color merged-styles))
(dissoc merged-styles :background-color)
merged-styles)))
(defn text-input-with-label
[{:keys [label content error style height container accessibility-label
label-style parent-container bottom-value text editable keyboard-type]
:as props
:or {editable true}}]
[react/view {:style parent-container}
(when label
[react/text {:style (styles/label editable label-style)}
label])
[react/view {:style (merge-container-styles height container editable)}
[react/text-input
(merge
{:style (merge styles/input style)
:placeholder-text-color colors/gray
:auto-focus true
:auto-capitalize :none}
(cond-> (dissoc props :style :height)
;; error on ios
(and platform/ios? (= keyboard-type "visible-password"))
(dissoc :keyboard-type))
;; Workaround until `value` TextInput field is available on desktop:
;; https://github.com/status-im/react-native-desktop/issues/320
(when-not platform/desktop?
{:value text}))]
(when content content)]
(when error
[tooltip/tooltip error
(styles/error
(cond bottom-value bottom-value
label 20
:else 0))
(when accessibility-label
(str (name accessibility-label) "-error"))])])

25
src/status_im/ui/screens/add_new/new_chat/views.cljs
View File

@ -10,8 +10,8 @@
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.add-new.new-chat.styles :as styles] [status-im.ui.screens.add-new.new-chat.styles :as styles]
[status-im.ui.screens.add-new.styles :as add-new.styles]
[status-im.utils.debounce :as debounce] [status-im.utils.debounce :as debounce]
[quo.core :as quo]
[status-im.utils.utils :as utils]) [status-im.utils.utils :as utils])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
@ -26,9 +26,7 @@
(defn- icon-wrapper [color icon] (defn- icon-wrapper [color icon]
[react/view [react/view
{:style {:margin-right 16 {:style {:width 32
:margin-top 11
:width 32
:height 32 :height 32
:border-radius 25 :border-radius 25
:align-items :center :align-items :center
@ -71,9 +69,11 @@
:handler #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed :handler #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed
{:title (i18n/label :t/new-contact) {:title (i18n/label :t/new-contact)
:handler :contact/qr-code-scanned}])}]}] :handler :contact/qr-code-scanned}])}]}]
[react/view add-new.styles/new-chat-container [react/view {:flex-direction :row
[react/view (add-new.styles/new-chat-input-container) :padding 16}
[react/text-input [react/view {:flex 1
:padding-right 16}
[quo/text-input
{:on-change-text {:on-change-text
#(do #(do
(re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching]) (re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching])
@ -82,16 +82,13 @@
#(when (= state :valid) #(when (= state :valid)
(debounce/dispatch-and-chill [:contact.ui/contact-code-submitted] 3000)) (debounce/dispatch-and-chill [:contact.ui/contact-code-submitted] 3000))
:placeholder (i18n/label :t/enter-contact-code) :placeholder (i18n/label :t/enter-contact-code)
:style add-new.styles/input :show-cancel false
;; This input is fine to preserve inputs
;; so its contents will not be erased
;; in onWillBlur navigation event handler
:preserve-input? true
:accessibility-label :enter-contact-code-input :accessibility-label :enter-contact-code-input
:auto-capitalize :none :auto-capitalize :none
:return-key-type :go}]] :return-key-type :go}]]
[react/view {:width 16}] [react/view {:justify-content :center
[input-icon state]] :align-items :center}
[input-icon state]]]
[react/view {:min-height 30 :justify-content :flex-end} [react/view {:min-height 30 :justify-content :flex-end}
[react/text {:style styles/message} [react/text {:style styles/message}
(cond (= state :error) (cond (= state :error)

21
src/status_im/ui/screens/add_new/new_public_chat/styles.cljs
View File

@ -1,28 +1,9 @@
(ns status-im.ui.screens.add-new.new-public-chat.styles (ns status-im.ui.screens.add-new.new-public-chat.styles)
(:require [status-im.ui.components.colors :as colors]))
(def group-chat-name-input (def group-chat-name-input
{:font-size 17 {:font-size 17
:padding-bottom 0}) :padding-bottom 0})
(def topic-hash
(merge group-chat-name-input
{:margin-left 16
:margin-right 10
:font-size 24
:color colors/gray
:font-weight "500"}))
(def group-container (def group-container
{:flex 1 {:flex 1
:flex-direction :column}) :flex-direction :column})
(def input-container
{:padding 0
:padding-right 16
:background-color nil})
(def tooltip
{:bottom-value 15
:color colors/red-light
:font-size 12})

28
src/status_im/ui/screens/add_new/new_public_chat/view.cljs
View File

@ -5,39 +5,37 @@
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.styles :as common.styles] [quo.core :as quo]
[status-im.ui.components.text-input.view :as text-input.view]
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.add-new.new-public-chat.db :as db] [status-im.ui.screens.add-new.new-public-chat.db :as db]
[status-im.ui.screens.add-new.new-public-chat.styles :as styles] [status-im.ui.screens.add-new.new-public-chat.styles :as styles])
[status-im.ui.screens.add-new.styles :as add-new.styles])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
(defn- start-chat [topic] (defn- start-chat [topic]
(re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}]) (re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}])
(re-frame/dispatch [:set :public-group-topic nil])) (re-frame/dispatch [:set :public-group-topic nil]))
(defn- hash-icon []
[quo/text {:color :secondary
:weight :medium
:size :x-large}
"#"])
(defn- chat-name-input [topic error] (defn- chat-name-input [topic error]
[react/view [quo/text-input
[react/view (add-new.styles/input-container) {:on-change-text #(re-frame/dispatch [:set :public-group-topic %])
[react/text {:style styles/topic-hash} "#"]
[react/view common.styles/flex
[text-input.view/text-input-with-label
{:container styles/input-container
:on-change-text #(re-frame/dispatch [:set :public-group-topic %])
:on-submit-editing #(when (db/valid-topic? topic) (start-chat topic)) :on-submit-editing #(when (db/valid-topic? topic) (start-chat topic))
:auto-capitalize :none :auto-capitalize :none
:auto-focus false :auto-focus false
:accessibility-label :chat-name-input :accessibility-label :chat-name-input
:before {:component [hash-icon]}
;; Set default-value as otherwise it will ;; Set default-value as otherwise it will
;; be erased in global `onWillBlur` handler ;; be erased in global `onWillBlur` handler
:default-value topic :default-value topic
:placeholder "chat-name" :placeholder "chat-name"
:return-key-type :go :return-key-type :go
:auto-correct false}]]] :auto-correct false
(when error :error error}])
[tooltip/tooltip error styles/tooltip])])
(defn render-topic [topic] (defn render-topic [topic]
^{:key topic} ^{:key topic}

22
src/status_im/ui/screens/add_new/styles.cljs
View File

@ -1,12 +1,6 @@
(ns status-im.ui.screens.add-new.styles (ns status-im.ui.screens.add-new.styles
(:require [status-im.ui.components.colors :as colors] (:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]))
[status-im.utils.styles :as styles]))
(def new-chat-container
{:flex-direction :row
:padding-top 16
:padding-left 16})
(defn input-container [] (defn input-container []
{:flex-direction :row {:flex-direction :row
@ -14,17 +8,3 @@
:margin-bottom 16 :margin-bottom 16
:border-radius components.styles/border-radius :border-radius components.styles/border-radius
:background-color colors/gray-lighter}) :background-color colors/gray-lighter})
(defn new-chat-input-container []
(merge
(input-container)
{:flex 1}))
(styles/def input
{:flex 1
:height 52
:padding-horizontal 14
:desktop {:height 30
:width "100%"}
:android {:padding 0
:width "100%"}})

15
src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs
View File

@ -3,21 +3,6 @@
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.utils.styles :as styles])) [status-im.utils.styles :as styles]))
(def input-container
{:flex-direction :row
:align-items :center
:justify-content :space-between
:border-radius components.styles/border-radius
:height 52
:margin-top 15})
(styles/def input
{:flex 1
:android {:padding 0}})
(def qr-code
{:margin-right 14})
(def edit-bootnode-view (def edit-bootnode-view
{:flex 1 {:flex 1
:margin-horizontal 16 :margin-horizontal 16

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

@ -2,18 +2,14 @@
(:require [clojure.string :as string] (:require [clojure.string :as string]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.bootnodes-settings.edit-bootnode.styles [status-im.ui.screens.bootnodes-settings.edit-bootnode.styles
:as :as
styles] styles])
[status-im.utils.platform :as platform])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
(defn delete-button [id] (defn delete-button [id]
@ -24,14 +20,6 @@
[react/text {:style styles/button-label} [react/text {:style styles/button-label}
(i18n/label :t/delete)]]]]) (i18n/label :t/delete)]]]])
(def qr-code
[react/touchable-highlight {:on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed
{:title (i18n/label :t/add-bootnode)
:handler :bootnodes.callback/qr-code-scanned}])
:style styles/qr-code}
[react/view
[vector-icons/icon :main-icons/qr {:color colors/blue}]]])
(views/defview edit-bootnode [] (views/defview edit-bootnode []
(views/letsubs [manage-bootnode [:get-manage-bootnode] (views/letsubs [manage-bootnode [:get-manage-bootnode]
validation-errors [:manage-bootnode-validation-errors]] validation-errors [:manage-bootnode-validation-errors]]
@ -45,33 +33,33 @@
[topbar/topbar {:title (if id :t/bootnode-details :t/add-bootnode)}] [topbar/topbar {:title (if id :t/bootnode-details :t/add-bootnode)}]
[react/scroll-view {:keyboard-should-persist-taps :handled} [react/scroll-view {:keyboard-should-persist-taps :handled}
[react/view styles/edit-bootnode-view [react/view styles/edit-bootnode-view
[text-input/text-input-with-label [react/view {:padding-vertical 8}
[quo/text-input
{:label (i18n/label :t/name) {:label (i18n/label :t/name)
:placeholder (i18n/label :t/specify-name) :placeholder (i18n/label :t/specify-name)
:accessibility-label :bootnode-name :accessibility-label :bootnode-name
:style styles/input
:container styles/input-container
:default-value name :default-value name
:on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %]) :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %])
:auto-focus true}] :auto-focus true}]]
[react/view [react/view
{:flex 1} {:flex 1
[text-input/text-input-with-label :padding-vertical 8}
[quo/text-input
(merge (merge
{:label (i18n/label :t/bootnode-address) {:label (i18n/label :t/bootnode-address)
:placeholder (i18n/label :t/bootnode-format) :placeholder (i18n/label :t/bootnode-format)
:style styles/input
:accessibility-label :bootnode-address :accessibility-label :bootnode-address
:container styles/input-container
:default-value url :default-value url
:on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])} :show-cancel false
(when-not platform/desktop? {:content qr-code}))] :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])
(when (and (not (string/blank? url)) invalid-url?) :error (when (and (not (string/blank? url)) invalid-url?)
[tooltip/tooltip (i18n/label :t/invalid-format (i18n/label :t/invalid-format
{:format (i18n/label :t/bootnode-format)}) {:format (i18n/label :t/bootnode-format)}))
{:color colors/red-light :bottom-value 0
:font-size 12 :after {:icon :main-icons/qr
:bottom-value 25}])] :on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed
{:title (i18n/label :t/add-bootnode)
:handler :bootnodes.callback/qr-code-scanned}])}})]]
(when id (when id
[delete-button id])]] [delete-button id])]]
[react/view styles/bottom-container [react/view styles/bottom-container

3
src/status_im/ui/screens/chat/styles/message/message.cljs
View File

@ -115,9 +115,6 @@
{:padding-top 3 {:padding-top 3
:padding-left 3}) :padding-left 3})
(def message-activity-indicator
{:padding-top 4})
(defn emoji-message (defn emoji-message
[{:keys [incoming-group]}] [{:keys [incoming-group]}]
{:font-size 28 {:font-size 28

4
src/status_im/ui/screens/currency_settings/views.cljs
View File

@ -32,6 +32,8 @@
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/main-currency}] [topbar/topbar {:title :t/main-currency}]
[react/view {:flex 1} [react/view {:flex 1}
[react/view {:padding-horizontal 16
:padding-vertical 10}
[search-input/search-input [search-input/search-input
{:search-active? search-active? {:search-active? search-active?
:search-filter search-filter :search-filter search-filter
@ -40,7 +42,7 @@
(when-not search-filter (when-not search-filter
(re-frame/dispatch [:search/currency-filter-changed ""]))) (re-frame/dispatch [:search/currency-filter-changed ""])))
:on-change (fn [text] :on-change (fn [text]
(re-frame/dispatch [:search/currency-filter-changed text]))}] (re-frame/dispatch [:search/currency-filter-changed text]))}]]
[list/flat-list {:data (->> currencies [list/flat-list {:data (->> currencies
vals vals
(sort #(compare (:code %1) (:code %2)))) (sort #(compare (:code %1) (:code %2))))

4
src/status_im/ui/screens/group/styles.cljs
View File

@ -24,7 +24,9 @@
(defn search-container [] (defn search-container []
{:border-bottom-color colors/gray-lighter {:border-bottom-color colors/gray-lighter
:border-bottom-width 1}) :border-bottom-width 1
:padding-horizontal 16
:padding-vertical 10})
(defn members-title [] (defn members-title []
{:color colors/gray {:color colors/gray

16
src/status_im/ui/screens/group/views.cljs
View File

@ -21,8 +21,8 @@
[status-im.ui.components.toolbar :as bottom-toolbar] [status-im.ui.components.toolbar :as bottom-toolbar]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.add-new.styles :as add-new.styles]
[status-im.ui.screens.group.styles :as styles] [status-im.ui.screens.group.styles :as styles]
[quo.core :as quo]
[status-im.utils.debounce :as debounce] [status-im.utils.debounce :as debounce]
[status-im.utils.platform :as platform]) [status-im.utils.platform :as platform])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
@ -127,14 +127,12 @@
[react/view {:style {:padding-top 16 [react/view {:style {:padding-top 16
:flex 1}} :flex 1}}
[react/view {:style {:padding-horizontal 16}} [react/view {:style {:padding-horizontal 16}}
[react/view (add-new.styles/input-container) [quo/text-input
[react/text-input
{:auto-focus true {:auto-focus true
:on-change-text #(re-frame/dispatch [:set :new-chat-name %]) :on-change-text #(re-frame/dispatch [:set :new-chat-name %])
:default-value group-name :default-value group-name
:placeholder (i18n/label :t/set-a-topic) :placeholder (i18n/label :t/set-a-topic)
:style add-new.styles/input :accessibility-label :chat-name-input}]
:accessibility-label :chat-name-input}]]
[react/text {:style (styles/members-title)} [react/text {:style (styles/members-title)}
(i18n/label :t/members-title)]] (i18n/label :t/members-title)]]
[react/view {:style {:margin-top 8 [react/view {:style {:margin-top 8
@ -242,18 +240,16 @@
[topbar/topbar [topbar/topbar
{:title :t/edit-group {:title :t/edit-group
:modal? true}] :modal? true}]
[react/view {:style {:padding 16 [react/scroll-view {:style {:padding 16
:flex 1}} :flex 1}}
[react/view {:style (add-new.styles/input-container)} [quo/text-input
[react/text-input
{:on-change-text #(reset! new-group-chat-name %) {:on-change-text #(reset! new-group-chat-name %)
:default-value name :default-value name
:on-submit-editing #(when (seq @new-group-chat-name) :on-submit-editing #(when (seq @new-group-chat-name)
(re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name])) (re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name]))
:placeholder (i18n/label :t/enter-contact-code) :placeholder (i18n/label :t/enter-contact-code)
:style add-new.styles/input
:accessibility-label :new-chat-name :accessibility-label :new-chat-name
:return-key-type :go}]]] :return-key-type :go}]]
[react/view {:style {:flex 1}}] [react/view {:style {:flex 1}}]
[bottom-toolbar/toolbar [bottom-toolbar/toolbar
{:show-border? true {:show-border? true

7
src/status_im/ui/screens/hardwallet/pin/styles.cljs
View File

@ -57,10 +57,6 @@
:height 22 :height 22
:margin-top 5}) :margin-top 5})
(def pin-indicator-group-container
{:flex-direction :row
:justify-content :space-between})
(defn pin-indicator [pressed? error?] (defn pin-indicator [pressed? error?]
{:width 8 {:width 8
:height 8 :height 8
@ -81,9 +77,6 @@
:border-radius 50 :border-radius 50
:margin-horizontal 5}) :margin-horizontal 5})
(def waiting-indicator-container
{:margin-top 26})
(def numpad-container (def numpad-container
{:margin-top 18}) {:margin-top 18})

4
src/status_im/ui/screens/home/views.cljs
View File

@ -86,6 +86,8 @@
(defonce search-active? (reagent/atom false)) (defonce search-active? (reagent/atom false))
(defn search-input-wrapper [search-filter] (defn search-input-wrapper [search-filter]
[react/view {:padding-horizontal 16
:padding-vertical 10}
[search-input/search-input [search-input/search-input
{:search-active? search-active? {:search-active? search-active?
:search-filter search-filter :search-filter search-filter
@ -94,7 +96,7 @@
(when-not search-filter (when-not search-filter
(re-frame/dispatch [:search/home-filter-changed ""]))) (re-frame/dispatch [:search/home-filter-changed ""])))
:on-change (fn [text] :on-change (fn [text]
(re-frame/dispatch [:search/home-filter-changed text]))}]) (re-frame/dispatch [:search/home-filter-changed text]))}]])
(views/defview chats-list [] (views/defview chats-list []
(views/letsubs [loading? [:chats/loading?] (views/letsubs [loading? [:chats/loading?]

79
src/status_im/ui/screens/intro/views.cljs
View File

@ -11,7 +11,6 @@
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.radio :as radio] [status-im.ui.components.radio :as radio]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.intro.styles :as styles] [status-im.ui.screens.intro.styles :as styles]
[status-im.utils.config :as config] [status-im.utils.config :as config]
@ -19,6 +18,7 @@
[status-im.utils.identicon :as identicon] [status-im.utils.identicon :as identicon]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.utils.security :as security] [status-im.utils.security :as security]
[quo.core :as quo]
[status-im.utils.utils :as utils]) [status-im.utils.utils :as utils])
(:require-macros [status-im.utils.views :refer [defview letsubs]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
@ -230,23 +230,22 @@
:max-height 16}}] :max-height 16}}]
[storage-entry (second storage-types) selected-storage-type]]]])) [storage-entry (second storage-types) selected-storage-type]]]]))
(defn password-container [confirm-failure? view-width] (defn password-container [confirm-failure? _]
(let [horizontal-margin 16] (let [horizontal-margin 16]
[react/view {:style {:flex 1 [react/view {:style {:flex 1
:justify-content :space-between :justify-content :space-between
:align-items :center :margin-horizontal horizontal-margin}} :margin-horizontal horizontal-margin}}
[react/view {:style {:justify-content :center :flex 1}} [react/view
[react/text {:style (assoc styles/wizard-text :color colors/red [react/text {:style (assoc styles/wizard-text :color colors/red
:margin-bottom 16)} :margin-bottom 16)}
(if confirm-failure? (i18n/label :t/password_error1) " ")] (if confirm-failure? (i18n/label :t/password_error1) " ")]]
[react/view {:padding 16}
[react/text-input {:secure-text-entry true [quo/text-input {:secure-text-entry true
:auto-capitalize :none :auto-capitalize :none
:auto-focus true :auto-focus true
:show-cancel false
:accessibility-label :password-input :accessibility-label :password-input
:text-align :center
:placeholder "" :placeholder ""
:style (styles/password-text-input (- view-width (* 2 horizontal-margin)))
:on-change-text #(re-frame/dispatch [:intro-wizard/code-symbol-pressed %])}]] :on-change-text #(re-frame/dispatch [:intro-wizard/code-symbol-pressed %])}]]
[react/text {:style (assoc styles/wizard-text :margin-bottom 16)} (i18n/label :t/password-description)]])) [react/text {:style (assoc styles/wizard-text :margin-bottom 16)} (i18n/label :t/password-description)]]))
@ -362,69 +361,45 @@
next-button-disabled? next-button-disabled?
passphrase-error]}] passphrase-error]}]
[react/keyboard-avoiding-view {:flex 1 [react/keyboard-avoiding-view {:flex 1
:justify-content :flex-start
:background-color colors/white} :background-color colors/white}
[text-input/text-input-with-label [react/view {:background-color colors/white
:flex 1
:justify-content :center
:padding-horizontal 16}
[quo/text-input
{:on-change-text #(re-frame/dispatch [:multiaccounts.recover/enter-phrase-input-changed (security/mask-data %)]) {:on-change-text #(re-frame/dispatch [:multiaccounts.recover/enter-phrase-input-changed (security/mask-data %)])
:auto-focus true :auto-focus true
:error (when passphrase-error (i18n/label passphrase-error)) :error (when passphrase-error (i18n/label passphrase-error))
:accessibility-label :passphrase-input :accessibility-label :passphrase-input
:placeholder nil :placeholder (i18n/label :t/seed-phrase-placeholder)
:show-cancel false
:bottom-value 40 :bottom-value 40
:multiline true :multiline true
:auto-correct false :auto-correct false
:keyboard-type "visible-password" :monospace true}]
:parent-container {:flex 1 [react/view {:align-items :flex-end}
:justify-content :center}
:container (merge {:background-color colors/white
:flex 1
:justify-content :center
:min-height 90}
(when platform/ios?
{:max-height 150}))
:style {:background-color colors/white
:text-align :center
:text-align-vertical :center
:min-width 40
:font-size 16
:font-weight "700"}}]
[react/view {:align-items :center}
(if passphrase-word-count
[react/view {:flex-direction :row [react/view {:flex-direction :row
:margin-bottom 4
:min-height 24
:max-height 24
:align-items :center}
[react/nested-text {:style {:font-size 14
:padding-right 4
:text-align :center
:color colors/gray}}
(str (i18n/label :t/word-count) ": ")
[{:style {:font-weight "500"
:color colors/black}}
(i18n/label-pluralize passphrase-word-count :t/words-n)]]
(when-not next-button-disabled?
[react/view {:style {:background-color colors/green-transparent-10
:border-radius 12
:width 24
:justify-content :center
:align-items :center :align-items :center
:height 24}} :padding-vertical 8
[vector-icons/tiny-icon :tiny-icons/tiny-check {:color colors/green}]])] :opacity (if passphrase-word-count 1 0)}
[react/view {:align-self :stretch :margin-bottom 4 [quo/text {:color (if next-button-disabled? :secondary :main)
:max-height 24 :min-height 24}]) :size :small}
(when-not next-button-disabled?
"✓ ")
(i18n/label-pluralize passphrase-word-count :t/words-n)]]]]
[react/view {:align-items :center}
[react/text {:style {:color colors/gray [react/text {:style {:color colors/gray
:font-size 14 :font-size 14
:margin-bottom 8 :margin-bottom 8
:text-align :center}} :text-align :center}}
(i18n/label :t/multiaccounts-recover-enter-phrase-text)]] (i18n/label :t/multiaccounts-recover-enter-phrase-text)]
(when processing? (when processing?
[react/view {:flex 1 :align-items :center} [react/view {:flex 1 :align-items :center}
[react/activity-indicator {:size :large [react/activity-indicator {:size :large
:animating true}] :animating true}]
[react/text {:style {:color colors/gray [react/text {:style {:color colors/gray
:margin-top 8}} :margin-top 8}}
(i18n/label :t/processing)]])]) (i18n/label :t/processing)]])]])
(defn recovery-success [pubkey name photo-path] (defn recovery-success [pubkey name photo-path]
[react/view {:flex 1 [react/view {:flex 1

17
src/status_im/ui/screens/keycard/onboarding/views.cljs
View File

@ -8,12 +8,12 @@
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.hardwallet.pin.views :as pin.views] [status-im.ui.screens.hardwallet.pin.views :as pin.views]
[status-im.ui.screens.keycard.styles :as styles] [status-im.ui.screens.keycard.styles :as styles]
[quo.core :as quo]
[status-im.constants :as constants]) [status-im.constants :as constants])
(:require-macros [status-im.utils.views :refer [defview letsubs]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
@ -348,20 +348,17 @@
:accessibility-label :word-number} :accessibility-label :word-number}
(i18n/label :t/word-n {:number (inc idx)})]]] (i18n/label :t/word-n {:number (inc idx)})]]]
[react/view [react/view {:flex 1
[text-input/text-input-with-label :padding 16
:justify-content :center}
[quo/text-input
{:on-change-text #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-changed %]) {:on-change-text #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-changed %])
:auto-focus true :auto-focus true
:on-submit-editing #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-submitted]) :on-submit-editing #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-submitted])
:placeholder nil :placeholder (i18n/label :t/word-n {:number (inc idx)})
:auto-correct false :auto-correct false
:keyboard-type "visible-password"
:accessibility-label :enter-word :accessibility-label :enter-word
:container {:background-color colors/white} :monospace true}]
:style {:background-color colors/white
:text-align :center
:height 52
:typography :header}}]
[react/view {:margin-top 5 [react/view {:margin-top 5
:width 250} :width 250}
[tooltip/tooltip error]]] [tooltip/tooltip error]]]

15
src/status_im/ui/screens/keycard/recovery/views.cljs
View File

@ -7,7 +7,6 @@
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
@ -16,6 +15,7 @@
[status-im.utils.core :as utils.core] [status-im.utils.core :as utils.core]
[status-im.utils.gfycat.core :as gfy] [status-im.utils.gfycat.core :as gfy]
[status-im.constants :as constants] [status-im.constants :as constants]
[quo.core :as quo]
[status-im.ui.screens.keycard.views :as keycard.views] [status-im.ui.screens.keycard.views :as keycard.views]
[status-im.utils.identicon :as identicon]) [status-im.utils.identicon :as identicon])
(:require-macros [status-im.utils.views :refer [defview letsubs]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
@ -147,16 +147,15 @@
:color (if (> 3 free-pairing-slots) colors/red colors/gray)}} :color (if (> 3 free-pairing-slots) colors/red colors/gray)}}
(i18n/label :t/keycard-free-pairing-slots {:n free-pairing-slots})]])] (i18n/label :t/keycard-free-pairing-slots {:n free-pairing-slots})]])]
[react/view [react/view
[text-input/text-input-with-label [react/view {:flex 1
:padding 16
:justify-content :center}
[quo/text-input
{:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %]) {:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %])
:auto-focus true :auto-focus true
:on-submit-editing #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-submitted]) :on-submit-editing #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-submitted])
:placeholder nil :placeholder (i18n/label :t/pair-code-placeholder)
:text-align :center :monospace true}]]
:container {:background-color colors/white}
:style {:background-color colors/white
:height 24
:typography :header}}]
[react/view {:margin-top 5 [react/view {:margin-top 5
:width 250} :width 250}
[tooltip/tooltip error]]] [tooltip/tooltip error]]]

7
src/status_im/ui/screens/multiaccounts/login/views.cljs
View File

@ -6,13 +6,13 @@
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.chat.photos :as photos]
[status-im.ui.screens.multiaccounts.login.styles :as styles] [status-im.ui.screens.multiaccounts.login.styles :as styles]
[status-im.ui.screens.multiaccounts.styles :as ast] [status-im.ui.screens.multiaccounts.styles :as ast]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.utils.security :as security] [status-im.utils.security :as security]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[quo.core :as quo]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.topbar :as topbar]) [status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :refer [defview letsubs]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
@ -53,11 +53,12 @@
:important-for-accessibility :no-hide-descendants} :important-for-accessibility :no-hide-descendants}
[react/view {:flex-direction :row :align-items :center} [react/view {:flex-direction :row :align-items :center}
[react/view {:flex 1} [react/view {:flex 1}
[text-input/text-input-with-label [quo/text-input
{:placeholder (i18n/label :t/enter-your-password) {:placeholder (i18n/label :t/enter-your-password)
:ref #(reset! password-text-input %) :get-ref #(reset! password-text-input %)
:auto-focus (= view-id :login) :auto-focus (= view-id :login)
:accessibility-label :password-input :accessibility-label :password-input
:show-cancel false
:on-submit-editing (when sign-in-enabled? :on-submit-editing (when sign-in-enabled?
#(login-multiaccount @password-text-input)) #(login-multiaccount @password-text-input))
:on-change-text #(do :on-change-text #(do

11
src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles (ns status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles
(:require [status-im.ui.components.styles :as components.styles] (:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.colors :as colors]
[status-im.utils.styles :as styles])) [status-im.utils.styles :as styles]))
(def edit-mailserver-view (def edit-mailserver-view
@ -8,14 +7,6 @@
:margin-horizontal 16 :margin-horizontal 16
:margin-vertical 15}) :margin-vertical 15})
(def input-container
{:flex-direction :row
:align-items :center
:justify-content :space-between
:border-radius components.styles/border-radius
:height 52
:margin-bottom 15})
(def qr-code (def qr-code
{:padding 16}) {:padding 16})

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

@ -8,10 +8,9 @@
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[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] [clojure.string :as string]
[quo.core :as quo]
[status-im.ui.components.topbar :as topbar])) [status-im.ui.components.topbar :as topbar]))
(defn connect-button [id] (defn connect-button [id]
@ -54,29 +53,26 @@
[topbar/topbar {:title (if id :t/mailserver-details :t/add-mailserver)}] [topbar/topbar {:title (if id :t/mailserver-details :t/add-mailserver)}]
[react/scroll-view {:keyboard-should-persist-taps :handled} [react/scroll-view {:keyboard-should-persist-taps :handled}
[react/view styles/edit-mailserver-view [react/view styles/edit-mailserver-view
[text-input/text-input-with-label [react/view {:padding-vertical 8}
[quo/text-input
{:label (i18n/label :t/name) {:label (i18n/label :t/name)
:placeholder (i18n/label :t/specify-name) :placeholder (i18n/label :t/specify-name)
:container styles/input-container
:default-value name :default-value name
:on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %]) :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %])
:auto-focus true}] :auto-focus true}]]
[react/view [react/view {:flex 1
{:flex 1} :padding-vertical 8}
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/mailserver-address) {:label (i18n/label :t/mailserver-address)
:placeholder (i18n/label :t/mailserver-format) :placeholder (i18n/label :t/mailserver-format)
:content qr-code :content qr-code
:container styles/input-container
:default-value url :default-value url
:on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}] :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])
(when (and (not (string/blank? url)) :bottom-value 0
:error (when (and (not (string/blank? url))
invalid-url?) invalid-url?)
[tooltip/tooltip (i18n/label :t/invalid-format (i18n/label :t/invalid-format
{:format (i18n/label :t/mailserver-format)}) {:format (i18n/label :t/mailserver-format)}))}]]
{:color colors/red-light
:font-size 12
:bottom-value 25}])]
(when (and id (when (and id
(not connected?)) (not connected?))
[react/view [react/view

13
src/status_im/ui/screens/pairing/styles.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.ui.screens.pairing.styles (ns status-im.ui.screens.pairing.styles
(:require [status-im.ui.components.colors :as colors] (:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as components.styles]
[status-im.utils.styles :as styles])) [status-im.utils.styles :as styles]))
(def wrapper (def wrapper
@ -77,15 +76,3 @@
{:flex-direction :row {:flex-direction :row
:margin-horizontal 12 :margin-horizontal 12
:margin-vertical 15}) :margin-vertical 15})
(def input-container
{:flex-direction :row
:align-items :center
:justify-content :space-between
:border-radius components.styles/border-radius
:height 52
:margin-top 15})
(styles/def input
{:flex 1
:android {:padding 0}})

10
src/status_im/ui/screens/pairing/views.cljs
View File

@ -12,7 +12,7 @@
[status-im.ui.components.checkbox.view :as checkbox.views] [status-im.ui.components.checkbox.view :as checkbox.views]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.ui.screens.pairing.styles :as styles] [status-im.ui.screens.pairing.styles :as styles]
[status-im.ui.components.topbar :as topbar])) [status-im.ui.components.topbar :as topbar]))
@ -138,15 +138,13 @@
[react/keyboard-avoiding-view styles/edit-installation [react/keyboard-avoiding-view styles/edit-installation
[react/scroll-view {:keyboard-should-persist-taps :handled} [react/scroll-view {:keyboard-should-persist-taps :handled}
[react/view [react/view
[react/text (i18n/label :t/pairing-please-set-a-name)]] [quo/text-input
[text-input/text-input-with-label
{:placeholder (i18n/label :t/specify-name) {:placeholder (i18n/label :t/specify-name)
:style styles/input :label (i18n/label :t/pairing-please-set-a-name)
:accessibility-label :device-name :accessibility-label :device-name
:container styles/input-container
:default-value @installation-name :default-value @installation-name
:on-change-text #(reset! installation-name %) :on-change-text #(reset! installation-name %)
:auto-focus true}]] :auto-focus true}]]]
[react/view styles/bottom-container [react/view styles/bottom-container
[react/view components.styles/flex] [react/view components.styles/flex]
[components.common/bottom-button [components.common/bottom-button

32
src/status_im/ui/screens/profile/components/styles.cljs
View File

@ -3,38 +3,6 @@
;; profile header elements ;; profile header elements
(def profile-header-display
{:flex-direction :row
:justify-content :flex-start
:align-items :center})
(def profile-name-text
{:typography :header
:line-height 28
:text-align :left})
(def profile-name-text-with-subtitle
{:margin-vertical 5
:typography :header
:line-height 28
:text-align :left})
(def profile-three-words
{:color colors/gray})
(def profile-header-name-container
{:flex 1
:justify-content :center
:align-items :flex-start
:margin-left 16})
(def profile-header-name-container-with-subtitle
{:flex 1
:justify-content :flex-start
:align-items :flex-start
:align-self :stretch
:margin-left 16})
;; settings items elements ;; settings items elements
(def settings-item (def settings-item

11
src/status_im/ui/screens/profile/seed/styles.cljs
View File

@ -71,17 +71,6 @@
{:flex 1 {:flex 1
:padding 16}) :padding 16})
(def enter-word-row
{:flex-direction :row})
(def enter-word-label
{:font-size 14})
(def enter-word-n
{:margin-left 8
:font-size 14
:color colors/gray})
(def enter-word-n-description (def enter-word-n-description
{:font-size 14 {:font-size 14
:color colors/gray}) :color colors/gray})

19
src/status_im/ui/screens/profile/seed/views.cljs
View File

@ -7,13 +7,13 @@
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.common.styles :as components.common.styles] [status-im.ui.components.common.styles :as components.common.styles]
[clojure.string :as string] [clojure.string :as string]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[status-im.ui.screens.profile.seed.styles :as styles] [status-im.ui.screens.profile.seed.styles :as styles]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[quo.core :as quo]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(def steps-numbers (def steps-numbers
@ -77,10 +77,15 @@
{:forward? true {:forward? true
:on-press #(re-frame/dispatch [:my-profile/enter-two-random-words])}]]])) :on-press #(re-frame/dispatch [:my-profile/enter-two-random-words])}]]]))
(defview input [error next-handler] (defview input [error next-handler idx]
(letsubs [ref (reagent/atom nil)] (letsubs [ref (reagent/atom nil)]
[text-input/text-input-with-label [quo/text-input
{:placeholder (i18n/label :t/enter-word) {:placeholder (i18n/label :t/enter-word)
:label [:<>
(i18n/label :t/check-your-recovery-phrase)
" "
[quo/text {:color :secondary}
(i18n/label :t/word-n {:number (inc idx)})]]
:ref (partial reset! ref) :ref (partial reset! ref)
:auto-focus true :auto-focus true
:auto-correct false :auto-correct false
@ -106,12 +111,8 @@
(defn enter-word [step [idx word] error entered-word] (defn enter-word [step [idx word] error entered-word]
^{:key word} ^{:key word}
[react/view {:style styles/enter-word-container} [react/view {:style styles/enter-word-container}
[react/view {:style styles/enter-word-row} [react/view {:padding-bottom 8}
[react/text {:style styles/enter-word-label} [input error (next-handler word entered-word step) idx]]
(i18n/label :t/check-your-recovery-phrase)]
[react/text {:style styles/enter-word-n}
(i18n/label :t/word-n {:number (inc idx)})]]
[input error (next-handler word entered-word step)]
[react/text {:style styles/enter-word-n-description} [react/text {:style styles/enter-word-n-description}
(i18n/label :t/word-n-description {:number (inc idx)})] (i18n/label :t/word-n-description {:number (inc idx)})]
[react/view styles/twelve-words-spacer] [react/view styles/twelve-words-spacer]

4
src/status_im/ui/screens/routing/core.cljs
View File

@ -10,6 +10,8 @@
[taoensso.timbre :as log] [taoensso.timbre :as log]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
;; NOTE(Ferossgp): This is temporary to mimic the behaviour of old input
[quo.components.text-input :as quo]
[oops.core :refer [ocall oget]])) [oops.core :refer [ocall oget]]))
(def navigation-container (reagent/adapt-react-class NavigationContainer)) (def navigation-container (reagent/adapt-react-class NavigationContainer))
@ -57,6 +59,8 @@
(fn [] (fn []
;; Reset currently mounted text inputs to their default values ;; Reset currently mounted text inputs to their default values
;; on navigating away; this is a privacy measure ;; on navigating away; this is a privacy measure
(doseq [[^js text-input default-value] @quo/text-input-refs]
(.setNativeProps text-input (clj->js {:text default-value})))
(doseq [[^js text-input default-value] @react/text-input-refs] (doseq [[^js text-input default-value] @react/text-input-refs]
(.setNativeProps text-input (clj->js {:text default-value})))))) (.setNativeProps text-input (clj->js {:text default-value}))))))
#js [navigation])) #js [navigation]))

19
src/status_im/ui/screens/signing/sheets.cljs
View File

@ -2,7 +2,7 @@
(:require-macros [status-im.utils.views :as views]) (:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :as react] (:require [status-im.ui.components.react :as react]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.button :as button] [status-im.ui.components.button :as button]
[status-im.ui.components.colors :as colors])) [status-im.ui.components.colors :as colors]))
@ -12,9 +12,11 @@
[react/view [react/view
[react/view {:style {:margin-horizontal 16 :margin-top 8}} [react/view {:style {:margin-horizontal 16 :margin-top 8}}
[react/text {:style {:typography :title-bold}} (i18n/label :t/network-fee)] [react/text {:style {:typography :title-bold}} (i18n/label :t/network-fee)]
[react/view {:style {:flex-direction :row :margin-top 8}} [react/view {:style {:flex-direction :row
:margin-top 8
:align-items :flex-end}}
[react/view {:flex 1} [react/view {:flex 1}
[text-input/text-input-with-label [quo/text-input
{:on-change-text #(re-frame/dispatch [:signing.edit-fee.ui/edit-value :gas %]) {:on-change-text #(re-frame/dispatch [:signing.edit-fee.ui/edit-value :gas %])
:label (i18n/label :t/gas-limit) :label (i18n/label :t/gas-limit)
:error (:error gas-edit) :error (:error gas-edit)
@ -22,9 +24,11 @@
:keyboard-type :numeric :keyboard-type :numeric
:auto-capitalize :none :auto-capitalize :none
:placeholder "0" :placeholder "0"
:show-cancel false
:auto-focus false}]] :auto-focus false}]]
[react/view {:flex 1 :margin-left 33} [react/view {:flex 1
[text-input/text-input-with-label :padding-left 16}
[quo/text-input
{:label (i18n/label :t/gas-price) {:label (i18n/label :t/gas-price)
:on-change-text #(re-frame/dispatch [:signing.edit-fee.ui/edit-value :gasPrice %]) :on-change-text #(re-frame/dispatch [:signing.edit-fee.ui/edit-value :gasPrice %])
:error (:error gas-price-edit) :error (:error gas-price-edit)
@ -32,9 +36,12 @@
:keyboard-type :numeric :keyboard-type :numeric
:auto-capitalize :none :auto-capitalize :none
:placeholder "0.000" :placeholder "0.000"
:show-cancel false
:auto-focus false}]] :auto-focus false}]]
[react/view {:margin-top 58 :margin-left 10} [react/view {:padding-left 8
:padding-bottom 12}
[react/text (i18n/label :t/gwei)]]] [react/text (i18n/label :t/gwei)]]]
[react/view {:margin-vertical 16 :align-items :center} [react/view {:margin-vertical 16 :align-items :center}
[react/text {:style {:color colors/gray}} (i18n/label :t/wallet-transaction-total-fee)] [react/text {:style {:color colors/gray}} (i18n/label :t/wallet-transaction-total-fee)]
[react/view {:height 8}] [react/view {:height 8}]

19
src/status_im/ui/screens/signing/styles.cljs
View File

@ -58,22 +58,3 @@
:color (if disabled? colors/black colors/white-persist) :color (if disabled? colors/black colors/white-persist)
:padding-horizontal 16 :padding-horizontal 16
:padding-vertical 10}) :padding-vertical 10})
(defn sheet-title [small-screen?]
{:font-weight "500"
:font-size (if small-screen? 16 19)
:margin-top 16})
(defn sheet-subtitle [small-screen?]
{:font-size (if small-screen? 16 19)
:text-align :center
:margin-bottom 12
:color colors/gray})
(defn sheet-icon [bg-color]
{:height 64
:width 64
:border-radius 32
:justify-content :center
:align-items :center
:background-color bg-color})

8
src/status_im/ui/screens/signing/views.cljs
View File

@ -13,7 +13,7 @@
[status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet] [status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet]
[status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.utils.security :as security] [status-im.utils.security :as security]
[status-im.ui.screens.signing.sheets :as sheets] [status-im.ui.screens.signing.sheets :as sheets]
@ -258,7 +258,9 @@
:password :password
[react/view {:padding-top 8 :padding-bottom 8} [react/view {:padding-top 8 :padding-bottom 8}
[signing-phrase-view phrase] [signing-phrase-view phrase]
[text-input/text-input-with-label [react/view {:padding-horizontal 16
:padding-vertical 12}
[quo/text-input
{:secure-text-entry true {:secure-text-entry true
:placeholder (i18n/label :t/enter-password) :placeholder (i18n/label :t/enter-password)
:on-change-text #(re-frame/dispatch [:signing.ui/password-is-changed (security/mask-data %)]) :on-change-text #(re-frame/dispatch [:signing.ui/password-is-changed (security/mask-data %)])
@ -266,7 +268,7 @@
:auto-capitalize :none :auto-capitalize :none
:editable (not in-progress?) :editable (not in-progress?)
:error error :error error
:container {:margin-top 12 :margin-bottom 12 :margin-horizontal 16}}] :show-cancel false}]]
[react/view {:align-items :center :height 60} [react/view {:align-items :center :height 60}
(if in-progress? (if in-progress?
[react/activity-indicator {:animating true [react/activity-indicator {:animating true

7
src/status_im/ui/screens/wallet/account_settings/views.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.ui.screens.wallet.account-settings.views (ns status-im.ui.screens.wallet.account-settings.views
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.ui.components.react :as react] (:require [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
@ -9,6 +8,7 @@
[status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.toolbar :as toolbar]
[status-im.ui.components.copyable-text :as copyable-text] [status-im.ui.components.copyable-text :as copyable-text]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo.core :as quo]
[status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.topbar :as topbar])) [status-im.ui.components.topbar :as topbar]))
@ -57,14 +57,13 @@
:style {:flex 1}} :style {:flex 1}}
[react/view {:padding-bottom 28 :padding-top 10} [react/view {:padding-bottom 28 :padding-top 10}
[react/view {:margin-horizontal 16} [react/view {:margin-horizontal 16}
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/account-name) {:label (i18n/label :t/account-name)
:label-style {:color colors/gray}
:auto-focus false :auto-focus false
:default-value (:name account) :default-value (:name account)
:accessibility-label :enter-account-name :accessibility-label :enter-account-name
:on-change-text #(swap! new-account assoc :name %)}] :on-change-text #(swap! new-account assoc :name %)}]
[react/text {:style {:margin-top 30 :color colors/gray}} (i18n/label :t/account-color)] [react/text {:style {:margin-top 16 :color colors/gray}} (i18n/label :t/account-color)]
[react/touchable-highlight [react/touchable-highlight
{:on-press #(re-frame/dispatch [:show-popover {:on-press #(re-frame/dispatch [:show-popover
{:view [colors-popover color {:view [colors-popover color

34
src/status_im/ui/screens/wallet/add_new/views.cljs
View File

@ -11,13 +11,12 @@
[status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.toolbar :as toolbar]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.utils.utils :as utils.utils] [status-im.utils.utils :as utils.utils]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.screens.wallet.account-settings.views :as account-settings] [status-im.ui.screens.wallet.account-settings.views :as account-settings]
[status-im.ethereum.core :as ethereum] [status-im.ethereum.core :as ethereum]
[status-im.utils.security :as security] [status-im.utils.security :as security]
[clojure.string :as string] [clojure.string :as string]
[status-im.utils.platform :as platform] [quo.core :as quo]
[status-im.ui.components.bottom-panel.views :as bottom-panel])) [status-im.ui.components.bottom-panel.views :as bottom-panel]))
(defn- request-camera-permissions [] (defn- request-camera-permissions []
@ -48,8 +47,8 @@
:handler #(request-camera-permissions)}]}))])) :handler #(request-camera-permissions)}]}))]))
(defn common-settings [account] (defn common-settings [account]
[react/view {:margin-horizontal 16 :margin-top 30} [react/view {:margin-horizontal 16}
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/account-name) {:label (i18n/label :t/account-name)
:auto-focus false :auto-focus false
:default-value (:name account) :default-value (:name account)
@ -71,18 +70,19 @@
(defn settings [{:keys [type scanned-address password-error account-error]} (defn settings [{:keys [type scanned-address password-error account-error]}
entered-password] entered-password]
[react/view {:margin-horizontal 16} [react/view {:padding-horizontal 16
:padding-vertical 16}
(if (= type :watch) (if (= type :watch)
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/wallet-key-title) {:label (i18n/label :t/wallet-key-title)
:auto-focus false :auto-focus false
:default-value scanned-address :default-value scanned-address
:placeholder (i18n/label :t/enter-address) :placeholder (i18n/label :t/enter-address)
:accessibility-label :add-account-enter-watch-address :accessibility-label :add-account-enter-watch-address
:on-change-text #(re-frame/dispatch [:set-in [:add-account :address] %])}] :on-change-text #(re-frame/dispatch [:set-in [:add-account :address] %])}]
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/password) {:label (i18n/label :t/password)
:parent-container {:margin-top 30} :show-cancel false
:auto-focus false :auto-focus false
:placeholder (i18n/label :t/enter-your-password) :placeholder (i18n/label :t/enter-your-password)
:secure-text-entry true :secure-text-entry true
@ -93,27 +93,25 @@
(re-frame/dispatch [:set-in [:add-account :password-error] nil]) (re-frame/dispatch [:set-in [:add-account :password-error] nil])
(reset! entered-password %))}]) (reset! entered-password %))}])
(when (= type :seed) (when (= type :seed)
[text-input/text-input-with-label [react/view {:padding-top 16}
{:parent-container {:margin-top 30} [quo/text-input
:label (i18n/label :t/recovery-phrase) {:label (i18n/label :t/recovery-phrase)
:auto-focus false :auto-focus false
:placeholder (i18n/label :t/multiaccounts-recover-enter-phrase-title) :placeholder (i18n/label :t/multiaccounts-recover-enter-phrase-title)
:auto-correct false :auto-correct false
:keyboard-type "visible-password" :keyboard-type "visible-password"
:multiline true :multiline true
:style (when platform/android?
{:flex 1})
:height 95 :height 95
:error account-error :error account-error
:accessibility-label :add-account-enter-seed :accessibility-label :add-account-enter-seed
:on-change-text :on-change-text
#(do #(do
(re-frame/dispatch [:set-in [:add-account :account-error] nil]) (re-frame/dispatch [:set-in [:add-account :account-error] nil])
(re-frame/dispatch [:set-in [:add-account :seed] (security/mask-data (string/lower-case %))]))}]) (re-frame/dispatch [:set-in [:add-account :seed] (security/mask-data (string/lower-case %))]))}]])
(when (= type :key) (when (= type :key)
[text-input/text-input-with-label [react/view {:margin-top 30}
{:parent-container {:margin-top 30} [quo/text-input
:label (i18n/label :t/private-key) {:label (i18n/label :t/private-key)
:auto-focus false :auto-focus false
:placeholder (i18n/label :t/enter-a-private-key) :placeholder (i18n/label :t/enter-a-private-key)
:auto-correct false :auto-correct false
@ -125,7 +123,7 @@
:on-change-text :on-change-text
#(do #(do
(re-frame/dispatch [:set-in [:add-account :account-error] nil]) (re-frame/dispatch [:set-in [:add-account :account-error] nil])
(re-frame/dispatch [:set-in [:add-account :private-key] (security/mask-data %)]))}])]) (re-frame/dispatch [:set-in [:add-account :private-key] (security/mask-data %)]))}]])])
(defview pin [] (defview pin []
(letsubs [pin [:hardwallet/pin] (letsubs [pin [:hardwallet/pin]

7
src/status_im/ui/screens/wallet/components/views.cljs
View File

@ -6,7 +6,7 @@
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as topbar] [status-im.ui.components.toolbar.view :as topbar]
[status-im.ui.screens.wallet.components.styles :as styles] [status-im.ui.screens.wallet.components.styles :as styles]
[status-im.ui.components.text-input.view :as text-input] [quo.core :as quo]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.utils.debounce :as debounce]) [status-im.utils.debounce :as debounce])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
@ -37,10 +37,9 @@
[react/view {:padding-horizontal 16 [react/view {:padding-horizontal 16
:padding-vertical 24 :padding-vertical 24
:flex 1} :flex 1}
[text-input/text-input-with-label [quo/text-input
{:multiline true {:multiline true
:container {:height 98 :height 98
:padding-vertical 8}
:placeholder (i18n/label :t/recipient-code-placeholder) :placeholder (i18n/label :t/recipient-code-placeholder)
:text-align-vertical :top :text-align-vertical :top
:on-change-text #(reset! content %) :on-change-text #(reset! content %)

68
src/status_im/ui/screens/wallet/custom_tokens/views.cljs
View File

@ -3,10 +3,10 @@
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
[clojure.string :as string] [clojure.string :as string]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[quo.core :as quo]
[status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.topbar :as topbar])) [status-im.ui.components.topbar :as topbar]))
@ -25,8 +25,13 @@
[:wallet/custom-token-screen]] [:wallet/custom-token-screen]]
[react/keyboard-avoiding-view {:flex 1 :background-color colors/white} [react/keyboard-avoiding-view {:flex 1 :background-color colors/white}
[topbar/topbar {:title :t/add-custom-token}] [topbar/topbar {:title :t/add-custom-token}]
[react/scroll-view {:keyboard-should-persist-taps :handled :style {:flex 1 :margin-top 8 :padding-horizontal 16}} [react/scroll-view {:keyboard-should-persist-taps :handled
[react/view {:style {:flex-direction :row :justify-content :space-between :padding-vertical 10}} :style {:flex 1
:padding-horizontal 16}}
[react/view {:padding-vertical 8}
[react/view {:style {:flex-direction :row
:justify-content :space-between
:padding-vertical 10}}
[react/text (i18n/label :t/contract-address)] [react/text (i18n/label :t/contract-address)]
(when in-progress? (when in-progress?
[react/view {:flex-direction :row :justify-content :center} [react/view {:flex-direction :row :justify-content :center}
@ -40,43 +45,46 @@
[react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet.custom-token.ui/contract-address-paste])} [react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet.custom-token.ui/contract-address-paste])}
[react/text {:style {:color colors/blue}} [react/text {:style {:color colors/blue}}
(i18n/label :t/paste)]]]) (i18n/label :t/paste)]]])
[text-input/text-input-with-label [quo/text-input
{:on-change-text #(debounce-and-save :contract %) {:on-change-text #(debounce-and-save :contract %)
:error error :error error
:default-value contract :default-value contract
:multiline true :multiline true
:height 78 :height 78
:auto-focus false :auto-focus false
:placeholder (i18n/label :t/specify-address)}] :placeholder (i18n/label :t/specify-address)}]]
[react/view {:height 16}] [react/view {:padding-vertical 8}
[text-input/text-input-with-label [quo/text-input
{:on-change-text #(debounce-and-save :name %) {:on-change-text #(debounce-and-save :name %)
:label (i18n/label :t/name) :label (i18n/label :t/name)
:default-value name :default-value name
:error error-name :error error-name
:auto-focus false :auto-focus false
:placeholder (i18n/label :t/name-of-token)}] :placeholder (i18n/label :t/name-of-token)}]]
[react/view {:height 16}] [react/view {:padding-vertical 8}
[react/view {:style {:flex-direction :row}} [react/view {:style {:flex-direction :row}}
[react/view {:flex 1} [react/view {:flex 1
[text-input/text-input-with-label :padding-right 8}
[quo/text-input
{:on-change-text #(debounce-and-save :symbol %) {:on-change-text #(debounce-and-save :symbol %)
:label (i18n/label :t/symbol) :label (i18n/label :t/symbol)
:error error-symbol :error error-symbol
:default-value symbol :default-value symbol
:auto-focus false :auto-focus false
:show-cancel false
:placeholder "ABC"}]] :placeholder "ABC"}]]
[react/view {:flex 1 :margin-left 33} [react/view {:flex 1
[text-input/text-input-with-label :padding-left 8}
[quo/text-input
{:label (i18n/label :t/decimals) {:label (i18n/label :t/decimals)
:on-change-text #(debounce-and-save :decimals %) :on-change-text #(debounce-and-save :decimals %)
:default-value decimals :default-value decimals
:keyboard-type :number-pad :keyboard-type :number-pad
:max-length 2 :max-length 2
:auto-focus false :auto-focus false
:placeholder "18"}]]] :show-cancel false
[react/view {:height 16}] :placeholder "18"}]]]]
#_[text-input/text-input-with-label #_[quo/text-input
{:label (i18n/label :t/balance) {:label (i18n/label :t/balance)
:default-value (when (and balance decimals) :default-value (when (and balance decimals)
(wallet.utils/format-amount balance decimals)) (wallet.utils/format-amount balance decimals))
@ -105,31 +113,35 @@
[react/keyboard-avoiding-view {:flex 1 :background-color colors/white} [react/keyboard-avoiding-view {:flex 1 :background-color colors/white}
[topbar/topbar {:title name}] [topbar/topbar {:title name}]
[react/scroll-view {:keyboard-should-persist-taps :handled [react/scroll-view {:keyboard-should-persist-taps :handled
:style {:flex 1 :margin-top 8}} :style {:flex 1}}
[react/view {:padding-horizontal 16} [react/view {:padding-horizontal 16}
[text-input/text-input-with-label [react/view {:padding-vertical 8}
[quo/text-input
{:label (i18n/label :t/contract-address) {:label (i18n/label :t/contract-address)
:default-value address :default-value address
:multiline true :multiline true
:height 78 :height 78
:editable false}] :editable false}]]
[react/view {:height 16}] [react/view {:padding-vertical 8}
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/name) {:label (i18n/label :t/name)
:default-value name :default-value name
:editable false}] :editable false}]]
[react/view {:height 16}] [react/view {:padding-vertical 8}
[react/view {:style {:flex-direction :row}} [react/view {:style {:flex-direction :row}}
[react/view {:flex 1} [react/view {:flex 1
[text-input/text-input-with-label :padding-right 8}
[quo/text-input
{:label (i18n/label :t/symbol) {:label (i18n/label :t/symbol)
:editable false :editable false
:show-cancel false
:default-value symbol}]] :default-value symbol}]]
[react/view {:flex 1 :margin-left 33} [react/view {:flex 1 :padding-left 8}
[text-input/text-input-with-label [quo/text-input
{:label (i18n/label :t/decimals) {:label (i18n/label :t/decimals)
:show-cancel false
:default-value (str decimals) :default-value (str decimals)
:editable false}]]]] :editable false}]]]]]
[react/view {:height 24}] [react/view {:height 24}]
(when custom? (when custom?
[list-item/list-item [list-item/list-item

4
src/status_im/ui/screens/wallet/settings/views.cljs
View File

@ -82,6 +82,8 @@
[react/view (merge components.styles/flex {:background-color colors/white}) [react/view (merge components.styles/flex {:background-color colors/white})
[toolbar] [toolbar]
[react/view {:style components.styles/flex} [react/view {:style components.styles/flex}
[react/view {:padding-horizontal 16
:padding-vertical 10}
[search-input/search-input [search-input/search-input
{:search-active? search-active? {:search-active? search-active?
:search-filter search-filter :search-filter search-filter
@ -90,7 +92,7 @@
(when-not search-filter (when-not search-filter
(re-frame/dispatch [:search/token-filter-changed ""]))) (re-frame/dispatch [:search/token-filter-changed ""])))
:on-change (fn [text] :on-change (fn [text]
(re-frame/dispatch [:search/token-filter-changed text]))}] (re-frame/dispatch [:search/token-filter-changed text]))}]]
[list/section-list [list/section-list
{:header {:header
[react/view {:margin-top 16} [react/view {:margin-top 16}

2
translations/en.json
View File

@ -414,6 +414,7 @@
"enter-address": "Enter address", "enter-address": "Enter address",
"enter-contact-code": "Enter ENS username or chat key", "enter-contact-code": "Enter ENS username or chat key",
"enter-pair-code": "Enter your pairing code", "enter-pair-code": "Enter your pairing code",
"pair-code-placeholder": "Pair code...",
"enter-pair-code-description": "Pairing code was displayed to you during the Keycard setup", "enter-pair-code-description": "Pairing code was displayed to you during the Keycard setup",
"enter-password": "Enter password", "enter-password": "Enter password",
"enter-pin": "Enter 6-digit passcode", "enter-pin": "Enter 6-digit passcode",
@ -1081,6 +1082,7 @@
"welcome-to-status": "Welcome to Status!", "welcome-to-status": "Welcome to Status!",
"welcome-to-status-description": "Set up your crypto wallet, invite friends to chat and browse decentralized apps", "welcome-to-status-description": "Set up your crypto wallet, invite friends to chat and browse decentralized apps",
"welcome-blank-message": "Your chats will appear here. To start new chats press the ⊕ button", "welcome-blank-message": "Your chats will appear here. To start new chats press the ⊕ button",
"seed-phrase-placeholder": "Seed phrase...",
"word-count": "Word count", "word-count": "Word count",
"word-n": "Word #{{number}}", "word-n": "Word #{{number}}",
"word-n-description": "In order to check if you have backed up your seed phrase correctly, enter the word #{{number}} above.", "word-n-description": "In order to check if you have backed up your seed phrase correctly, enter the word #{{number}} above.",